feat: Implement collection support for logos and flags in the gallery

scripts/generate-svg-variants.js

@@ -3,27 +3,44 @@
 const fs = require('fs');
 const path = require('path');
 
-const LOGOS_DIR = path.join(__dirname, '..', 'public', 'logos');
-const LOGOS_GEN_DIR = path.join(__dirname, '..', 'public', 'logos_gen');
+const collections = [
+  { name: 'logos', label: 'Logos',
+    baseDir: 'logos',
+    genDir: 'logos_gen',
+    dataFile: 'data/logos.json'
+  },
+  { name: 'flags', label: 'Flags',
+    baseDir: 'flags',
+    genDir: 'flags_gen',
+    dataFile: 'data/flags.json'
+  }
+];
+
+// Accept collection as a CLI arg or env var
+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 LOGOS_DIR = path.join(__dirname, '..', 'public', collection.baseDir);
+const LOGOS_GEN_DIR = path.join(__dirname, '..', 'public', collection.genDir);
 
 // Try multiple possible locations for logos.json
 const POSSIBLE_LOGOS_JSON_PATHS = [
-  path.join(process.cwd(), 'public', 'data', 'logos.json'), // Correct location after scan-logos
-  path.join(__dirname, '..', 'public', 'data', 'logos.json'),
-  path.join(process.cwd(), 'public', 'logos.json'),
-  path.join(__dirname, '..', 'public', 'logos.json'),
-  path.join(__dirname, '..', 'src', 'data', 'logos.json')
+  path.join(process.cwd(), 'public', collection.dataFile),
+  path.join(__dirname, '..', 'public', collection.dataFile),
+  path.join(process.cwd(), 'public', collection.baseDir + '.json'),
+  path.join(__dirname, '..', 'public', collection.baseDir + '.json'),
+  path.join(__dirname, '..', 'src', 'data', collection.baseDir + '.json')
 ];
 
 function findLogosJsonPath() {
   for (const possiblePath of POSSIBLE_LOGOS_JSON_PATHS) {
     if (fs.existsSync(possiblePath)) {
-      console.log(`📁 Found logos.json at: ${possiblePath}`);
+      console.log(`📁 Found ${collection.dataFile} at: ${possiblePath}`);
       return possiblePath;
     }
   }
-
-  console.error('❌ Could not find logos.json in any of these locations:');
+  console.error(`❌ Could not find ${collection.dataFile} in any of these locations:`);
   POSSIBLE_LOGOS_JSON_PATHS.forEach(p => console.error(`   ${p}`));
   return null;
 }
