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>
267 lines
12 KiB
HTML
267 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Lux - Side Effects Can't Hide</title>
|
|
<meta name="description" content="Lux is a functional programming language with first-class effects. See what your code does. Test without mocks. Ship with confidence.">
|
|
<meta name="keywords" content="programming language, functional programming, algebraic effects, effect system, type system, native compilation">
|
|
|
|
<!-- Open Graph -->
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:title" content="Lux - Side Effects Can't Hide">
|
|
<meta property="og:description" content="A functional programming language with first-class effects. See what your code does, test without mocks, ship with confidence.">
|
|
<meta property="og:url" content="https://lux-lang.org">
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
|
|
<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>">
|
|
|
|
<!-- Fonts -->
|
|
<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">
|
|
</head>
|
|
<body>
|
|
<nav>
|
|
<a href="/" class="logo">Lux</a>
|
|
<button class="mobile-menu-btn" id="mobile-menu-btn" aria-label="Toggle menu">
|
|
<span id="menu-icon">☰</span>
|
|
</button>
|
|
<ul class="nav-links" id="nav-links">
|
|
<li><a href="/install">Install</a></li>
|
|
<li><a href="/tour/">Tour</a></li>
|
|
<li><a href="/examples/">Examples</a></li>
|
|
<li><a href="/docs/">Docs</a></li>
|
|
<li><a href="/play">Play</a></li>
|
|
<li><a href="https://git.qrty.ink/blu/lux" class="nav-source">Source</a></li>
|
|
</ul>
|
|
</nav>
|
|
|
|
<!-- Hero Section -->
|
|
<header class="hero">
|
|
<h1>Side Effects Can't Hide</h1>
|
|
<p class="tagline">See what your code does. Test without mocks. Ship with confidence.</p>
|
|
|
|
<div class="hero-cta">
|
|
<a href="#playground" class="btn btn-primary">Try Now</a>
|
|
<a href="/install" class="btn btn-secondary">Install</a>
|
|
<a href="/tour/" class="btn btn-tertiary">Take the Tour</a>
|
|
</div>
|
|
|
|
<div class="hero-code">
|
|
<pre><code><span class="kw">fn</span> <span class="fn">processOrder</span>(order: <span class="ty">Order</span>): <span class="ty">Receipt</span> <span class="kw">with</span> {<span class="ef">Database</span>, <span class="ef">Email</span>} = {
|
|
<span class="kw">let</span> saved = <span class="ef">Database</span>.save(order)
|
|
<span class="ef">Email</span>.send(order.customer, <span class="st">"Order confirmed!"</span>)
|
|
Receipt(saved.id)
|
|
}
|
|
|
|
<span class="cm">// The signature tells you EVERYTHING this function does</span></code></pre>
|
|
</div>
|
|
|
|
<div class="badges">
|
|
<span class="badge">MIT Licensed</span>
|
|
<span class="badge">372+ Tests</span>
|
|
<span class="badge">Native Performance</span>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Problem/Solution Section -->
|
|
<section class="problem-section">
|
|
<h2>The Problem with Side Effects</h2>
|
|
<p class="section-subtitle">In most languages, functions can do <em>anything</em>. You can't tell from the signature.</p>
|
|
|
|
<div class="comparison">
|
|
<div class="comparison-card bad">
|
|
<h3>Other Languages</h3>
|
|
<div class="comparison-code">
|
|
<pre><code><span class="fn">fetchUser</span>(id: <span class="ty">Int</span>): <span class="ty">User</span>
|
|
|
|
<span class="cm">// Does this call the network?
|
|
// Touch the database?
|
|
// Write to a file?
|
|
// Who knows!</span></code></pre>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="comparison-card good">
|
|
<h3>Lux</h3>
|
|
<div class="comparison-code">
|
|
<pre><code><span class="kw">fn</span> <span class="fn">fetchUser</span>(id: <span class="ty">Int</span>): <span class="ty">User</span>
|
|
<span class="kw">with</span> {<span class="ef">Http</span>, <span class="ef">Database</span>}
|
|
|
|
<span class="cm">// You KNOW this touches
|
|
// network and database</span></code></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Three Pillars Section -->
|
|
<section class="pillars-section">
|
|
<h2>The Lux Solution</h2>
|
|
<p class="section-subtitle">Three pillars that make functional programming practical.</p>
|
|
|
|
<div class="pillars">
|
|
<div class="pillar">
|
|
<h3>Effects You Can See</h3>
|
|
<p>Every function declares its effects in the type signature. No hidden surprises. Refactor with confidence.</p>
|
|
<div class="pillar-code">
|
|
<pre><code><span class="kw">fn</span> <span class="fn">sendNotification</span>(
|
|
user: <span class="ty">User</span>,
|
|
msg: <span class="ty">String</span>
|
|
): <span class="ty">Unit</span> <span class="kw">with</span> {<span class="ef">Email</span>, <span class="ef">Log</span>} = {
|
|
<span class="ef">Log</span>.info(<span class="st">"Sending to "</span> + user.email)
|
|
<span class="ef">Email</span>.send(user.email, msg)
|
|
}</code></pre>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pillar">
|
|
<h3>Testing Without Mocks</h3>
|
|
<p>Swap effect handlers at runtime. Test database code without a database. Test HTTP code without network.</p>
|
|
<div class="pillar-code">
|
|
<pre><code><span class="cm">// Production</span>
|
|
<span class="kw">run</span> app() <span class="kw">with</span> {
|
|
<span class="ef">Database</span> = postgres,
|
|
<span class="ef">Email</span> = smtp
|
|
}
|
|
|
|
<span class="cm">// Test - same code!</span>
|
|
<span class="kw">run</span> app() <span class="kw">with</span> {
|
|
<span class="ef">Database</span> = inMemory,
|
|
<span class="ef">Email</span> = collect
|
|
}</code></pre>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pillar">
|
|
<h3>Native Performance</h3>
|
|
<p>Compiles to C via gcc/clang. Reference counting with FBIP optimization. Matches Rust and C speed.</p>
|
|
<div class="pillar-code">
|
|
<pre><code>Benchmark Lux Rust Go
|
|
───────────────────────────────────
|
|
fibonacci(40) <span class="hl">0.015s</span> 0.018s 0.041s
|
|
ackermann <span class="hl">0.020s</span> 0.029s 0.107s
|
|
primes 1M <span class="hl">0.012s</span> 0.014s 0.038s
|
|
quicksort 1M 0.089s 0.072s 0.124s</code></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Interactive Playground -->
|
|
<section class="playground-section" id="playground">
|
|
<h2>Try It Now</h2>
|
|
<p class="section-subtitle">Edit the code and click Run. No installation required.</p>
|
|
|
|
<div class="playground">
|
|
<div class="playground-tabs">
|
|
<button class="playground-tab active" data-tab="hello">Hello World</button>
|
|
<button class="playground-tab" data-tab="effects">Effects</button>
|
|
<button class="playground-tab" data-tab="patterns">Patterns</button>
|
|
<button class="playground-tab" data-tab="handlers">Handlers</button>
|
|
<button class="playground-tab" data-tab="behavioral">Behavioral</button>
|
|
</div>
|
|
|
|
<div class="playground-content">
|
|
<div class="playground-editor">
|
|
<textarea id="code-input" spellcheck="false">fn main(): Unit with {Console} = {
|
|
Console.print("Hello, Lux!")
|
|
}
|
|
|
|
run main() with {}</textarea>
|
|
</div>
|
|
<div class="playground-output">
|
|
<div class="output-header">Output</div>
|
|
<pre id="code-output"><span class="cm">// Click "Run" to execute</span></pre>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="playground-toolbar">
|
|
<span class="version">Lux v0.1.0</span>
|
|
<div class="toolbar-actions">
|
|
<button class="btn btn-run" id="run-btn">Run</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Getting Started Section -->
|
|
<section class="install-section" id="install">
|
|
<h2>Get Started</h2>
|
|
<p class="section-subtitle">One command to try Lux. Two to build from source.</p>
|
|
|
|
<div class="install-options">
|
|
<div class="install-option">
|
|
<h3>With Nix (Recommended)</h3>
|
|
<div class="install-code">
|
|
<pre><code>nix run git+https://git.qrty.ink/blu/lux</code></pre>
|
|
<button class="copy-btn" data-copy="nix run git+https://git.qrty.ink/blu/lux">Copy</button>
|
|
</div>
|
|
<p class="install-note">One command. Zero dependencies. Works on Linux and macOS.</p>
|
|
</div>
|
|
|
|
<div class="install-option">
|
|
<h3>From Source</h3>
|
|
<div class="install-code">
|
|
<pre><code>git clone https://git.qrty.ink/blu/lux
|
|
cd lux && cargo build --release</code></pre>
|
|
<button class="copy-btn" data-copy="git clone https://git.qrty.ink/blu/lux && cd lux && cargo build --release">Copy</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="next-steps">
|
|
<h4>Then</h4>
|
|
<div class="next-steps-grid">
|
|
<a href="/tour/" class="next-step">
|
|
<span class="next-step-icon">➜</span>
|
|
<span>Take the Tour</span>
|
|
</a>
|
|
<a href="/examples/" class="next-step">
|
|
<span class="next-step-icon">⧉</span>
|
|
<span>Browse Examples</span>
|
|
</a>
|
|
<a href="/docs/" class="next-step">
|
|
<span class="next-step-icon">📖</span>
|
|
<span>Read the Docs</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Footer -->
|
|
<footer>
|
|
<div class="footer-content">
|
|
<div class="footer-section">
|
|
<h4>Lux</h4>
|
|
<p>Functional programming with first-class effects.</p>
|
|
</div>
|
|
<div class="footer-section">
|
|
<h4>Learn</h4>
|
|
<ul>
|
|
<li><a href="/tour/">Language Tour</a></li>
|
|
<li><a href="/examples/">Examples</a></li>
|
|
<li><a href="/docs/">Documentation</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="footer-section">
|
|
<h4>Community</h4>
|
|
<ul>
|
|
<li><a href="https://git.qrty.ink/blu/lux">Source Code</a></li>
|
|
<li><a href="https://git.qrty.ink/blu/lux/issues">Issues</a></li>
|
|
<li><a href="/community/code-of-conduct.html">Code of Conduct</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="footer-bottom">
|
|
<p>MIT License. Built with Lux.</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<script src="static/app.js"></script>
|
|
</body>
|
|
</html>
|