desy-html 16.0.3 → 17.0.0

package/branding/vite-branding-plugin.js

@@ -1,155 +1,221 @@
-import fs from 'fs';
-import path from 'path';
-import { pathToFileURL } from 'url';
-
-/**
- * Load branding configuration from a file
- * @param {string} brandingName - The branding config name (e.g., 'default', 'aragon', 'yourorganization')
- * @param {string} basePath - The base path to look for the config file
- * @param {string} subFolder - Subfolder where branding config is located (default: 'branding')
- * @returns {Promise<object|null>} The branding configuration object
- */
-export async function loadBrandingConfig(brandingName = 'default', basePath = process.cwd(), subFolder = 'branding') {
-  const configFile = brandingName === 'default'
-    ? 'branding.config.js'
-    : `branding.config.${brandingName}.js`;
-  const configPath = path.resolve(basePath, subFolder, configFile);
-
-  if (fs.existsSync(configPath)) {
-    try {
-      const brandingModule = await import(pathToFileURL(configPath).href);
-      console.log(`✓ Branding loaded: ${configFile}`);
-      return brandingModule.default;
-    } catch (err) {
-      console.warn(`Warning: Could not load ${configFile}:`, err.message);
-    }
-  } else if (brandingName !== 'default') {
-    console.warn(`Warning: Branding config not found: ${configFile}`);
-  }
-  return null;
-}
-
-/**
- * Vite plugin to inject branding config values (typography, background images) into CSS
- * @param {object} config - The branding configuration object
- * @returns {object} Vite plugin
- */
-export function brandingPlugin(config) {
-  return {
-    name: 'vite-plugin-branding',
-    enforce: 'pre',
-
-    transform(code, id) {
-      if (!id.endsWith('src/css/styles.css')) return null;
-
-      let transformed = code;
-      let hasChanges = false;
-
-      const typography = config?.typography?.fontFamily;
-      if (typography) {
-        if (typography.sans) {
-          transformed = transformed.replace(
-            /--font-sans:\s*[^;]+;/,
-            `--font-sans: ${typography.sans};`
-          );
-          hasChanges = true;
-        }
-        if (typography.heading) {
-          transformed = transformed.replace(
-            /--font-heading:\s*var\(--font-sans\);/,
-            `--font-heading: ${typography.heading};`
-          );
-          transformed = transformed.replace(
-            /--font-heading:\s*[^;]+;/,
-            `--font-heading: ${typography.heading};`
-          );
-          hasChanges = true;
-        }
-      }
-
-      const images = config?.images;
-      if (images?.headerBackground) {
-        transformed = transformed.replace(
-          /--background-image-general:\s*[^;]+;/,
-          `--background-image-general: url('${images.headerBackground}');`
-        );
-        hasChanges = true;
-      }
-      if (images?.headerBackgroundLg) {
-        transformed = transformed.replace(
-          /--background-image-general-lg:\s*[^;]+;/,
-          `--background-image-general-lg: url('${images.headerBackgroundLg}');`
-        );
-        hasChanges = true;
-      }
-
-      const logosEu = config?.logos?.eu;
-      if (logosEu?.eu) {
-        transformed = transformed.replace(
-          /--logo-eu:\s*[^;]+;/,
-          `--logo-eu: url('${logosEu.eu}');`
-        );
-        hasChanges = true;
-      }
-      if (logosEu?.feder) {
-        transformed = transformed.replace(
-          /--logo-feder:\s*[^;]+;/,
-          `--logo-feder: url('${logosEu.feder}');`
-        );
-        hasChanges = true;
-      }
-      if (logosEu?.fse) {
-        transformed = transformed.replace(
-          /--logo-fse:\s*[^;]+;/,
-          `--logo-fse: url('${logosEu.fse}');`
-        );
-        hasChanges = true;
-      }
-      if (logosEu?.feader) {
-        transformed = transformed.replace(
-          /--logo-feader:\s*[^;]+;/,
-          `--logo-feader: url('${logosEu.feader}');`
-        );
-        hasChanges = true;
-      }
-      if (logosEu?.plurifondo) {
-        transformed = transformed.replace(
-          /--logo-plurifondo:\s*[^;]+;/,
-          `--logo-plurifondo: url('${logosEu.plurifondo}');`
-        );
-        hasChanges = true;
-      }
-
-      return hasChanges ? { code: transformed, map: null } : null;
-    },
-
-    closeBundle() {
-      const distDir = path.resolve(process.cwd(), 'dist');
-      const favicon = config?.favicon;
-      
-      if (!favicon) return;
-
-      const faviconFiles = [
-        { key: 'svg', fileName: 'favicon.svg' },
-        { key: 'ico', fileName: 'favicon.ico' },
-        { key: 'appleTouch', fileName: 'apple-touch-icon.png' }
-      ];
-
-      for (const { key, fileName } of faviconFiles) {
-        if (favicon[key]) {
-          const src = path.resolve(process.cwd(), 'branding/logos', fileName);
-          if (fs.existsSync(src)) {
-            try {
-              fs.copyFileSync(src, path.join(distDir, fileName));
-              console.log(`✓ Favicon ${fileName} copied to dist`);
-            } catch (err) {
-              console.warn(`Warning: Could not copy ${fileName}:`, err.message);
-            }
-          }
-        }
-      }
-    }
-  };
-}
-
-export default { brandingPlugin, loadBrandingConfig };
+import fs from 'fs';
+import path from 'path';
+import { pathToFileURL } from 'url';
+
+/**
+ * Load branding configuration from a file
+ * @param {string} brandingName - The branding config name (e.g., 'default', 'aragon', 'yourorganization')
+ * @param {string} basePath - The base path to look for the config file
+ * @param {string} subFolder - Subfolder where branding config is located (default: 'branding')
+ * @returns {Promise<object|null>} The branding configuration object
+ */
+export async function loadBrandingConfig(brandingName = 'default', basePath = process.cwd(), subFolder = 'branding') {
+  const configFile = brandingName === 'default'
+    ? 'branding.config.js'
+    : `branding.config.${brandingName}.js`;
+  const configPath = path.resolve(basePath, subFolder, configFile);
+
+  if (fs.existsSync(configPath)) {
+    try {
+      const brandingModule = await import(pathToFileURL(configPath).href);
+      console.log(`✓ Branding loaded: ${configFile}`);
+      return brandingModule.default;
+    } catch (err) {
+      console.warn(`Warning: Could not load ${configFile}:`, err.message);
+    }
+  } else if (brandingName !== 'default') {
+    console.warn(`Warning: Branding config not found: ${configFile}`);
+  }
+  return null;
+}
+
+/**
+ * Vite plugin to inject branding config values (typography, background images) into CSS
+ * @param {object} config - The branding configuration object
+ * @returns {object} Vite plugin
+ */
+export function brandingPlugin(config) {
+  return {
+    name: 'vite-plugin-branding',
+    enforce: 'pre',
+
+    transform(code, id) {
+      if (!id.endsWith('src/css/styles.css')) return null;
+
+      let transformed = code;
+      let hasChanges = false;
+
+      const typography = config?.typography?.fontFamily;
+      if (typography) {
+        if (typography.sans) {
+          transformed = transformed.replace(
+            /--font-sans:\s*[^;]+;/,
+            `--font-sans: ${typography.sans};`
+          );
+          hasChanges = true;
+        }
+        if (typography.heading) {
+          transformed = transformed.replace(
+            /--font-heading:\s*var\(--font-sans\);/,
+            `--font-heading: ${typography.heading};`
+          );
+          transformed = transformed.replace(
+            /--font-heading:\s*[^;]+;/,
+            `--font-heading: ${typography.heading};`
+          );
+          hasChanges = true;
+        }
+      }
+
+      const images = config?.images;
+      if (images?.headerBackground) {
+        transformed = transformed.replace(
+          /--background-image-general:\s*[^;]+;/,
+          `--background-image-general: url('${images.headerBackground}');`
+        );
+        hasChanges = true;
+      }
+      if (images?.headerBackgroundLg) {
+        transformed = transformed.replace(
+          /--background-image-general-lg:\s*[^;]+;/,
+          `--background-image-general-lg: url('${images.headerBackgroundLg}');`
+        );
+        hasChanges = true;
+      }
+
+      const logosEu = config?.logos?.eu;
+      if (logosEu?.eu) {
+        transformed = transformed.replace(
+          /--logo-eu:\s*[^;]+;/,
+          `--logo-eu: url('${logosEu.eu}');`
+        );
+        hasChanges = true;
+      }
+      if (logosEu?.feder) {
+        transformed = transformed.replace(
+          /--logo-feder:\s*[^;]+;/,
+          `--logo-feder: url('${logosEu.feder}');`
+        );
+        hasChanges = true;
+      }
+      if (logosEu?.fse) {
+        transformed = transformed.replace(
+          /--logo-fse:\s*[^;]+;/,
+          `--logo-fse: url('${logosEu.fse}');`
+        );
+        hasChanges = true;
+      }
+      if (logosEu?.feader) {
+        transformed = transformed.replace(
+          /--logo-feader:\s*[^;]+;/,
+          `--logo-feader: url('${logosEu.feader}');`
+        );
+        hasChanges = true;
+      }
+      if (logosEu?.plurifondo) {
+        transformed = transformed.replace(
+          /--logo-plurifondo:\s*[^;]+;/,
+          `--logo-plurifondo: url('${logosEu.plurifondo}');`
+        );
+        hasChanges = true;
+      }
+
+      return hasChanges ? { code: transformed, map: null } : null;
+    },
+
+    closeBundle() {
+      const distDir = path.resolve(process.cwd(), 'dist');
+      const imagesDir = path.resolve(process.cwd(), 'dist/images');
+      const favicon = config?.favicon;
+      
+      // Early exit if no favicon configuration
+      if (!favicon) return;
+
+      // Helper function to recursively find HTML files
+      const findHtmlFiles = (dir, files = []) => {
+        if (!fs.existsSync(dir)) return files;
+        const items = fs.readdirSync(dir, { withFileTypes: true });
+        for (const item of items) {
+          const fullPath = path.join(dir, item.name);
+          if (item.isDirectory()) {
+            findHtmlFiles(fullPath, files);
+          } else if (item.name.endsWith('.html')) {
+            files.push(fullPath);
+          }
+        }
+        return files;
+      };
+
+      const faviconFiles = [
+        { key: 'svg', fileName: 'favicon.svg' },
+        { key: 'ico', fileName: 'favicon.ico' },
+        { key: 'appleTouch', fileName: 'apple-touch-icon.png' }
+      ];
+
+      // All go to imagesDir
+      const destDir = imagesDir;
+
+      for (const { key, fileName } of faviconFiles) {
+        const faviconPath = favicon[key];
+        if (!faviconPath) continue;
+
+        // Extraer el nombre del archivo de la ruta configurada
+        const fileNameFromPath = path.basename(faviconPath);
+        const src = path.resolve(process.cwd(), faviconPath.slice(1)); // Quitar el / inicial
+
+        if (fs.existsSync(src)) {
+          try {
+            // Ensure destination directory exists
+            if (!fs.existsSync(destDir)) {
+              fs.mkdirSync(destDir, { recursive: true });
+            }
+            fs.copyFileSync(src, path.join(destDir, fileNameFromPath));
+            console.log(`✓ Favicon ${fileNameFromPath}: branding/logos/${fileNameFromPath} → dist/images/`);
+          } catch (err) {
+            console.warn(`Warning: Could not copy ${fileNameFromPath}:`, err.message);
+          }
+        }
+      }
+
+      // Rewrite HTML files to update favicon href paths
+      // Note: This is now handled in vite.config.js after HTML generation (rewriteFaviconPaths)
+      // Kept here for reference but not executed (HTML files don't exist yet at this point)
+      try {
+        const htmlFiles = findHtmlFiles(distDir);
+        
+        for (const htmlFile of htmlFiles) {
+          let content = fs.readFileSync(htmlFile, 'utf8');
+          let modified = content;
+
+          // Rewrite favicon hrefs from /branding/logos/ to ./images/
+          // Only rewrite if the file was actually copied (exists in imagesDir)
+          for (const { key } of faviconFiles) {
+            const faviconPath = favicon[key];
+            if (!faviconPath) continue;
+            
+            const fileNameFromPath = path.basename(faviconPath);
+            const sourcePath = faviconPath; // e.g., "/branding/logos/favicon.svg"
+            const destPath = `./images/${fileNameFromPath}`;
+            
+            // Only rewrite if the destination file exists
+            const destFilePath = path.join(destDir, fileNameFromPath);
+            if (fs.existsSync(destFilePath)) {
+              // Simple string replacement - sourcePath is like "/branding/logos/favicon.svg"
+              const oldHref = `href="${sourcePath}"`;
+              const newHref = `href="${destPath}"`;
+              modified = modified.replaceAll(oldHref, newHref);
+            }
+          }
+
+          if (modified !== content) {
+            fs.writeFileSync(htmlFile, modified);
+          }
+        }
+      } catch (err) {
+        // Silently ignore - favicon rewriting is handled in vite.config.js
+      }
+    }
+  };
+}
+
+export default { brandingPlugin, loadBrandingConfig };

