Refactor PWA caching and image generation scripts

- Updated `generate-pwa-cache-list.js` to include images directory and remove duplicate file entries.
- Refactored `generate-svg-variants.js` to utilize collections from a centralized source and renamed generation directory variable.
- Modified `update-data.js` to align with new directory structure for images and variants, ensuring proper paths are used.
- Adjusted `collections.js` to standardize directory naming for variants.
- Enhanced Svelte components (`Actions.svelte`, `CardFull.svelte`, `CardMiddle.svelte`, `CardSmall.svelte`, `CardTiny.svelte`) to utilize context for collection management, simplifying image URL generation.

Makefile

@@ -83,6 +83,6 @@ generate-svg-variants:
 	@echo "SVG variants have been generated"
 
 # Generate PWA cache list
-pwa-cache-list:
+generate-pwa-cache-list:
 	@echo "Generating PWA cache list..."
 	$(DOCKER_COMPOSE) -f compose.dev.yml run --rm $(CONTAINER_NAME) npm run pwa-cache-list

public/data/emblems.json

@@ -3,6 +3,15 @@
     "name": "Escudo De España",
     "path": "Escudo_de_España.svg",
     "format": "SVG",
-    "disable": false
+    "disable": false,
+    "tags": [
+      "Spain",
+      "Coat of arms",
+      "National emblem"
+    ],
+    "meta": {
+      "description": "The coat of arms of Spain, representing the historical kingdoms and the Pillars of Hercules.",
+      "wikipedia": "https://en.wikipedia.org/wiki/Coat_of_arms_of_Spain"
+    }
   }
-]
+]

scripts/generate-pwa-cache-list.js

@@ -2,11 +2,12 @@
 // Node.js script to generate a list of all files in public and images for PWA caching
 const fs = require('fs');
 const path = require('path');
+const { collections } = require('../src/collections.js');
 
 const projectRoot = path.join(__dirname, '..');
-const publicDir = path.join(projectRoot, 'public/images');
+const publicDir = path.join(projectRoot, 'public');
-const logosDir = path.join(projectRoot, 'logos');
+const imagesDir = path.join(publicDir, 'images');
-const logosGenDir = path.join(projectRoot, 'logos_variants');
+const imagesVarDir = path.join(projectRoot, 'logos_variants');
 
 // List of files to ignore
 const IGNORED_FILES = ['.DS_Store', 'CNAME', 'pwa-files-to-cache.json', '.gitignore'];
@@ -31,11 +32,11 @@ function safeWalkDir(dir, baseUrl = '') {
   return walkDir(dir, baseUrl);
 }
 
-const publicFiles = walkDir(publicDir, '').filter(f => !f.endsWith('sw.js'));
+// Recursively walk all files in public, skipping IGNORED_FILES and sw.js
-const logosFiles = safeWalkDir(logosDir, 'logos');
+let allFiles = walkDir(publicDir, '').filter(f => !f.endsWith('sw.js'));
-const logosGenFiles = safeWalkDir(logosGenDir, 'logos_variants');
 