@@ -93,7 +110,7 @@ function applySvgColors(svgContent, colorSet, targets) {
  * Generate SVG variants with color sets
  */
 function generateSvgVariants() {
-  console.log('🎨 Generating SVG variants with color sets...');
+  console.log(`🎨 Generating SVG variants with color sets for collection: ${collection.name}...`);
 
   // Ensure the logos_gen directory exists
   if (!fs.existsSync(LOGOS_GEN_DIR)) {
@@ -106,7 +123,7 @@ function generateSvgVariants() {
   let skippedCount = 0;
 
   if (!Array.isArray(logos)) {
-    console.error('❌ Expected logos.json to contain an array, got:', typeof logos);
+    console.error('❌ Expected data file to contain an array, got:', typeof logos);
     process.exit(1);
   }  console.log(`📊 Processing ${logos.length} logos...`);
 

scripts/update-data.js

@@ -4,19 +4,8 @@ const fs = require('fs');
 const path = require('path');
 const { Resvg } = require('@resvg/resvg-js');
 
-// Configuration
-const collections = [
-  { name: 'logos', label: 'Logos',
-    baseDir: 'logos',
-    genDir: 'logos_gen',
-    dataFile: 'data/logos.json'
-  },
-  { name: 'flags', label: 'Flags',
-    baseDir: 'flags',
-    genDir: 'flags_gen',
-    dataFile: 'data/flags.json'
-  }
-];
+// Use collections from src/collections.js
+const { collections } = require('../src/collections.js');
 
 // Accept collection as a CLI arg or env var
 const collectionArg = process.argv.find(arg => arg.startsWith('--collection='));

src/App.svelte

@@ -1,6 +1,7 @@
 <script>
   import { onMount } from "svelte";
   import Router from "svelte-spa-router/Router.svelte";
+  import { collections } from "./collections.js";
 
   import Home from "./pages/Home.svelte";
   import Preview from "./pages/Preview.svelte";
@@ -28,6 +29,38 @@
   let selectedLogo = null;
   let compactMode = false;
 
+  // --- Collection support ---
+  let collection = localStorage.getItem("collection") || "logos";
+  function setCollection(val) {
+    if (val !== collection) {
+      collection = val;
+      localStorage.setItem("collection", val);
+      loadCollectionData();
+    }
+  }
+
+  async function loadCollectionData() {
+    // Load the correct data file for the selected collection
+    try {
+      const timestamp = new Date().getTime();
+      const response = await fetch(`data/${collection}.json?t=${timestamp}`);
+      if (response.ok) {
+        logos = await response.json();
+        // Reset filters and state for new collection
+        searchQuery = "";
+        selectedTags = [];
+        selectedBrands = [];
+        selectedVariants = [];
+        tagDropdownOpen = false;
+        compactMode = false;
+      } else {
+        logos = [];
+      }
+    } catch (error) {
+      logos = [];
+    }
+  }
+
   function setSearchQuery(val) {
     searchQuery = val;
     console.log("App: searchQuery set to:", val);
@@ -404,6 +437,9 @@
       selectedVariants,
       tagDropdownOpen,
       compactMode,
+      collection,
+      setCollection,
+      collections,
       setSearchQuery,
       setGridView,
       setListView,

src/collections.js

@@ -0,0 +1,20 @@
+// This file lists all supported collections for the gallery
+export const collections = [
+    {
+        name: 'logos',
+        label: 'Logos',
+        baseDir: 'logos',
+        genDir: 'logos_gen',
+        dataFile: 'data/logos.json'
+    },
+    {
+        name: 'flags',
+        label: 'Flags',
+        baseDir: 'flags',
+        genDir: 'flags_gen',
+        dataFile: 'data/flags.json'
+    }
+];
+if (typeof module !== 'undefined' && module.exports) {
+    module.exports = { collections };
+}

src/components/Header.svelte

@@ -4,6 +4,7 @@
   import ThemeSwitcher from "./ThemeSwitcher.svelte";
   import ListViewSwitcher from "./ListViewSwitcher.svelte";
   import SearchBar from "./SearchBar.svelte";
+  import { collections } from "../collections.js";
 
   export let displayLogos = [];
   export let allLogos = []; // Add this to get total count
@@ -30,6 +31,8 @@
   export let getTagObj = (tag) => ({ text: tag });
   export let compactMode = false;
   export let setCompactMode = () => {};
+  export let collection = "logos";
+  export let setCollection = () => {};
 </script>
 
 <header class="main-header">
@@ -38,6 +41,11 @@
       <div class="header-icon">
         <img src="favicon.svg" alt="Logo Gallery icon" />
       </div>
+      <select class="collection-chooser" bind:value={collection} on:change={(e) => setCollection(e.target.value)} aria-label="Choose collection">
+        {#each collections as c}
+          <option value={c.name}>{c.label}</option>
+        {/each}
+      </select>
       <h1>Logo Gallery</h1>
     </div>
     <span class="logo-count">
@@ -119,6 +127,18 @@
     border-radius: 4px;
   }
 
+  .collection-chooser {
+    font-family: inherit;
+    font-size: 1rem;
+    color: var(--color-text);
+    background: var(--color-card);
+    border: 1px solid var(--color-border);
+    border-radius: 4px;
+    padding: 0.25rem 0.5rem;
+    margin-right: 1rem;
+    cursor: pointer;
+  }
+
   .header-controls {
     display: flex;
     align-items: center;