From e046a7b9d4440245edcaadde75f80430f3d6587b Mon Sep 17 00:00:00 2001
From: multipleof4 <planetrenox@protonmail.com>
Date: Wed, 24 Sep 2025 02:15:48 -0700
Subject: [PATCH] Feat: Add sidebars and .hib page

---
 index.html | 508 +++++++++++++++++------------------------------------
 1 file changed, 158 insertions(+), 350 deletions(-)
diff --git a/index.html b/index.html
index 850ebab..a9eeb3e 100644
--- a/index.html
+++ b/index.html
@@ -5,74 +5,39 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Hi: A Symbolic Programming Language</title>
     
-    <!-- Tailwind CSS -->
     <script src="https://cdn.tailwindcss.com"></script>
-
-    <!-- Google Fonts -->
     <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=Poppins:wght@300;400;600&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
     
-    <!-- Markdown & Highlighting Styles -->
     <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.9.0/build/styles/github.min.css"/>
 
-    <!-- Lucide Icons -->
-    <script src="https://unpkg.com/lucide@latest"></script>
-
-    <!-- Markdown-it and Highlight.js -->
-    <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>
-
     <style>
-        body {
-            font-family: 'Poppins', sans-serif;
-            background-color: #f9fafb; /* bg-gray-50 */
-        }
-        .markdown-body {
-            font-size: 14px;
-            line-height: 1.7;
-            background-color: transparent;
-        }
-        .markdown-body h1, .markdown-body h2, .markdown-body h3 {
-            font-family: 'Poppins', sans-serif;
-            font-weight: 600;
-            border-bottom-color: #e5e7eb; /* border-gray-200 */
-        }
-        .markdown-body pre {
-            background-color: #ffffff;
-            border: 1px solid #e5e7eb;
-            border-radius: 0.75rem;
-            padding: 1rem;
-            overflow-x: auto;
-        }
-        .markdown-body code {
-            font-family: 'JetBrains Mono', monospace;
-            font-size: 13px;
-            font-variant-ligatures: none;
-        }
-        :not(pre) > code {
-            font-size: 85%;
-            padding: .2em .4em;
-            margin: 0;
-            border-radius: 6px;
-            background-color: rgba(175, 184, 193, 0.2);
-        }
-        .hi-button {
-            font-family: 'JetBrains Mono', monospace;
-        }
+        body { font-family: 'Poppins', sans-serif; background-color: #f9fafb; }
+        .markdown-body { font-size: 14px; line-height: 1.7; background-color: transparent; }
+        .markdown-body h1, .markdown-body h2, .markdown-body h3 { font-family: 'Poppins', sans-serif; font-weight: 600; border-bottom-color: #e5e7eb; }
+        .markdown-body pre { background-color: #ffffff; border: 1px solid #e5e7eb; border-radius: 0.75rem; padding: 1rem; overflow-x: auto; }
+        .markdown-body code { font-family: 'JetBrains Mono', monospace; font-size: 13px; font-variant-ligatures: none; }
+        :not(pre) > code { font-size: 85%; padding: .2em .4em; margin: 0; border-radius: 6px; background-color: rgba(175, 184, 193, 0.2); }
+        .hi-button { font-family: 'JetBrains Mono', monospace; }
+        .sidebar-item { display: flex; align-items: center; gap: 0.75rem; width: 100%; text-align: left; padding: 0.5rem 1rem; border-radius: 0.5rem; transition: background-color 150ms; }
+        .sidebar-item:hover { background-color: #f3f4f6; } /* hover:bg-gray-100 */
     </style>
 </head>
 <body class="text-gray-900 selection:bg-cyan-400/20">
 
     <header class="sticky top-0 z-20 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">
-            <button class="hi-button text-2xl font-bold text-gray-900 px-4 py-2 rounded-lg cursor-default transition-all duration-300 hover:bg-gray-100">
+        <div class="mx-auto w-full max-w-4xl px-4 py-3 grid grid-cols-3 items-center">
+            <button id="sidebarBtnLeft" class="h-8 w-8 rounded-xl hover:bg-gray-100 active:scale-[.99] transition flex items-center justify-center" title="File Extensions">
+                <i data-lucide="panel-left" class="h-5 w-5"></i>
+            </button>
+            <button class="hi-button text-2xl font-bold text-gray-900 px-4 py-2 rounded-lg cursor-default transition-all duration-300 hover:bg-gray-100 justify-self-center" data-page="home">
                 Hi
             </button>
-            <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>
+            <button id="sidebarBtnRight" class="h-8 w-8 rounded-xl hover:bg-gray-100 active:scale-[.99] transition flex items-center justify-center justify-self-end" title="Resources">
+                <i data-lucide="panel-right" class="h-5 w-5"></i>
+            </button>
         </div>
     </header>
 
@@ -81,147 +46,93 @@
             <!-- Markdown content will be rendered here -->
         </div>
     </main>
-    
+
+    <!-- Overlays -->
+    <div id="sidebarOverlayLeft" class="fixed inset-0 z-40 bg-black/20 hidden"></div>
+    <div id="sidebarOverlayRight" class="fixed inset-0 z-40 bg-black/20 hidden"></div>
+
+    <!-- Left Sidebar -->
+    <aside id="sidebarLeft" class="fixed inset-y-0 left-0 z-50 w-72 max-w-[85vw] bg-white border-r border-gray-200 shadow-xl transform -translate-x-full transition-transform duration-200 ease-out flex flex-col">
+        <div class="p-3 border-b text-sm font-semibold">File Extensions</div>
+        <div class="p-2 space-y-1">
+            <button class="sidebar-item" data-page="home"><i data-lucide="file-code-2" class="h-5 w-5 text-gray-600"></i><span>.hi Language</span></button>
+            <button class="sidebar-item" data-page="hib"><i data-lucide="database" class="h-5 w-5 text-gray-600"></i><span>.hib Block</span></button>
+        </div>
+    </aside>
+
+    <!-- Right Sidebar -->
+    <aside id="sidebarRight" class="fixed inset-y-0 right-0 z-50 w-72 max-w-[85vw] bg-white border-l border-gray-200 shadow-xl transform translate-x-full transition-transform duration-200 ease-out flex flex-col">
+        <div class="p-3 border-b text-sm font-semibold">Resources</div>
+        <div class="p-2 space-y-1">
+            <a href="https://github.com/hi-language" target="_blank" rel="noopener noreferrer" class="sidebar-item"><i data-lucide="github" class="h-5 w-5 text-gray-600"></i><span>GitHub Organization</span></a>
+            <button class="sidebar-item" data-page="contact"><i data-lucide="mail" class="h-5 w-5 text-gray-600"></i><span>Email Contact</span></button>
+        </div>
+    </aside>
+
+    <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>
-        const markdownContent = `
+        const pages = {
+            home: `
 # A corely symbolic language
 
 **Hi** is a programming language inspired by JavaScript, designed with a symbolic core to be more universal, AI-friendly, and conducive to code golfing. The syntax prioritizes symbols over keywords.
 
 The underscore \`_\` is the global output function.
 
-\`\`\`javascript
+\`\`\`js
 _("Hi world")
 \`\`\`
 
 ## Declaration and Assignment
-
 Variable lifecycle is split into two distinct symbolic operations.
-
 - \`:\` **Declaration**: Binds a name in the current scope.
 - \`=\` **Assignment**: Reassigns the value of an existing name.
-
-\`\`\`javascript
+\`\`\`js
 version: 1.0 // Declaration and initialization
 version = 1.1 // Assignment
 \`\`\`
 
 ## The Block: Unifying Objects and Functions
-
 The **Block** (\`{}\`) is Hi's foundational structure, unifying data objects and executable functions. It is a sequence of expressions that can be invoked with \`()\`.
 
 ### As a Data Structure (Object)
 A block can hold \`key: value\` pairs. A \`#\` prefix denotes a private property.
-
-\`\`\`javascript
+\`\`\`js
 player: {
   name: "Orion"
   #hp: 100
 }
-
 _(player.name) // "Orion"
 _(player.hp)   // -0 (null) because #hp is private
 \`\`\`
 
 ### As Executable Code (Function)
 Invoking a block with \`()\` executes its expressions. The value of the last expression is implicitly returned.
-
-\`\`\`javascript
-// Simple invocation
+\`\`\`js
 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)
-A block can contain both data and logic. When invoked, its internal declarations are re-initialized, making it a natural factory. The context symbol \`@\` can be used to return the newly created instance.
-
-\`\`\`javascript
+A block can contain both data and logic. The context symbol \`@\` refers to the current instance.
+\`\`\`js
 createPlayer: (name) {
   name: name,
   hp: 100
   @ // Return the new block instance
 }
-
 player1: createPlayer("Orion")
 _(player1.name) // "Orion"
-_(player1.hp)   // 100
 \`\`\`
 
-### Expression Separators
-Newlines act as implicit separators. Commas (\`,\`) or semicolons (\`;\`) are required for single-line blocks.
-
-\`\`\`javascript
-// Multi-line
-point: {
-  x: 10
-  y: 20
-}
-
-// Single-line
-point: { x: 10, y: 20 }
-\`\`\`
-
-## Arrow Expressions
-
-For concise single-expression functions, Hi provides the \`=>\` arrow syntax, inspired by JavaScript. It serves as a shorthand for a Block that immediately returns an expression, making it ideal for callbacks and functional patterns.
-
-It's a direct replacement for \`(params) { ^ expression }\`.
-
-\`\`\`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
-
-Hi dispenses with boolean keywords in favor of canonical numeric values for truthiness.
-
-- \`0\` is **falsy** (the canonical false).
-- \`!0\` is **truthy** (the canonical true, representing a logical NOT 0).
-- \`-0\` represents null/undefined values.
-- All other numbers, and any non-empty string, block, or array are "truthy".
-- The \`==\` operator performs strict equality comparison (equivalent to JavaScript's \`===\`).
-
 ## Conditional Expressions
-
-Hi uses a single ternary-like expression for all conditional logic. The simplest form acts like a standard \`if\` statement.
-
-\`\`\`javascript
-// A simple 'if' to execute code conditionally
-status: "active"
-(status == "active") ? { _("User is active.") }
-\`\`\`
-
-You can provide an \`else\` branch using the colon (\`:\`) symbol to choose between two actions.
-
-\`\`\`javascript
-// if / else for choosing an action
-isOnline: !0
-(isOnline == !0) ? { _("Online") } : { _("Offline") } // Prints "Online"
-\`\`\`
-
-This structure is powerful because it's an *expression* that always evaluates to a value. The value of the executed block becomes the value of the entire expression, allowing you to assign the result directly to a variable.
-
-\`\`\`javascript
-// if / else returning a value
-result: (1 > 2) ? { "A" } : { "B" } // result is "B"
-\`\`\`
-
-Expressions can be chained to create \`if / else if / else\` logic.
-
-\`\`\`javascript
+Hi uses a single ternary-like expression for all conditional logic.
+\`\`\`js
 // if / else if / else
 score: 75
 grade: (score >= 90) ? { "A" }
@@ -231,258 +142,155 @@ grade: (score >= 90) ? { "A" }
 _(grade) // Prints "C"
 \`\`\`
 
-If a condition is false and no \`else\` branch is provided, the expression evaluates to \`-0\` (null). 
-
-## Data Structures
-
-### Arrays
-Arrays are 0-indexed lists of values. They support random access via \`[]\` and are iterable.
-
-\`\`\`javascript
-primes: [2, 3, 5, 7]
-_(primes[0]) // Random access: 2
-primes[0] = 1        
-_(primes)     // Mutation: [1, 3, 5, 7]
-\`\`\`
-
-### Strings
-Strings are sequences of characters. They are immutable but support random access and iteration.
-
-\`\`\`javascript
-greeting: "Hi"
-_(greeting[1]) // "i"
-\`\`\`
-
-## Destructuring
-
-Destructuring provides an expressive way to extract data from Blocks and Arrays. The extraction operator \`->\` is used to unpack values, mirroring its use in module imports.
-
-- \`source -> { pattern }\`: Extracts properties from a Block.
-- \`source -> [ pattern ]\`: Extracts elements from an Array.
-- \`prop -> alias\`: The same operator is used within the pattern for aliasing.
-
-\`\`\`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
-
-Repetition is handled by a unified iteration protocol: \`(source -> pattern) * { ... }\`. This single, concise syntax adapts to iterate over any collection type.
-
-### Iterating Collections
-The \`->\` operator extracts elements from a source into a pattern.
-
-\`\`\`javascript
+Repetition is handled by a unified iteration protocol: \`(source -> pattern) * { ... }\`.
+\`\`\`js
 // 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
-The \`..\` operator creates an iterable numeric range for concise, traditional loops.
-
-\`\`\`javascript
 // A range from 0 up to (but not including) 3
 (0..3 -> i) * {
   _("Iteration: " + i) // Prints 0, 1, 2
 }
 \`\`\`
 
-### Loop Control
-Control flow within loops is managed by distinct symbols:
-- \`><\`: **Break**. Immediately terminates the loop.
-- \`>>\`: **Continue**. Skips to the next iteration.
-- \`^\`: **Return**. Exits the parent block, not just the loop.
-
-\`\`\`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
-
-Modules are imported using the \`+\` and \`->\` operators. This allows for destructuring and aliasing of imported members. Placing the module source first allows development tools to provide immediate, context-aware autocompletion for the members being imported—a direct ergonomic improvement over JavaScript's syntax.
-
-\`\`\`javascript
+Modules are imported using the \`+\` and \`->\` operators, enabling context-aware autocompletion.
+\`\`\`js
 // Import 'block1' and 'block2' (as 'alias2') from a module
 + "npm://hi-lang@0.1/path/file.hi" -> { block1, block2 -> alias2 }
-
 block1()
 alias2("some value")
 \`\`\`
+`,
+            hib: `
+# Hi Block (.hib): A Symbolic Data Format
 
-## Context Reference: @
+**Hi Block** is the native data representation format for the Hi language, designed to be a more powerful and expressive alternative to JSON. Where JSON is static data, a Hi Block is a living, symbolic structure.
 
-The \`@\` symbol provides a reference to the current execution context, similar to \`this\` in JavaScript. This allows a Block to refer to the object it was called on, making methods portable and reusable.
+## Beyond JSON
 
-\`\`\`javascript
-// This block is a portable method.
-// It relies on '@' to get the context.
-loggable: {
-  logId: { _("ID is: " + @id) }
-}
+While JSON is a universal standard, its rigidity limits it to simple key-value data. Hi is a symbolic language, and its data format reflects this philosophy. A \`.hib\` file is not just parsed; it's integrated directly as a Hi **Block**.
 
-user: { id: 101, log: loggable.logId }
-item: { id: "abc-789", log: loggable.logId }
+### Core Features
 
-user.log() // Prints "ID is: 101" (@ is 'user')
-item.log() // Prints "ID is: abc-789" (@ is 'item')
-\`\`\`
+- **Native Syntax**: A \`.hib\` file uses standard Hi syntax. There is no separate parser needed. It's just a Block that can be imported and used immediately.
+- **Executable Data**: Because a Hi Block can contain functions (\`=>\` or other blocks), your data can include its own logic, validation, or helper methods. This is impossible in JSON.
+- **Symbolic & Concise**: Leverages Hi's native types like \`!0\` (true) and \`-0\` (null) for a more compact and golfed representation.
+- **Supports Comments**: Unlike JSON, \`.hib\` files can be documented with comments, improving maintainability.
 
-## Expression Blocks and Fluent Chaining
+## Comparison
 
-Hi adopts an expression-oriented design, similar to Rust. Every **Block** is an expression that yields a value.
+Consider a simple configuration object.
 
-- The value of the *last expression* in a Block is implicitly returned.
-- To return early or explicitly, use the return symbol \`^\`.
-
-This makes code more concise by eliminating the need for explicit \`return\` keywords in most cases.
-
-\`\`\`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"
+**JSON Example:**
+\`\`\`json
+{
+  "user": "Orion",
+  "level": 99,
+  "active": true,
+  "permissions": ["read", "write"]
 }
 \`\`\`
 
-### Fluent Chaining
+**Hi Block (.hib) Example:**
+\`\`\`js
+// config.hib
+{
+  user: "Orion"
+  level: 99
+  active: !0 // Uses Hi's canonical boolean 'true'
+  permissions: ["read", "write"]
 
-To enable fluent method chaining, Hi adds one special rule: if the last expression in a block produces no value (e.g., an assignment), the block returns its own context (\`@\`) by default. This allows subsequent method calls on the same object.
-
-\`\`\`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
+  // .hib files can contain executable logic
+  isAdmin: => @permissions.has("admin")
+  summary: => "User " + @user + " (Lvl " + @level + ")"
 }
-
-// .add() and .sub() return the calculator, allowing the chain
-result: calculator.add(10).sub(4).get()
-
-_(result) // Prints 6
 \`\`\`
 
-## Core Language Blueprint
+To use it in Hi, you simply import it:
+\`\`\`js
+config: + "./config.hib"
 
-To create the initial Hi-to-JS transpiler, the following primitives and built-in functionalities must be defined. This serves as the blueprint for the core standard library.
+_(config.summary()) // "User Orion (Lvl 99)"
+_(config.isAdmin()) // 0 (false)
+\`\`\`
 
-### Built-in Definitions Table
+The \`.hib\` format transforms data from a static list of properties into a dynamic, self-contained, and intelligent object.
+`,
+            contact: `
+# Contact & Resources
 
-| Type | Name / Symbol | Description | Example |
-| :--- | :--- | :--- | :--- |
-| **Global** | \`_\` | The global output function. Transpiles to \`console.log\`. | \`_("hello")\` |
-| **Global** | \`Math\` | A global block containing mathematical constants and functions. | \`_(Math.PI)\` |
-| | | | |
-| **Number** | \`.str()\` | Converts the number to its string representation. | \`age: 21; _(age.str())\` |
-| **Number** | \`.fix(d)\` | Formats a number using fixed-point notation. | \`n: 3.14159; _(n.fix(2)) // "3.14"\` |
-| | | | |
-| **String** | \`.len\` | **Property**: Returns the number of characters in the string. | \`"hi".len // 2\` |
-| **String** | \`.num()\` | Parses the string, returning a number. | \`"42".num() // 42\` |
-| **String** | \`.upper()\` | Returns the string converted to uppercase. | \`"hi".upper() // "HI"\` |
-| **String** | \`.lower()\` | Returns the string converted to lowercase. | \`"HI".lower() // "hi"\` |
-| **String** | \`.trim()\` | Removes whitespace from both ends of a string. | \`" hi ".trim() // "hi"\` |
-| **String** | \`.split(d)\` | Divides a string into an ordered list of substrings. | \`"a-b-c".split("-") // ["a","b","c"]\` |
-| **String** | \`.slice(s,e)\`| Extracts a section of a string and returns it as a new string. | \`"hello".slice(1,3) // "el"\` |
-| **String** | \`.has(sub)\`| Determines whether a string contains a given substring. | \`"hi".has("i") // !0 (true)\` |
-| **String** | \`.replace(f,r)\` | Replaces the first occurrence of a substring. | \`"hi hi".replace("i","o") // "ho hi"\` |
-| **String** | \`.replaceAll(f,r)\` | Replaces all occurrences of a substring. | \`"hi hi".replaceAll("i","o") // "ho ho"\` |
-| | | | |
-| **Array** | \`.len\` | **Property**: Returns the number of elements in the array. | \`[1,2].len // 2\` |
-| **Array** | \`.add(v)\` | Adds one or more elements to the end of an array. | \`a:[1]; a.add(2) // a is now [1,2]\` |
-| **Array** | \`.pop()\` | Removes the last element from an array and returns it. | \`a:[1,2]; a.pop() // returns 2\` |
-| **Array** | \`.pre(v)\` | Adds one or more elements to the beginning of an array. | \`a:[2]; a.pre(1) // a is now [1,2]\` |
-| **Array** | \`.shift()\` | Removes the first element from an array and returns it. | \`a:[1,2]; a.shift() // returns 1\` |
-| **Array** | \`.each(fn)\` | Executes a provided function once for each array element. | \`[1,2].each((n)=>{_(n)})\` |
-| **Array** | \`.map(fn)\` | Creates a new array with the results of calling a function on every element. | \`[1,2].map((n)=>n*2) // [2,4]\` |
-| **Array** | \`.filter(fn)\` | Creates a new array with all elements that pass the test implemented by the provided function. | \`[1,2,3].filter((n)=>n>1) // [2,3]\` |
-| **Array** | \`.reduce(fn,iv)\`| Executes a reducer function on each element, resulting in a single output value. | \`[1,2,3].reduce((a,c)=>a+c, 0) // 6\` |
-| **Array** | \`.find(fn)\` | Returns the first element in the array that satisfies the provided testing function. | \`[1,2].find((n)=>n>1) // 2\` |
-| **Array** | \`.has(v)\` | Determines whether an array includes a certain value. | \`[1,2].has(2) // !0 (true)\` |
-| **Array** | \`.join(d)\` | Joins all elements of an array into a string. | \`["a","b"].join("-") // "a-b"\` |
-| **Array** | \`.slice(s,e)\`| Returns a shallow copy of a portion of an array into a new array object. | \`[1,2,3].slice(1) // [2,3]\` |
-| **Array** | \`.reverse()\`| Reverses an array in place. | \`a:[1,2]; a.reverse() // a is [2,1]\` |
-| **Array** | \`.sort(fn)\` | Sorts the elements of an array in place. | \`[3,1,2].sort() // [1,2,3]\` |
-| | | | |
-| **Block** | \`.keys()\` | Returns an array of a given block's own property names. | \`{a:1}.keys() // ["a"]\` |
-| **Block** | \`.values()\` | Returns an array of a given block's own property values. | \`{a:1}.values() // [1]\` |
-| **Block** | \`.has(key)\` | Checks if a block has a specified property as its own. | \`{a:1}.has("a") // !0 (true)\` |
-| | | | |
-| **Math** | \`.PI\` | **Property**: Ratio of a circle's circumference to its diameter. | \`Math.PI // 3.14159...\` |
-| **Math** | \`.abs(n)\` | Returns the absolute value of a number. | \`Math.abs(-5) // 5\` |
-| **Math** | \`.floor(n)\` | Returns the largest integer less than or equal to a number. | \`Math.floor(5.9) // 5\` |
-| **Math** | \`.ceil(n)\` | Returns the smallest integer greater than or equal to a number. | \`Math.ceil(5.1) // 6\` |
-| **Math** | \`.round(n)\` | Returns the value of a number rounded to the nearest integer. | \`Math.round(5.5) // 6\` |
-| **Math** | \`.max(a,b,..)\`| Returns the largest of the given numbers. | \`Math.max(1,5,2) // 5\` |
-| **Math** | \`.min(a,b,..)\`| Returns the smallest of the given numbers. | \`Math.min(1,5,2) // 1\` |
-| **Math** | \`.pow(b,e)\` | Returns base to the exponent power. | \`Math.pow(2,3) // 8\` |
-| **Math** | \`.sqrt(n)\` | Returns the square root of a number. | \`Math.sqrt(9) // 3\` |
-| **Math** | \`.rand()\` | Returns a pseudo-random number between 0 and 1. | \`Math.rand() // e.g., 0.123...\` |
+## GitHub
 
+The official **Hi** language organization, including the transpiler, documentation, and related projects, is hosted on GitHub.
 
----
+- **[hi-language on GitHub](https://github.com/hi-language)**
 
-<p class="text-sm text-gray-600">Hi is in early development. The syntax and features are subject to change.</p>
-`;
+## Email
+
+For inquiries, you can reach the development team at the following address:
+
+- \`planetrenox@protonmail.com\`
+`
+        };
+
+        const md = window.markdownit({
+            html: true, linkify: true, typographer: true,
+            highlight: (str, lang) => {
+                const language = lang || 'js';
+                if (hljs.getLanguage(language)) {
+                    try {
+                        return `<pre class="hljs"><code>${hljs.highlight(str, { language, ignoreIllegals: true }).value}</code></pre>`;
+                    } catch (__) {}
+                }
+                return `<pre class="hljs"><code>${md.utils.escapeHtml(str)}</code></pre>`;
+            }
+        });
+
+        const renderContent = (pageKey) => {
+            const contentDiv = document.getElementById('content');
+            contentDiv.innerHTML = md.render(pages[pageKey] || pages.home);
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        };
+        
+        const closeSidebars = () => {
+            document.getElementById('sidebarLeft').classList.add('-translate-x-full');
+            document.getElementById('sidebarOverlayLeft').classList.add('hidden');
+            document.getElementById('sidebarRight').classList.add('translate-x-full');
+            document.getElementById('sidebarOverlayRight').classList.add('hidden');
+        };
 
         document.addEventListener('DOMContentLoaded', () => {
-            const md = window.markdownit({
-                html: true,
-                linkify: true,
-                typographer: true,
-                highlight: (str, lang) => {
-                    if (lang && hljs.getLanguage(lang)) {
-                        try {
-                            return `<pre class="hljs"><code>${hljs.highlight(str, { language: lang, ignoreIllegals: true }).value}</code></pre>`;
-                        } catch (__) {}
-                    }
-                    return `<pre class="hljs"><code>${md.utils.escapeHtml(str)}</code></pre>`;
+            const sidebarLeft = document.getElementById('sidebarLeft');
+            const overlayLeft = document.getElementById('sidebarOverlayLeft');
+            const sidebarRight = document.getElementById('sidebarRight');
+            const overlayRight = document.getElementById('sidebarOverlayRight');
+            
+            document.getElementById('sidebarBtnLeft').addEventListener('click', () => {
+                sidebarLeft.classList.remove('-translate-x-full');
+                overlayLeft.classList.remove('hidden');
+            });
+
+            document.getElementById('sidebarBtnRight').addEventListener('click', () => {
+                sidebarRight.classList.remove('translate-x-full');
+                overlayRight.classList.remove('hidden');
+            });
+            
+            overlayLeft.addEventListener('click', closeSidebars);
+            overlayRight.addEventListener('click', closeSidebars);
+
+            document.body.addEventListener('click', (e) => {
+                const pageBtn = e.target.closest('[data-page]');
+                if (pageBtn) {
+                    renderContent(pageBtn.dataset.page);
+                    closeSidebars();
                 }
             });
 
-            document.getElementById('content').innerHTML = md.render(markdownContent);
+            renderContent('home');
             lucide.createIcons();
         });
     </script>
 </body>
 </html>
-