package/docs/_global.content-placeholder.njk

@@ -1,7 +1,7 @@
-<!-- _global.content-placeholer.njk -->
-
-<!-- Replace with your content -->
-<div class="p-2">
-  <div class="border-4 border-dashed border-gray-200 rounded-lg h-40"></div>
-</div>
-<!-- /End replace -->
+<!-- _global.content-placeholer.njk -->
+
+<!-- Replace with your content -->
+<div class="p-2">
+  <div class="border-4 border-dashed border-gray-200 rounded-lg h-40"></div>
+</div>
+<!-- /End replace -->

package/docs/_global.foot.njk

@@ -1,11 +1,11 @@
-{% from "components/footer/_macro.footer.njk" import componentFooter %}
-{{ componentFooter({
-  "meta": {
-    "html": "Creado por <a href='https://sda.aragon.es/' class='c-link c-link--neutral'>SDA Servicios Digitales de Aragón</a>"
-  },
-  "classes": "lg:mt-48"
-})  }}
-
-<script type="module" src="js/index.js"></script>
-</body>
-</html>
+{% from "components/footer/_macro.footer.njk" import componentFooter %}
+{{ componentFooter({
+  "meta": {
+    "html": "Creado por <a href='https://sda.aragon.es/' class='c-link c-link--neutral'>SDA Servicios Digitales de Aragón</a>"
+  },
+  "classes": "lg:mt-48"
+})  }}
+
+<script type="module" src="js/index.js"></script>
+</body>
+</html>

