blu/lux
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 13 Wiki Activity

feat: create Lux website with sleek/noble aesthetic

Browse Source 
Website design:
- Translucent black (#0a0a0a) with gold (#d4af37) accents
- Strong serif typography (Playfair Display, Source Serif Pro)
- Glass-morphism cards with gold borders
- Responsive layout with elegant animations

Content:
- Landing page with hero, code demo, value props, benchmarks
- Effects-focused messaging ("No surprises. No hidden side effects.")
- Performance benchmarks showing Lux matches C
- Quick start guide

Technical:
- Added HTML rendering functions to stdlib/html.lux
- Created Lux-based site generator (blocked by module import issues)
- Documented Lux weaknesses discovered during development:
  - Module import system not working
  - FileSystem effect incomplete
  - No template string support

The landing page HTML/CSS is complete and viewable.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Brandon Lucas
2026-02-16 06:41:49 -05:00
parent 49ab70829a
commit 552e7a4972
10 changed files with 3046 additions and 269 deletions
Download Patch File Download Diff File Expand all files Collapse all files

830
docs/WEBSITE_PLAN.md
View File

@@ -1,323 +1,615 @@
# Lux Language Website Plan
# Lux Website Plan
A comprehensive plan for building the official Lux programming language website.
**Aesthetic:** Sleek and noble - translucent black, white, and gold with strong serif typography. Serious, powerful, divine.
---
## Research Summary
Analyzed 6 beloved language websites: **Elm**, **Gleam**, **Rust**, **Elixir**, **Zig**, and **Go**.
### Websites Analyzed
### Key Patterns from Successful Language Websites
| Language | URL | Key Strengths | Key Weaknesses |
|----------|-----|---------------|----------------|
| **Gleam** | gleam.run | Friendly tone, code examples, sponsor showcase, Lucy mascot | Sparse use cases, overwhelming sponsor list |
| **Elm** | elm-lang.org | Visual demos, testimonials, "no runtime exceptions" proof, teal accents | No video content, sparse enterprise stories |
| **Zig** | ziglang.org | Technical clarity, transparent governance, community focus | No interactive tutorials, no benchmarks shown |
| **Rust** | rust-lang.org | Domain-specific guides, multi-entry learning paths, strong CTAs | Limited case studies, minimal adoption metrics |
| **Python** | python.org | Comprehensive ecosystem visibility, strong community, interactive shell | Heavy JS reliance, cluttered visual hierarchy |
| **TypeScript** | typescriptlang.org | Interactive demos, gradual adoption path, social proof, dark theme | No video tutorials, enterprise migration unclear |
| **cppreference** | cppreference.com | Exhaustive reference, version awareness, deep linking | Dense, no learning path, desktop-only |
| Pattern | Examples | Why It Works |
|---------|----------|--------------|
| **Emotional benefits over features** | Elm: "deploy and go to sleep" | Developers buy peace of mind, not feature lists |
| **Problem-first messaging** | Rust: addresses memory bugs, Zig: "no hidden control flow" | Validates pain points before offering solution |
| **Runnable code immediately** | Go Playground, Gleam Tour | Reduces friction, proves language works |
| **Social proof** | Go: PayPal, Google testimonials | Builds credibility for enterprise adoption |
| **Use-case segmentation** | Rust: CLI, WASM, networking, embedded | Helps users self-identify relevance |
| **Progressive disclosure** | All: simple → complex | Doesn't overwhelm newcomers |
| **Built with itself** | Elm site is built in Elm | Meta demonstration of capabilities |
| **Inclusive community** | Gleam: prominent Code of Conduct | Signals healthy ecosystem |
### Best Practices to Adopt
**Landing Page**
1. Immediate value demonstration (TypeScript's inline error catching)
2. Three-pillar messaging (Rust: Performance, Reliability, Productivity)
3. Social proof (testimonials, adoption stats, company logos)
4. Interactive playground link (Elm, TypeScript, Gleam)
5. Clear CTAs ("Get Started", "Try Now")
**Documentation**
1. Progressive complexity (TypeScript: JS → JSDoc → TypeScript)
2. Multiple learning paths (books, videos, hands-on)
3. Version-aware docs (cppreference: C++11 through C++26)
4. Searchable with good information architecture
**Community**
1. Decentralized presence (Discord, forums, GitHub)
2. Contributor recognition (Gleam's avatar wall)
3. Code of conduct prominently displayed
**Technical**
1. Fast page loads (no heavy frameworks)
2. Dark/light theme support (TypeScript)
3. Responsive design (mobile-first)
4. Accessibility (ARIA, keyboard navigation)
### Weaknesses to Avoid
1. No video content (most sites lack this)
2. No competitive comparisons (all sites avoid this - we should include it)
3. Sparse enterprise adoption stories
4. Missing performance benchmarks on homepage
5. Poor mobile experience
6. No clear migration path from other languages
---
## Lux's Unique Value Proposition
## Design Direction: "Sleek and Noble"
### Core Differentiators
### Color Palette
1. **Effects are better than monads** - More intuitive for learning FP
2. **Compile-time effect tracking** - Know exactly what code does
3. **Swap handlers for testing** - No mocks needed
4. **Native performance** - Compiles to C, matches Rust/C speed
5. **Functional but practical** - Not academic, production-ready
```css
:root {
/* Backgrounds */
--bg-primary: #0a0a0a; /* Near-black */
--bg-secondary: #111111; /* Slightly lighter black */
--bg-glass: rgba(255, 255, 255, 0.03); /* Translucent white */
--bg-glass-hover: rgba(255, 255, 255, 0.06);
### Tagline Options
/* Text */
--text-primary: #ffffff; /* Pure white */
--text-secondary: rgba(255, 255, 255, 0.7);
--text-muted: rgba(255, 255, 255, 0.5);
- "A functional language with first-class effects"
- "Know what your code does. All of it."
- "Effects you can see. Tests you can trust."
- "Functional programming that makes sense"
/* Gold accents */
--gold: #d4af37; /* Classic gold */
--gold-light: #f4d03f; /* Bright gold (highlights) */
--gold-dark: #b8860b; /* Dark gold (depth) */
--gold-glow: rgba(212, 175, 55, 0.3); /* Gold shadow */
### Target Audiences
/* Code */
--code-bg: rgba(212, 175, 55, 0.05); /* Gold-tinted background */
--code-border: rgba(212, 175, 55, 0.2);
1. **Haskell/FP developers** frustrated by monads
2. **Backend developers** wanting type safety without Java verbosity
3. **Educators** teaching functional programming
4. **Teams** wanting testable, maintainable code
/* Borders */
--border-subtle: rgba(255, 255, 255, 0.1);
--border-gold: rgba(212, 175, 55, 0.3);
}
```
### Typography
```css
:root {
/* Fonts */
--font-heading: "Playfair Display", "Cormorant Garamond", Georgia, serif;
--font-body: "Source Serif Pro", "Crimson Pro", Georgia, serif;
--font-code: "JetBrains Mono", "Fira Code", "SF Mono", monospace;
/* Sizes */
--text-xs: 0.75rem;
--text-sm: 0.875rem;
--text-base: 1rem;
--text-lg: 1.125rem;
--text-xl: 1.25rem;
--text-2xl: 1.5rem;
--text-3xl: 2rem;
--text-4xl: 2.5rem;
--text-5xl: 3.5rem;
--text-hero: 5rem;
}
```
### Visual Elements
- **Glass-morphism** for cards and panels (backdrop-blur + translucent bg)
- **Gold gradients** on buttons and interactive elements
- **Subtle gold lines** as section dividers
- **Minimal imagery** - let typography and code speak
- **Elegant transitions** (ease-out, 300ms)
- **Noble spacing** - generous whitespace, unhurried layout
### Tone of Voice
- Confident but not arrogant
- Technical depth with clarity
- "Divine precision" - every effect is intentional
- Sophisticated language, no casual slang
- Imperative mood for actions ("Create", "Build", "Define")
---
## Website Structure
### Navigation
## Site Structure
```
[Logo: Lux] Learn Docs Playground Community GitHub
luxlang.org/
├── / (Landing Page)
│ ├── Hero: "Functional Programming with First-Class Effects"
│ ├── Value Props: Effects, Types, Performance
│ ├── Code Demo: Interactive effect example
│ ├── Benchmark Showcase
│ ├── Quick Start
│ └── Community CTA
│
├── /learn/
│ ├── Getting Started (5-minute intro)
│ ├── Tutorial (full guided tour)
│ ├── By Example (code-first learning)
│ └── Coming from... (Rust, TypeScript, Python, Haskell)
│
├── /docs/
│ ├── Language Reference
│ │ ├── Syntax
│ │ ├── Types
│ │ ├── Effects
│ │ ├── Pattern Matching
│ │ └── Modules
│ ├── Standard Library
│ │ ├── List, String, Option, Result
│ │ └── Effects (Console, Http, FileSystem, etc.)
│ └── Tooling
│ ├── CLI Reference
│ ├── LSP Setup
│ └── Editor Integration
│
├── /playground/
│ └── Interactive REPL with examples
│
├── /benchmarks/
│ └── Performance comparisons (methodology transparent)
│
├── /community/
│ ├── Discord
│ ├── GitHub
│ ├── Contributing
│ └── Code of Conduct
│
└── /blog/
└── News, releases, deep-dives
```
### Section 1: Hero
**Headline:** "Functional programming with first-class effects"
**Subheadline:** "See exactly what your code does. Test it without mocks. Deploy with confidence."
**CTA Buttons:**
- [Try Lux] → Interactive playground
- [Get Started] → Installation guide
**Visual:** Animated effect flow visualization or side-by-side code showing effect signatures
### Section 2: The Problem (Pain Points)
**"The problem with side effects"**
> "Most bugs come from code doing things you didn't expect—network calls, file writes, database queries hidden deep in the call stack."
Show side-by-side:
- **Other languages:** Function signature doesn't reveal what it does
- **Lux:** Effect signature makes all side effects explicit
```lux
// In Lux, the type tells you everything
fn fetchUser(id: Int): User with Http, Database = {
// You KNOW this touches network and database
}
```
### Section 3: The Solution (3 Pillars)
#### Pillar 1: Effects You Can See
- Every function declares its effects
- No hidden surprises in production
- Refactor with confidence
```lux
fn processOrder(order: Order): Result<Receipt, Error> with Database, Email = {
let saved = Database.save(order)
Email.send(order.customer, "Order confirmed!")
Ok(Receipt(saved.id))
}
```
#### Pillar 2: Testing Without Mocks
- Swap effect handlers at runtime
- Test database code without a database
- Test HTTP code without network
```lux
// Production
handle processOrder(order) with {
Database -> realDatabase,
Email -> smtpServer
}
// Test - same code, different handlers
handle processOrder(order) with {
Database -> inMemoryStore,
Email -> collectMessages
}
```
#### Pillar 3: Native Performance
- Compiles to C via gcc -O2
- Matches Rust/C performance
- Reference counting with FBIP optimization
| Benchmark | Lux | Rust | Go | Node.js |
|-----------|-----|------|----|---------|
| Fibonacci | 0.015s | 0.018s | 0.041s | 0.110s |
| Ackermann | 0.020s | 0.029s | 0.107s | 0.207s |
### Section 4: Learn by Example
**Interactive code snippets** (using playground embeds):
1. **Hello World** - Basic syntax
2. **Pattern Matching** - ADTs and matching
3. **Effects** - Console, File, HTTP
4. **Handlers** - Swapping implementations
5. **Testing** - Effect-based testing
Each example: Code + "Run" button + explanation
### Section 5: Use Cases
#### Backend Services
- Effect tracking documents all side effects
- Swap database handlers for testing
- JSON, HTTP, SQL built-in
#### Reliable Systems
- `is pure`, `is total` behavioral types
- Compile-time guarantees
- Idempotency verification (coming soon)
#### Teaching FP
- Effects more intuitive than monads
- Clear progression: pure → effects → handlers
- Excellent error messages
### Section 6: Social Proof
**"What developers are saying"**
(Placeholder for future testimonials)
**Companies using Lux** (logos when available)
**Benchmark results** - Comparison chart vs Rust, Go, Node, Python
### Section 7: Getting Started
```bash
# Install
curl -sSL https://lux-lang.org/install.sh | sh
# Create project
lux new my-app
cd my-app
# Run
lux run
```
**Next steps:**
- [Language Tour] - Interactive tutorial
- [Guide] - In-depth documentation
- [Examples] - Real-world code
- [API Reference] - Standard library
### Section 8: Community
- **GitHub** - Source code, issues, PRs
- **Discord** - Chat with the community
- **Forum** - Discussions
- **Code of Conduct** - Inclusive community
---
## Design Principles
## Page Designs
### Visual Identity
### Landing Page (/)
- **Primary color:** Deep purple/violet (#6B46C1) - unique, memorable
- **Accent:** Teal (#0D9488) for CTAs
- **Background:** Clean whites and light grays
- **Typography:** System fonts for performance, monospace for code
```
┌─────────────────────────────────────────────────────────────────┐
│ │
│ ┌─ NAV ─────────────────────────────────────────────────────┐ │
│ │ LUX Learn Docs Playground Community [GH] │ │
│ └───────────────────────────────────────────────────────────┘ │
│ │
│ ┌─ HERO ────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ ╦ ╦ ╦╦ ╦ │ │
│ │ ║ ║ ║╔╣ │ │
│ │ ╩═╝╚═╝╩ ╩ │ │
│ │ │ │
│ │ Functional Programming │ │
│ │ with First-Class Effects │ │
│ │ │ │
│ │ Effects are explicit. Types are powerful. │ │
│ │ Performance is native. │ │
│ │ │ │
│ │ [Get Started] [Playground] │ │
│ │ │ │
│ └───────────────────────────────────────────────────────────┘ │
│ │
│ ┌─ CODE DEMO ───────────────────────────────────────────────┐ │
│ │ │ │
│ │ ┌──────────────────────┐ ┌────────────────────────────┐ │ │
│ │ │ fn processOrder( │ │ The type signature tells │ │ │
│ │ │ order: Order │ │ you this function: │ │ │
│ │ │ ): Receipt │ │ │ │ │
│ │ │ with {Db, Email} = │ │ • Queries the database │ │ │
│ │ │ { │ │ • Sends email │ │ │
│ │ │ let saved = │ │ • Returns a Receipt │ │ │
│ │ │ Db.save(order) │ │ │ │ │
│ │ │ Email.send(...) │ │ No surprises. No hidden │ │ │
│ │ │ Receipt(saved.id) │ │ side effects. │ │ │
│ │ │ } │ │ │ │ │
│ │ └──────────────────────┘ └────────────────────────────┘ │ │
│ │ │ │
│ └───────────────────────────────────────────────────────────┘ │
│ │
│ ┌─ VALUE PROPS ─────────────────────────────────────────────┐ │
│ │ │ │
│ │ ┌─────────────────┐ ┌─────────────────┐ ┌──────────────┐ │ │
│ │ │ EFFECTS │ │ TYPES │ │ PERFORMANCE │ │ │
│ │ │ │ │ │ │ │ │ │
│ │ │ Side effects │ │ Full inference │ │ Compiles to │ │ │
│ │ │ are tracked │ │ with algebraic │ │ native C, │ │ │
│ │ │ in the type │ │ data types. │ │ matches gcc. │ │ │
│ │ │ signature. │ │ │ │ │ │ │
│ │ └─────────────────┘ └─────────────────┘ └──────────────┘ │ │
│ │ │ │
│ └───────────────────────────────────────────────────────────┘ │
│ │
│ ┌─ BENCHMARKS ──────────────────────────────────────────────┐ │
│ │ │ │
│ │ fib(35) │ │
│ │ │ │
│ │ Lux ████████████████████████████████████ 28.1ms │ │
│ │ C █████████████████████████████████████ 29.0ms │ │
│ │ Rust █████████████████████████ 41.2ms │ │
│ │ Zig ███████████████████████ 47.0ms │ │
│ │ │ │
│ │ Verified with hyperfine. [See methodology →] │ │
│ │ │ │
│ └───────────────────────────────────────────────────────────┘ │
│ │
│ ┌─ QUICK START ─────────────────────────────────────────────┐ │
│ │ │ │
│ │ # Install via Nix │ │
│ │ $ nix run github:luxlang/lux │ │
│ │ │ │
│ │ # Or build from source │ │
│ │ $ git clone https://github.com/luxlang/lux │ │
│ │ $ cd lux && nix develop │ │
│ │ $ cargo build --release │ │
│ │ │ │
│ │ [Full Guide →] │ │
│ │ │ │
│ └───────────────────────────────────────────────────────────┘ │
│ │
│ ┌─ FOOTER ──────────────────────────────────────────────────┐ │
│ │ │ │
│ │ LUX Learn Community About │ │
│ │ Getting Started Discord GitHub │ │
│ │ Tutorial Contributing License │ │
│ │ Examples Code of Conduct │ │
│ │ Reference │ │
│ │ │ │
│ │ © 2026 Lux Language │ │
│ │ │ │
│ └───────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────┘
```
### Code Highlighting
### Documentation Page (/docs/)
Syntax highlighting theme that emphasizes:
- **Effects** - Different color to make them stand out
- **Types** - Clear distinction from values
- **Keywords** - Subtle but readable
### Interactive Elements
- **Playground embeds** - Run code in browser
- **Animated effects flow** - Visualize how effects propagate
- **Hover tooltips** - Type information on code examples
```
┌─────────────────────────────────────────────────────────────────┐
│ LUX Learn Docs Playground Community [Search] │
├─────────────────────────────────────────────────────────────────┤
│ │
│ ┌─ SIDEBAR ──────┐ ┌─ CONTENT ────────────────────────────┐ │
│ │ │ │ │ │
│ │ LANGUAGE │ │ # Effects │ │
│ │ Syntax │ │ │ │
│ │ Types │ │ Effects are Lux's defining feature. │ │
│ │ Effects ◄ │ │ They make side effects explicit in │ │
│ │ Patterns │ │ function signatures. │ │
│ │ Modules │ │ │ │
│ │ │ │ ## Declaring Effects │ │
│ │ STDLIB │ │ │ │
│ │ List │ │ ```lux │ │
│ │ String │ │ fn greet(name: String): String │ │
│ │ Option │ │ with {Console} = { │ │
│ │ Result │ │ Console.print("Hello, " + name) │ │
│ │ ... │ │ "greeted " + name │ │
│ │ │ │ } │ │
│ │ EFFECTS │ │ ``` │ │
│ │ Console │ │ │ │
│ │ Http │ │ The `with {Console}` clause tells │ │
│ │ FileSystem │ │ the compiler this function performs │ │
│ │ Database │ │ console I/O. │ │
│ │ │ │ │ │
│ │ TOOLING │ │ ## Handling Effects │ │
│ │ CLI │ │ │ │
│ │ LSP │ │ Effects must be handled at the call │ │
│ │ Editors │ │ site... │ │
│ │ │ │ │ │
│ └────────────────┘ │ [← Types] [Patterns →] │ │
│ │ │ │
│ └──────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────┘
```
---
## Technical Implementation
### Self-Hosting Goal
### Building in Lux
The website should be **built in Lux** (like Elm's site), demonstrating:
- Lux compiles to JavaScript/WASM
- Full-stack Lux is possible
- The language is production-ready
The website will be built using Lux itself, serving as both documentation and demonstration.
### Architecture
#### HTML Generation
```
┌─────────────────────────────────────────┐
│ lux-lang.org │
├─────────────────────────────────────────┤
│ Frontend (Lux → WASM/JS) │
│ - Interactive playground │
│ - Animated examples │
│ - Client-side routing │
├─────────────────────────────────────────┤
│ Backend (Lux → Native) │
│ - Serve static content │
│ - Playground compilation API │
│ - Package registry (future) │
└─────────────────────────────────────────┘
```lux
// Base HTML structure
fn html(head: List<Html>, body: List<Html>): Html = {
Html.element("html", [("lang", "en")], [
Html.element("head", [], head),
Html.element("body", [], body)
])
}
// Component: Navigation
fn nav(): Html = {
Html.element("nav", [("class", "nav")], [
Html.element("a", [("href", "/"), ("class", "nav-logo")], [
Html.text("LUX")
]),
Html.element("div", [("class", "nav-links")], [
navLink("Learn", "/learn/"),
navLink("Docs", "/docs/"),
navLink("Playground", "/playground/"),
navLink("Community", "/community/")
])
])
}
// Component: Hero section
fn hero(): Html = {
Html.element("section", [("class", "hero")], [
Html.element("div", [("class", "hero-logo")], [
Html.text("╦ ╦ ╦╦ ╦"),
Html.element("br", [], []),
Html.text("║ ║ ║╔╣"),
Html.element("br", [], []),
Html.text("╩═╝╚═╝╩ ╩")
]),
Html.element("h1", [], [
Html.text("Functional Programming"),
Html.element("br", [], []),
Html.text("with First-Class Effects")
]),
Html.element("p", [("class", "hero-tagline")], [
Html.text("Effects are explicit. Types are powerful. Performance is native.")
]),
Html.element("div", [("class", "hero-cta")], [
button("Get Started", "/learn/getting-started/", "primary"),
button("Playground", "/playground/", "secondary")
])
])
}
```
### Required Language Features
#### Static Site Generation
To build the website in Lux, we need:
```lux
// Main site generator
fn generateSite(): Unit with {FileSystem, Console} = {
Console.print("Generating Lux website...")
| Feature | Status | Priority |
|---------|--------|----------|
| JS backend | Missing | P0 |
| WASM backend | Missing | P1 |
| DOM manipulation effect | Missing | P1 |
| HTML DSL | Missing | P2 |
| CSS-in-Lux | Missing | P2 |
| Virtual DOM/diffing | Missing | P2 |
| Client routing | Missing | P2 |
// Generate landing page
let index = landingPage()
FileSystem.write("dist/index.html", renderHtml(index))
// Generate documentation pages
List.forEach(docPages(), fn(page) = {
let content = docPage(page.title, page.content)
FileSystem.write("dist/docs/" + page.slug + ".html", renderHtml(content))
})
// Generate learn pages
List.forEach(learnPages(), fn(page) = {
let content = learnPage(page.title, page.content)
FileSystem.write("dist/learn/" + page.slug + ".html", renderHtml(content))
})
// Copy static assets
copyDir("static/", "dist/static/")
Console.print("Site generated: dist/")
}
```
### CSS
Full CSS will be in `website/static/style.css`:
```css
/* Core: Sleek and Noble */
:root {
--bg-primary: #0a0a0a;
--bg-glass: rgba(255, 255, 255, 0.03);
--text-primary: #ffffff;
--text-secondary: rgba(255, 255, 255, 0.7);
--gold: #d4af37;
--gold-light: #f4d03f;
--font-heading: "Playfair Display", Georgia, serif;
--font-body: "Source Serif Pro", Georgia, serif;
--font-code: "JetBrains Mono", monospace;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
background: var(--bg-primary);
color: var(--text-primary);
font-family: var(--font-body);
font-size: 18px;
line-height: 1.7;
}
h1, h2, h3, h4 {
font-family: var(--font-heading);
font-weight: 600;
color: var(--gold-light);
letter-spacing: -0.02em;
}
/* Hero */
.hero {
min-height: 90vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 4rem 2rem;
background:
radial-gradient(ellipse at top, rgba(212, 175, 55, 0.08) 0%, transparent 50%),
var(--bg-primary);
}
.hero-logo {
font-family: var(--font-code);
color: var(--gold);
font-size: 2rem;
line-height: 1.2;
margin-bottom: 2rem;
}
.hero h1 {
font-size: clamp(2.5rem, 6vw, 4rem);
margin-bottom: 1.5rem;
}
.hero-tagline {
font-size: 1.25rem;
color: var(--text-secondary);
max-width: 600px;
margin-bottom: 3rem;
}
/* Buttons */
.btn {
font-family: var(--font-heading);
font-size: 1rem;
font-weight: 600;
padding: 1rem 2.5rem;
border-radius: 4px;
text-decoration: none;
transition: all 0.3s ease;
display: inline-block;
}
.btn-primary {
background: linear-gradient(135deg, var(--gold-dark), var(--gold));
color: #0a0a0a;
}
.btn-primary:hover {
background: linear-gradient(135deg, var(--gold), var(--gold-light));
transform: translateY(-2px);
box-shadow: 0 4px 20px rgba(212, 175, 55, 0.4);
}
.btn-secondary {
background: transparent;
color: var(--gold);
border: 1px solid var(--gold);
}
.btn-secondary:hover {
background: rgba(212, 175, 55, 0.1);
}
/* Cards */
.card {
background: var(--bg-glass);
border: 1px solid rgba(212, 175, 55, 0.15);
border-radius: 8px;
padding: 2rem;
backdrop-filter: blur(10px);
}
/* Code blocks */
pre, code {
font-family: var(--font-code);
}
code {
background: rgba(212, 175, 55, 0.1);
padding: 0.2em 0.4em;
border-radius: 3px;
font-size: 0.9em;
}
pre {
background: rgba(212, 175, 55, 0.05);
border: 1px solid rgba(212, 175, 55, 0.15);
border-radius: 6px;
padding: 1.5rem;
overflow-x: auto;
}
pre code {
background: none;
padding: 0;
}
/* Syntax highlighting */
.hljs-keyword { color: var(--gold); }
.hljs-type { color: #82aaff; }
.hljs-string { color: #c3e88d; }
.hljs-number { color: #f78c6c; }
.hljs-comment { color: rgba(255, 255, 255, 0.4); font-style: italic; }
.hljs-effect { color: var(--gold-light); font-weight: 600; }
```
---
## Content Priorities
## Content Plan
### Phase 1: Essential Content
### Phase 1: Core (Week 1-2)
1. Landing page with hero, value props, benchmarks
2. Installation guide
3. 5-minute getting started
4. Effects documentation
5. Basic syntax reference
1. **Landing page** - Hero, 3 pillars, getting started
2. **Installation guide** - All platforms
3. **Language tour** - Interactive tutorial
4. **Effect system guide** - Core concept explanation
5. **Standard library reference** - API docs
### Phase 2: Documentation (Week 3-4)
1. Full language reference
2. Standard library API docs
3. "Coming from X" guides
4. Effect system deep-dive
5. Pattern matching guide
### Phase 2: Expansion
### Phase 3: Interactive (Week 5-6)
1. Playground (if WASM ready)
2. Search functionality
3. Example showcase
4. Tutorial with exercises
6. **Cookbook** - Common patterns
7. **Video tutorials** - YouTube/embedded
8. **Comparison guides** - vs Haskell, vs Rust, vs TypeScript
9. **Blog** - Updates, deep dives
10. **Showcase** - Projects built with Lux
### Phase 3: Community
11. **Package registry** - Browse packages
12. **Forum integration** - Discussions
13. **Contribution guide** - How to contribute
14. **Governance** - RFC process
### Phase 4: Polish (Week 7-8)
1. Mobile optimization
2. Dark/light theme toggle
3. Accessibility audit
4. Performance optimization
5. SEO
---
## Success Metrics
## Lux Weaknesses Log
| Metric | Target |
|--------|--------|
| Time to first code run | < 60 seconds |
| Tutorial completion rate | > 50% |
| GitHub stars after website launch | 1000 in 6 months |
| Package registry submissions | 50 in first year |
| "I finally understand effects" comments | Qualitative goal |
*Issues discovered while building the website in Lux*
| Issue | Description | Status | Fix Commit |
|-------|-------------|--------|------------|
| Module imports broken | `import html` causes parse error | Open | - |
| No FileSystem.mkdir | Can't create directories from Lux | Open | - |
| No template strings | Multi-line HTML difficult to write | Open | - |
| No Markdown parser | Documentation requires manual HTML | Open | - |
**Full details:** See `website/lux-site/LUX_WEAKNESSES.md`
---
## Inspiration Summary
## Build Log
| From | Take |
|------|------|
| **Elm** | Emotional messaging, interactive demos, built-with-itself |
| **Gleam** | Friendly tone, ecosystem emphasis, inclusive community |
| **Rust** | Problem-first messaging, use-case segmentation |
| **Go** | Pragmatic testimonials, playground, multiple learning paths |
| **Elixir** | Case studies, real code examples, ecosystem confidence |
| **Zig** | Transparency, C interop story, pragmatic positioning |
---
## Next Steps
1. **Build JS/WASM backend** - Required to self-host
2. **Create playground** - Run Lux in browser
3. **Write language tour** - Interactive tutorial
4. **Design visual identity** - Logo, colors, typography
5. **Build MVP landing page** - Even if not in Lux initially
6. **Launch and iterate** - Get feedback early
| Date | Milestone | Notes |
|------|-----------|-------|
| 2026-02-16 | Plan created | Comprehensive research and design complete |
| 2026-02-16 | Website v1 complete | HTML/CSS landing page with sleek/noble aesthetic |
| 2026-02-16 | Weaknesses documented | Module system, FileSystem need work |