desy-html 15.0.3 → 16.0.0

package/vite.config.js

@@ -9,6 +9,14 @@ import { outdent } from 'outdent';
 import path from 'path';
 import sharp from 'sharp';
 import { defineConfig } from 'vite';
+import { brandingPlugin, loadBrandingConfig } from './branding/vite-branding-plugin.js';
+
+// Load branding configuration
+const brandingConfig = await loadBrandingConfig(
+  process.env.BRANDING_CONFIG || 'default',
+  process.cwd(),
+  'branding'
+);
 
 // Helper functions
 function kebabCaseToPascalCase(value) {
@@ -43,6 +51,7 @@ function setupNunjucksEnvironment(paths, options = {}) {
 
   // Global configuration
   env.addGlobal('assetsUrl', '/src');
+  env.addGlobal('branding', brandingConfig);
 
   env.addGlobal('loadComponentParams', function (componentName) {
     try {
@@ -431,12 +440,57 @@ async function copyAndOptimizeImages() {
   }
 }
 
+// Copy branding assets to dist/images
+async function copyBrandingAssets() {
+  try {
+    const brandingDir = path.resolve(process.cwd(), 'branding');
+    const distImagesDir = path.resolve(process.cwd(), 'dist/images');
+
+    if (!fs.existsSync(brandingDir)) {
+      console.log('📁 branding/ does not exist, skipping branding assets');
+      return;
+    }
+
+    await fs.promises.mkdir(distImagesDir, { recursive: true });
+
+    // Copy logos (flattened to images/)
+    const logosDir = path.join(brandingDir, 'logos');
+    if (fs.existsSync(logosDir)) {
+      const logoFiles = await glob('**/*.svg', { cwd: logosDir, nodir: true });
+      for (const file of logoFiles) {
+        const sourcePath = path.join(logosDir, file);
+        const fileName = path.basename(file); // Get just the filename to flatten structure
+        const destPath = path.join(distImagesDir, fileName);
+        await fs.promises.copyFile(sourcePath, destPath);
+      }
+    }
+
+    // Copy header background images
+    const imagesDir = path.join(brandingDir, 'images');
+    if (fs.existsSync(imagesDir)) {
+      const imageFiles = await glob('*.svg', { cwd: imagesDir, nodir: true });
+      for (const file of imageFiles) {
+        const sourcePath = path.join(imagesDir, file);
+        const destPath = path.join(distImagesDir, file);
+        await fs.promises.copyFile(sourcePath, destPath);
+      }
+    }
+
+    console.log('✅ Branding assets copied to dist/images/');
+  } catch (error) {
+    console.error('❌ Error in copyBrandingAssets:', error);
+  }
+}
+
 // Function to copy assets (updated to use optimization)
 async function copyAssets() {
   try {
     // Copy and optimize images
     await copyAndOptimizeImages();
 
+    // Copy branding assets
+    await copyBrandingAssets();
+
     // Copy license if it exists
     const licenseFile = path.resolve(process.cwd(), 'EUPL-1.2.txt');
     if (fs.existsSync(licenseFile)) {
@@ -527,6 +581,41 @@ async function rewriteCssImagePaths() {
   await fs.promises.writeFile(stylePath, content);
 }
 
+// Correct HTML image paths for production (from /images/, /branding/logos/, /branding/images/ to ../images/)
+async function rewriteHtmlImagePaths() {
+  const distDir = path.resolve(process.cwd(), 'dist');
+  if (!fs.existsSync(distDir)) return;
+
+  const htmlFiles = await glob('**/*.html', { cwd: distDir, nodir: true });
+
+  for (const htmlFile of htmlFiles) {
+    const filePath = path.join(distDir, htmlFile);
+    let content = await fs.promises.readFile(filePath, 'utf8');
+
+    // Replace src="/images/ with src="../images/
+    let modified = content.replace(/src="(\/images\/)/g, 'src="../images/');
+
+    // Replace srcset="/images/ with srcset="../images/
+    modified = modified.replace(/srcset="(\/images\/)/g, 'srcset="../images/');
+
+    // Replace src="/branding/logos/ with src="../images/
+    modified = modified.replace(/src="(\/branding\/logos\/)/g, 'src="../images/');
+
+    // Replace srcset="/branding/logos/ with srcset="../images/
+    modified = modified.replace(/srcset="(\/branding\/logos\/)/g, 'srcset="../images/');
+
+    // Replace src="/branding/images/ with src="../images/
+    modified = modified.replace(/src="(\/branding\/images\/)/g, 'src="../images/');
+
+    // Replace srcset="/branding/images/ with srcset="../images/
+    modified = modified.replace(/srcset="(\/branding\/images\/)/g, 'srcset="../images/');
+
+    if (modified !== content) {
+      await fs.promises.writeFile(filePath, modified);
+    }
+  }
+}
+
 // Custom Nunjucks plugin
 function customNunjucksPlugin() {
   let env;
@@ -550,6 +639,128 @@ function customNunjucksPlugin() {
         });
       });
 
+      // Middleware to serve branding assets in development
+      middlewares.use(async (req, res, next) => {
+        if (req.url.startsWith('/branding/')) {
+          const filePath = path.join(process.cwd(), req.url);
+          if (fs.existsSync(filePath)) {
+            const ext = path.extname(filePath).toLowerCase();
+            const mimeTypes = {
+              '.svg': 'image/svg+xml',
+              '.png': 'image/png',
+              '.jpg': 'image/jpeg',
+              '.jpeg': 'image/jpeg',
+              '.webp': 'image/webp'
+            };
+            res.setHeader('Content-Type', mimeTypes[ext] || 'application/octet-stream');
+            return res.end(fs.readFileSync(filePath));
+          }
+        }
+        next();
+      });
+
+      // Helper function to find file recursively in directories
+      function findFileRecursive(dir, fileName) {
+        if (!fs.existsSync(dir)) return null;
+        const files = fs.readdirSync(dir);
+        for (const file of files) {
+          const fullPath = path.join(dir, file);
+          if (fs.statSync(fullPath).isDirectory()) {
+            const found = findFileRecursive(fullPath, fileName);
+            if (found) return found;
+          } else if (file === fileName) {
+            return fullPath;
+          }
+        }
+        return null;
+      }
+
+      // Middleware to serve branding assets from /images/ in development
+      middlewares.use(async (req, res, next) => {
+        if (req.url.startsWith('/images/')) {
+          let filePath = path.join(process.cwd(), 'public', req.url);
+
+          if (!fs.existsSync(filePath)) {
+            const fileName = path.basename(req.url);
+            
+            // Search in branding/logos (including subdirectories like eu/)
+            const brandingLogosPath = path.join(process.cwd(), 'branding/logos');
+            const foundInLogos = findFileRecursive(brandingLogosPath, fileName);
+            
+            if (foundInLogos) {
+              filePath = foundInLogos;
+            } else {
+              // Search in branding/images
+              const brandingImagesPath = path.join(process.cwd(), 'branding/images');
+              const foundInImages = findFileRecursive(brandingImagesPath, fileName);
+              if (foundInImages) {
+                filePath = foundInImages;
+              }
+            }
+          }
+
+          if (fs.existsSync(filePath)) {
+            const ext = path.extname(filePath).toLowerCase();
+            const mimeTypes = {
+              '.svg': 'image/svg+xml',
+              '.png': 'image/png',
+              '.jpg': 'image/jpeg',
+              '.jpeg': 'image/jpeg',
+              '.webp': 'image/webp'
+            };
+            res.setHeader('Content-Type', mimeTypes[ext] || 'application/octet-stream');
+            return res.end(fs.readFileSync(filePath));
+          }
+        }
+        next();
+      });
+
+      // Middleware to serve branding assets from /branding/logos/ in development
+      middlewares.use(async (req, res, next) => {
+        if (req.url.startsWith('/branding/logos/')) {
+          const fileName = path.basename(req.url);
+          const brandingLogosPath = path.join(process.cwd(), 'branding/logos');
+          const filePath = findFileRecursive(brandingLogosPath, fileName);
+
+          if (filePath && fs.existsSync(filePath)) {
+            const ext = path.extname(filePath).toLowerCase();
+            const mimeTypes = {
+              '.svg': 'image/svg+xml',
+              '.png': 'image/png',
+              '.jpg': 'image/jpeg',
+              '.jpeg': 'image/jpeg',
+              '.webp': 'image/webp'
+            };
+            res.setHeader('Content-Type', mimeTypes[ext] || 'application/octet-stream');
+            return res.end(fs.readFileSync(filePath));
+          }
+        }
+        next();
+      });
+
+      // Middleware to serve branding assets from /branding/images/ in development
+      middlewares.use(async (req, res, next) => {
+        if (req.url.startsWith('/branding/images/')) {
+          const fileName = path.basename(req.url);
+          const brandingImagesPath = path.join(process.cwd(), 'branding/images');
+          const filePath = findFileRecursive(brandingImagesPath, fileName);
+
+          if (filePath && fs.existsSync(filePath)) {
+            const ext = path.extname(filePath).toLowerCase();
+            const mimeTypes = {
+              '.svg': 'image/svg+xml',
+              '.png': 'image/png',
+              '.jpg': 'image/jpeg',
+              '.jpeg': 'image/jpeg',
+              '.webp': 'image/webp'
+            };
+            res.setHeader('Content-Type', mimeTypes[ext] || 'application/octet-stream');
+            return res.end(fs.readFileSync(filePath));
+          }
+        }
+        next();
+      });
+
       // Middleware to transform paths in development (keep as is)
       middlewares.use(async (req, res, next) => {
         // Intercept requests to /css/ and redirect to /src/css/
@@ -664,6 +875,9 @@ function customNunjucksPlugin() {
       // Step 4: Process Nunjucks files (images are already in dist)
       await processNunjucksFiles(env);
 
+      // Step 4b: Correct HTML image paths for production (after HTML files are generated)
+      await rewriteHtmlImagePaths();
+
       // Step 5: Final validation to find and fix common errors
       await validateBuild();
 
@@ -675,6 +889,7 @@ function customNunjucksPlugin() {
 // Main Vite configuration
 export default defineConfig({
   plugins: [
+    brandingPlugin(brandingConfig),
     customNunjucksPlugin(),
     tailwindcss()
   ],

package/attached_assets/Pasted--desy-html-starter-Node-Version-https-img-shields-io-ba_1765448923362.txt

@@ -1,431 +0,0 @@
-# desy-html-starter
-
-![Node Version](https://img.shields.io/badge/node-%5E22.0.0-blue.svg)
-![npm Version](https://img.shields.io/badge/npm-%5E10.0.0-blue.svg)
-[![License: EUPL-1.2](https://img.shields.io/badge/License-EUPL--1.2-yellow.svg)](https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12)
-
-A starter project for building user interfaces for Government of Aragón web applications using the **desy-html** design system library.
-
-## Overview
-
-**desy-html-starter** provides a pre-configured environment with all the dependencies needed to build accessible, consistent web applications using the desy-html component library. It includes:
-
-- **Vite** - Fast build tool and development server with hot module replacement
-- **Tailwind CSS v4** - Utility-first CSS framework
-- **Nunjucks** - Powerful templating engine for generating HTML
-- **Sharp** - Image optimization for production builds
-- **Accessible Components** - Pre-built UI components following ARIA patterns
-
-## Quick Links
-
-- **Documentation:** [https://desy.aragon.es/](https://desy.aragon.es/)
-- **Repository:** [https://bitbucket.org/sdaragon/desy-html-starter/](https://bitbucket.org/sdaragon/desy-html-starter/)
-
-## Prerequisites
-
-Before you begin, ensure you have the following installed:
-
-- **Node.js** ^22.0.0
-- **npm** ^10.0.0
-
-## Getting Started
-
-### 1. Clone or Fork the Repository
-
-```sh
-git clone https://bitbucket.org/sdaragon/desy-html-starter.git my-project
-cd my-project
-```
-
-### 2. Install Dependencies
-
-```sh
-npm install
-```
-
-### 3. Start Development Server
-
-```sh
-npm run dev
-```
-
-This starts the Vite development server with hot module replacement. Open your browser at the URL displayed in the terminal output.
-
-### 4. Build for Production
-
-```sh
-npm run build
-```
-
-This compiles HTML, purges and minifies CSS, and optimizes JavaScript into the `/dist` folder.
-
-### 5. Preview Production Build
-
-```sh
-npm run preview
-```
-
-## Project Structure
-
-```
-desy-html-starter/
-├── public/
-│   └── images/                # Project images (override desy-html images here)
-├── src/
-│   ├── css/
-│   │   ├── styles.css         # Main stylesheet (imports desy-html styles)
-│   │   └── custom.css         # Your custom project styles
-│   ├── js/
-│   │   └── index.js           # JavaScript entry point (component initialization)
-│   └── templates/
-│       ├── components/        # Custom project components
-│       ├── includes/          # Reusable template partials
-│       └── pages/             # Page templates
-├── vite.config.js             # Vite configuration
-├── package.json
-└── README.md
-```
-
-## Working with Components
-
-### Using desy-html Components
-
-Find component examples on [desy.aragon.es](https://desy.aragon.es) such as [this button component](https://desy.aragon.es/componente-botones-codigo.html). Copy the Nunjucks code and paste it into your template's content area.
-
-Components are available as Nunjucks macros. Import and use them in your templates:
-
-```njk
-{% from "components/button/_macro.button.njk" import componentButton %}
-
-{{ componentButton({
-  "text": "Transparent",
-  "classes": "c-button--transparent"
-}) }}
-```
-
-### Available Components
-
-The desy-html library includes many [accessible components](https://desy.aragon.es/componentes.html):
-
-- **Navigation:** Menu, Menubar, Nav, Tabs
-- **Forms:** Checkbox, Radio Button, Listbox, Datepicker, Toggle
-- **Feedback:** Alert, Notification, Dialog, Tooltip
-- **Layout:** Accordion, Collapsible, Tree, Treegrid
-- **Data:** Table Advanced, Dropdown
-
-## Styling
-
-### Using Tailwind CSS
-
-The project uses Tailwind CSS v4. All Tailwind utility classes are available in your templates:
-
-```html
-<div class="flex items-center gap-4 p-6 bg-white rounded-lg shadow">
-  <h1 class="text-2xl font-bold text-gray-900">Hello World</h1>
-</div>
-```
-
-### Adding Custom Styles
-
-Add your project-specific styles in `src/css/custom.css`:
-
-```css
-/* src/css/custom.css */
-.my-custom-class {
-  /* Your custom styles */
-}
-```
-
-### Theme Variables
-
-desy-html provides CSS custom properties (variables) for consistent theming. These are automatically included when you import the main [stylesheet](https://bitbucket.org/sdaragon/desy-html/src/master/src/css/styles.css).
-
-## Templates
-
-### Page Templates
-
-Create new pages by extending the base layouts. Several templates are provided:
-
-| Template | Description |
-|----------|-------------|
-| `plantilla-sin-loguear.html` | Public pages (not logged in) |
-| `plantilla-logueado-con-cabecera-fija.html` | Logged-in pages with fixed header |
-| `plantilla-logueado-con-selector-de-app.html` | Logged-in with app selector |
-| `plantilla-con-header-advanced.html` | Advanced header layout |
-
-### Creating Custom Components
-
-Custom components follow a consistent file structure. Create a new folder in `src/templates/components/` with the following files:
-
-```
-src/templates/components/my-component/
-├── _macro.my-component.njk        # Exports the macro (entry point)
-├── _template.my-component.njk     # HTML template with the component markup
-├── _examples.my-component.njk     # Example data for testing/documentation
-└── params.my-component.yaml       # Parameter documentation
-```
-
-#### Step 1: Create the Macro File
-
-The macro file exports your component and includes the template:
-
-```njk
-{# _macro.my-component.njk #}
-{% macro componentMyComponent(params) %}
-{% include "./_template.my-component.njk" %}
-{% endmacro %}
-```
-
-#### Step 2: Create the Template File
-
-The template contains the actual HTML markup. Use the `params` object to access component properties:
-
-```njk
-{# _template.my-component.njk #}
-<div {%- if params.classes %} class="{{ params.classes }}"{% endif %}
-{%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
-  {{ params.html | safe if params.html else params.text }}
-</div>
-```
-
-#### Step 3: Define Examples (Optional)
-
-Examples help document component usage and can be used for testing:
-
-```njk
-{# _examples.my-component.njk #}
-{% set exampleComponent = "my-component" %}
-{% set examples = [
-  {
-    "name": "default",
-    "data": {
-      "text": "This is my component"
-    }
-  },
-  {
-    "name": "with html",
-    "data": {
-      "html": "This is <strong class=\"font-bold\">my component</strong>"
-    }
-  }
-] %}
-```
-
-#### Step 4: Document Parameters (Optional)
-
-The YAML file documents available parameters for the component:
-
-```yaml
-# params.my-component.yaml
-params:
-- name: text
-  type: string
-  required: true
-  description: Text content for the component. Ignored if `html` is provided.
-- name: html
-  type: string
-  required: false
-  description: HTML content for the component. Takes priority over `text`.
-- name: classes
-  type: string
-  required: false
-  description: CSS classes to add to the component.
-- name: attributes
-  type: object
-  required: false
-  description: HTML attributes (e.g., data attributes) to add to the component.
-```
-
-#### Using Your Component
-
-Import and use your component in any template. The project configures Nunjucks to resolve paths from `src/templates/`, so use the `components/` prefix:
-
-```njk
-{% from "components/my-component/_macro.my-component.njk" import componentMyComponent %}
-
-{{ componentMyComponent({
-  text: "Hello world",
-  classes: "text-lg text-gray-700"
-}) }}
-```
-
-#### Components with Nested Content (Caller)
-
-For components that need to accept nested content, use Nunjucks' `call` block pattern:
-
-```njk
-{# _template.my-container.njk #}
-<div class="container">
-  <p>{{ params.text }}</p>
-  {% if caller %}
-    {{ caller() }}
-  {% elseif params.caller %}
-    {{ params.caller | safe }}
-  {% endif %}
-</div>
-```
-
-Usage with `call` block:
-
-```njk
-{% call componentMyContainer({ text: "Container title" }) %}
-  <p>This nested content appears inside the container.</p>
-  <button>Click me</button>
-{% endcall %}
-```
-
-### Using Includes
-
-Includes are reusable template fragments that can be inserted into multiple pages. Unlike components (which receive parameters), includes are static snippets that can import and use components internally.
-
-#### Creating an Include
-
-Create include files in `src/templates/includes/` with names starting with underscore:
-
-```
-src/templates/includes/
-└── _my-include.njk
-```
-
-Example include file:
-
-```njk
-{# _my-include.njk #}
-{% from "components/test-component/_macro.test-component.njk" import componentTestComponent %}
-
-<div class="p-base border border-neutral-base">
-  <p>This is reusable content</p>
-  {{ componentTestComponent({
-    "text": "A component inside the include"
-  }) }}
-</div>
-```
-
-#### Using an Include
-
-Insert an include into any page or template with the `{% include %}` tag:
-
-```njk
-{% include "includes/_my-include.njk" %}
-```
-
-#### When to Use Includes vs Components
-
-| Use Case | Includes | Components |
-|----------|----------|------------|
-| Static, repeated content | Yes | No |
-| Configurable, reusable UI elements | No | Yes |
-| Content that needs parameters | No | Yes |
-| Quick content reuse without configuration | Yes | No |
-
-## Images
-
-### Image Inheritance System
-
-This project uses an image inheritance system that allows you to use images from the desy-html library while also being able to override them with your own:
-
-1. **Base images** come from `node_modules/desy-html/public/images/`
-2. **Project images** in `public/images/` override base images with the same name
-
-### Adding Project Images
-
-Place your images in `public/images/`. Reference them in templates using the `/images/` path:
-
-```html
-<img src="/images/my-image.png" alt="Description">
-```
-
-### Overriding desy-html Images
-
-To replace a desy-html image with your own version, simply place a file with the same name in `public/images/`. Your image will take priority.
-
-### Using Images in CSS
-
-For background images in your custom CSS, use the `/images/` path:
-
-```css
-.my-element {
-  background-image: url('/images/my-background.png');
-}
-```
-
-### Image Optimization
-
-During production builds, images are automatically optimized using Sharp:
-
-- Images from both desy-html and your project are processed
-- Supported formats: jpg, png, webp, avif
-- File sizes are optimized for production
-- Paths are automatically adjusted for the dist folder
-
-## Development Tips
-
-### Hot Module Replacement
-
-The development server supports HMR. Changes to CSS, JavaScript, and templates will automatically refresh in the browser.
-
-### Nunjucks Template Syntax
-
-```njk
-{# Comments #}
-{% set variable = "value" %}
-{{ variable }}
-
-{% if condition %}
-  ...
-{% endif %}
-
-{% for item in items %}
-  {{ item }}
-{% endfor %}
-
-{% include "includes/_partial.njk" %}
-```
-
-### Debugging
-
-- Check the browser console for JavaScript errors
-- Use the Vite terminal output for build errors
-- Inspect generated HTML in browser developer tools
-
-## Scripts Reference
-
-| Command | Description |
-|---------|-------------|
-| `npm run dev` | Start development server with HMR |
-| `npm run build` | Build for production |
-| `npm run preview` | Preview production build locally |
-
-## Accessibility
-
-All desy-html components are built with accessibility in mind:
-
-- Proper ARIA attributes and roles
-- Keyboard navigation support
-- Screen reader compatibility
-- Focus management
-
-When creating custom components, follow the same accessibility patterns.
-
-## Browser Support
-
-The project targets modern browsers. For specific compatibility information, refer to the [desy documentation](https://desy.aragon.es/).
-
-## Contributing
-
-1. Fork the repository
-2. Create a feature branch
-3. Make your changes
-4. Submit a pull request
-
-## Author
-
-**SDA Servicios Digitales de Aragón**
-
-## License
-
-This project is licensed under the [EUPL-1.2](https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12) license.
-
----
-
-For more information and detailed component documentation, visit [https://desy.aragon.es/](https://desy.aragon.es/)