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:
266
website/index.html
Normal file
266
website/index.html
Normal file
@@ -0,0 +1,266 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user