🚀 Provisioning Poster

Interactive HOWTO Guide - Build System Optimization

🏁 Quick Setup (5 Minutes)

Get the build system running in no time

1

Verify Prerequisites

Make sure you have Nushell installed and working.

$ nu --version
0.105.2 (or higher)
If Nushell is not installed, visit nushell.sh for installation instructions.
2

Navigate to Project

cd poster/
ls

You should see the following structure:

poster/ ├── src/ # Source files ├── scripts/ # Build scripts ├── config/ # Configuration ├── docs/ # Documentation └── README.md
3

First Build

nu scripts/dev.nu build
Success! Your first development build is complete.
4

Start Development Server

nu scripts/dev.nu --watch --port 3000

Open http://localhost:3000 in your browser to see the poster.

🎯 Setup Progress

Setup Complete!

🛠️ Development Workflow

Daily development tasks and best practices

1

Start Development Session

# Clean previous build and start fresh
nu scripts/dev.nu clean

# Start with file watching (auto-rebuild)
nu scripts/dev.nu --watch --verbose
2

Edit Files

The build system watches these files for changes:

src/ ├── index.html # Main HTML file ├── assets/css/modules/ │ ├── base.css # Reset, typography │ ├── components.css # UI components │ ├── animations.css # All animations │ └── patterns.css # Visual patterns └── assets/svg/ ├── symbols.svg # Animated symbols └── decorative-sprites.svg # Decorative elements
3

Real-time Feedback

👁️ Watching 12 files for changes...
📝 Changed files: src/assets/css/modules/animations.css
🔨 Rebuilding...
✅ Rebuild completed in 1.2s
4

Validate Your Work

# Lint and validate source files
nu scripts/dev.nu lint

# Analyze file sizes
nu scripts/dev.nu analyze

🎨 Try Live Editing

Make changes to your CSS and see them instantly!

⚡ Optimization Techniques

Measure and improve performance

42%
Total Size Reduction
70KB
Optimized Size
18KB
Gzipped Size
A+
Performance Score
1

Analyze Current Performance

# Build with detailed analysis
nu scripts/prod.nu full
📊 Performance Audit
📄 HTML: 32.1 KB (40% reduction)
🎨 CSS: 24.8 KB (37% reduction)
🖼️ SVG: 14.2 KB (52% reduction)
⭐ Performance Score: A+ (Excellent)
2

Optimization Strategies

CSS Optimization:

  • ✅ Modular architecture (4 focused modules)
  • ✅ Critical CSS inlining (above-the-fold)
  • ✅ Minification (comments & whitespace removal)
  • ✅ Async loading (non-critical styles)

SVG Optimization:

  • ✅ Smart inlining (animated elements)
  • ✅ External sprites (decorative elements)
  • ✅ Data URIs (small icons in CSS)
  • ✅ Size-based decisions (automatic)
3

Custom Configuration

Adjust optimization settings in config/build.config.nu:

# More aggressive optimization
export const config = {
    critical_css_modules: 3,      # More CSS inline
    inline_css_max_size: 15360,   # 15KB threshold
    svg_precision: 1,             # Less precision = smaller files
    enable_gzip: true             # Auto-compression
}

📈 Optimization Simulator

See how different settings affect file sizes:

🚀 Production Deployment

Build and deploy optimized assets

1

Production Build

# Full production build with all optimizations
nu scripts/prod.nu full
Generates optimized files in dist/ directory.
2

Generated Files

dist/ ├── index.html # Minified HTML with inlined critical CSS ├── assets/ │ ├── css/ │ │ ├── main.min.css # Combined & minified CSS │ │ └── main.min.css.gz # Gzipped version │ └── svg/ │ └── sprites.svg # Optimized SVG sprites ├── .htaccess # Apache configuration ├── nginx.conf # Nginx configuration ├── deploy.sh # Deployment script └── robots.txt # SEO robots file
3

Test Production Build

# Preview production build locally
nu scripts/dev.nu preview --port 8080

Open http://localhost:8080 to test the optimized version.

4

Deploy to Server

# Configure deployment variables
export DEPLOY_HOST="your-server.com"
export DEPLOY_PATH="/var/www/provisioning-poster"
export DEPLOY_USER="deploy"

# Run deployment script
./dist/deploy.sh

🎯 Deployment Checklist







🔧 Troubleshooting

Common issues and solutions

?

Build Fails

Problem: Build command returns errors

Solutions:

# Check Nushell version
nu --version

# Clean and retry
nu scripts/dev.nu clean
nu scripts/dev.nu build --verbose
?

Server Won't Start

Problem: Development server fails to start

Solutions:

# Check if port is in use
netstat -an | grep 8080

# Use different port
nu scripts/dev.nu --port 3000
?

Files Too Large

Problem: Optimized files still too large

Solutions:

# Edit config/build.config.nu for more aggressive optimization:
export const config = {
    svg_precision: 1,               # Less precision
    inline_css_max_size: 5120,      # 5KB threshold
    critical_css_modules: 1         # Less inline CSS
}
?

Animations Broken

Problem: SVG animations not working after optimization

Solution:

Animated SVGs must remain inline. Check that critical animations are in the HTML file, not external SVG files.

The build system automatically handles this for you.

🆘 Interactive Troubleshooter

Select your issue for specific guidance: