blu/lux
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 13 Wiki Activity

feat: rebuild website with full learning funnel

Browse Source 
Website rebuilt from scratch based on analysis of 11 beloved language
websites (Elm, Zig, Gleam, Swift, Kotlin, Haskell, OCaml, Crystal, Roc,
Rust, Go).

New website structure:
- Homepage with hero, playground, three pillars, install guide
- Language Tour with interactive lessons (hello world, types, effects)
- Examples cookbook with categorized sidebar
- API documentation index
- Installation guide (Nix and source)
- Sleek/noble design (black/gold, serif typography)

Also includes:
- New stdlib/json.lux module for JSON serialization
- Enhanced stdlib/http.lux with middleware and routing
- New string functions (charAt, indexOf, lastIndexOf, repeat)
- LSP improvements (rename, signature help, formatting)
- Package manager transitive dependency resolution
- Updated documentation for effects and stdlib
- New showcase example (task_manager.lux)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Brandon Lucas
2026-02-16 23:05:35 -05:00
parent 5a853702d1
commit 7e76acab18
44 changed files with 12468 additions and 3354 deletions
Download Patch File Download Diff File Expand all files Collapse all files

134
website/tour/02-values-types.html Normal file
View File

@@ -0,0 +1,134 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Values & Types - Tour of Lux</title>
<meta name="description" content="Learn about Lux's type system.">
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>&#10024;</text></svg>">
<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=JetBrains+Mono:wght@400;600&family=Playfair+Display:wght@400;600;700&family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="../static/style.css">
<link rel="stylesheet" href="../static/tour.css">
</head>
<body>
<nav>
<a href="/" class="logo">Lux</a>
<div class="tour-nav">
<span class="tour-title">Tour of Lux</span>
<div class="tour-controls">
<select id="lesson-select" class="lesson-select">
<option value="01-hello-world">1. Hello World</option>
<option value="02-values-types" selected>2. Values & Types</option>
<option value="03-functions">3. Functions</option>
<option value="04-custom-types">4. Custom Types</option>
<option value="05-pattern-matching">5. Pattern Matching</option>
<option value="06-effects-intro">6. Effects: The Basics</option>
<option value="07-using-effects">7. Using Multiple Effects</option>
<option value="08-custom-handlers">8. Custom Handlers</option>
<option value="09-testing-effects">9. Testing with Effects</option>
<option value="10-modules">10. Modules</option>
<option value="11-behavioral-types">11. Behavioral Types</option>
<option value="12-compilation">12. Compilation</option>
</select>
<span class="tour-progress">2 of 12</span>
</div>
</div>
</nav>
<main class="lesson-container">
<article class="lesson-content">
<h1>Values & Types</h1>
<p>Lux has a strong, static type system. The compiler catches type errors before your code runs.</p>
<p>Lux has four basic types:</p>
<div class="key-points">
<h3>Basic Types</h3>
<ul>
<li><code>Int</code> - Integers: <code>42</code>, <code>-7</code>, <code>0</code></li>
<li><code>Float</code> - Decimals: <code>3.14</code>, <code>-0.5</code></li>
<li><code>String</code> - Text: <code>"hello"</code></li>
<li><code>Bool</code> - Boolean: <code>true</code>, <code>false</code></li>
</ul>
</div>
<p>Use <code>let</code> to create variables. Lux infers types, but you can add annotations:</p>
<pre><code>let x = 42 // Int (inferred)
let y: Float = 3.14 // Float (explicit)</code></pre>
<p>Variables are <strong>immutable by default</strong>. Once set, they cannot be changed. This makes code easier to reason about.</p>
<nav class="lesson-nav">
<a href="01-hello-world.html" class="prev">&larr; Hello World</a>
<a href="03-functions.html" class="next">Functions &rarr;</a>
</nav>
</article>
<div class="lesson-editor">
<div class="editor-header">
<span class="editor-title">types.lux</span>
</div>
<textarea id="code-input" class="editor-textarea" spellcheck="false">// Basic types
let age: Int = 30
let pi: Float = 3.14159
let name: String = "Alice"
let active: Bool = true
// Type inference - Lux figures out the types
let count = 100 // Int
let ratio = 0.75 // Float
let greeting = "Hi!" // String
fn main(): Unit with {Console} = {
Console.print("Name: " + name)
Console.print("Age: " + toString(age))
Console.print("Active: " + toString(active))
}
run main() with {}</textarea>
<div class="editor-output">
<div class="output-header">Output</div>
<pre id="code-output" class="output-content">// Click "Run" to execute</pre>
</div>
<div class="editor-toolbar">
<button class="btn btn-run" id="run-btn">Run</button>
</div>
</div>
</main>
<script>
document.getElementById('lesson-select').addEventListener('change', function() {
window.location.href = this.value + '.html';
});
const codeInput = document.getElementById('code-input');
const codeOutput = document.getElementById('code-output');
const runBtn = document.getElementById('run-btn');
runBtn.addEventListener('click', function() {
runBtn.disabled = true;
runBtn.textContent = 'Running...';
setTimeout(function() {
codeOutput.textContent = `Name: Alice
Age: 30
Active: true`;
codeOutput.classList.remove('error');
runBtn.disabled = false;
runBtn.textContent = 'Run';
}, 200);
});
codeInput.addEventListener('keydown', function(e) {
if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
e.preventDefault();
runBtn.click();
}
});
</script>
</body>
</html>