mirror of
https://github.com/hi-language/hi-language.github.io.git
synced 2026-01-13 16:18:04 +00:00
370 lines
8.9 KiB
HTML
370 lines
8.9 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 class="w-full h-full bg-gray-50 text-gray-900 selection:bg-cyan-400/20 overflow-y-auto">
|
|
<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>
|
|
<div class="sune-hi-doc">
|
|
<header class="sticky top-0 z-10 bg-white/80 backdrop-blur-sm border-b border-gray-200">
|
|
<div class="mx-auto w-full max-w-4xl px-4 py-3 flex items-center justify-between">
|
|
<div class="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>
|
|
<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>
|
|
</header>
|
|
<main class="w-full flex flex-col items-center p-4 sm:p-8">
|
|
<div class="markdown-body w-full max-w-4xl">
|
|
<p class="text-center text-gray-400">Loading documentation...</p>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
<script>
|
|
(() => {
|
|
const suneRoot=document.currentScript.parentElement;
|
|
const contentEl=suneRoot.querySelector('.markdown-body');
|
|
const mdContent=`
|
|
# 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"
|
|
\`\`\`
|
|
|
|
[placeholder topic]
|
|
|
|
## 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>
|
|
`;
|
|
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();
|
|
})()
|
|
</script>
|
|
</div>
|
|
</body>
|
|
</html>
|
|
|