mirror of
https://github.com/hi-language/hi-language.github.io.git
synced 2026-01-14 00:28:05 +00:00
395 lines
10 KiB
HTML
395 lines
10 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8"/>
|
|
<meta name="viewport" content="width=device-width,initial-scale=1"/>
|
|
<title>Hi Language</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/github-markdown-css@5.8.1/github-markdown-light.min.css"/>
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.11.1/build/styles/github.min.css"/>
|
|
<script src="https://unpkg.com/lucide@latest"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/markdown-it@14.1.0/dist/markdown-it.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/highlight.min.js"></script>
|
|
<script defer src="//unpkg.com/alpinejs"></script>
|
|
<style>
|
|
html,body{height:100%}body{margin:0}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div x-data="{
|
|
sidebarOpen: window.innerWidth > 1024,
|
|
activePage: 'blueprint',
|
|
pages: {
|
|
'blueprint': `
|
|
# A corely symbolic language
|
|
|
|
[placeholder topic]
|
|
|
|
\`\`\`javascript
|
|
_(\"Hi world\")
|
|
\`\`\`
|
|
|
|
## Declaration and Assignment
|
|
|
|
[placeholder topic]
|
|
|
|
\`\`\`javascript
|
|
version: 1.0 // Declaration and initialization
|
|
version = 1.1 // Assignment
|
|
\`\`\`
|
|
|
|
## Unifying Objects, Functions, and Classes
|
|
|
|
[placeholder topic]
|
|
|
|
### As a Data Structure (Object)
|
|
[placeholder topic]
|
|
|
|
\`\`\`javascript
|
|
player: {
|
|
name: \"Orion\"
|
|
#hp: 100
|
|
}
|
|
|
|
_(player.name) // \"Orion\"
|
|
_(player.hp) // ~0 (null) because #hp is private
|
|
\`\`\`
|
|
|
|
### As Executable Code (Function)
|
|
[placeholder topic]
|
|
|
|
\`\`\`javascript
|
|
// Simple invocation
|
|
sayHi: { _(\"Hi\") }
|
|
sayHi() // Prints \"Hi\"
|
|
|
|
// With parameters and return value
|
|
add: (a, b) { a + b }
|
|
_(add(2, 3)) // Prints 5
|
|
\`\`\`
|
|
|
|
### As a Hybrid (Factory/Class)
|
|
[placeholder topic]
|
|
|
|
\`\`\`javascript
|
|
createPlayer: (name) {
|
|
name: name
|
|
hp: 100
|
|
@ // Return the new block instance
|
|
}
|
|
|
|
player1: createPlayer(\"Orion\")
|
|
_(player1.name) // \"Orion\"
|
|
_(player1.hp) // 100
|
|
\`\`\`
|
|
|
|
### Expression Separators
|
|
[placeholder topic]
|
|
|
|
\`\`\`javascript
|
|
// Multi-line
|
|
point: {
|
|
x: 10
|
|
y: 20
|
|
}
|
|
|
|
// Single-line
|
|
point: { x: 10, y: 20 }
|
|
\`\`\`
|
|
|
|
## Arrow Expressions
|
|
|
|
[placeholder topic]
|
|
|
|
\`\`\`javascript
|
|
// Standard block
|
|
add: (a, b) { ^ a + b }
|
|
|
|
// Equivalent Arrow Expression
|
|
add: (a, b) => a + b
|
|
|
|
// Useful for functional helpers
|
|
numbers: [1, 2, 3]
|
|
doubled: numbers.map((n) => n * 2)
|
|
_(doubled) // [2, 4, 6]
|
|
\`\`\`
|
|
|
|
## Booleans and Equality
|
|
|
|
[placeholder topic]
|
|
|
|
## Conditional Expressions
|
|
|
|
[placeholder topic]
|
|
|
|
\`\`\`javascript
|
|
// A simple 'if' to execute code conditionally
|
|
status: \"active\"
|
|
(status == \"active\") ? { _(\"User is active.\") }
|
|
\`\`\`
|
|
|
|
[placeholder topic]
|
|
|
|
\`\`\`javascript
|
|
// if / else for choosing an action
|
|
isOnline: !0
|
|
(isOnline == !0) ? { _(\"Online\") } : { _(\"Offline\") } // Prints \"Online\"
|
|
\`\`\`
|
|
|
|
[placeholder topic]
|
|
|
|
\`\`\`javascript
|
|
// if / else returning a value
|
|
result: (1 > 2) ? { \"A\" } : { \"B\" } // result is \"B\"
|
|
\`\`\`
|
|
|
|
[placeholder topic]
|
|
|
|
\`\`\`javascript
|
|
// if / else if / else
|
|
score: 75
|
|
grade: (score >= 90) ? { \"A\" }
|
|
: (score >= 80) ? { \"B\" }
|
|
: (score >= 70) ? { \"C\" }
|
|
: { \"D\" }
|
|
_(grade) // Prints \"C\"
|
|
\`\`\`
|
|
|
|
## Data Structures
|
|
|
|
### Arrays
|
|
[placeholder topic]
|
|
|
|
\`\`\`javascript
|
|
primes: [2, 3, 5, 7]
|
|
_(primes[0]) // Random access: 2
|
|
primes[0] = 1
|
|
_(primes) // Mutation: [1, 3, 5, 7]
|
|
\`\`\`
|
|
|
|
### Strings
|
|
[placeholder topic]
|
|
|
|
\`\`\`javascript
|
|
greeting: \"Hi\"
|
|
_(greeting[1]) // \"i\"
|
|
\`\`\`
|
|
|
|
## Destructuring
|
|
|
|
[placeholder topic]
|
|
|
|
\`\`\`javascript
|
|
// Setup
|
|
user: { name: \"Zeta\", role: \"Admin\", id: 101 }
|
|
coords: [10, -5, 8]
|
|
|
|
// Extract 'name' and 'role' from the user block
|
|
user -> { name, role }
|
|
_(name) // \"Zeta\"
|
|
|
|
// Extract 'id' and alias it to 'userID'
|
|
user -> { id -> userID }
|
|
_(userID) // 101
|
|
|
|
// Extract first two elements from the array
|
|
coords -> [x, y]
|
|
_(y) // -5
|
|
\`\`\`
|
|
|
|
## Repetition
|
|
|
|
[placeholder topic]
|
|
|
|
### Iterating Collections
|
|
[placeholder topic]
|
|
|
|
\`\`\`javascript
|
|
// Iterate over an Array's values
|
|
([\"a\", \"b\"] -> item) * { _(item) }
|
|
|
|
// Iterate over an Array with index and value
|
|
([\"a\", \"b\"] -> [i, item]) * { _(i + \": \" + item) }
|
|
|
|
// Iterate over a Block's key-value pairs
|
|
({ id: 1 } -> [k, v]) * { _(k + \" is \" + v) }
|
|
|
|
// Iterate over a String's characters
|
|
(\"Hi\" -> char) * { _(char) }
|
|
|
|
// Destructure directly in the loop signature
|
|
users: [{ name: \"Orion\" }]
|
|
(users -> { name }) * { _(\"User: \" + name) }
|
|
\`\`\`
|
|
|
|
### Numeric Ranges
|
|
[placeholder topic]
|
|
|
|
\`\`\`javascript
|
|
// A range from 0 up to (but not including) 3
|
|
(0..3 -> i) * {
|
|
_(\"Iteration: \" + i) // Prints 0, 1, 2
|
|
}
|
|
\`\`\`
|
|
|
|
### Loop Control
|
|
[placeholder topic]
|
|
|
|
\`\`\`javascript
|
|
(0..10 -> i) * {
|
|
(i == 2) ? { >> } // Skip 2
|
|
(i == 5) ? { >< } // Break at 5
|
|
_(\"i is \" + i)
|
|
}
|
|
// Prints: i is 0, i is 1, i is 3, i is 4
|
|
\`\`\`
|
|
|
|
## Imports
|
|
|
|
[placeholder topic]
|
|
|
|
\`\`\`javascript
|
|
// Import 'block1' and 'block2' (as 'alias2') from a module
|
|
+ \"npm://hi-lang@0.1/path/file.hi\" -> { block1, block2 -> alias2 }
|
|
|
|
block1()
|
|
alias2(\"some value\")
|
|
\`\`\`
|
|
|
|
## Context Reference: @
|
|
|
|
[placeholder topic]
|
|
|
|
\`\`\`javascript
|
|
// This block is a portable method.
|
|
// It relies on '@' to get the context.
|
|
loggable: {
|
|
logId: { _(\"ID is: \" + @id) }
|
|
}
|
|
|
|
user: { id: 101, log: loggable.logId }
|
|
item: { id: \"abc-789\", log: loggable.logId }
|
|
|
|
user.log() // Prints \"ID is: 101\" (@ is 'user')
|
|
item.log() // Prints \"ID is: abc-789\" (@ is 'item')
|
|
\`\`\`
|
|
|
|
## Expression Blocks and Fluent Chaining
|
|
|
|
[placeholder topic]
|
|
|
|
\`\`\`javascript
|
|
// The last expression, \`a + b\`, is returned.
|
|
add: (a, b) {
|
|
_(\"adding...\") // Side-effect
|
|
a + b // Return value
|
|
}
|
|
|
|
result: add(2, 3) // result is 5
|
|
|
|
// An early, explicit return
|
|
check: (n) {
|
|
(n < 0) ? { ^ \"Negative\" }
|
|
\"Positive\"
|
|
}
|
|
\`\`\`
|
|
|
|
### Fluent Chaining
|
|
|
|
[placeholder topic]
|
|
|
|
\`\`\`javascript
|
|
calculator: {
|
|
#total: 0
|
|
add: (n) { total = total + n } // Assignment has no value, returns '@'
|
|
sub: (n) { total = total - n } // Also returns '@'
|
|
get: { ^ total } // Explicitly returns the final value
|
|
}
|
|
|
|
// .add() and .sub() return the calculator, allowing the chain
|
|
result: calculator.add(10).sub(4).get()
|
|
|
|
_(result) // Prints 6
|
|
\`\`\`
|
|
|
|
---
|
|
|
|
<p class=\"text-sm text-gray-600\">Hi is in early development. The syntax and features are subject to change.</p>
|
|
`,
|
|
'json': `
|
|
# Building a better JSON
|
|
|
|
[placeholder topic]
|
|
`
|
|
},
|
|
renderContent() {
|
|
const contentEl = this.$root.querySelector('.markdown-body');
|
|
const mdContent = this.pages[this.activePage];
|
|
const init = () => {
|
|
if (!window.markdownit || !window.hljs) { setTimeout(init, 50); return }
|
|
const md = window.markdownit({
|
|
html: !0, linkify: !0, typographer: !0,
|
|
highlight: (s, l) => {
|
|
if (l && hljs.getLanguage(l)) try { return hljs.highlight(s, { language: l, ignoreIllegals: !0 }).value } catch (_) { }
|
|
return md.utils.escapeHtml(s)
|
|
}
|
|
});
|
|
contentEl.innerHTML = md.render(mdContent);
|
|
window.lucide?.createIcons();
|
|
};
|
|
init();
|
|
}
|
|
}" x-init="$watch('activePage', renderContent); renderContent()" class="w-full h-full bg-gray-50 text-gray-900 selection:bg-cyan-400/20 flex">
|
|
|
|
<!-- Sidebar -->
|
|
<aside x-show="sidebarOpen" class="w-64 bg-white border-r border-gray-200 flex-shrink-0 text-sm font-medium text-gray-700">
|
|
<div class="p-4 border-b h-[57px]"></div>
|
|
<nav class="p-2">
|
|
<a href="#" @click.prevent="activePage = 'blueprint'" class="block p-2 rounded" :class="activePage == 'blueprint' ? 'bg-gray-100 font-semibold text-gray-900' : 'hover:bg-gray-100'">Language Blueprint</a>
|
|
<a href="#" @click.prevent="activePage = 'json'" class="block p-2 rounded" :class="activePage == 'json' ? 'bg-gray-100 font-semibold text-gray-900' : 'hover:bg-gray-100'">Building a better JSON</a>
|
|
</nav>
|
|
</aside>
|
|
|
|
<!-- Main Content -->
|
|
<div class="flex-1 flex flex-col overflow-hidden">
|
|
<div class="sune-hi-doc h-full flex flex-col">
|
|
<style>
|
|
.sune-hi-doc .markdown-body{font-size:14px;line-height:1.7;background:0 0}
|
|
.sune-hi-doc .markdown-body h1,.sune-hi-doc .markdown-body h2,.sune-hi-doc .markdown-body h3{font-weight:600;border-bottom-color:#e5e7eb}
|
|
.sune-hi-doc .markdown-body pre{background-color:#fff;border:1px solid #e5e7eb;border-radius:.75rem;padding:1rem;overflow-x:auto}
|
|
.sune-hi-doc .markdown-body code{font-family:'JetBrains Mono',monospace;font-size:13px;font-variant-ligatures:none}
|
|
.sune-hi-doc :not(pre)>code{font-size:85%;padding:.2em .4em;margin:0;border-radius:6px;background-color:rgba(175,184,193,.2)}
|
|
.sune-hi-doc .hi-button{font-family:'JetBrains Mono',monospace}
|
|
</style>
|
|
<header class="sticky top-0 z-10 bg-white/80 backdrop-blur-sm border-b border-gray-200 flex-shrink-0">
|
|
<div class="mx-auto w-full max-w-7xl px-4 py-3 flex items-center justify-between relative">
|
|
<div>
|
|
<button @click="sidebarOpen = !sidebarOpen" class="text-gray-600 hover:text-gray-900 transition-colors p-2 -ml-2 rounded-lg hover:bg-gray-100">
|
|
<i data-lucide="panel-left" class="h-5 w-5"></i>
|
|
</button>
|
|
</div>
|
|
<div class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 flex items-center gap-3">
|
|
<span class="hi-button text-2xl font-bold text-gray-900 rounded-lg cursor-default">Hi</span>
|
|
<span class="text-xs bg-gray-100 text-gray-500 font-medium px-2 py-0.5 rounded-full">v0.1</span>
|
|
</div>
|
|
<div>
|
|
<a href="https://github.com/hi-language" target="_blank" rel="noopener noreferrer" title="View GitHub Organization" class="text-gray-600 hover:text-gray-900 transition-colors p-2 rounded-lg hover:bg-gray-100">
|
|
<i data-lucide="github" class="h-5 w-5"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<main class="w-full flex-1 flex flex-col items-center p-4 sm:p-8 overflow-y-auto">
|
|
<div class="markdown-body w-full max-w-4xl">
|
|
<p class="text-center text-gray-400">Loading documentation...</p>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|