provisioning-outreach/presentations/rust-laspalmas-250926/info/css_src_public_plan.md

Tenemos otro problema:
  El CSS es muy largo y los SVG embebidos hacen la página muy larga
  ¿ podríamos tener una versión src oara desarrollo y otra en public para produccion ?
  la de public o producción se podría generar desde los SRC y y comprimir el CSS al menos y los SVG o todo el HTML
  Alguna pruesta mejor y cómo implementarlo

⏺ Excelente observación sobre la optimización. Tienes razón, el CSS es muy largo y los SVGs embebidos aumentan considerablemente el tamaño
   del HTML. Déjame analizar las mejores opciones para un sistema de build eficiente.

  Análisis del Problema

  Tamaños actuales:

- poster.css: ~1000+ líneas con animaciones complejas
- index.html: SVGs inline aumentan el tamaño considerablemente
- Sin minificación: Espacios, comentarios, formato de desarrollo

  Soluciones de Build/Optimización

  1. Sistema Simple con Scripts (Sin Node/npm)

# Usando herramientas de línea de comandos

  cssnano, html-minifier, svgo
  Pros: Simple, sin dependencias JavaScript
  Contras: Requiere instalar herramientas globalmente

  1. Build con Nushell Scripts (Recomendado para tu stack)

# build.nu - Script Nushell para generar versión producción

  def build-production [] {
      # Minificar CSS
      # Optimizar SVGs
      # Comprimir HTML
  }
  Pros: Consistente con tu stack Nushell
  Contras: Necesita escribir lógica personalizada

  1. Vite/Parcel (Build Tool Moderno)

  // vite.config.js
  export default {
    build: {
      minify: 'terser',
      cssCodeSplit: true
    }
  }
  Pros: Automatizado, HMR para desarrollo
  Contras: Añade Node.js al stack

  1. GitHub Actions/CI Pipeline

# .github/workflows/build.yml

- uses: actions/setup-node@v3
- run: npm run build
- run: deploy to gh-pages
  Pros: Automatización completa
  Contras: Requiere configuración CI

  Propuesta Recomendada: Sistema Híbrido

  Estructura de Directorios:

  poster/
  ├── src/                    # Desarrollo
  │   ├── index.html         # HTML con comentarios
  │   ├── assets/
  │   │   ├── css/
  │   │   │   ├── poster.css # CSS sin minificar
  │   │   │   └── modules/   # CSS modular
  │   │   └── svg/
  │   │       ├── inline/    # SVGs para embeber
  │   │       └── external/  # SVGs externos
  │   └── components/        # HTML parciales
  │
  ├── dist/                   # Producción (generado)
  │   ├── index.html         # Minificado
  │   ├── assets/
  │   │   ├── css/
  │   │   │   └── main.min.css  # CSS combinado y minificado
  │   │   └── svg/
  │   │       └── sprites.svg    # SVG optimizado
  │
  ├── scripts/               # Scripts de build
  │   ├── build.nu          # Script Nushell principal
  │   ├── optimize-svg.nu   # Optimización SVG
  │   └── minify-css.nu     # Minificación CSS
  │
  └── config/
      └── build.config.nu    # Configuración de build

  Estrategia de Optimización:

  1. CSS Modularizado y Minificado

# src/assets/css/modules/

  base.css         # Reset y tipografía
  animations.css   # Todas las animaciones
  components.css   # Componentes UI
  patterns.css     # Patrones y fondos

  1. SVG Optimization Pipeline

- Desarrollo: SVGs legibles con comentarios
- Producción:
  - SVGO para optimizar
  - Combinar en sprites
  - Data URIs para críticos
  - Lazy load para decorativos

  1. HTML Processing

- Inline crítico: CSS/SVG above-the-fold
- Defer no crítico: Carga asíncrona
- Minificación: Eliminar espacios/comentarios

  Herramientas y Comandos:

  Opción A: Con Herramientas CLI

# Instalar herramientas

  npm install -g cssnano svgo html-minifier terser

