252 lines
7.4 KiB
Markdown
252 lines
7.4 KiB
Markdown
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
|