# 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.