# Build script

  svgo src/assets/svg/**/*.svg -o dist/assets/svg/
  cssnano src/assets/css/poster.css dist/assets/css/main.min.css
  html-minifier --minify-css --minify-js src/index.html -o dist/index.html

  Opción B: Script Nushell Puro

# build.nu

  def build [] {
      # Crear directorio dist
      mkdir dist dist/assets dist/assets/css dist/assets/svg

      # Procesar CSS - eliminar comentarios y espacios
      open src/assets/css/poster.css
      | str replace -a '\/\*[\s\S]*?\*\/' '' # Eliminar comentarios
      | str replace -a '\n\s+' ' '           # Comprimir espacios
      | str replace -a ':\s+' ':'            # Eliminar espacios después de :
      | str replace -a ';\s+' ';'            # Eliminar espacios después de ;
      | save dist/assets/css/main.min.css

      # Procesar HTML
      open src/index.html
      | str replace -a '<!--[\s\S]*?-->' ''  # Eliminar comentarios HTML
      | str replace -a '\n\s+' ' '           # Comprimir espacios
      | save dist/index.html
  }

  Optimizaciones Específicas:

  1. Critical CSS Inline

  <!-- dist/index.html -->
  <style>
    /* Solo CSS crítico inline (~10KB max) */
    .poster, .title, animaciones principales...
  </style>
  <link rel="preload" href="assets/css/decorative.css" as="style">

  1. SVG Estrategia Híbrida

  <!-- Crítico: Logo animado inline -->
  <svg id="critical-logo">...</svg>

  <!-- No crítico: Carga diferida -->
  <link rel="prefetch" href="assets/svg/decorative.svg">

  1. Compresión Adicional

- Brotli/Gzip: Para servidor
- WebP: Para imágenes si las hay
- Variable Fonts: Reducir requests de fuentes

  Métricas de Optimización Esperadas:

  | Archivo | Original | Minificado | Comprimido (gzip) |
  |---------|----------|------------|-------------------|
  | HTML    | ~50KB    | ~30KB      | ~8KB              |
  | CSS     | ~40KB    | ~25KB      | ~6KB              |
  | SVG     | ~30KB    | ~15KB      | ~4KB              |
  | Total   | 120KB    | 70KB       | 18KB              |

  Workflow de Desarrollo:

  1. Desarrollo: nu serve.nu - Servidor local con hot reload
  2. Build: nu build.nu - Genera versión optimizada
  3. Deploy: nu deploy.nu - Sube a producción

⏺ User approved Claude's plan:
  ⎿  Plan de Optimización Build System

     Estructura Propuesta:

     poster/
     ├── src/          # Código fuente (desarrollo)
     ├── dist/         # Build optimizado (producción)
     └── scripts/      # Scripts de build

     Implementación por Fases:

     Fase 1: Reorganización de Archivos

     1. Crear estructura src/ y mover archivos actuales
     2. Modularizar CSS en archivos más pequeños
     3. Separar SVGs por criticidad

     Fase 2: Scripts de Build (Nushell)

     1. build.nu - Script principal de build
     2. optimize-css.nu - Minificar y combinar CSS
     3. optimize-svg.nu - Comprimir SVGs con SVGO
     4. optimize-html.nu - Minificar HTML y inline crítico

     Fase 3: Optimizaciones

     1. CSS:
       - Eliminar comentarios y espacios
       - Combinar archivos modulares
       - Inline CSS crítico (~10KB)
     2. SVG:
       - Logo/texto animado: mantener inline (crítico)
       - Decorativos: mover a archivo externo
       - Comprimir con SVGO
     3. HTML:
       - Minificar estructura
       - Inline recursos críticos
       - Lazy load recursos no críticos

     Fase 4: Automatización

     1. Script dev.nu para desarrollo con watch
     2. Script build.nu para generar dist/
     3. Script serve.nu para preview de producción

     Resultado Esperado:

     - Reducción 40-60% del tamaño total
     - Desarrollo: Archivos legibles y organizados
     - Producción: Optimizado y minificado
     - Sin dependencias Node.js (usando Nushell)