mirror of
https://github.com/hi-language/hi-language.github.io.git
synced 2026-01-14 08:38:36 +00:00
303 lines
10 KiB
HTML
303 lines
10 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>
|
|
|
|
<!-- 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 */
|
|
}
|
|
/* Style for code blocks */
|
|
.markdown-body pre {
|
|
background-color: #ffffff;
|
|
border: 1px solid #e5e7eb; /* border-gray-200 */
|
|
border-radius: 0.75rem; /* rounded-xl */
|
|
padding: 1rem;
|
|
overflow-x: auto;
|
|
}
|
|
.markdown-body code {
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-size: 13px;
|
|
}
|
|
/* Style for inline code snippets, inspired by your example */
|
|
: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;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="text-gray-800 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-center">
|
|
<button class="hi-button text-2xl font-bold text-cyan-600 px-6 py-2 rounded-lg cursor-default transition-all duration-300 hover:bg-cyan-50">
|
|
Hi
|
|
</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>
|
|
|
|
<script>
|
|
// The entire documentation for the "Hi" language, written in Markdown.
|
|
const markdownContent = `
|
|
# Say Hi to Hi 👋
|
|
|
|
Welcome to **Hi**. A new programming language born from a simple idea: what if code was less about words and more about intent? Inspired by the elegance of JavaScript but redesigned from the ground up, Hi uses symbols as its core.
|
|
|
|
This isn't just a stylistic choice. It's a philosophy. By removing keyword barriers, we create a language that feels more universal. It's for the code golfer who loves conciseness, for the AI that needs to parse and generate logic without linguistic bias, and for the developer who dreams of a more fluid, expressive tool.
|
|
|
|
Writing in Hi feels less like typing and more like composing. Let's begin.
|
|
|
|
The first thing you'll ever do is, of course, say "Hi". The underscore \`_\` is our universal "output" function.
|
|
|
|
\`\`\`javascript
|
|
// This is hello world in Hi
|
|
_("Hi world")
|
|
\`\`\`
|
|
|
|
## Variables: Giving Things a Name
|
|
|
|
Hi separates the act of *creating* a name from *changing* what it points to. This clarity is fundamental.
|
|
|
|
- \`:\` is for **Declaration**. It brings a variable into existence.
|
|
- \`=\` is for **Assignment**. It changes the value of an existing variable.
|
|
|
|
\`\`\`javascript
|
|
// Declare a 'user' variable and initialize it
|
|
user: "Alex"
|
|
|
|
// Assign a new value to 'user'
|
|
user = "Alex Prime"
|
|
|
|
_(user) // Prints "Alex Prime"
|
|
\`\`\`
|
|
|
|
## The Heart of Hi: The Block \`{}\`
|
|
|
|
This is where everything changes. In most languages, \`{}\` might define an object, a scope, or a function body. In Hi, it does all of that, all at once. It creates a **Block**.
|
|
|
|
A Block is a container for both state (properties) and behavior (executable code). It is simultaneously an object and a function. This unification is incredibly powerful.
|
|
|
|
### The Block as a Function
|
|
A Block with no named properties inside is treated as a simple function.
|
|
|
|
\`\`\`javascript
|
|
sayHi: {
|
|
_("Hi from inside a Block!")
|
|
}
|
|
|
|
sayHi() // Executes the code inside
|
|
\`\`\`
|
|
|
|
### The Block as an Object
|
|
When you add named properties, it behaves like an object. Properties are public by default. Use \`#\` to make them private.
|
|
|
|
\`\`\`javascript
|
|
player: {
|
|
name: "Orion", // public property
|
|
#hp: 100 // private property, inaccessible from outside
|
|
}
|
|
|
|
_(player.name) // Prints "Orion"
|
|
// _(player.#hp) // This would cause an error
|
|
\`\`\`
|
|
|
|
### The Hybrid: Where the Magic Happens
|
|
Here is the true power of the Block. It can hold both executable code and state, including private state.
|
|
|
|
\`\`\`javascript
|
|
counter: {
|
|
#value: 0 // A private, encapsulated state
|
|
|
|
inc: {
|
|
#value = #value + 1
|
|
_("Count is now: " + #value)
|
|
},
|
|
|
|
get: {
|
|
#value // last expression is returned
|
|
}
|
|
}
|
|
|
|
counter.inc() // Prints "Count is now: 1"
|
|
counter.inc() // Prints "Count is now: 2"
|
|
_(counter.get()) // Prints 2
|
|
\`\`\`
|
|
|
|
This feels... right. In JavaScript, to achieve this encapsulation, you'd need a Class or a closure pattern. The state (\`value\`) would either be part of a public \`this\` or live outside the object itself, feeling like a workaround. In Hi, the state and the methods that operate on it live together in a single, elegant, self-contained unit. It's modularity perfected.
|
|
|
|
### Blocks with Parameters
|
|
Naturally, Blocks can accept parameters, just like functions.
|
|
|
|
\`\`\`javascript
|
|
greet: (name) {
|
|
_("Hi, " + name)
|
|
}
|
|
|
|
greet("Orion") // Prints "Hi, Orion"
|
|
\`\`\`
|
|
|
|
## Truth, Lies, and Flow
|
|
|
|
Hi simplifies logic to its bare essentials. There are no \`true\`, \`false\`, or \`null\` keywords. There are only values and their inherent "truthiness". This design is clean and a gift to code golfers.
|
|
|
|
- \`0\` is the official **falsy** value. It's the one and only \`false\`.
|
|
- \`!0\` is the official **truthy** value. It's the one and only \`true\`.
|
|
- \`-0\` represents **nothingness**. It's our version of \`null\` and \`undefined\`.
|
|
- Any non-zero number is truthy.
|
|
- An empty string \`""\`, empty block \`{}\`, or empty array \`[]\` is falsy. If they contain anything, they become truthy.
|
|
- \`==\` is a strict equality check, equivalent to JavaScript's \`===\`.
|
|
|
|
### Unified Conditionals: The Ternary \`? :\`
|
|
|
|
There is no \`if\`, \`else if\`, or \`switch\`. There is only one, unified structure for conditional logic, modeled after the ternary operator. Its result can be assigned to a variable, as the last expression in a chosen block is always returned.
|
|
|
|
\`\`\`javascript
|
|
// A simple "if"
|
|
(1 < 2) ? {
|
|
_("One is less than two.")
|
|
}
|
|
|
|
// An "if-else"
|
|
isRaining: !0
|
|
action: (isRaining) ? { "Take umbrella" } : { "Enjoy the sun" }
|
|
|
|
_(action) // Prints "Take umbrella"
|
|
|
|
// Chained like an "if / else if / else"
|
|
score: 85
|
|
grade: (score > 90) ? { "A" }
|
|
: (score > 80) ? { "B" }
|
|
: { "C" }
|
|
|
|
_(grade) // Prints "B"
|
|
\`\`\`
|
|
This is elegance. One pattern for all conditional logic. It's predictable, expressive, and reduces the surface area of the language.
|
|
|
|
## Collections and Repetition
|
|
|
|
The fundamentals are here, but with Hi's symbolic twist.
|
|
|
|
### Arrays \`[]\`
|
|
Arrays are simple lists of values, just as you'd expect.
|
|
|
|
\`\`\`javascript
|
|
primes: [2, 3, 5, 7]
|
|
|
|
// Access by index
|
|
firstPrime: primes[0]
|
|
_(firstPrime) // Prints 2
|
|
|
|
// Mutate an element
|
|
primes[0] = 1
|
|
_(primes) // Prints [1, 3, 5, 7]
|
|
\`\`\`
|
|
|
|
### Loops with \`*\`
|
|
The \`*\` symbol is our loop operator. It takes a condition and a Block to execute.
|
|
|
|
\`\`\`javascript
|
|
// A "for" loop
|
|
(i: 0; i < 3; i = i + 1) * {
|
|
_("Looping: " + i)
|
|
}
|
|
// Prints "Looping: 0", "Looping: 1", "Looping: 2"
|
|
|
|
// A "while" loop
|
|
count: 3
|
|
(count > 0) * {
|
|
_("Countdown: " + count)
|
|
count = count - 1
|
|
}
|
|
// Prints "Countdown: 3", "Countdown: 2", "Countdown: 1"
|
|
|
|
// Loop Control
|
|
// >> is 'continue'
|
|
// ^ is 'break'
|
|
(i: 0; i < 10; i = i + 1) * {
|
|
(i == 2) ? { >> } // Skip the rest of this iteration
|
|
(i == 5) ? { ^ } // Break out of the loop entirely
|
|
_("i is " + i)
|
|
}
|
|
// Prints: i is 0, i is 1, i is 3, i is 4
|
|
\`\`\`
|
|
|
|
## The Journey Ahead
|
|
|
|
<div class="flex items-center gap-4 p-4 my-6 border border-gray-200 rounded-xl bg-white">
|
|
<i data-lucide="file-code-2" class="text-cyan-600"></i>
|
|
<p class="text-gray-600">Hi is currently in active development. The concepts here form our foundation, but the language is still growing and evolving. We're excited about building a language that's not just powerful, but beautiful to write and a joy to think in. Join us on the journey.</p>
|
|
</div>
|
|
|
|
`;
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
// Initialize Markdown-it
|
|
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>`;
|
|
}
|
|
});
|
|
|
|
// Render Markdown
|
|
const contentDiv = document.getElementById('content');
|
|
contentDiv.innerHTML = md.render(markdownContent);
|
|
|
|
// Activate Lucide Icons
|
|
lucide.createIcons();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|