diff --git a/src/components/svgCard.svelte b/src/components/svgCard.svelte index d5a0137..828a40c 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}` }); }; @@ -178,6 +191,25 @@

{svgInfo.title}

+
+ {#if Array.isArray(svgInfo.category)} + {#each svgInfo.category.sort() as c, index} + {c} + {#if index < svgInfo.category.length - 1} + . + {/if} + {/each} + {:else} + {svgInfo.category} + {/if} +
{svgInfo.category} svg.category) + .flatMap((svg) => Array.isArray(svg.category) ? svg.category : [svg.category]) .filter((category, index, array) => array.indexOf(category) === index); // Toaster: 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 | {