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>
132 lines
5.9 KiB
HTML
132 lines
5.9 KiB
HTML
<!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>
|