mirror of
https://github.com/hi-language/hi-language.github.io.git
synced 2026-01-13 16:18:04 +00:00
272 lines
11 KiB
HTML
272 lines
11 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Hi: A Symbolic Programming 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=Poppins:wght@300;400;600&family=JetBrains+Mono:wght@400;700&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.9.0/build/styles/github.min.css"/>
|
|
|
|
<style>
|
|
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 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" data-page="home">
|
|
Hi
|
|
</button>
|
|
<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>
|
|
|
|
<main class="w-full min-h-screen flex flex-col items-center p-4 sm:p-8">
|
|
<div id="content" class="markdown-body w-full max-w-4xl">
|
|
<!-- 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</span></button>
|
|
<button class="sidebar-item" data-page="hib"><i data-lucide="box" class="h-5 w-5 text-gray-600"></i><span>.hib</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 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.
|
|
|
|
\`\`\`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.
|
|
\`\`\`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.
|
|
\`\`\`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.
|
|
\`\`\`js
|
|
sayHi: { _("Hi") }
|
|
sayHi() // Prints "Hi"
|
|
|
|
add: (a, b) { a + b }
|
|
_(add(2, 3)) // Prints 5
|
|
\`\`\`
|
|
|
|
### As a Hybrid (Factory/Class)
|
|
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"
|
|
\`\`\`
|
|
|
|
## Conditional Expressions
|
|
Hi uses a single ternary-like expression for all conditional logic.
|
|
\`\`\`js
|
|
// if / else if / else
|
|
score: 75
|
|
grade: (score >= 90) ? { "A" }
|
|
: (score >= 80) ? { "B" }
|
|
: (score >= 70) ? { "C" }
|
|
: { "D" }
|
|
_(grade) // Prints "C"
|
|
\`\`\`
|
|
|
|
## Repetition
|
|
Repetition is handled by a unified iteration protocol: \`(source -> pattern) * { ... }\`.
|
|
\`\`\`js
|
|
// Iterate over an Array's values
|
|
(["a", "b"] -> item) * { _(item) }
|
|
|
|
// A range from 0 up to (but not including) 3
|
|
(0..3 -> i) * {
|
|
_("Iteration: " + i) // Prints 0, 1, 2
|
|
}
|
|
\`\`\`
|
|
|
|
## Imports
|
|
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: `
|
|
# .hib (Hi Block)
|
|
|
|
The JSON equivalent for the Hi language.
|
|
|
|
A \`.hib\` file is implicitly a Block; the top-level \`{}\` are omitted. It is parsed as native Hi syntax, allowing for comments, executable logic, and symbolic types.
|
|
|
|
### Example: \`config.hib\`
|
|
\`\`\`js
|
|
// config.hib
|
|
user: "Orion"
|
|
level: 99
|
|
active: !0 // Hi's canonical boolean 'true'
|
|
permissions: ["read", "write"]
|
|
|
|
// Executable logic can be embedded directly.
|
|
summary: { "User " + @user + " (Lvl " + @level + ")" }
|
|
\`\`\`
|
|
|
|
### Usage in \`.hi\`
|
|
The file is imported using the \`+\` operator.
|
|
\`\`\`js
|
|
// main.hi
|
|
config: + "./config.hib"
|
|
|
|
_(config.user) // "Orion"
|
|
_(config.summary()) // "User Orion (Lvl 99)"
|
|
\`\`\`
|
|
`,
|
|
contact: `
|
|
# Contact & Resources
|
|
|
|
## 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)**
|
|
|
|
## 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 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();
|
|
}
|
|
});
|
|
|
|
renderContent('home');
|
|
lucide.createIcons();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|