-const allFiles = Array.from(new Set([...publicFiles, ...logosFiles, ...logosGenFiles]));
+// Remove duplicates
+allFiles = Array.from(new Set(allFiles));
 
 fs.writeFileSync(
   path.join(publicDir, 'pwa-files-to-cache.json'),

scripts/generate-svg-variants.js

@@ -2,19 +2,8 @@
 
 const fs = require('fs');
 const path = require('path');
+const { collections } = require('../src/collections.js');
 
-const collections = [
-  { name: 'logos', label: 'Logos',
-    baseDir: 'logos',
-    genDir: 'logos_variants',
-    dataFile: 'data/logos.json'
-  },
-  { name: 'flags', label: 'Flags',
-    baseDir: 'flags',
-    genDir: 'flags_variants',
-    dataFile: 'data/flags.json'
-  }
-];
 
 // Accept collection as a CLI arg or env var
 const collectionArg = process.argv.find(arg => arg.startsWith('--collection='));
@@ -22,7 +11,7 @@ const collectionName = collectionArg ? collectionArg.split('=')[1] : (process.en
 const collection = collections.find(c => c.name === collectionName) || collections[0];
 
 const LOGOS_DIR = path.join(__dirname, '..', 'public', collection.baseDir);
-const LOGOS_GEN_DIR = path.join(__dirname, '..', 'public', collection.genDir);
+const LOGOS_GEN_DIR = path.join(__dirname, '..', 'public', collection.varDir);
 
 // Try multiple possible locations for logos.json
 const POSSIBLE_LOGOS_JSON_PATHS = [

scripts/update-data.js

@@ -12,9 +12,9 @@ const collectionArg = process.argv.find(arg => arg.startsWith('--collection='));
 const collectionName = collectionArg ? collectionArg.split('=')[1] : (process.env.COLLECTION || 'logos');
 const collection = collections.find(c => c.name === collectionName) || collections[0];
 
-const logosDir = path.join(__dirname, '..', 'public', collection.baseDir);
+const imagesDir = path.join(__dirname, '..', 'public', collection.baseDir);
 const outputFile = path.join(__dirname, '..', 'public', collection.dataFile);
-const genDir = path.join(__dirname, '..', 'public', collection.genDir);
+const imagesVarDir = path.join(__dirname, '..', 'public', collection.imagesVarDir);
 
 // Remove old PNG/JPG folders if they exist
 const pngDir = path.join(__dirname, '..', 'public', collection.baseDir + '-png');
@@ -80,15 +80,15 @@ function svgToJpg(svgBuffer, width, height) {
 }
 
 // Pregenerate PNG and JPG images for SVG files
-function pregenerateImages(logoFiles, logosDir, genDir) {
+function pregenerateImages(logoFiles, imagesDir, imagesVarDir) {
-  cleanDir(genDir);
+  cleanDir(imagesVarDir);
   // Only process SVG files
   const svgFiles = logoFiles.filter(file => /\.svg$/i.test(file));
   for (const file of svgFiles) {
     const base = getBaseName(file);
-    const svgPath = path.join(logosDir, file);
+    const svgPath = path.join(imagesDir, file);
-    const pngPath = path.join(genDir, base + '.png');
+    const pngPath = path.join(imagesVarDir, base + '.png');
-    const jpgPath = path.join(genDir, base + '.jpg');
+    const jpgPath = path.join(imagesVarDir, base + '.jpg');
     try {
       const svgBuffer = fs.readFileSync(svgPath);
       const pngBuffer = svgToPng(svgBuffer, 256, 256);
@@ -103,7 +103,7 @@ function pregenerateImages(logoFiles, logosDir, genDir) {
 
 // Scan directory and update logo objects
 function scanLogos() {
-  console.log(`Scanning logos directory: ${logosDir}`);
+  console.log(`Scanning logos directory: ${imagesDir}`);
 
   let existing = [];
   if (fs.existsSync(outputFile)) {
@@ -115,12 +115,12 @@ function scanLogos() {
   }
 
   try {
-    if (!fs.existsSync(logosDir)) {
+    if (!fs.existsSync(imagesDir)) {
-      console.error(`Directory does not exist: ${logosDir}`);
+      console.error(`Directory does not exist: ${imagesDir}`);
       return [];
     }
 
-    const files = fs.readdirSync(logosDir);
+    const files = fs.readdirSync(imagesDir);
     // Filter for image files (svg, png, jpg, jpeg)
     const logoFiles = files.filter(file =>
       /\.(svg|png|jpg|jpeg)$/i.test(file)
@@ -185,13 +185,13 @@ function main() {
   // If no collection is specified, process all collections
   if (!collectionArg && !process.env.COLLECTION) {
     for (const col of collections) {
-      const logosDir = path.join(__dirname, '..', 'public', col.baseDir);
+      const imagesDir = path.join(__dirname, '..', 'public', col.baseDir);
       const outputFile = path.join(__dirname, '..', 'public', col.dataFile);
-      const genDir = path.join(__dirname, '..', 'public', col.genDir);
+      const varDir = path.join(__dirname, '..', 'public', col.varDir);
-      if (!fs.existsSync(logosDir)) {
+      if (!fs.existsSync(imagesDir)) {
-        fs.mkdirSync(logosDir, { recursive: true });
+        fs.mkdirSync(imagesDir, { recursive: true });
       }
-      const files = fs.readdirSync(logosDir);
+      const files = fs.readdirSync(imagesDir);
       // Only update/disable/add, do not overwrite existing keys
       let existing = [];
       if (fs.existsSync(outputFile)) {
@@ -231,7 +231,7 @@ function main() {
         })
         .sort((a, b) => a.name.localeCompare(b.name));
       let merged = [...existing, ...newLogos];
-      pregenerateImages(files, logosDir, genDir);
+      pregenerateImages(files, imagesDir, varDir);
       try {
         const data = JSON.stringify(merged, null, 2);
         fs.writeFileSync(outputFile, data);
@@ -243,8 +243,8 @@ function main() {
   } else {
     // Single collection mode (as before)
     const logos = scanLogos();
-    const files = fs.readdirSync(logosDir);
+    const files = fs.readdirSync(imagesDir);
-    pregenerateImages(files, logosDir, genDir);
+    pregenerateImages(files, imagesDir, varDir);
     saveLogosToJson(logos);
   }
 }

src/collections.js

@@ -4,21 +4,21 @@ export const collections = [
         name: 'logos',
         label: 'Logos',
         baseDir: 'images/logos',
-        genDir: 'images/logos_variants',
+        varDir: 'images/logos_variants',
         dataFile: 'data/logos.json'
     },
     {
         name: 'flags',
         label: 'Flags',
         baseDir: 'images/flags',
-        genDir: 'images/flags_variants',
+        varDir: 'images/flags_variants',
         dataFile: 'data/flags.json'
     },
     {
         name: 'emblems',
         label: 'Emblems',
         baseDir: 'images/emblems',
-        genDir: 'images/emblems_variants',
+        varDir: 'images/emblems_variants',
         dataFile: 'data/emblems.json'
     }
 ];

src/components/Actions.svelte

@@ -1,6 +1,7 @@
 <script>
   import { copySvgSource } from '../utils/svgSource.js';
   import Notification from './Notification.svelte';
+  import { getContext } from 'svelte';
   import { collections } from '../collections.js';
 
   export let logo;
@@ -92,46 +93,40 @@
     window.removeEventListener('click', handleClick);
   }
 
-  function getCollectionByPath(path) {
+  let collection = getContext('collection');
-    return collections.find(col => path.startsWith(col.baseDir.replace('images/', '')) || path.startsWith(col.baseDir));
+  if (!collection) {
-  }
+    if (typeof window !== 'undefined' && window.appData && window.appData.collection) {
-
+      collection = collections.find(c => c.name === window.appData.collection) || collections[0];
-  function getBaseDir(logo) {
+    } else {
-    const collection = getCollectionByPath(logo.path);
+      collection = collections[0];
-    return collection ? collection.baseDir : 'images/logos';
+    }
-  }
-
-  function getGenDir(logo) {
-    const collection = getCollectionByPath(logo.path);
-    return collection ? collection.genDir : 'images/logos_variants';
   }
 
   function getImageUrl(logo) {
-    const baseDir = getBaseDir(logo);
+    return `/${collection.baseDir}/${logo.path}`;
-    return `/${baseDir}/${logo.path.split('/').pop()}`;
   }
 
   function getSvgPath(logo) {
-    const genDir = getGenDir(logo);
     if (logo._activeSet) {
-      return `/${genDir}/${getBaseName(logo.path)}__${logo._activeSet}.svg`;
+      return `/${collection.varDir}/${getBaseName(logo.path)}__${logo._activeSet}.svg`;
     }
-    return logo.path;
+    return `/${collection.baseDir}/${logo.path}`;
   }
 
   function getPngUrl(logo) {
-    const genDir = getGenDir(logo);
+    return `/${collection.varDir}/${logo.path.replace(/\.svg$/, '.png')}`;
-    return `/${genDir}/${logo.path.split('/').pop().replace(/\.svg$/, '.png')}`;
+  }
+
+  function getJpgUrl(logo) {
+    return `/${collection.varDir}/${logo.path.replace(/\.svg$/, '.jpg')}`;
   }
 
   function getPngLink(logo) {
-    const genDir = getGenDir(logo);
+    return `${window.location.origin}/${collection.varDir}/${logo.path.replace(/\.svg$/, '.png')}`;
-    return `${window.location.origin}/${genDir}/${getBaseName(logo.path)}.png`;
   }
 
   function getJpgLink(logo) {
-    const genDir = getGenDir(logo);
+    return `${window.location.origin}/${collection.varDir}/${logo.path.replace(/\.svg$/, '.jpg')}`;
-    return `${window.location.origin}/${genDir}/${getBaseName(logo.path)}.jpg`;
   }
 
   async function handleCopyPngUrlClick(e) {
@@ -187,8 +182,8 @@
   // Download PNG using the same logic as JPG
   async function handleDownloadPngClick(e) {
     e.stopPropagation();
-    const genDir = getGenDir(logo);
+    const varDir = getVarDir(logo);
-    const pngUrl = `/${genDir}/${getBaseName(logo.path)}.png`;
+    const pngUrl = `/${varDir}/${getBaseName(logo.path)}.png`;
     try {
       const res = await fetch(pngUrl, { method: 'HEAD' });
       if (res.ok) {
@@ -220,8 +215,8 @@
   }
 
   async function downloadJpg(logo) {
-    const genDir = getGenDir(logo);
+    const varDir = getVarDir(logo);
-    const jpgUrl = `/${genDir}/${getBaseName(logo.path)}.jpg`;
+    const jpgUrl = `/${varDir}/${getBaseName(logo.path)}.jpg`;
     try {
       const res = await fetch(jpgUrl, { method: 'HEAD' });
       if (res.ok) {

src/components/CardFull.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { onMount } from "svelte";
+  import { onMount, getContext } from "svelte";
   import InlineSvg from "./InlineSvg.svelte";
   import Actions from "./Actions.svelte";
   import ColorSwitcher from "./ColorSwitcher.svelte";
@@ -129,18 +129,19 @@
     return str.charAt(0).toUpperCase() + str.slice(1);
   }
 
-  function getCollectionByPath(path) {
+  // Use the current collection context for baseDir
-    return collections.find(col => path.startsWith(col.baseDir.replace('images/', '')) || path.startsWith(col.baseDir));
+  let collection = getContext('collection');
-  }
+  if (!collection) {
-
+    // fallback: try to infer from window.appData
-  function getBaseDir(logo) {
+    if (typeof window !== 'undefined' && window.appData && window.appData.collection) {
-    const collection = getCollectionByPath(logo.path);
+      collection = collections.find(c => c.name === window.appData.collection) || collections[0];
-    return collection ? collection.baseDir : 'images/logos';
+    } else {
+      collection = collections[0];
+    }
   }
 
   function getImageUrl(logo) {
-    const baseDir = getBaseDir(logo);
+    return `/${collection.baseDir}/${logo.path}`;
-    return `/${baseDir}/${logo.path.split('/').pop()}`;
   }
 </script>
 

src/components/CardMiddle.svelte

@@ -4,6 +4,7 @@
   import ColorSwitcher from "./ColorSwitcher.svelte";
   import { getDefaultLogoColor } from "../utils/colorTheme.js";
   import { collections } from '../collections.js';
+  import { getContext } from 'svelte';
 
   export let logo;
   export let theme;
@@ -31,9 +32,16 @@
     return collection ? collection.baseDir : 'images/logos';
   }
 
+  let collection = getContext('collection');
+  if (!collection) {
+    if (typeof window !== 'undefined' && window.appData && window.appData.collection) {
+      collection = collections.find(c => c.name === window.appData.collection) || collections[0];
+    } else {
+      collection = collections[0];
+    }
+  }
   function getImageUrl(logo) {
-    const baseDir = getBaseDir(logo);
+    return `/${collection.baseDir}/${logo.path}`;
-    return `/${baseDir}/${logo.path.split('/').pop()}`;
   }
 
   $: getLogoThemeColor = (logo) => getDefaultLogoColor(logo.colors, theme);
@@ -69,7 +77,7 @@
         />
       {/key}
     {:else}
-      <img src={getImageUrl(logo)} alt={logo.title || logo.name}/>
+      <img src={getImageUrl(logo)} alt={logo.title || logo.name} />
     {/if}
   </div>
   <div class="logo-info">

src/components/CardSmall.svelte

@@ -4,6 +4,7 @@
   import ColorSwitcher from "./ColorSwitcher.svelte";
   import { getDefaultLogoColor } from "../utils/colorTheme.js";
   import { collections } from '../collections.js';
+  import { getContext } from 'svelte';
 
   export let logo;
   export let theme;
@@ -34,9 +35,16 @@
     return collection ? collection.baseDir : 'images/logos';
   }
 
+  let collection = getContext('collection');
+  if (!collection) {
+    if (typeof window !== 'undefined' && window.appData && window.appData.collection) {
+      collection = collections.find(c => c.name === window.appData.collection) || collections[0];
+    } else {
+      collection = collections[0];
+    }
+  }
   function getImageUrl(logo) {
-    const baseDir = getBaseDir(logo);
+    return `/${collection.baseDir}/${logo.path}`;
-    return `/${baseDir}/${logo.path.split('/').pop()}`;
   }
 </script>
 

src/components/CardTiny.svelte

@@ -3,6 +3,7 @@
   import { getDefaultLogoColor } from "../utils/colorTheme.js";
   import ColorSwitcher from './ColorSwitcher.svelte';
   import { collections } from '../collections.js';
+  import { getContext } from 'svelte';
 
   export let logo;
   export let theme;
@@ -40,9 +41,16 @@
     return collection ? collection.baseDir : 'images/logos';
   }
 
+  let collection = getContext('collection');
+  if (!collection) {
+    if (typeof window !== 'undefined' && window.appData && window.appData.collection) {
+      collection = collections.find(c => c.name === window.appData.collection) || collections[0];
+    } else {
+      collection = collections[0];
+    }
+  }
   function getImageUrl(logo) {
-    const baseDir = getBaseDir(logo);
+    return `/${collection.baseDir}/${logo.path}`;
-    return `/${baseDir}/${logo.path.split('/').pop()}`;
   }
 
 </script>