hi-language/hi-language.github.io
1
0
Fork 0
mirror of https://github.com/hi-language/hi-language.github.io.git synced 2026-01-14 08:38:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

Feat: Implement sidebar navigation and new layout

Browse Source
This commit is contained in:
multipleof4
2025-10-12 05:00:42 -07:00
parent 591bafa574
commit 3035b2fc8c
1 changed files with 114 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

178
index.html
View File

@@ -19,44 +19,17 @@
</style> </style>
</head> </head>
<body> <body>
<div class="w-full h-full bg-gray-50 text-gray-900 selection:bg-cyan-400/20 overflow-y-auto"> <div x-data="{
<style> sidebarOpen: window.innerWidth > 1024,
.sune-hi-doc .markdown-body{font-size:14px;line-height:1.7;background:0 0} activePage: 'blueprint',
.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} pages: {
.sune-hi-doc .markdown-body pre{background-color:#fff;border:1px solid #e5e7eb;border-radius:.75rem;padding:1rem;overflow-x:auto} 'blueprint': `
.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 # A corely symbolic language
[placeholder topic] [placeholder topic]
\`\`\`javascript \`\`\`javascript
_("Hi world") _(\"Hi world\")
\`\`\` \`\`\`
## Declaration and Assignment ## Declaration and Assignment
@@ -77,11 +50,11 @@ version = 1.1 // Assignment
\`\`\`javascript \`\`\`javascript
player: { player: {
name: "Orion" name: \"Orion\"
#hp: 100 #hp: 100
} }
_(player.name) // "Orion" _(player.name) // \"Orion\"
_(player.hp) // ~0 (null) because #hp is private _(player.hp) // ~0 (null) because #hp is private
\`\`\` \`\`\`
@@ -90,8 +63,8 @@ _(player.hp) // ~0 (null) because #hp is private
\`\`\`javascript \`\`\`javascript
// Simple invocation // Simple invocation
sayHi: { _("Hi") } sayHi: { _(\"Hi\") }
sayHi() // Prints "Hi" sayHi() // Prints \"Hi\"
// With parameters and return value // With parameters and return value
add: (a, b) { a + b } add: (a, b) { a + b }
@@ -108,8 +81,8 @@ createPlayer: (name) {
@ // Return the new block instance @ // Return the new block instance
} }
player1: createPlayer("Orion") player1: createPlayer(\"Orion\")
_(player1.name) // "Orion" _(player1.name) // \"Orion\"
_(player1.hp) // 100 _(player1.hp) // 100
\`\`\` \`\`\`
@@ -154,8 +127,8 @@ _(doubled) // [2, 4, 6]
\`\`\`javascript \`\`\`javascript
// A simple 'if' to execute code conditionally // A simple 'if' to execute code conditionally
status: "active" status: \"active\"
(status == "active") ? { _("User is active.") } (status == \"active\") ? { _(\"User is active.\") }
\`\`\` \`\`\`
[placeholder topic] [placeholder topic]
@@ -163,14 +136,14 @@ status: "active"
\`\`\`javascript \`\`\`javascript
// if / else for choosing an action // if / else for choosing an action
isOnline: !0 isOnline: !0
(isOnline == !0) ? { _("Online") } : { _("Offline") } // Prints "Online" (isOnline == !0) ? { _(\"Online\") } : { _(\"Offline\") } // Prints \"Online\"
\`\`\` \`\`\`
[placeholder topic] [placeholder topic]
\`\`\`javascript \`\`\`javascript
// if / else returning a value // if / else returning a value
result: (1 > 2) ? { "A" } : { "B" } // result is "B" result: (1 > 2) ? { \"A\" } : { \"B\" } // result is \"B\"
\`\`\` \`\`\`
[placeholder topic] [placeholder topic]
@@ -178,15 +151,13 @@ result: (1 > 2) ? { "A" } : { "B" } // result is "B"
\`\`\`javascript \`\`\`javascript
// if / else if / else // if / else if / else
score: 75 score: 75
grade: (score >= 90) ? { "A" } grade: (score >= 90) ? { \"A\" }
: (score >= 80) ? { "B" } : (score >= 80) ? { \"B\" }
: (score >= 70) ? { "C" } : (score >= 70) ? { \"C\" }
: { "D" } : { \"D\" }
_(grade) // Prints "C" _(grade) // Prints \"C\"
\`\`\` \`\`\`
[placeholder topic]
## Data Structures ## Data Structures
### Arrays ### Arrays
@@ -203,8 +174,8 @@ _(primes) // Mutation: [1, 3, 5, 7]
[placeholder topic] [placeholder topic]
\`\`\`javascript \`\`\`javascript
greeting: "Hi" greeting: \"Hi\"
_(greeting[1]) // "i" _(greeting[1]) // \"i\"
\`\`\` \`\`\`
## Destructuring ## Destructuring
@@ -213,12 +184,12 @@ _(greeting[1]) // "i"
\`\`\`javascript \`\`\`javascript
// Setup // Setup
user: { name: "Zeta", role: "Admin", id: 101 } user: { name: \"Zeta\", role: \"Admin\", id: 101 }
coords: [10, -5, 8] coords: [10, -5, 8]
// Extract 'name' and 'role' from the user block // Extract 'name' and 'role' from the user block
user -> { name, role } user -> { name, role }
_(name) // "Zeta" _(name) // \"Zeta\"
// Extract 'id' and alias it to 'userID' // Extract 'id' and alias it to 'userID'
user -> { id -> userID } user -> { id -> userID }
@@ -238,20 +209,20 @@ _(y) // -5
\`\`\`javascript \`\`\`javascript
// Iterate over an Array's values // Iterate over an Array's values
(["a", "b"] -> item) * { _(item) } ([\"a\", \"b\"] -> item) * { _(item) }
// Iterate over an Array with index and value // Iterate over an Array with index and value
(["a", "b"] -> [i, item]) * { _(i + ": " + item) } ([\"a\", \"b\"] -> [i, item]) * { _(i + \": \" + item) }
// Iterate over a Block's key-value pairs // Iterate over a Block's key-value pairs
({ id: 1 } -> [k, v]) * { _(k + " is " + v) } ({ id: 1 } -> [k, v]) * { _(k + \" is \" + v) }
// Iterate over a String's characters // Iterate over a String's characters
("Hi" -> char) * { _(char) } (\"Hi\" -> char) * { _(char) }
// Destructure directly in the loop signature // Destructure directly in the loop signature
users: [{ name: "Orion" }] users: [{ name: \"Orion\" }]
(users -> { name }) * { _("User: " + name) } (users -> { name }) * { _(\"User: \" + name) }
\`\`\` \`\`\`
### Numeric Ranges ### Numeric Ranges
@@ -260,7 +231,7 @@ users: [{ name: "Orion" }]
\`\`\`javascript \`\`\`javascript
// A range from 0 up to (but not including) 3 // A range from 0 up to (but not including) 3
(0..3 -> i) * { (0..3 -> i) * {
_("Iteration: " + i) // Prints 0, 1, 2 _(\"Iteration: \" + i) // Prints 0, 1, 2
} }
\`\`\` \`\`\`
@@ -271,7 +242,7 @@ users: [{ name: "Orion" }]
(0..10 -> i) * { (0..10 -> i) * {
(i == 2) ? { >> } // Skip 2 (i == 2) ? { >> } // Skip 2
(i == 5) ? { >< } // Break at 5 (i == 5) ? { >< } // Break at 5
_("i is " + i) _(\"i is \" + i)
} }
// Prints: i is 0, i is 1, i is 3, i is 4 // Prints: i is 0, i is 1, i is 3, i is 4
\`\`\` \`\`\`
@@ -282,10 +253,10 @@ users: [{ name: "Orion" }]
\`\`\`javascript \`\`\`javascript
// Import 'block1' and 'block2' (as 'alias2') from a module // Import 'block1' and 'block2' (as 'alias2') from a module
+ "npm://hi-lang@0.1/path/file.hi" -> { block1, block2 -> alias2 } + \"npm://hi-lang@0.1/path/file.hi\" -> { block1, block2 -> alias2 }
block1() block1()
alias2("some value") alias2(\"some value\")
\`\`\` \`\`\`
## Context Reference: @ ## Context Reference: @
@@ -296,14 +267,14 @@ alias2("some value")
// This block is a portable method. // This block is a portable method.
// It relies on '@' to get the context. // It relies on '@' to get the context.
loggable: { loggable: {
logId: { _("ID is: " + @id) } logId: { _(\"ID is: \" + @id) }
} }
user: { id: 101, log: loggable.logId } user: { id: 101, log: loggable.logId }
item: { id: "abc-789", log: loggable.logId } item: { id: \"abc-789\", log: loggable.logId }
user.log() // Prints "ID is: 101" (@ is 'user') user.log() // Prints \"ID is: 101\" (@ is 'user')
item.log() // Prints "ID is: abc-789" (@ is 'item') item.log() // Prints \"ID is: abc-789\" (@ is 'item')
\`\`\` \`\`\`
## Expression Blocks and Fluent Chaining ## Expression Blocks and Fluent Chaining
@@ -313,7 +284,7 @@ item.log() // Prints "ID is: abc-789" (@ is 'item')
\`\`\`javascript \`\`\`javascript
// The last expression, \`a + b\`, is returned. // The last expression, \`a + b\`, is returned.
add: (a, b) { add: (a, b) {
_("adding...") // Side-effect _(\"adding...\") // Side-effect
a + b // Return value a + b // Return value
} }
@@ -321,8 +292,8 @@ result: add(2, 3) // result is 5
// An early, explicit return // An early, explicit return
check: (n) { check: (n) {
(n < 0) ? { ^ "Negative" } (n < 0) ? { ^ \"Negative\" }
"Positive" \"Positive\"
} }
\`\`\` \`\`\`
@@ -346,8 +317,17 @@ _(result) // Prints 6
--- ---
<p class="text-sm text-gray-600">Hi is in early development. The syntax and features are subject to change.</p> <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 = () => { const init = () => {
if (!window.markdownit || !window.hljs) { setTimeout(init, 50); return } if (!window.markdownit || !window.hljs) { setTimeout(init, 50); return }
const md = window.markdownit({ const md = window.markdownit({
@@ -358,11 +338,57 @@ _(result) // Prints 6
} }
}); });
contentEl.innerHTML = md.render(mdContent); contentEl.innerHTML = md.render(mdContent);
window.lucide?.createIcons() window.lucide?.createIcons();
}; };
init(); init();
})() }
</script> }" 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> </div>
</body> </body>
</html> </html>