Brandon Lucas
7e76acab18
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>
135 lines
5.6 KiB
HTML
135 lines
5.6 KiB
HTML
<!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'>✨</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">← Hello World</a>
|
|
<a href="03-functions.html" class="next">Functions →</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>
|