Merge pull request #212 from ridemountainpig/multiple-category

Add SVG with multiple category feature

src/components/svgCard.svelte

@@ -44,8 +44,13 @@
   // Download SVG:
   const downloadSvg = (url?: string) => {
     download(url || '');
+
+    const category = Array.isArray(svgInfo.category)
+      ? svgInfo.category.sort().join(' - ')
+      : svgInfo.category;
+
     toast.success(`Downloading...`, {
-      description: `${svgInfo.title} - ${svgInfo.category}`
+      description: `${svgInfo.title} - ${category}`
     });
   };
 
@@ -81,8 +86,12 @@
       download(content, `${svgInfo.title}.zip`, 'application/zip');
     });
 
+    const category = Array.isArray(svgInfo.category)
+      ? svgInfo.category.sort().join(' - ')
+      : svgInfo.category;
+
     toast.success('Downloading light & dark variants...', {
-      description: `${svgInfo.title} - ${svgInfo.category}`
+      description: `${svgInfo.title} - ${category}`
     });
   };
 
@@ -105,22 +114,26 @@
       await navigator.clipboard.writeText(content);
     }
 
+    const category = Array.isArray(svgInfo.category)
+      ? svgInfo.category.sort().join(' - ')
+      : svgInfo.category;
+
     if (isInFigma) {
       toast.success('Ready to paste in Figma!', {
-        description: `${svgInfo.title} - ${svgInfo.category}`
+        description: `${svgInfo.title} - ${category}`
       });
       return;
     }
 
     if (wordmarkSvg) {
       toast.success('Copied wordmark SVG to clipboard!', {
-        description: `${svgInfo.title} - ${svgInfo.category}`
+        description: `${svgInfo.title} - ${category}`
       });
       return;
     }
 
     toast.success('Copied to clipboard!', {
-      description: `${svgInfo.title} - ${svgInfo.category}`
+      description: `${svgInfo.title} - ${category}`
     });
   };
 
@@ -178,6 +191,25 @@
       <p class="truncate text-[15px] font-medium text-balance text-center select-all">
         {svgInfo.title}
       </p>
+      <div class="flex flex-wrap justify-center">
+        {#if Array.isArray(svgInfo.category)}
+          {#each svgInfo.category.sort() as c, index}
+            <a
+              href={`/directory/${c.toLowerCase()}`}
+              class="text-sm lowercase text-neutral-500 hover:underline font-mono">{c}</a
+            >
+            {#if index < svgInfo.category.length - 1}
+              <span class="text-neutral-500">.</span>
+            {/if}
+          {/each}
+        {:else}
+          <a
+            href={`/directory/${svgInfo.category.toLowerCase()}`}
+            class="text-sm lowercase text-neutral-500 hover:underline font-mono"
+            >{svgInfo.category}</a
+          >
+        {/if}
+      </div>
       <a
         href={`/directory/${svgInfo.category.toLowerCase()}`}
         class="text-sm lowercase text-neutral-400 hover:underline font-mono">{svgInfo.category}</a

src/data/svgs.ts

@@ -1153,7 +1153,7 @@ export const svgs: iSVG[] = [
   },
   {
     title: 'WordPress',
-    category: 'Software',
+    category: ['Software', 'CMS'],
     route: '/library/wordpress.svg',
     url: 'https://wordpress.org/'
   },

src/routes/+layout.svelte

@@ -8,7 +8,7 @@
   // Get categories:
   import { svgs } from '@/data/svgs';
   const categories = svgs
-    .map((svg) => svg.category)
+    .flatMap((svg) => Array.isArray(svg.category) ? svg.category : [svg.category])
     .filter((category, index, array) => array.indexOf(category) === index);
 
   // Toaster:

src/routes/directory/[slug]/+page.ts

@@ -13,7 +13,13 @@ export const load = (async ({ params }) => {
   }
 
   // Filter out the svg with the matching slug:
-  const svgsByCategory = svgs.filter((svg: iSVG) => svg.category.toLowerCase() === slug);
+  const svgsByCategory = svgs.filter((svg: iSVG) => {
+    if (Array.isArray(svg.category)) {
+      return svg.category.some(categoryItem => categoryItem.toLowerCase() === slug);
+    } else {
+      return svg.category.toLowerCase() === slug;
+    }
+  });
 
   return {
     category: slug as string,

src/types/svg.ts

@@ -1,9 +1,12 @@
 import type { tCategory } from './categories';
 
+type tCategoryPair = [tCategory, tCategory];
+type CategoryTriple = [tCategory, tCategory, tCategory];
+
 export interface iSVG {
   id?: number;
   title: string;
-  category: tCategory;
+  category: tCategory | tCategoryPair | CategoryTriple;
   route:
     | string // for backwards compat of when theme support was not added
     | {