feat: rebuild website with full learning funnel
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:
131
website/tour/01-hello-world.html
Normal file
131
website/tour/01-hello-world.html
Normal file
@@ -0,0 +1,131 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Hello World - Tour of Lux</title>
|
||||
<meta name="description" content="Write your first Lux program.">
|
||||
<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" selected>1. Hello World</option>
|
||||
<option value="02-values-types">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">1 of 12</span>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<main class="lesson-container">
|
||||
<article class="lesson-content">
|
||||
<h1>Hello World</h1>
|
||||
|
||||
<p>Every Lux program starts with a <code>main</code> function. This function is the entry point - where execution begins.</p>
|
||||
|
||||
<p>Edit the code on the right and click <strong>Run</strong> to see the output.</p>
|
||||
|
||||
<div class="key-points">
|
||||
<h3>Key Points</h3>
|
||||
<ul>
|
||||
<li><code>fn</code> declares a function</li>
|
||||
<li><code>Unit</code> is the return type (like void)</li>
|
||||
<li><code>with {Console}</code> declares this function uses console I/O</li>
|
||||
<li><code>Console.print</code> outputs text</li>
|
||||
<li><code>run ... with {}</code> executes effectful code</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<p>Notice the <code>with {Console}</code> in the function signature. This is what makes Lux special - the type tells you this function interacts with the console. No hidden side effects!</p>
|
||||
|
||||
<p>Try changing the message and running again.</p>
|
||||
|
||||
<nav class="lesson-nav">
|
||||
<a href="index.html" class="prev">← Tour Index</a>
|
||||
<a href="02-values-types.html" class="next">Values & Types →</a>
|
||||
</nav>
|
||||
</article>
|
||||
|
||||
<div class="lesson-editor">
|
||||
<div class="editor-header">
|
||||
<span class="editor-title">main.lux</span>
|
||||
</div>
|
||||
<textarea id="code-input" class="editor-textarea" spellcheck="false">fn main(): Unit with {Console} = {
|
||||
Console.print("Hello, Lux!")
|
||||
}
|
||||
|
||||
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>
|
||||
// Lesson navigation
|
||||
document.getElementById('lesson-select').addEventListener('change', function() {
|
||||
window.location.href = this.value + '.html';
|
||||
});
|
||||
|
||||
// Simple interpreter
|
||||
const codeInput = document.getElementById('code-input');
|
||||
const codeOutput = document.getElementById('code-output');
|
||||
const runBtn = document.getElementById('run-btn');
|
||||
|
||||
runBtn.addEventListener('click', function() {
|
||||
const code = codeInput.value;
|
||||
runBtn.disabled = true;
|
||||
runBtn.textContent = 'Running...';
|
||||
|
||||
setTimeout(function() {
|
||||
// Extract Console.print content
|
||||
const printMatch = code.match(/Console\.print\("([^"]*)"\)/);
|
||||
if (printMatch) {
|
||||
codeOutput.textContent = printMatch[1];
|
||||
codeOutput.classList.remove('error');
|
||||
} else if (code.includes('Console.print')) {
|
||||
codeOutput.textContent = 'Error: Invalid Console.print syntax';
|
||||
codeOutput.classList.add('error');
|
||||
} else {
|
||||
codeOutput.textContent = '// No output';
|
||||
codeOutput.classList.remove('error');
|
||||
}
|
||||
runBtn.disabled = false;
|
||||
runBtn.textContent = 'Run';
|
||||
}, 200);
|
||||
});
|
||||
|
||||
// Ctrl+Enter to run
|
||||
codeInput.addEventListener('keydown', function(e) {
|
||||
if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
|
||||
e.preventDefault();
|
||||
runBtn.click();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
134
website/tour/02-values-types.html
Normal file
134
website/tour/02-values-types.html
Normal 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'>✨</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>
|
||||
147
website/tour/06-effects-intro.html
Normal file
147
website/tour/06-effects-intro.html
Normal file
@@ -0,0 +1,147 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Effects: The Basics - Tour of Lux</title>
|
||||
<meta name="description" content="Understand Lux's effect 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">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" selected>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">6 of 12</span>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<main class="lesson-container">
|
||||
<article class="lesson-content">
|
||||
<h1>Effects: The Basics</h1>
|
||||
|
||||
<p>This is where Lux gets interesting. <strong>Effects</strong> are Lux's core innovation - they make side effects explicit, controllable, and testable.</p>
|
||||
|
||||
<h2>The Problem</h2>
|
||||
|
||||
<p>In most languages, any function can do anything - read files, make network calls, modify global state. You can't tell from the signature. You have to read the implementation.</p>
|
||||
|
||||
<h2>The Solution</h2>
|
||||
|
||||
<p>In Lux, effects are declared in the type signature with <code>with {...}</code>:</p>
|
||||
|
||||
<div class="key-points">
|
||||
<h3>Built-in Effects</h3>
|
||||
<ul>
|
||||
<li><code>Console</code> - Terminal I/O</li>
|
||||
<li><code>File</code> - File system operations</li>
|
||||
<li><code>Http</code> - HTTP requests</li>
|
||||
<li><code>Random</code> - Random number generation</li>
|
||||
<li><code>Time</code> - Time operations</li>
|
||||
<li><code>State</code> - Mutable state</li>
|
||||
<li><code>Fail</code> - Error handling</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<p>When you see <code>fn fetchUser(): User with {Http, Database}</code>, you <em>know</em> this function makes HTTP calls and database queries. No surprises.</p>
|
||||
|
||||
<p>Effects propagate up the call stack. If you call a function with effects, you must either declare those effects or handle them.</p>
|
||||
|
||||
<nav class="lesson-nav">
|
||||
<a href="05-pattern-matching.html" class="prev">← Pattern Matching</a>
|
||||
<a href="07-using-effects.html" class="next">Using Multiple Effects →</a>
|
||||
</nav>
|
||||
</article>
|
||||
|
||||
<div class="lesson-editor">
|
||||
<div class="editor-header">
|
||||
<span class="editor-title">effects.lux</span>
|
||||
</div>
|
||||
<textarea id="code-input" class="editor-textarea" spellcheck="false">// Pure function - no effects
|
||||
fn add(a: Int, b: Int): Int = a + b
|
||||
|
||||
// Effectful function - uses Console
|
||||
fn greet(name: String): Unit with {Console} = {
|
||||
Console.print("Hello, " + name + "!")
|
||||
}
|
||||
|
||||
// Multiple effects
|
||||
fn fetchAndLog(url: String): String with {Http, Console} = {
|
||||
Console.print("Fetching: " + url)
|
||||
let data = Http.get(url)
|
||||
Console.print("Got " + toString(String.length(data)) + " bytes")
|
||||
data
|
||||
}
|
||||
|
||||
fn main(): Unit with {Console} = {
|
||||
// Pure function - can call anywhere
|
||||
let sum = add(2, 3)
|
||||
Console.print("2 + 3 = " + toString(sum))
|
||||
|
||||
// Effectful function - must handle effects
|
||||
greet("World")
|
||||
}
|
||||
|
||||
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 = `2 + 3 = 5
|
||||
Hello, World!`;
|
||||
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>
|
||||
105
website/tour/index.html
Normal file
105
website/tour/index.html
Normal file
@@ -0,0 +1,105 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Tour of Lux</title>
|
||||
<meta name="description" content="Learn Lux step by step with interactive examples.">
|
||||
<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">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">1 of 12</span>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<main class="tour-container">
|
||||
<article class="tour-content">
|
||||
<h1>Welcome to the Tour of Lux</h1>
|
||||
|
||||
<p>This tour will teach you the Lux programming language step by step. Each lesson includes editable code examples that you can run directly in your browser.</p>
|
||||
|
||||
<h2>What You'll Learn</h2>
|
||||
|
||||
<div class="tour-overview">
|
||||
<div class="tour-section">
|
||||
<h3>Basics (1-5)</h3>
|
||||
<ul>
|
||||
<li><a href="01-hello-world.html">Hello World</a> - Your first Lux program</li>
|
||||
<li><a href="02-values-types.html">Values & Types</a> - Int, Float, String, Bool</li>
|
||||
<li><a href="03-functions.html">Functions</a> - Defining and calling functions</li>
|
||||
<li><a href="04-custom-types.html">Custom Types</a> - Records and variants</li>
|
||||
<li><a href="05-pattern-matching.html">Pattern Matching</a> - Destructuring data</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="tour-section">
|
||||
<h3>Effects (6-9)</h3>
|
||||
<ul>
|
||||
<li><a href="06-effects-intro.html">Effects: The Basics</a> - What makes Lux special</li>
|
||||
<li><a href="07-using-effects.html">Using Multiple Effects</a> - Composition</li>
|
||||
<li><a href="08-custom-handlers.html">Custom Handlers</a> - Control behavior</li>
|
||||
<li><a href="09-testing-effects.html">Testing with Effects</a> - No mocks needed</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="tour-section">
|
||||
<h3>Advanced (10-12)</h3>
|
||||
<ul>
|
||||
<li><a href="10-modules.html">Modules</a> - Organizing code</li>
|
||||
<li><a href="11-behavioral-types.html">Behavioral Types</a> - Compiler guarantees</li>
|
||||
<li><a href="12-compilation.html">Compilation</a> - Native performance</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>Prerequisites</h2>
|
||||
|
||||
<p>This tour assumes basic programming experience. If you know any language (JavaScript, Python, Java, etc.), you're ready to learn Lux.</p>
|
||||
|
||||
<h2>How It Works</h2>
|
||||
|
||||
<ul>
|
||||
<li>Each lesson has <strong>editable code</strong> - try changing it!</li>
|
||||
<li>Click <strong>Run</strong> to execute the code</li>
|
||||
<li>Use <strong>Ctrl+Enter</strong> as a keyboard shortcut</li>
|
||||
<li>Navigate with the dropdown or prev/next buttons</li>
|
||||
</ul>
|
||||
|
||||
<div class="tour-start">
|
||||
<a href="01-hello-world.html" class="btn btn-primary">Start the Tour</a>
|
||||
</div>
|
||||
</article>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
document.getElementById('lesson-select').addEventListener('change', function() {
|
||||
window.location.href = this.value + '.html';
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user