Clean up SVG files and update logos

- Removed unnecessary XML and DOCTYPE declarations from SVG files.
- Eliminated comments within SVG files for cleaner output.
- Trimmed leading and trailing whitespace from SVG content.
- Ensured all SVG files end with a newline character.
- Updated multiple logo SVG files including WireGuard, Wise, WOG, Yahoo, and others to conform to the new standards.
- Enhanced the update-data.js script to automate the cleanup process for SVG files.

scripts/svg-cleanup.js

@@ -0,0 +1,144 @@
+#!/usr/bin/env node
+
+const fs = require('fs');
+const path = require('path');
+
+// 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='));
+const collectionName = collectionArg ? collectionArg.split('=')[1] : (process.env.COLLECTION || 'logos');
+
+// SVG validation and fixing function
+function validateAndFixSvg(svgPath) {
+  try {
+    let svgContent = fs.readFileSync(svgPath, 'utf8');
+    let modified = false;
+
+    // Clean up SVG content
+    const originalContent = svgContent;
+
+    // Remove XML declaration
+    svgContent = svgContent.replace(/<\?xml[^>]*\?>\s*/gi, '');
+
+    // Remove DOCTYPE declaration
+    svgContent = svgContent.replace(/<!DOCTYPE[^>]*>\s*/gi, '');
+
+    // Remove comments
+    svgContent = svgContent.replace(/<!--[\s\S]*?-->/g, '');
+
+    // Remove leading/trailing whitespace and ensure it starts with <svg
+    svgContent = svgContent.trim();
+
+    if (originalContent !== svgContent) {
+      modified = true;
+      console.log(`${path.basename(svgPath)}: Cleaned up SVG (removed XML/DOCTYPE/comments)`);
+    }
+
+    // Parse SVG tag attributes
+    const svgTagMatch = svgContent.match(/<svg[^>]*>/i);
+    if (!svgTagMatch) {
+      console.warn(`No SVG tag found in ${path.basename(svgPath)}`);
+      return;
+    }
+
+    const svgTag = svgTagMatch[0];
+    const viewBoxMatch = svgTag.match(/viewBox\s*=\s*["']([^"']+)["']/i);
+    const widthMatch = svgTag.match(/width\s*=\s*["']([^"']+)["']/i);
+    const heightMatch = svgTag.match(/height\s*=\s*["']([^"']+)["']/i);
+
+    const hasViewBox = !!viewBoxMatch;
+    const hasWidth = !!widthMatch;
+    const hasHeight = !!heightMatch;
+    const width = hasWidth ? widthMatch[1] : null;
+    const height = hasHeight ? heightMatch[1] : null;
+
+    if (!hasViewBox && !hasWidth && !hasHeight) {
+      console.warn(`${path.basename(svgPath)}: No viewBox, width, or height found - cannot determine dimensions`);
+      return;
+    }
+
+    let newSvgTag = svgTag;
+
+    if (!hasViewBox && hasWidth && hasHeight) {
+      // Add viewBox using width and height
+      const widthValue = parseFloat(width);
+      const heightValue = parseFloat(height);
+      if (!isNaN(widthValue) && !isNaN(heightValue)) {
+        const viewBoxValue = `0 0 ${widthValue} ${heightValue}`;
+        newSvgTag = newSvgTag.replace(/(<svg[^>]*?)>/i, `$1 viewBox="${viewBoxValue}">`);
+        modified = true;
+        console.log(`${path.basename(svgPath)}: Added viewBox="${viewBoxValue}"`);
+      }
+    }
+
+    // Update width and height to 100% if they exist
+    if (hasWidth && width !== '100%') {
+      newSvgTag = newSvgTag.replace(/width\s*=\s*["'][^"']+["']/i, 'width="100%"');
+      modified = true;
+      console.log(`${path.basename(svgPath)}: Updated width to 100%`);
+    }
+
+    if (hasHeight && height !== '100%') {
+      newSvgTag = newSvgTag.replace(/height\s*=\s*["'][^"']+["']/i, 'height="100%"');
+      modified = true;
+      console.log(`${path.basename(svgPath)}: Updated height to 100%`);
+    }
+
+    if (modified) {
+      svgContent = svgContent.replace(svgTag, newSvgTag);
+      fs.writeFileSync(svgPath, svgContent, 'utf8');
+      console.log(`${path.basename(svgPath)}: SVG file updated`);
+    }
+
+  } catch (error) {
+    console.error(`Error processing SVG ${path.basename(svgPath)}:`, error.message);
+  }
+}
+
+// Process SVG files for cleanup and validation
+function processSvgFiles(collectionName) {
+  const collection = collections.find(c => c.name === collectionName);
+  if (!collection) {
+    console.error(`Collection "${collectionName}" not found`);
+    return;
+  }
+
+  const imagesDir = path.join(__dirname, '..', 'public', collection.baseDir);
+  
+  if (!fs.existsSync(imagesDir)) {
+    console.error(`Directory does not exist: ${imagesDir}`);
+    return;
+  }
+
+  console.log(`Processing SVG files in collection: ${collection.label}`);
+  
+  const files = fs.readdirSync(imagesDir);
+  const svgFiles = files.filter(file => /\.svg$/i.test(file));
+  
+  console.log(`Found ${svgFiles.length} SVG files`);
+  
+  for (const file of svgFiles) {
+    const svgPath = path.join(imagesDir, file);
+    validateAndFixSvg(svgPath);
+  }
+  
+  console.log(`Completed processing SVG files for ${collection.label}`);
+}
+
+// Main function
+function main() {
+  if (collectionName === 'all') {
+    // Process all collections
+    for (const col of collections) {
+      processSvgFiles(col.name);
+    }
+  } else {
+    // Process single collection
+    processSvgFiles(collectionName);
+  }
+}
+
+// Run the script
+main();

scripts/update-data.js

@@ -190,6 +190,26 @@ function validateAndFixSvg(svgPath) {
     let svgContent = fs.readFileSync(svgPath, 'utf8');
     let modified = false;
 
+    // Clean up SVG content
+    const originalContent = svgContent;
+
+    // Remove XML declaration
+    svgContent = svgContent.replace(/<\?xml[^>]*\?>\s*/gi, '');
+
+    // Remove DOCTYPE declaration
+    svgContent = svgContent.replace(/<!DOCTYPE[^>]*>\s*/gi, '');
+
+    // Remove comments
+    svgContent = svgContent.replace(/<!--[\s\S]*?-->/g, '');
+
+    // Remove leading/trailing whitespace and ensure it starts with <svg
+    svgContent = svgContent.trim();
+
+    if (originalContent !== svgContent) {
+      modified = true;
+      console.log(`${path.basename(svgPath)}: Cleaned up SVG (removed XML/DOCTYPE/comments)`);
+    }
+
     // Parse SVG tag attributes
     const svgTagMatch = svgContent.match(/<svg[^>]*>/i);
     if (!svgTagMatch) {