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:
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