From 6d5e54b602a33f4175cea56b4d7984619abec1a1 Mon Sep 17 00:00:00 2001
From: ridemountainpig <lin0905580802@gmail.com>
Date: Tue, 16 Jan 2024 11:27:57 +0800
Subject: [PATCH] feat: multiple category feature

---
 src/components/svgCard.svelte        | 42 ++++++++++++++++++++++------
 src/data/svgs.ts                     |  2 +-
 src/routes/+layout.svelte            |  2 +-
 src/routes/directory/[slug]/+page.ts |  8 +++++-
 src/types/svg.ts                     |  5 +++-
 5 files changed, 46 insertions(+), 13 deletions(-)

diff --git a/src/components/svgCard.svelte b/src/components/svgCard.svelte
index f52b388..b8b51c6 100644
--- a/src/components/svgCard.svelte
+++ b/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}`
     });
   };
 
@@ -177,10 +190,21 @@
       <p class="truncate text-[15px] font-medium text-balance text-center select-all">
         {svgInfo.title}
       </p>
-      <a
-        href={`/directory/${svgInfo.category.toLowerCase()}`}
-        class="text-sm lowercase text-neutral-500 hover:underline font-mono">{svgInfo.category}</a
-      >
+    </div>
+    <div class="mb-3 flex flex-col items-center justify-center h-10">
+      {#if Array.isArray(svgInfo.category)}
+        {#each svgInfo.category.sort() as c}
+          <a
+            href={`/directory/${c.toLowerCase()}`}
+            class="text-sm lowercase text-neutral-500 hover:underline font-mono">{c}</a
+          >
+        {/each}
+      {:else}
+        <a
+          href={`/directory/${svgInfo.category.toLowerCase()}`}
+          class="text-sm lowercase text-neutral-500 hover:underline font-mono">{svgInfo.category}</a
+        >
+      {/if}
     </div>
     <!-- Actions -->
     <div class="flex items-center space-x-1">
diff --git a/src/data/svgs.ts b/src/data/svgs.ts
index 48d50f3..f59b75e 100644
--- a/src/data/svgs.ts
+++ b/src/data/svgs.ts
@@ -1132,7 +1132,7 @@ export const svgs: iSVG[] = [
   },
   {
     title: 'WordPress',
-    category: 'Software',
+    category: ['Software', 'CMS'],
     route: '/library/wordpress.svg',
     url: 'https://wordpress.org/'
   },
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 7615225..cfe1a17 100644
--- a/src/routes/+layout.svelte
+++ b/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);
 
   // Icons:
diff --git a/src/routes/directory/[slug]/+page.ts b/src/routes/directory/[slug]/+page.ts
index 4abaf55..10fc98d 100644
--- a/src/routes/directory/[slug]/+page.ts
+++ b/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,
diff --git a/src/types/svg.ts b/src/types/svg.ts
index ca5f6aa..0fc68f6 100644
--- a/src/types/svg.ts
+++ b/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
     | {