lucy/c-base-nix-website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
c-base-nix-website/DEVELOPMENT.md
Lucy 21e7d37205 init
2025-09-26 08:02:47 +02:00

3.4 KiB
Raw Blame History

C-base Nix Web Development

This project demonstrates advanced Nix capabilities for web development by creating a pixel-perfect clone of the c-base.org website using pure Nix as the development language.

Quick Start

```bash

Enter the development environment

nix develop

Generate the static site

generate-site

Start development server

dev-server

Or use nix run commands

nix run .#generate nix run .#dev ```

Architecture

Core System

  • HTML DSL (src/core/html.nix) - Pure Nix functions for HTML generation
  • CSS Generation (src/core/css.nix) - CSS-in-Nix with utility functions
  • Component System (src/core/components.nix) - Reusable UI components
  • Session Tracking (src/core/session.nix) - Development analytics

Content & Styling

  • Content Data (src/data/content.nix) - Site content as Nix attribute sets
  • Page Templates (src/pages/) - Page generation functions
  • Styles (src/styles/) - CSS generation and theming

Build System

  • Flake Configuration (flake.nix) - Nix flake with build outputs
  • Development Tools - Hot-reload server and build scripts
  • Session Analytics (ai/) - JSON logs of development activity

Testing

```bash

Run syntax validation

bash scripts/test-nix-build.sh

Test individual components

nix-instantiate --eval test-build.nix ```

Features

Implemented

  • ✅ Pure Nix HTML DSL
  • ✅ CSS-in-Nix generation
  • ✅ Component-based architecture
  • ✅ Session tracking and analytics
  • ✅ Development server with hot-reload
  • ✅ Cyberpunk aesthetic matching c-base.org

Planned Extensions

  • 🔄 Type checking system for component props
  • 🔄 Advanced asset optimization pipeline
  • 🔄 Interactive terminal simulator
  • 🔄 Matrix rain animations
  • 🔄 PWA capabilities

File Structure

``` ├── flake.nix # Main flake configuration ├── src/ │ ├── core/ # Core Nix modules │ │ ├── html.nix # HTML DSL functions │ │ ├── css.nix # CSS generation │ │ ├── components.nix # Component system │ │ └── session.nix # Session tracking │ ├── data/ # Content data │ │ └── content.nix # Site content │ ├── pages/ # Page templates │ │ └── index.nix # Homepage │ └── styles/ # Styling │ └── main.nix # Main stylesheet ├── ai/ # Session analytics │ ├── sessions/ # Build/dev session logs │ └── component-usage.json # Component usage data └── dist/ # Generated output ├── index.html └── styles.css ```

Development Workflow

  1. Edit Content: Modify src/data/content.nix for site content
  2. Add Components: Create new components in src/core/components.nix
  3. Style Changes: Update styles in src/styles/main.nix
  4. Build & Test: Run generate-site to build and test changes
  5. Develop: Use dev-server for live development

Session Analytics

All development activity is automatically logged:

  • Build performance metrics
  • Component usage statistics
  • Development session data
  • Error tracking and debugging info

View logs in the ai/ directory for insights into development patterns and optimization opportunities.