108 lines
3.4 KiB
Markdown
108 lines
3.4 KiB
Markdown
|
# 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.
|