mirror of
https://github.com/hi-language/hi-language.github.io.git
synced 2026-01-14 00:28:05 +00:00
303 lines
12 KiB
HTML
303 lines
12 KiB
HTML
<!doctype html><html lang=en>
|
||
<head>
|
||
<meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1,viewport-fit=cover">
|
||
<title>Hi — a corely symbolic language</title>
|
||
<meta name=description content="Hi is a corely symbolic language inspired by JavaScript. Fewer keywords, more global legibility.">
|
||
<link rel="preconnect" href="https://cdn.jsdelivr.net">
|
||
<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://cdn.tailwindcss.com"></script>
|
||
<style>
|
||
:root{--bg:255 255 255;--fg:17 24 39;--muted:107 114 128;--ring:0 0 0/0}
|
||
*{box-sizing:border-box}
|
||
html,body{height:100%}
|
||
body{background:rgb(var(--bg));color:rgb(var(--fg));-webkit-tap-highlight-color:transparent}
|
||
.container{max-width:960px;margin:0 auto}
|
||
.topbar{backdrop-filter:saturate(1.2) blur(8px)}
|
||
.badge{border-radius:9999px}
|
||
.bubble{border:1px solid #e5e7eb;background:#fff;border-radius:24px;padding:20px}
|
||
.bubble-shadow{box-shadow:0 10px 30px rgba(0,0,0,.06)}
|
||
.bridge{height:90px;position:relative;display:flex;align-items:center;justify-content:center}
|
||
.blobs{position:absolute;inset:-40% -20% -40% -20%;filter:blur(40px);opacity:.75}
|
||
.blob{position:absolute;border-radius:9999px}
|
||
.blob.a{left:10%;top:10%;width:220px;height:220px;background:radial-gradient(closest-side,#a78bfa,#a78bfa00)}
|
||
.blob.b{right:15%;bottom:10%;width:260px;height:260px;background:radial-gradient(closest-side,#60a5fa,#60a5fa00)}
|
||
.blob.c{left:40%;top:35%;width:280px;height:280px;background:radial-gradient(closest-side,#34d399,#34d39900)}
|
||
.bridge .note{position:relative;font-size:14px;color:#374151;background:#fff;border:1px solid #e5e7eb;border-radius:9999px;padding:.4rem .75rem;box-shadow:0 8px 24px rgba(0,0,0,.06)}
|
||
.markdown-body{font-size:15px;line-height:1.7}
|
||
.markdown-body pre{overflow:auto}
|
||
pre>code{font-size:13px}
|
||
code,pre code{border-radius:8px}
|
||
.code-ops{position:absolute;top:10px;right:10px;display:flex;gap:6px;align-items:center}
|
||
.copy-btn{background:#111827;color:#fff;font-size:12px;border-radius:8px;padding:.25rem .5rem;opacity:.9}
|
||
.char-count{font-size:12px;color:#6b7280}
|
||
.hero{background:radial-gradient(90% 70% at 50% 10%,#eef2ff,transparent 60%),radial-gradient(90% 70% at 10% 20%,#eff6ff,transparent 55%),radial-gradient(90% 70% at 90% 20%,#ecfeff,transparent 55%)}
|
||
footer a{color:#111827}
|
||
@media (prefers-color-scheme:dark){
|
||
:root{--bg:9 10 12;--fg:229 231 235;--muted:156 163 175}
|
||
body{background:rgb(var(--bg));color:rgb(var(--fg))}
|
||
.bubble{background:#0f1115;border-color:#1f2937}
|
||
.bridge .note{background:#0f1115;border-color:#1f2937;color:#d1d5db}
|
||
.markdown-body{--color-canvas-default:#0f1115;--color-fg-default:#e5e7eb;--color-border-default:#1f2937}
|
||
.copy-btn{background:#111827}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="min-h-screen flex flex-col">
|
||
<header class="topbar sticky top-0 z-40 w-full border-b border-gray-200/80 bg-white/80 dark:bg-black/30">
|
||
<div class="container px-4 py-3 grid grid-cols-3 items-center">
|
||
<div class="justify-self-start">
|
||
<a href="https://github.com/hi-language" target="_blank" rel="noopener" class="inline-flex items-center gap-2 text-sm text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white">
|
||
<i data-lucide="github" class="w-5 h-5"></i><span class="hidden sm:inline">GitHub</span>
|
||
</a>
|
||
</div>
|
||
<div class="justify-self-center">
|
||
<button class="pointer-events-none select-none h-9 px-4 badge bg-gray-900 text-white text-sm tracking-wide">Hi</button>
|
||
</div>
|
||
<div class="justify-self-end">
|
||
<span class="text-xs text-gray-500 dark:text-gray-400">alpha</span>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<main id="app" class="flex-1">
|
||
<section class="hero">
|
||
<div class="container px-4 py-10 sm:py-16">
|
||
<div class="bubble bubble-shadow">
|
||
<article class="markdown-body">
|
||
<h1 align="center">Hi — a corely symbolic language</h1>
|
||
<p align="center"><em>Inspired by JavaScript. Designed to read the same in every culture.</em></p>
|
||
<p>
|
||
Hi keeps the core of the language mostly <strong>symbols</strong> and uses words only when words are truly clearer. Fewer keywords, fewer fences to learning, more global legibility.
|
||
</p>
|
||
<ul>
|
||
<li><strong>Declaration:</strong> <code>:</code></li>
|
||
<li><strong>Assignment:</strong> <code>=</code></li>
|
||
<li><strong>Private:</strong> <code>#</code> prefix</li>
|
||
<li><strong>Blocks:</strong> <code>{}</code> is always both an object <em>and</em> a callable block</li>
|
||
<li><strong>Print:</strong> <code>_()</code></li>
|
||
</ul>
|
||
<p class="text-sm text-gray-500">Below, code uses JavaScript highlighting while Hi’s highlighter is being finalized.</p>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<div class="bridge">
|
||
<div class="blobs"><div class="blob a"></div><div class="blob b"></div><div class="blob c"></div></div>
|
||
<div class="note"><i data-lucide="sparkles" class="w-4 h-4 inline -mt-0.5"></i> A quick taste</div>
|
||
</div>
|
||
|
||
<section class="container px-4 py-6">
|
||
<div class="bubble bubble-shadow">
|
||
<div data-md="#intro" class="markdown-body"></div>
|
||
</div>
|
||
</section>
|
||
|
||
<div class="bridge">
|
||
<div class="blobs"><div class="blob a"></div><div class="blob b"></div><div class="blob c"></div></div>
|
||
<div class="note">Blocks that think and hold state</div>
|
||
</div>
|
||
|
||
<section class="container px-4 py-6">
|
||
<div class="bubble bubble-shadow">
|
||
<div data-md="#blocks" class="markdown-body"></div>
|
||
</div>
|
||
</section>
|
||
|
||
<div class="bridge">
|
||
<div class="blobs"><div class="blob a"></div><div class="blob b"></div><div class="blob c"></div></div>
|
||
<div class="note">Conditions, truthiness, and clarity</div>
|
||
</div>
|
||
|
||
<section class="container px-4 py-6">
|
||
<div class="bubble bubble-shadow">
|
||
<div data-md="#flow" class="markdown-body"></div>
|
||
</div>
|
||
</section>
|
||
|
||
<div class="bridge">
|
||
<div class="blobs"><div class="blob a"></div><div class="blob b"></div><div class="blob c"></div></div>
|
||
<div class="note">Arrays and iteration</div>
|
||
</div>
|
||
|
||
<section class="container px-4 py-6">
|
||
<div class="bubble bubble-shadow">
|
||
<div data-md="#arrays" class="markdown-body"></div>
|
||
</div>
|
||
</section>
|
||
|
||
<div class="bridge">
|
||
<div class="blobs"><div class="blob a"></div><div class="blob b"></div><div class="blob c"></div></div>
|
||
<div class="note">Design notes</div>
|
||
</div>
|
||
|
||
<section class="container px-4 py-6">
|
||
<div class="bubble bubble-shadow">
|
||
<div data-md="#design" class="markdown-body"></div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="container px-4 py-10">
|
||
<div class="bubble bubble-shadow">
|
||
<div data-md="#footer" class="markdown-body"></div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<footer class="border-t border-gray-200/80 py-6">
|
||
<div class="container px-4 text-sm flex flex-wrap items-center justify-between gap-3">
|
||
<div class="text-gray-500">Made with <span title="care">♥</span> for a wider world</div>
|
||
<div class="flex items-center gap-4">
|
||
<a href="https://github.com/hi-language" target="_blank" rel="noopener" class="inline-flex items-center gap-1"><i data-lucide="github" class="w-4 h-4"></i> Source</a>
|
||
<a href="https://github.com/hi-language/hi-language.github.io/issues/new" target="_blank" rel="noopener" class="inline-flex items-center gap-1"><i data-lucide="message-square" class="w-4 h-4"></i> Feedback</a>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<script id="intro" type="text/markdown">
|
||
~~~js
|
||
// Hello, world — in Hi
|
||
_("Hi world")
|
||
|
||
// A few building blocks:
|
||
name: "Orion" // declare & set
|
||
age: 7 + 1 // expressions are JS-like
|
||
_(name + " is " + age) // Orion is 8
|
||
|
||
// Declaration vs Assignment
|
||
greeting: "Hi"
|
||
greeting = greeting + " there!"
|
||
_(greeting) // "Hi there!"
|
||
~~~
|
||
</script>
|
||
|
||
<script id="blocks" type="text/markdown">
|
||
~~~js
|
||
// In Hi, {} creates a Block.
|
||
// A Block is both an object (with properties) and a function (callable).
|
||
|
||
// 1) Function Block
|
||
sayHi: {
|
||
_("Hi")
|
||
}
|
||
sayHi() // invokes the block
|
||
|
||
// 2) Object Block
|
||
player: {
|
||
name: "Orion" // public
|
||
#hp: 100 // private (internal to the block)
|
||
}
|
||
_(player.name) // "Orion"
|
||
|
||
// 3) Hybrid Block (state + methods)
|
||
counter: {
|
||
#value: 0
|
||
inc: {
|
||
value = value + 1
|
||
_("The count is now: " + value)
|
||
}
|
||
}
|
||
counter.inc() // The count is now: 1
|
||
counter.inc() // The count is now: 2
|
||
|
||
// Parameters
|
||
withParams: (str) {
|
||
_(str)
|
||
}
|
||
withParams("Hello!") // "Hello!"
|
||
~~~
|
||
</script>
|
||
|
||
<script id="flow" type="text/markdown">
|
||
~~~js
|
||
// Truthiness
|
||
0 // falsy (official false)
|
||
!0 // truthy (official true)
|
||
4 // truthy
|
||
"" // falsy (truthy if full)
|
||
{} // falsy (truthy if full)
|
||
[] // falsy (truthy if full)
|
||
-0 // falsy / null-ish / undefined-ish
|
||
|
||
// Equality: '==' in Hi is JS's '===' by default
|
||
(2 == 2) // true
|
||
("2" == 2) // false
|
||
|
||
// If / Else — expressions that return a value
|
||
score: 85
|
||
grade: (score > 90) ? { "A" }
|
||
: (score > 80) ? { "B" }
|
||
: { "C" }
|
||
_(grade) // "B"
|
||
|
||
// Ternary as a function
|
||
tern: (cond) ? {"A"} : {"B"}
|
||
_( tern(0) ) // "B"
|
||
_( tern(!0) ) // "A"
|
||
~~~
|
||
</script>
|
||
|
||
<script id="arrays" type="text/markdown">
|
||
~~~js
|
||
// Arrays
|
||
primes: [2, 3, 5, 7]
|
||
|
||
// Access
|
||
firstPrime: primes[0]
|
||
|
||
// Mutation
|
||
primes[0] = 1
|
||
_(primes) // [1, 3, 5, 7]
|
||
|
||
// Loops
|
||
// for: (init; condition; step) * { ... }
|
||
(i: 0; i < 3; i = i + 1) * {
|
||
_("i = " + i)
|
||
}
|
||
// while: (cond) * { ... }
|
||
(n: 3; n > 0) * {
|
||
_("n = " + n)
|
||
n = n - 1
|
||
}
|
||
|
||
// Control flow inside loops
|
||
>> // continue
|
||
^ // break
|
||
~~~
|
||
</script>
|
||
|
||
<script id="design" type="text/markdown">
|
||
Hi’s bet is simple: if the core remains mostly symbolic, the language becomes easier to <em>share</em>. Symbols travel. They compress meaning, avoid translation drift, and are friendly to learners who think first in patterns, then in words.
|
||
|
||
- The colon <code>:</code> declares. It feels like naming, because it is.
|
||
- The equals <code>=</code> assigns. What’s on the right flows into the left.
|
||
- Blocks <code>{}</code> unify two worlds (object + function) so composition feels natural.
|
||
- Privacy with <code>#</code> is local, honest, and easy to scan.
|
||
|
||
This minimal surface area opens doors: fewer new words to memorize, less syntax to juggle, and more attention for the idea you’re expressing.
|
||
|
||
As a language nerd: I’m excited by how Hi’s “both/and” Blocks make small programs read like living notebooks. You can store state, compute, and export behavior without switching mental modes. It’s a gentle on‑ramp to real power.
|
||
</script>
|
||
|
||
<script id="footer" type="text/markdown">
|
||
> Hi is in active development. The spec, tooling, and a proper syntax highlighter are on the way. This page updates as we ship. If you have ideas or critiques, we’d love to hear from you.
|
||
</script>
|
||
|
||
<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.11.1/build/highlight.min.js"></script>
|
||
<script>
|
||
(()=>{const $=s=>document.querySelector(s),$$=s=>[...document.querySelectorAll(s)],md=window.markdownit({html:false,linkify:true,typographer:true,breaks:true})
|
||
const icons=()=>window.lucide&&lucide.createIcons()
|
||
function enhance(root){root.querySelectorAll('pre>code').forEach((c,i)=>{const p=c.parentElement;p.classList.add('relative');if(p.querySelector('.code-ops'))return;const n=c.textContent.length,t=n>=1e3?(n/1e3).toFixed(1)+'K':n+'',ops=document.createElement('div');ops.className='code-ops'
|
||
const cnt=document.createElement('span');cnt.className='char-count';cnt.textContent=t+' chars'
|
||
const btn=document.createElement('button');btn.className='copy-btn';btn.textContent='Copy';btn.onclick=async e=>{e.stopPropagation();try{await navigator.clipboard.writeText(c.innerText);btn.textContent='Copied';setTimeout(()=>btn.textContent='Copy',1200)}catch{}}
|
||
ops.append(cnt,btn);p.append(ops)})}
|
||
$$('[data-md]').forEach(d=>{const src=d.getAttribute('data-md'),tpl=$(src);if(!tpl)return;d.innerHTML=md.render(tpl.textContent||'');d.querySelectorAll('pre code').forEach(el=>{try{hljs.highlightElement(el)}catch{}});enhance(d)})
|
||
icons()
|
||
})();
|
||
</script>
|
||
</body>
|
||
</html>
|