7.4 KiB
7.4 KiB
how can I reuse all this setup for poster as a generic framework to be used for one or several pages that can share assets ?
⏺ Let me analyze the current poster build system and design a plan for transforming it into a reusable framework for multiple pages with shared assets.
⏺ Bash(ls -la scripts/) ⎿ total 176 drwxr-xr-x@ 10 jesusperezlorenzo admin 320 Sep 18 11:56 . drwxr-xr-x@ 14 jesusperezlorenzo admin 448 Sep 18 11:57 .. … +8 lines (ctrl+o to expand)
⏺ Bash(tree -L 2 -a) ⎿ . ├── assets │ ├── css … +57 lines (ctrl+o to expand)
⏺ Read(config/build.config.toml) ⎿ Read 77 lines (ctrl+o to expand)
⏺ Bash(ls src/assets/css/modules/) ⎿ animations.css base.css components.css patterns.css
⏺ Bash(ls src/) ⎿ assets components index.html
⏺ Based on my analysis of the current poster build system, I can see it's already well-structured with modular scripts, optimization tools, and configuration management. Now let me design a plan to transform it into a reusable framework for multiple pages with shared assets.
⏺ User approved Claude's plan: ⎿ Plan: Transform Poster Build System into a Multi-Page Framework
1. Project Structure Reorganization
Create a new framework structure that supports multiple pages:
web-builder-framework/
├── framework/ # Core framework (current scripts)
│ ├── core/
│ │ ├── build.nu
│ │ ├── dev.nu
│ │ ├── prod.nu
│ │ └── utils.nu
│ ├── optimizers/
│ │ ├── css.nu
│ │ ├── html.nu
│ │ └── svg.nu
│ └── templates/
│ └── page.config.toml.template
├── shared/ # Shared assets across all pages
│ ├── css/
│ │ ├── base/ # Common reset, typography
│ │ ├── components/ # Reusable components
│ │ └── utilities/ # Helper classes
│ ├── svg/
│ │ └── common/ # Shared icons, logos
│ └── js/ # Shared JavaScript if needed
├── pages/ # Individual page projects
│ ├── homepage/
│ │ ├── config.toml
│ │ ├── src/
│ │ └── dist/
│ ├── poster-rust/ # Current poster
│ │ ├── config.toml
│ │ ├── src/
│ │ └── dist/
│ └── about/
│ ├── config.toml
│ ├── src/
│ └── dist/
└── sites/ # Multi-page site configurations
└── rust-meetup/
└── site.config.toml
2. Enhanced Configuration System
Page-Level Config (pages/*/config.toml):
[page]
name = "rust-poster"
title = "Rust Meetup 2025 Poster"
type = "single" # single, landing, article
[shared]
# Reference shared assets
css_modules = [
"@shared/base/reset.css", # From shared
"@shared/components/card.css", # From shared
"local/poster.css" # Page-specific
]
svg_sprites = ["@shared/common/icons.svg"]
[local]
# Page-specific settings
css_modules = ["poster.css", "animations.css"]
critical_modules = 2
Site-Level Config (sites/*/site.config.toml):
[site]
name = "rust-meetup-site"
pages = ["homepage", "poster-rust", "about"]
shared_assets = true
[build]
output_dir = "dist/site"
combine_assets = true # Combine CSS/JS across pages
generate_sitemap = true
3. Framework CLI Commands
New command structure:
# Page-specific commands
wb page create <name> --template <type>
wb page build <name> [--dev|--prod]
wb page dev <name> --watch
wb page list
# Site-wide commands
wb site build <site-name>
wb site dev <site-name>
wb site deploy <site-name>
# Shared asset management
wb shared add-css <file>
wb shared add-svg <file>
wb shared list
# Framework management
wb init <project-name>
wb upgrade
4. Core Framework Features
Asset Resolution System:
- @shared/ prefix for shared assets
- @page/<name>/ for cross-page references
- Automatic deduplication
- Smart bundling
Build Pipeline Enhancements:
# New build function signature
def build_page [
page_name: string,
config_override?: record,
--shared-context: record # From site build
] {
# Load page config
let page_config = load_page_config $page_name
# Resolve shared assets
let resolved_assets = resolve_assets $page_config
# Build with context
...
}
Template System:
# Page template generator
def create_page_from_template [
name: string,
template: string
] {
# Copy template structure
# Generate config
# Setup initial files
}
5. Shared Asset Management
CSS Strategy:
- Shared base: Reset, typography, utilities
- Shared components: Buttons, cards, modals
- Page-specific: Unique styles per page
- Smart bundling: Combine or split based on usage
SVG Management:
- Symbol library: Shared icons as symbols
- Sprite sheets: Per-page or global
- Inline optimization: Auto-inline small SVGs
6. Multi-Page Site Builder
# Site builder orchestrator
def build_site [site_name: string] {
let site_config = load_site_config $site_name
# Build all pages
let pages = $site_config.pages | par-each { |page|
build_page $page --shared-context $site_config.shared
}
# Combine assets if needed
if $site_config.combine_assets {
combine_site_assets $pages
}
# Generate site-wide files
generate_sitemap $pages
generate_manifest $pages
}
7. Development Experience
Watch Mode Improvements:
- Watch shared assets globally
- Rebuild dependent pages on shared changes
- Hot reload across multiple pages
Dev Server Enhancements:
- Serve multiple pages from single server
- Route mapping for multi-page sites
- Shared asset proxying
8. Migration Path
1. Phase 1: Restructure current code into framework/
2. Phase 2: Extract shared assets from poster
3. Phase 3: Create page wrapper for current poster
4. Phase 4: Add multi-page commands
5. Phase 5: Create example second page
6. Phase 6: Add site-level orchestration
Benefits of This Approach
1. Reusability: Core framework separated from page content
2. Scalability: Easy to add new pages
3. Efficiency: Shared assets reduce duplication
4. Flexibility: Pages can be built individually or as sites
5. Maintainability: Clear separation of concerns
6. Performance: Smart bundling and optimization
7. Developer Experience: Simple CLI, good defaults
This framework would allow you to:
- Create new pages quickly with templates
- Share common assets efficiently
- Build single pages or complete sites
- Maintain consistent optimization across all pages
- Deploy individual pages or entire sites