mirror of
https://github.com/hi-language/hi-language.github.io.git
synced 2026-01-14 08:38:36 +00:00
273 lines
9.2 KiB
HTML
273 lines
9.2 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 Language</title>
|
|
<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>
|
|
.markdown-body{font-size:16px;line-height:1.7;padding:2rem 1.5rem;max-width:800px;margin:auto}.markdown-body pre{overflow:auto;background-color:#f6f8fa!important}.markdown-body h1{padding-bottom:.5em;border-bottom:1px solid #d0d7de;font-size:2.5em}.markdown-body h3{font-size:1.5em;padding-bottom:.3em;border-bottom:1px solid #d0d7de;margin-top:2.5rem}.markdown-body hr{margin:2.5rem 0}
|
|
body{background-color:#fcfcfc}
|
|
.blob-container{position:relative;height:8rem;width:100%;overflow:hidden;margin:-4rem 0}.blob{position:absolute;border-radius:9999px;filter:blur(60px);opacity:0.25;z-index:-1}.blob1{width:400px;height:300px;background:radial-gradient(circle at center, #a855f7, #3b82f6);top:-50px;left:calc(50% - 200px)}.blob2{width:500px;height:250px;background:radial-gradient(circle at center, #ec4899, #f97316);top:0;left:10%}.blob3{width:350px;height:350px;background:radial-gradient(circle at center, #14b8a6, #22c55e);top:-80px;right:5%}.blob4{width:450px;height:300px;background:radial-gradient(circle at center, #ef4444, #eab308);top:-40px;left:25%}
|
|
@media(min-width:768px){.markdown-body{font-size:17px;padding:3rem 2rem}}
|
|
</style>
|
|
</head>
|
|
<body class="text-gray-900 selection:bg-purple-500/10">
|
|
<div class="flex flex-col h-dvh max-h-dvh overflow-hidden">
|
|
<header id="topbar" class="sticky top-0 z-20 bg-white/80 backdrop-blur border-b border-gray-200">
|
|
<div class="mx-auto w-full max-w-none px-4 py-3 grid grid-cols-3 items-center">
|
|
<button id="sidebarBtnLeft" class="h-8 w-8 rounded-xl bg-gray-100 hover:bg-gray-200 active:scale-[.99] transition flex items-center justify-center" title="Menu"><i data-lucide="panel-left" class="h-5 w-5"></i></button>
|
|
<div class="justify-self-center text-lg font-bold tracking-wider">Hi</div>
|
|
<div class="justify-self-end"></div>
|
|
</div>
|
|
</header>
|
|
<div class="flex flex-1 overflow-hidden">
|
|
<div id="sidebarOverlay" class="fixed inset-0 z-40 bg-black/20 hidden md:hidden"></div>
|
|
<aside id="sidebarLeft" class="fixed md:relative inset-y-0 left-0 z-50 w-64 max-w-[85vw] bg-white border-r border-gray-200 transform -translate-x-full transition-transform duration-200 ease-out flex flex-col md:translate-x-0 md:shadow-none">
|
|
<div class="p-3 border-b text-sm font-semibold">Hi Language</div>
|
|
<div class="flex-1 overflow-y-auto">
|
|
<div class="p-2"><button class="w-full text-left px-3 py-2 rounded-md bg-gray-100 font-medium text-sm">Introduction</button></div>
|
|
</div>
|
|
</aside>
|
|
<main id="chat" class="flex-1 overflow-y-auto">
|
|
<div id="content" class="markdown-body"></div>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
<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>
|
|
document.addEventListener('DOMContentLoaded',()=>{
|
|
const qs=s=>document.querySelector(s),esc=s=>s.replace(/[&<>'"]/g,c=>({'&':'&','<':'<','>':'>','"':'"'}[c]||''));
|
|
const contentEl=qs('#content'),sidebar=qs('#sidebarLeft'),overlay=qs('#sidebarOverlay'),sidebarBtn=qs('#sidebarBtnLeft');
|
|
const mdContent=`# Welcome to Hi.
|
|
|
|
A programming language designed from the ground up for a global community. Inspired by the simplicity and dynamism of JavaScript, but with a core philosophy that prioritizes symbols over keywords.
|
|
|
|
---
|
|
|
|
<div class="blob-container"><div class="blob blob1"></div></div>
|
|
|
|
### A Personal Note
|
|
|
|
When I started sketching out *Hi*, I wasn't just thinking about syntax. I was thinking about communication. Programming is a form of communication—between a developer and a computer, yes, but also between developers themselves. English is the de facto language of code, but what if we could lower that barrier, even slightly? By relying on a more universal set of symbols, *Hi* aims to be a little more approachable, a little more intuitive, no matter what your native language is. It's an experiment in clarity and minimalism.
|
|
|
|
### The Basics: Hello World
|
|
|
|
Let's start with the traditional greeting. The underscore \`_\` is our primary function for output, similar to \`console.log\`.
|
|
|
|
\`\`\`js
|
|
// This is hello world in Hi
|
|
_("Hi world")
|
|
\`\`\`
|
|
|
|
### Variables: Declaration & Assignment
|
|
|
|
*Hi* simplifies variable management with two core symbols:
|
|
|
|
- \`:\` for declaration.
|
|
- \`=\` for assignment.
|
|
|
|
\`\`\`js
|
|
// Declare a variable 'message'
|
|
message: "Hello from Hi!"
|
|
|
|
// Assign a new value to it
|
|
message = "The value has changed."
|
|
|
|
_(message)
|
|
\`\`\`
|
|
|
|
---
|
|
|
|
<div class="blob-container"><div class="blob blob2"></div></div>
|
|
|
|
### The Core Concept: The Block \`{}\`
|
|
|
|
This is where *Hi* truly diverges. The \`{}\` syntax doesn't create a simple "object" or "function". It creates a **Block**. A Block is a versatile container that can hold both properties and executable code. Think of it as a living entity that is always both an object and a function, simultaneously.
|
|
|
|
#### Function Blocks
|
|
|
|
If a Block's primary purpose is to be executed, it acts like a function.
|
|
|
|
\`\`\`js
|
|
sayHi: {
|
|
_("Hi")
|
|
}
|
|
|
|
// Call it just like a function
|
|
sayHi()
|
|
\`\`\`
|
|
|
|
#### Object Blocks
|
|
|
|
If it's primarily for storing data, it acts like an object. Properties are public by default. Use \`#\` to make them private.
|
|
|
|
\`\`\`js
|
|
player: {
|
|
name: "Orion" // public property
|
|
#hp: 100 // private property
|
|
}
|
|
|
|
_(player.name) // "Orion"
|
|
// _(player.hp) -> This would be an error
|
|
\`\`\`
|
|
|
|
#### Hybrid Blocks
|
|
|
|
The true power of Blocks is their ability to be both. Here's a stateful counter that exposes a method to modify its internal, private state.
|
|
|
|
\`\`\`js
|
|
counter: {
|
|
#value: 0
|
|
|
|
inc: {
|
|
// #value is accessible from within the parent block
|
|
#value = #value + 1
|
|
_("The count is now: " + #value)
|
|
}
|
|
}
|
|
|
|
counter.inc() // The count is now: 1
|
|
counter.inc() // The count is now: 2
|
|
\`\`\`
|
|
|
|
#### Blocks with Parameters
|
|
|
|
Parameters are defined in parentheses, just like in JavaScript.
|
|
|
|
\`\`\`js
|
|
withParams: (str) {
|
|
_(str)
|
|
}
|
|
|
|
withParams("This string gets printed.")
|
|
\`\`\`
|
|
|
|
---
|
|
|
|
<div class="blob-container"><div class="blob blob3"></div></div>
|
|
|
|
### Logic & Control Flow
|
|
|
|
#### Truthiness & Falsiness
|
|
|
|
*Hi* has a simple but powerful set of rules for what is considered "true" or "false".
|
|
|
|
- \`0\` is the official \`false\` value.
|
|
- \`!0\` (not zero) is the official \`true\` value.
|
|
- Numbers other than \`0\` are truthy.
|
|
- Empty strings \`""\`, Blocks \`{}\`, and arrays \`[]\` are falsy. They become truthy once they contain something.
|
|
- \`-0\` is a special value representing \`null\` or \`undefined\`.
|
|
- \`==\` provides strict equality, equivalent to JavaScript's \`===\`.
|
|
|
|
#### Conditionals
|
|
|
|
Conditional logic uses a syntax inspired by the ternary operator, making \`if\` statements expressions that return values.
|
|
|
|
\`\`\`js
|
|
// Simple if
|
|
(1 == 1) ? { _("It's true!") }
|
|
|
|
// If / else
|
|
// The last evaluated expression in a Block is its return value.
|
|
result: (5 > 10) ? { "Five is greater" } : { "Five is not greater" }
|
|
|
|
_(result) // "Five is not greater"
|
|
\`\`\`
|
|
|
|
The structure is naturally suited for \`else if\` chains.
|
|
|
|
\`\`\`js
|
|
score: 85
|
|
|
|
grade: (score >= 90) ? { "A" }
|
|
: (score >= 80) ? { "B" }
|
|
: { "C" }
|
|
|
|
_(grade) // "B"
|
|
\`\`\`
|
|
|
|
---
|
|
|
|
### Data Structures: Arrays
|
|
|
|
Arrays are ordered lists of values, declared with \`[]\`.
|
|
|
|
\`\`\`js
|
|
primes: [2, 3, 5, 7]
|
|
|
|
// Access elements with zero-based indexing
|
|
firstPrime: primes[0]
|
|
_(firstPrime) // 2
|
|
|
|
// Mutate elements
|
|
primes[0] = 1
|
|
_(primes) // [1, 3, 5, 7]
|
|
\`\`\`
|
|
|
|
---
|
|
|
|
<div class="blob-container"><div class="blob blob4"></div></div>
|
|
|
|
### Loops
|
|
|
|
The \`*\` symbol signifies repetition, creating a loop.
|
|
|
|
#### For Loops
|
|
|
|
The syntax is a classic three-part C-style declaration followed by \`*\` and a Block.
|
|
|
|
\`\`\`js
|
|
(i: 0; i < 3; i = i + 1) * {
|
|
_("Loop iteration: " + i)
|
|
}
|
|
// Prints 0, 1, 2
|
|
\`\`\`
|
|
|
|
#### While Loops
|
|
|
|
For a \`while\` loop, simply provide a condition.
|
|
|
|
\`\`\`js
|
|
count: 0
|
|
(count < 3) * {
|
|
_("While loop: " + count)
|
|
count = count + 1
|
|
}
|
|
\`\`\`
|
|
|
|
#### Loop Control
|
|
|
|
*Hi* provides symbols to control loop flow:
|
|
|
|
- \`>>\` to \`continue\` to the next iteration.
|
|
- \`^\` to \`break\` out of the loop.
|
|
|
|
\`\`\`js
|
|
(i: 0; i < 10; i = i + 1) * {
|
|
(i == 2) ? { >> } // Skip iteration 2
|
|
(i == 5) ? { ^ } // Stop when i is 5
|
|
_("i is " + i)
|
|
}
|
|
// Prints: 0, 1, 3, 4
|
|
\`\`\`
|
|
---
|
|
|
|
### The Road Ahead
|
|
|
|
*Hi* is in its early stages of development. The core concepts are taking shape, but there is much more to build and refine. This page will be updated as the language evolves. Thank you for taking a look.
|
|
`;
|
|
const md=window.markdownit({html:!0,highlight:(s,l)=>{if(l&&hljs.getLanguage(l))try{return hljs.highlight(s,{language:l,ignoreIllegals:!0}).value}catch(e){}return esc(s)}});
|
|
contentEl.innerHTML=md.render(mdContent);
|
|
lucide.createIcons();
|
|
const toggle=()=>{sidebar.classList.toggle('-translate-x-full');overlay.classList.toggle('hidden')};
|
|
sidebarBtn.onclick=toggle;overlay.onclick=toggle;
|
|
})
|
|
</script>
|
|
</body>
|
|
</html>
|