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:
226
website/install/index.html
Normal file
226
website/install/index.html
Normal file
@@ -0,0 +1,226 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Install Lux</title>
|
||||
<meta name="description" content="Install the Lux programming language.">
|
||||
<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>
|
||||
.install-container {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: var(--space-xl) var(--space-lg);
|
||||
}
|
||||
|
||||
.install-header {
|
||||
text-align: center;
|
||||
margin-bottom: var(--space-2xl);
|
||||
}
|
||||
|
||||
.install-method {
|
||||
background: var(--bg-glass);
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: 8px;
|
||||
padding: var(--space-xl);
|
||||
margin-bottom: var(--space-xl);
|
||||
}
|
||||
|
||||
.install-method.recommended {
|
||||
border-color: var(--border-gold);
|
||||
}
|
||||
|
||||
.install-method h2 {
|
||||
text-align: left;
|
||||
margin-bottom: var(--space-sm);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-sm);
|
||||
}
|
||||
|
||||
.install-method .badge {
|
||||
font-size: 0.7rem;
|
||||
padding: 0.2rem 0.5rem;
|
||||
}
|
||||
|
||||
.install-method p {
|
||||
margin-bottom: var(--space-lg);
|
||||
}
|
||||
|
||||
.install-code {
|
||||
background: var(--code-bg);
|
||||
border: 1px solid var(--code-border);
|
||||
border-radius: 6px;
|
||||
padding: var(--space-md);
|
||||
margin-bottom: var(--space-md);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.install-code pre {
|
||||
font-family: var(--font-code);
|
||||
font-size: 0.9rem;
|
||||
margin: 0;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.install-code .copy-btn {
|
||||
position: absolute;
|
||||
top: var(--space-sm);
|
||||
right: var(--space-sm);
|
||||
padding: var(--space-xs) var(--space-sm);
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.verify {
|
||||
margin-top: var(--space-lg);
|
||||
padding-top: var(--space-lg);
|
||||
border-top: 1px solid var(--border-subtle);
|
||||
}
|
||||
|
||||
.verify h3 {
|
||||
color: var(--text-primary);
|
||||
font-size: 1rem;
|
||||
margin-bottom: var(--space-md);
|
||||
}
|
||||
|
||||
.next-steps {
|
||||
text-align: center;
|
||||
margin-top: var(--space-2xl);
|
||||
}
|
||||
|
||||
.next-steps h2 {
|
||||
margin-bottom: var(--space-lg);
|
||||
}
|
||||
|
||||
.next-steps-links {
|
||||
display: flex;
|
||||
gap: var(--space-md);
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<nav>
|
||||
<a href="/" class="logo">Lux</a>
|
||||
<ul class="nav-links" id="nav-links">
|
||||
<li><a href="/install" class="active">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>
|
||||
|
||||
<main class="install-container">
|
||||
<header class="install-header">
|
||||
<h1>Install Lux</h1>
|
||||
<p>Get Lux running on your machine in under a minute.</p>
|
||||
</header>
|
||||
|
||||
<div class="install-method recommended">
|
||||
<h2>
|
||||
With Nix
|
||||
<span class="badge">Recommended</span>
|
||||
</h2>
|
||||
<p>The easiest way to run Lux. One command, zero dependencies. Works on Linux and macOS.</p>
|
||||
|
||||
<div class="install-code">
|
||||
<pre>nix run git+https://git.qrty.ink/blu/lux</pre>
|
||||
<button class="btn copy-btn" data-copy="nix run git+https://git.qrty.ink/blu/lux">Copy</button>
|
||||
</div>
|
||||
|
||||
<p style="font-size: 0.9rem; color: var(--text-muted);">
|
||||
Don't have Nix? Install it with: <code>curl -L https://nixos.org/nix/install | sh</code>
|
||||
</p>
|
||||
|
||||
<div class="verify">
|
||||
<h3>Verify Installation</h3>
|
||||
<div class="install-code">
|
||||
<pre>lux --version
|
||||
# Lux 0.1.0</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="install-method">
|
||||
<h2>From Source</h2>
|
||||
<p>Build Lux from source using Cargo. Requires Rust toolchain.</p>
|
||||
|
||||
<div class="install-code">
|
||||
<pre>git clone https://git.qrty.ink/blu/lux
|
||||
cd lux
|
||||
cargo build --release</pre>
|
||||
<button class="btn copy-btn" data-copy="git clone https://git.qrty.ink/blu/lux && cd lux && cargo build --release">Copy</button>
|
||||
</div>
|
||||
|
||||
<p>The binary will be at <code>./target/release/lux</code>. Add it to your PATH:</p>
|
||||
|
||||
<div class="install-code">
|
||||
<pre>export PATH="$PWD/target/release:$PATH"</pre>
|
||||
</div>
|
||||
|
||||
<div class="verify">
|
||||
<h3>Verify Installation</h3>
|
||||
<div class="install-code">
|
||||
<pre>./target/release/lux --version
|
||||
# Lux 0.1.0</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="install-method">
|
||||
<h2>Development with Nix</h2>
|
||||
<p>Enter a development shell with all dependencies available.</p>
|
||||
|
||||
<div class="install-code">
|
||||
<pre>git clone https://git.qrty.ink/blu/lux
|
||||
cd lux
|
||||
nix develop</pre>
|
||||
</div>
|
||||
|
||||
<p>Inside the shell, you can run all development commands:</p>
|
||||
|
||||
<div class="install-code">
|
||||
<pre>cargo build # Build
|
||||
cargo test # Run tests
|
||||
cargo run # Run interpreter</pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="next-steps">
|
||||
<h2>Next Steps</h2>
|
||||
<div class="next-steps-links">
|
||||
<a href="/tour/" class="btn btn-primary">Take the Tour</a>
|
||||
<a href="/examples/" class="btn btn-secondary">Browse Examples</a>
|
||||
<a href="/docs/" class="btn btn-tertiary">Read the Docs</a>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
document.querySelectorAll('.copy-btn').forEach(function(btn) {
|
||||
btn.addEventListener('click', async function() {
|
||||
const text = btn.dataset.copy;
|
||||
try {
|
||||
await navigator.clipboard.writeText(text);
|
||||
const original = btn.textContent;
|
||||
btn.textContent = 'Copied!';
|
||||
btn.classList.add('copied');
|
||||
setTimeout(function() {
|
||||
btn.textContent = original;
|
||||
btn.classList.remove('copied');
|
||||
}, 2000);
|
||||
} catch (e) {
|
||||
console.error('Failed to copy:', e);
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user