init

DEVELOPMENT.md

@@ -0,0 +1,107 @@
+# 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.