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:
247
website/examples/index.html
Normal file
247
website/examples/index.html
Normal file
@@ -0,0 +1,247 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Lux by Example</title>
|
||||
<meta name="description" content="Learn Lux through annotated example programs.">
|
||||
<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">
|
||||
<style>
|
||||
.examples-container {
|
||||
display: grid;
|
||||
grid-template-columns: 250px 1fr;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
min-height: calc(100vh - 80px);
|
||||
}
|
||||
|
||||
.examples-sidebar {
|
||||
background: var(--bg-secondary);
|
||||
padding: var(--space-lg);
|
||||
border-right: 1px solid var(--border-subtle);
|
||||
position: sticky;
|
||||
top: 60px;
|
||||
height: calc(100vh - 60px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.examples-sidebar h2 {
|
||||
font-size: 1rem;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: var(--space-md);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.examples-sidebar ul {
|
||||
list-style: none;
|
||||
margin-bottom: var(--space-lg);
|
||||
}
|
||||
|
||||
.examples-sidebar li {
|
||||
margin-bottom: var(--space-xs);
|
||||
}
|
||||
|
||||
.examples-sidebar a {
|
||||
display: block;
|
||||
padding: var(--space-xs) var(--space-sm);
|
||||
color: var(--text-secondary);
|
||||
border-radius: 4px;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.examples-sidebar a:hover {
|
||||
color: var(--gold);
|
||||
background: var(--bg-glass);
|
||||
}
|
||||
|
||||
.examples-sidebar a.active {
|
||||
color: var(--gold);
|
||||
background: var(--bg-glass);
|
||||
border-left: 2px solid var(--gold);
|
||||
}
|
||||
|
||||
.examples-content {
|
||||
padding: var(--space-xl);
|
||||
}
|
||||
|
||||
.examples-content h1 {
|
||||
margin-bottom: var(--space-md);
|
||||
}
|
||||
|
||||
.examples-intro {
|
||||
max-width: 700px;
|
||||
margin-bottom: var(--space-xl);
|
||||
}
|
||||
|
||||
.examples-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
gap: var(--space-lg);
|
||||
}
|
||||
|
||||
.example-card {
|
||||
background: var(--bg-glass);
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: 8px;
|
||||
padding: var(--space-lg);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.example-card:hover {
|
||||
border-color: var(--border-gold);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.example-card h3 {
|
||||
color: var(--gold);
|
||||
margin-bottom: var(--space-sm);
|
||||
}
|
||||
|
||||
.example-card p {
|
||||
font-size: 0.95rem;
|
||||
margin-bottom: var(--space-md);
|
||||
}
|
||||
|
||||
.example-card a {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.examples-container {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.examples-sidebar {
|
||||
position: static;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<nav>
|
||||
<a href="/" class="logo">Lux</a>
|
||||
<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/" class="active">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>
|
||||
|
||||
<main class="examples-container">
|
||||
<aside class="examples-sidebar">
|
||||
<h2>Basics</h2>
|
||||
<ul>
|
||||
<li><a href="hello-world.html">Hello World</a></li>
|
||||
<li><a href="values.html">Values</a></li>
|
||||
<li><a href="variables.html">Variables</a></li>
|
||||
<li><a href="functions.html">Functions</a></li>
|
||||
<li><a href="closures.html">Closures</a></li>
|
||||
<li><a href="recursion.html">Recursion</a></li>
|
||||
</ul>
|
||||
|
||||
<h2>Types</h2>
|
||||
<ul>
|
||||
<li><a href="records.html">Records</a></li>
|
||||
<li><a href="variants.html">Variants</a></li>
|
||||
<li><a href="generics.html">Generics</a></li>
|
||||
<li><a href="option.html">Option</a></li>
|
||||
<li><a href="result.html">Result</a></li>
|
||||
</ul>
|
||||
|
||||
<h2>Effects</h2>
|
||||
<ul>
|
||||
<li><a href="console-io.html">Console I/O</a></li>
|
||||
<li><a href="file-operations.html">File Operations</a></li>
|
||||
<li><a href="http-requests.html">HTTP Requests</a></li>
|
||||
<li><a href="random-numbers.html">Random Numbers</a></li>
|
||||
<li><a href="time-sleep.html">Time & Sleep</a></li>
|
||||
<li><a href="state-management.html">State Management</a></li>
|
||||
<li><a href="error-handling.html">Error Handling</a></li>
|
||||
</ul>
|
||||
|
||||
<h2>Data</h2>
|
||||
<ul>
|
||||
<li><a href="json-parsing.html">JSON Parsing</a></li>
|
||||
<li><a href="json-generation.html">JSON Generation</a></li>
|
||||
<li><a href="string-processing.html">String Processing</a></li>
|
||||
<li><a href="list-operations.html">List Operations</a></li>
|
||||
<li><a href="sqlite-database.html">SQLite Database</a></li>
|
||||
<li><a href="postgresql.html">PostgreSQL</a></li>
|
||||
</ul>
|
||||
|
||||
<h2>Concurrent</h2>
|
||||
<ul>
|
||||
<li><a href="spawning-tasks.html">Spawning Tasks</a></li>
|
||||
<li><a href="channels.html">Channels</a></li>
|
||||
<li><a href="producer-consumer.html">Producer/Consumer</a></li>
|
||||
<li><a href="parallel-map.html">Parallel Map</a></li>
|
||||
</ul>
|
||||
|
||||
<h2>Web</h2>
|
||||
<ul>
|
||||
<li><a href="http-server.html">HTTP Server</a></li>
|
||||
<li><a href="rest-api.html">REST API</a></li>
|
||||
<li><a href="middleware.html">Middleware</a></li>
|
||||
<li><a href="routing.html">Routing</a></li>
|
||||
</ul>
|
||||
</aside>
|
||||
|
||||
<div class="examples-content">
|
||||
<h1>Lux by Example</h1>
|
||||
|
||||
<div class="examples-intro">
|
||||
<p>Learn Lux through annotated example programs. Each example is self-contained and demonstrates a specific concept or pattern.</p>
|
||||
<p>Click any example to see the full code with explanations.</p>
|
||||
</div>
|
||||
|
||||
<div class="examples-grid">
|
||||
<div class="example-card">
|
||||
<h3>Hello World</h3>
|
||||
<p>Your first Lux program. Learn about the main function and Console effect.</p>
|
||||
<a href="hello-world.html">View example →</a>
|
||||
</div>
|
||||
|
||||
<div class="example-card">
|
||||
<h3>Effects Basics</h3>
|
||||
<p>Understand how effects make side effects explicit in type signatures.</p>
|
||||
<a href="console-io.html">View example →</a>
|
||||
</div>
|
||||
|
||||
<div class="example-card">
|
||||
<h3>Pattern Matching</h3>
|
||||
<p>Destructure data with exhaustive pattern matching.</p>
|
||||
<a href="variants.html">View example →</a>
|
||||
</div>
|
||||
|
||||
<div class="example-card">
|
||||
<h3>HTTP Server</h3>
|
||||
<p>Build a simple web server with effect-tracked I/O.</p>
|
||||
<a href="http-server.html">View example →</a>
|
||||
</div>
|
||||
|
||||
<div class="example-card">
|
||||
<h3>JSON Processing</h3>
|
||||
<p>Parse and generate JSON data with type safety.</p>
|
||||
<a href="json-parsing.html">View example →</a>
|
||||
</div>
|
||||
|
||||
<div class="example-card">
|
||||
<h3>Concurrency</h3>
|
||||
<p>Spawn tasks and communicate via channels.</p>
|
||||
<a href="spawning-tasks.html">View example →</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user