package/docs/_global.head.njk

@@ -1,43 +1,42 @@
-<!doctype html>
-<html lang="es">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=1=device-width, initial-scale=1.0">
-  <title>{{ title if title else "desy-html docs" }}</title>
-  {% if description %}<meta name="description" content="{{ description }}">{% endif %}
-  <link rel="icon" type="image/x-icon" href="https://aplicaciones.aragon.es/favicon.ico">
-  {% if branding and branding.typography and branding.typography.fontUrl %}
-    {% if 'fonts.googleapis.com' in branding.typography.fontUrl %}
-      <link rel="preconnect" href="https://fonts.googleapis.com">
-      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    {% endif %}
-    <link href="{{ branding.typography.fontUrl }}" rel="stylesheet">
-  {% else %}
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap" rel="stylesheet">
-  {% endif %}
-  <link rel="stylesheet" href="css/styles.css">
-  {% if branding and branding.favicon %}
-    <link rel="icon" href="{{ branding.favicon.svg }}" type="image/svg+xml">
-    <link rel="icon" href="{{ branding.favicon.ico }}" sizes="32x32">
-    <link rel="apple-touch-icon" href="{{ branding.favicon.appleTouch }}">
-  {% else %}
-    <link rel="icon" type="image/x-icon" href="https://aplicaciones.aragon.es/favicon.ico">
-  {% endif %}
-  <style>
-    pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}/*!
-    Theme: StackOverflow Light
-    Description: Light theme as used on stackoverflow.com
-    Author: stackoverflow.com
-    Maintainer: @Hirse
-    Website: https://github.com/StackExchange/Stacks
-    License: MIT
-    Updated: 2021-05-15
-
-    Updated for @stackoverflow/stacks v0.64.0
-    Code Blocks: /blob/v0.64.0/lib/css/components/_stacks-code-blocks.less
-    Colors: /blob/v0.64.0/lib/css/exports/_stacks-constants-colors.less
-  */.hljs{color:#2f3337;background:#f6f6f6}.hljs-subst{color:#2f3337}.hljs-comment{color:#656e77}.hljs-attr,.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-section,.hljs-selector-tag{color:#015692}.hljs-attribute{color:#803378}.hljs-name,.hljs-number,.hljs-quote,.hljs-selector-id,.hljs-template-tag,.hljs-type{color:#b75501}.hljs-selector-class{color:#015692}.hljs-link,.hljs-regexp,.hljs-selector-attr,.hljs-string,.hljs-symbol,.hljs-template-variable,.hljs-variable{color:#54790d}.hljs-meta,.hljs-selector-pseudo{color:#015692}.hljs-built_in,.hljs-literal,.hljs-title{color:#b75501}.hljs-bullet,.hljs-code{color:#535a60}.hljs-meta .hljs-string{color:#54790d}.hljs-deletion{color:#c02d2e}.hljs-addition{color:#2f6f44}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}
-  </style>
-</head>
+<!doctype html>
+<html lang="es">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=1=device-width, initial-scale=1.0">
+  <title>{{ title if title else "desy-html docs" }}</title>
+  {% if description %}<meta name="description" content="{{ description }}">{% endif %}
+  {% if branding and branding.typography and branding.typography.fontUrl %}
+    {% if 'fonts.googleapis.com' in branding.typography.fontUrl %}
+      <link rel="preconnect" href="https://fonts.googleapis.com">
+      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    {% endif %}
+    <link href="{{ branding.typography.fontUrl }}" rel="stylesheet">
+  {% else %}
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap" rel="stylesheet">
+  {% endif %}
+  <link rel="stylesheet" href="css/styles.css">
+  {% if branding and branding.favicon %}
+    <link rel="icon" href="{{ branding.favicon.svg }}" type="image/svg+xml">
+    <link rel="icon" href="{{ branding.favicon.ico }}" sizes="32x32">
+    <link rel="apple-touch-icon" href="{{ branding.favicon.appleTouch }}">
+  {% else %}
+    <link rel="icon" type="image/x-icon" href="https://aplicaciones.aragon.es/favicon.ico">
+  {% endif %}
+  <style>
+    pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}/*!
+    Theme: StackOverflow Light
+    Description: Light theme as used on stackoverflow.com
+    Author: stackoverflow.com
+    Maintainer: @Hirse
+    Website: https://github.com/StackExchange/Stacks
+    License: MIT
+    Updated: 2021-05-15
+
+    Updated for @stackoverflow/stacks v0.64.0
+    Code Blocks: /blob/v0.64.0/lib/css/components/_stacks-code-blocks.less
+    Colors: /blob/v0.64.0/lib/css/exports/_stacks-constants-colors.less
+  */.hljs{color:#2f3337;background:#f6f6f6}.hljs-subst{color:#2f3337}.hljs-comment{color:#656e77}.hljs-attr,.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-section,.hljs-selector-tag{color:#015692}.hljs-attribute{color:#803378}.hljs-name,.hljs-number,.hljs-quote,.hljs-selector-id,.hljs-template-tag,.hljs-type{color:#b75501}.hljs-selector-class{color:#015692}.hljs-link,.hljs-regexp,.hljs-selector-attr,.hljs-string,.hljs-symbol,.hljs-template-variable,.hljs-variable{color:#54790d}.hljs-meta,.hljs-selector-pseudo{color:#015692}.hljs-built_in,.hljs-literal,.hljs-title{color:#b75501}.hljs-bullet,.hljs-code{color:#535a60}.hljs-meta .hljs-string{color:#54790d}.hljs-deletion{color:#c02d2e}.hljs-addition{color:#2f6f44}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}
+  </style>
+</head>