feat: Add image generation for SVG logos and improve clipboard functionality

- Added @resvg/resvg-js dependency for SVG to PNG/JPG conversion.
- Implemented pregeneration of PNG and JPG images from SVG files in the scanLogos script.
- Enhanced copy URL functionality in App.svelte to support modern clipboard API with fallbacks.
- Removed unnecessary onCopy prop from LogoActions component and handled copy actions locally.
- Introduced notification system for copy actions with success/error feedback.
- Updated styles for action buttons and notifications for better user experience.
- Cleaned up unused code and improved overall structure for clarity.

scripts/scanLogos.js

@@ -2,10 +2,18 @@
 
 const fs = require('fs');
 const path = require('path');
+const { Resvg } = require('@resvg/resvg-js');
 
 // Configuration
 const logosDir = path.join(__dirname, '../public/logos');
 const outputFile = path.join(__dirname, '../public/data/logos.json');
+const genDir = path.join(__dirname, '../public/logos_gen');
+
+// Remove old PNG/JPG folders if they exist
+const pngDir = path.join(__dirname, '../public/logos-png');
+const jpgDir = path.join(__dirname, '../public/logos-jpg');
+if (fs.existsSync(pngDir)) fs.rmSync(pngDir, { recursive: true, force: true });
+if (fs.existsSync(jpgDir)) fs.rmSync(jpgDir, { recursive: true, force: true });
 
 // Get file extension without the dot
 function getFileExtension(filename) {
@@ -25,6 +33,61 @@ function formatName(filename) {
     .join(' ');
 }
 
+// Clean directory (remove all contents)
+function cleanDir(dir) {
+  if (fs.existsSync(dir)) {
+    for (const file of fs.readdirSync(dir)) {
+      if (file !== '.gitignore') {
+        const filePath = path.join(dir, file);
+        if (fs.lstatSync(filePath).isDirectory()) {
+          fs.rmSync(filePath, { recursive: true, force: true });
+        } else {
+          fs.unlinkSync(filePath);
+        }
+      }
+    }
+  } else {
+    fs.mkdirSync(dir, { recursive: true });
+  }
+}
+
+// Convert SVG to PNG
+function svgToPng(svgBuffer, width, height) {
+  const resvg = new Resvg(svgBuffer, { fitTo: { mode: 'width', value: width || 256 } });
+  const pngData = resvg.render().asPng();
+  return pngData;
+}
+
+// Convert SVG to JPG
+function svgToJpg(svgBuffer, width, height) {
+  const resvg = new Resvg(svgBuffer, { fitTo: { mode: 'width', value: width || 256 } });
+  // Convert PNG buffer to JPEG using a pure JS lib, or just save as PNG (JPEG is optional)
+  const pngData = resvg.render().asPng();
+  return pngData;
+}
+
+// Pregenerate PNG and JPG images for SVG files
+function pregenerateImages(logoFiles) {
+  cleanDir(genDir);
+  for (const file of logoFiles) {
+    if (/\.svg$/i.test(file)) {
+      const base = getBaseName(file);
+      const svgPath = path.join(logosDir, file);
+      const pngPath = path.join(genDir, base + '.png');
+      const jpgPath = path.join(genDir, base + '.jpg');
+      try {
+        const svgBuffer = fs.readFileSync(svgPath);
+        const pngBuffer = svgToPng(svgBuffer, 256, 256);
+        fs.writeFileSync(pngPath, pngBuffer);
+        const jpgBuffer = svgToJpg(svgBuffer);
+        fs.writeFileSync(jpgPath, jpgBuffer);
+      } catch (e) {
+        console.error('Error generating PNG/JPG for', file, e);
+      }
+    }
+  }
+}
+
 // Scan directory and update logo objects
 function scanLogos() {
   console.log(`Scanning logos directory: ${logosDir}`);
@@ -106,6 +169,9 @@ function saveLogosToJson(logos) {
 // Main function
 function main() {
   const logos = scanLogos();
+  // Pregenerate PNG/JPG for all SVGs
+  const files = fs.readdirSync(logosDir);
+  pregenerateImages(files);
   saveLogosToJson(logos);
 }