mirror of
https://github.com/hi-language/hi-language.github.io.git
synced 2026-01-14 00:28:05 +00:00
120 lines
6.3 KiB
HTML
120 lines
6.3 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 tiny, symbolic, AI-first programming language</title>
|
||
<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=Inter:wght@400;600;800&family=Fira+Code:wght@400;600&display=swap" rel=stylesheet>
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<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">
|
||
<style>
|
||
:root{color-scheme:light}
|
||
*{box-sizing:border-box}
|
||
html,body{height:100%}
|
||
body{font-family:Inter,ui-sans-serif,system-ui,Segoe UI,Roboto,Apple Color Emoji,Noto Color Emoji,Arial,Helvetica,sans-serif}
|
||
code,pre,.font-mono{font-family:"Fira Code",ui-monospace,Menlo,Consolas,monospace}
|
||
.markdown-body{font-size:12px;line-height:1.6}
|
||
.markdown-body pre{overflow:auto}
|
||
.copy-btn{position:absolute;top:.4rem;right:.4rem;font-size:10px;padding:.125rem .375rem;border-radius:.375rem;background:rgba(17,17,17,.9);color:#fff}
|
||
pre{border:1px solid #e5e7eb;border-radius:.5rem;position:relative}
|
||
.hero-grad{--g:radial-gradient(60% 60% at 50% 40%,rgba(120,119,198,.15),rgba(255,255,255,0) 60%);background:
|
||
var(--g),conic-gradient(from 180deg at 50% 50%,#f0f5ff,#fff,#f0f5ff)}
|
||
.badge{border:1px solid #e5e7eb;background:#fff;border-radius:.5rem;padding:.125rem .375rem;font-size:10px}
|
||
kbd{border:1px solid #e5e7eb;border-bottom-width:2px;border-radius:.375rem;background:#fff;padding:.05rem .3rem;font-size:10px}
|
||
a.anchor{color:#111827;text-decoration:none;border-bottom:1px dashed #d1d5db}
|
||
</style>
|
||
<script>
|
||
tailwind.config={theme:{extend:{fontFamily:{sans:['Inter','ui-sans-serif','system-ui'],mono:['Fira Code','ui-monospace']}}}}
|
||
</script>
|
||
</head>
|
||
<body class="min-h-dvh bg-white text-gray-900 selection:bg-black/10 text-xs">
|
||
<header class="sticky top-0 z-20 bg-white/80 backdrop-blur border-b border-gray-200">
|
||
<div class="mx-auto max-w-3xl px-3 py-2 grid grid-cols-3 items-center">
|
||
<nav class="flex gap-2 items-center">
|
||
<a href="#overview" class="badge">Overview</a>
|
||
<a href="#syntax" class="badge">Syntax</a>
|
||
<a href="#blocks" class="badge">Blocks</a>
|
||
</nav>
|
||
<div class="flex items-center justify-center">
|
||
<button aria-label="Hi" disabled class="pointer-events-none select-none h-8 px-4 rounded-full bg-gray-200 text-gray-900 font-semibold">Hi</button>
|
||
</div>
|
||
<div class="flex justify-end items-center gap-1">
|
||
<a class="badge hidden sm:inline" href="https://github.com/hi-language" target="_blank" rel="noreferrer">GitHub</a>
|
||
<button id="copyAll" class="badge" title="Copy all examples">Copy all</button>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<main class="mx-auto max-w-3xl px-3">
|
||
<section class="hero-grad rounded-2xl border border-gray-200 mt-4 p-4 sm:p-6">
|
||
<div class="flex items-center gap-2 text-[11px] text-gray-600 mb-2">
|
||
<span class="badge">Symbolic</span>
|
||
<span class="badge">JS-inspired</span>
|
||
<span class="badge">AI-first</span>
|
||
<span class="badge">Code-golf friendly</span>
|
||
</div>
|
||
<div class="flex items-center gap-3">
|
||
<div class="h-12 w-12 rounded-xl bg-gradient-to-br from-black to-gray-600 text-white grid place-items-center font-extrabold">Hi</div>
|
||
<div>
|
||
<h1 class="text-base sm:text-lg font-extrabold leading-tight">Hi — a tiny, symbolic, AI-first programming language</h1>
|
||
<p class="text-[11px] sm:text-xs text-gray-600">Keep the core mostly symbols so everyone can read/write it. Let humans and AIs meet at the shortest path.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mt-4 grid sm:grid-cols-[1fr,220px] gap-4">
|
||
<article id="mdOut" class="markdown-body"></article>
|
||
<aside class="rounded-xl border border-gray-200 bg-white/70 p-3">
|
||
<div class="text-[11px] text-gray-500 mb-2">Shape of a program</div>
|
||
<svg viewBox="0 0 220 180" width="100%" height="180" xmlns="http://www.w3.org/2000/svg">
|
||
<defs>
|
||
<linearGradient id="g1" x1="0" x2="1">
|
||
<stop offset="0%" stop-color="#111827"/>
|
||
<stop offset="100%" stop-color="#4b5563"/>
|
||
</linearGradient>
|
||
</defs>
|
||
<rect x="1" y="1" width="218" height="178" rx="12" fill="#fff" stroke="#e5e7eb"/>
|
||
<g font-family="Inter" font-size="10" fill="#111827">
|
||
<rect x="18" y="18" width="70" height="32" rx="7" fill="#f3f4f6" stroke="#e5e7eb"/>
|
||
<text x="53" y="38" text-anchor="middle">Source.hi</text>
|
||
<rect x="132" y="18" width="70" height="32" rx="7" fill="#f3f4f6" stroke="#e5e7eb"/>
|
||
<text x="167" y="38" text-anchor="middle">Blocks</text>
|
||
|
||
<path d="M88 34h36" stroke="url(#g1)" stroke-width="1.2"/>
|
||
<polygon points="125,34 119,31 119,37" fill="#4b5563"/>
|
||
|
||
<rect x="18" y="74" width="184" height="36" rx="7" fill="#f9fafb" stroke="#e5e7eb"/>
|
||
<text x="110" y="96" text-anchor="middle">Symbols: <tspan fill="#374151">: = { } ( ) [ ] # ? *</tspan></text>
|
||
|
||
<rect x="18" y="128" width="184" height="32" rx="7" fill="#eef2ff" stroke="#e5e7eb"/>
|
||
<text x="110" y="147" text-anchor="middle">Object ∧ Function = Block</text>
|
||
</g>
|
||
</svg>
|
||
<div class="mt-2 text-[11px] text-gray-600">
|
||
In Hi, a Block is both an object and a function. The last expression returns. Private fields start with <code>#</code>.
|
||
</div>
|
||
</aside>
|
||
</div>
|
||
</section>
|
||
|
||
<footer class="py-8 text-center text-[11px] text-gray-500">
|
||
<div class="mb-2">Made with markdown-it, highlight.js (JS mode), and lucide icons.</div>
|
||
<div>Hi is early and evolving. Syntax and semantics may change.</div>
|
||
</footer>
|
||
</main>
|
||
|
||
<script id="md" type="text/markdown">
|
||
<a id="overview"></a>
|
||
|
||
### Why Hi?
|
||
- Corely symbolic: fewer keywords, more universal glyphs. Symbols travel better across languages and scripts.
|
||
- JS-inspired pragmatism, but not JS. If you know JS, you’ll grok Hi fast.
|
||
- AI-first: short, rigid tokens make parsing/generation simpler for LLMs. Great for code-golf, great for machines.
|
||
|
||
> Printing uses `_()` — think “say”. Comments are `//`.
|
||
|
||
```js
|
||
// Hello, world
|
||
_("Hi world")
|