hi-language/hi-language.github.io
1
0
Fork 0
mirror of https://github.com/hi-language/hi-language.github.io.git synced 2026-01-14 08:38:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update index.html

Browse Source
This commit is contained in:
multipleof4
2025-09-15 00:29:47 -07:00
parent aa344a2a1f
commit 024e594930
1 changed files with 52 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
index.html
View File

@@ -1,5 +1,5 @@
<!DOCTYPE html> <!doctype html>
<html lang="en" class="dark"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -12,56 +12,72 @@
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <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 href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
<!-- Highlight.js for Code Highlighting --> <!-- Markdown & Highlighting Styles -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/github-markdown-css@5.8.1/github-markdown-light.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/styles/github.min.css"/>
<!-- Markdown-it and GitHub Markdown CSS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/14.0.0/markdown-it.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.5.1/github-markdown-dark.min.css">
<!-- Lucide Icons --> <!-- Lucide Icons -->
<script src="https://unpkg.com/lucide@latest"></script> <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> <style>
body { body {
font-family: 'Poppins', sans-serif; font-family: 'Poppins', sans-serif;
background-color: #111827; /* bg-gray-900 */ background-color: #f9fafb; /* bg-gray-50 */
color: #d1d5db; /* text-gray-300 */
} }
.markdown-body { .markdown-body {
background-color: transparent; font-size: 14px;
font-size: 0.8rem; /* Slightly smaller than default for a dense feel */
line-height: 1.7; line-height: 1.7;
background-color: transparent;
} }
.markdown-body h1, .markdown-body h2, .markdown-body h3 { .markdown-body h1, .markdown-body h2, .markdown-body h3 {
font-family: 'Poppins', sans-serif; font-family: 'Poppins', sans-serif;
font-weight: 600; font-weight: 600;
border-bottom-color: #374151; /* gray-700 */ 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 { .markdown-body code {
font-family: 'JetBrains Mono', monospace; font-family: 'JetBrains Mono', monospace;
font-size: 0.8rem; font-size: 13px;
} }
.markdown-body pre code { /* Style for inline code snippets, inspired by your example */
font-size: 0.8rem; :not(pre) > code {
font-size: 85%;
padding: .2em .4em;
margin: 0;
border-radius: 6px;
background-color: rgba(175, 184, 193, 0.2);
} }
.hi-button { .hi-button {
font-family: 'JetBrains Mono', monospace; font-family: 'JetBrains Mono', monospace;
} }
</style> </style>
</head> </head>
<body class="w-full min-h-screen flex flex-col items-center p-4 sm:p-8"> <body class="text-gray-800 selection:bg-cyan-400/20">
<div class="fixed top-0 left-0 right-0 h-16 bg-gray-900/50 backdrop-blur-sm flex items-center justify-center z-10 border-b border-gray-800"> <header class="sticky top-0 z-20 bg-white/80 backdrop-blur-sm border-b border-gray-200">
<button class="hi-button text-2xl font-bold text-cyan-400 px-6 py-2 rounded-lg cursor-default transition-all duration-300 hover:shadow-cyan-400/20 hover:shadow-lg"> <div class="mx-auto w-full max-w-4xl px-4 py-3 flex items-center justify-center">
Hi <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">
</button> Hi
</div> </button>
</div>
</header>
<main id="content" class="markdown-body w-full max-w-4xl mt-24"> <main class="w-full min-h-screen flex flex-col items-center p-4 sm:p-8">
<!-- Markdown content will be rendered here --> <div id="content" class="markdown-body w-full max-w-4xl">
<!-- Markdown content will be rendered here -->
</div>
</main> </main>
<script> <script>
@@ -151,7 +167,7 @@ counter.inc() // Prints "Count is now: 2"
_(counter.get()) // Prints 2 _(counter.get()) // Prints 2
\`\`\` \`\`\`
This feels... right. In JavaScript, to achieve this encapsulation, you'd need a Class or a closure pattern (like an IIFE). The state (\`value\`) would either be part of a public \`this\` or live outside the object itself. It always felt 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. 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 ### Blocks with Parameters
Naturally, Blocks can accept parameters, just like functions. Naturally, Blocks can accept parameters, just like functions.
@@ -166,17 +182,15 @@ greet("Orion") // Prints "Hi, Orion"
## Truth, Lies, and Flow ## 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". 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 **falsy** value. It's the one and only \`false\`.
- \`!0\` is the official **truthy** value. It's the one and only \`true\`. - \`!0\` is the official **truthy** value. It's the one and only \`true\`.
- \`-0\` represents **nothingness**. It's our \`null\` and \`undefined\`. - \`-0\` represents **nothingness**. It's our version of \`null\` and \`undefined\`.
- Any non-zero number is truthy. - Any non-zero number is truthy.
- An empty string \`""\`, empty block \`{}\`, or empty array \`[]\` is falsy. If they contain anything, they become 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 \`===\`. - \`==\` is a strict equality check, equivalent to JavaScript's \`===\`.
This design is clean and a gift to code golfers. Why type `true` when `!0` will do?
### Unified Conditionals: The Ternary \`? :\` ### 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. 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.
@@ -253,9 +267,9 @@ count: 3
## The Journey Ahead ## The Journey Ahead
<div class="flex items-center gap-4 p-4 border border-gray-700 rounded-lg bg-gray-800/50"> <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-400"></i> <i data-lucide="file-code-2" class="text-cyan-600"></i>
<p>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> <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> </div>
`; `;
@@ -263,19 +277,16 @@ count: 3
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
// Initialize Markdown-it // Initialize Markdown-it
const md = window.markdownit({ const md = window.markdownit({
html: true, // Allow HTML tags in markdown html: true,
linkify: true, linkify: true,
typographer: true, typographer: true,
highlight: function (str, lang) { highlight: (str, lang) => {
if (lang && hljs.getLanguage(lang)) { if (lang && hljs.getLanguage(lang)) {
try { try {
return '<pre class="hljs"><code>' + return `<pre class="hljs"><code>${hljs.highlight(str, { language: lang, ignoreIllegals: true }).value}</code></pre>`;
hljs.highlight(str, { language: lang, ignoreIllegals: true }).value +
'</code></pre>';
} catch (__) {} } catch (__) {}
} }
// Use escapeHtml for plain text return `<pre class="hljs"><code>${md.utils.escapeHtml(str)}</code></pre>`;
return '<pre class="hljs"><code>' + md.utils.escapeHtml(str) + '</code></pre>';
} }
}); });