feat: Merge categories/tags and improve filtering (#541)

* Experiment with SSR and query params * Require all tags to be present * Fix when no query param present * Add tag links * Working add/remove tags * Fix templates route * Remove old category/tags selectors * Button style * More styling * Remove unused code * Remove @sindresorhus/slugify * Format and disable prerender * Improve css grid * Use searchParams.getAll * Replace itemsjs with filter/sort functions * Always show selected tags * Add data-sveltekit-noscroll * Move sortableFields to prop level * Simplify code * Fix sortArray for dates * Add an icon to clear filters * Convert tags to kebab-case * Add category to tags * Delete category field * Remove duplicated tags * Merge more tags
2025-12-06 12:47:44 +00:00 · 2023-12-30 19:34:04 +11:00
parent 54114c2e01
commit 11d5ed5f1c
17 changed files with 892 additions and 1333 deletions
--- a/package.json
+++ b/package.json
@@ -16,12 +16,10 @@
 	},
 	"devDependencies": {
 		"@macfja/svelte-persistent-store": "2.4.1",
-		"@sindresorhus/slugify": "^2.2.1",
 		"@sveltejs/adapter-auto": "^3.0.1",
 		"@sveltejs/kit": "^2.0.1",
 		"@sveltejs/vite-plugin-svelte": "^3.0.1",
 		"@types/eslint": "^8.44.9",
-		"@types/itemsjs": "^2.1.6",
 		"@types/node": "^20.10.5",
 		"@typescript-eslint/eslint-plugin": "^6.14.0",
 		"@typescript-eslint/parser": "^6.14.0",
@@ -31,7 +29,6 @@
 		"eslint-plugin-svelte": "^2.35.1",
 		"get-npm-tarball-url": "^2.1.0",
 		"highlight.js": "^11.9.0",
-		"itemsjs": "^2.1.24",
 		"mdsvex": "^0.11.0",
 		"package-name-regex": "^3.1.1",
 		"pako": "^2.1.0",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -8,9 +8,6 @@ devDependencies:
  '@macfja/svelte-persistent-store':
    specifier: 2.4.1
    version: 2.4.1(svelte@4.2.8)
-  '@sindresorhus/slugify':
-    specifier: ^2.2.1
-    version: 2.2.1
  '@sveltejs/adapter-auto':
    specifier: ^3.0.1
    version: 3.0.1(@sveltejs/kit@2.0.1)
@@ -23,9 +20,6 @@ devDependencies:
  '@types/eslint':
    specifier: ^8.44.9
    version: 8.44.9
-  '@types/itemsjs':
-    specifier: ^2.1.6
-    version: 2.1.6
  '@types/node':
    specifier: ^20.10.5
    version: 20.10.5
@@ -53,9 +47,6 @@ devDependencies:
  highlight.js:
    specifier: ^11.9.0
    version: 11.9.0
-  itemsjs:
-    specifier: ^2.1.24
-    version: 2.1.24
  mdsvex:
    specifier: ^0.11.0
    version: 0.11.0(svelte@4.2.8)
@@ -594,21 +585,6 @@ packages:
    resolution: {integrity: sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==}
    dev: true

-  /@sindresorhus/slugify@2.2.1:
-    resolution: {integrity: sha512-MkngSCRZ8JdSOCHRaYd+D01XhvU3Hjy6MGl06zhOk614hp9EOAp5gIkBeQg7wtmxpitU6eAL4kdiRMcJa2dlrw==}
-    engines: {node: '>=12'}
-    dependencies:
-      '@sindresorhus/transliterate': 1.6.0
-      escape-string-regexp: 5.0.0
-    dev: true
-
-  /@sindresorhus/transliterate@1.6.0:
-    resolution: {integrity: sha512-doH1gimEu3A46VX6aVxpHTeHrytJAG6HgdxntYnCFiIFHEM/ZGpG8KiZGBChchjQmG0XFIBL552kBTjVcMZXwQ==}
-    engines: {node: '>=12'}
-    dependencies:
-      escape-string-regexp: 5.0.0
-    dev: true
-
  /@sveltejs/adapter-auto@3.0.1(@sveltejs/kit@2.0.1):
    resolution: {integrity: sha512-OpilmvRN136lUgOa9F0zpSI6g+PouOmk+YvJQrB+/hAtllLghjjYuoyfUsrF7U6oJ52cxCtAJTPXgZdyyCffrQ==}
    peerDependencies:
@@ -701,10 +677,6 @@ packages:
      '@types/unist': 2.0.6
    dev: true

-  /@types/itemsjs@2.1.6:
-    resolution: {integrity: sha512-86+xKLcdG6aRwTPSel5ZJLj3VdcMNiNA7PRqyayGoCOfltRbVdXTxD64+HM4jl7ApqhqTLn9p561WIDsPOivxw==}
-    dev: true
-
  /@types/json-schema@7.0.12:
    resolution: {integrity: sha512-Hr5Jfhc9eYOQNPYO5WLDq/n4jqijdHNlDXjuAQkkt+mWdQR+XJToOHrsD4cPaMXpn6KO7y2+wM8AZEs8VpBLVA==}
    dev: true
@@ -1261,11 +1233,6 @@ packages:
    engines: {node: '>=10'}
    dev: true

-  /escape-string-regexp@5.0.0:
-    resolution: {integrity: sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==}
-    engines: {node: '>=12'}
-    dev: true
-
  /eslint-compat-utils@0.1.2(eslint@8.56.0):
    resolution: {integrity: sha512-Jia4JDldWnFNIru1Ehx1H5s9/yxiRHY/TimCuUc0jNexew3cF1gI6CYZil1ociakfWO3rRqFjl1mskBblB3RYg==}
    engines: {node: '>=12'}
@@ -1762,10 +1729,6 @@ packages:
    resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
    dev: true

-  /itemsjs@2.1.24:
-    resolution: {integrity: sha512-e9t06r0jiSzC6Rx/rlJTh32VtocOEpwx7K+GCjkLk+ITMWQk5hxtl6yQzuZeRdMSdTFd6yoSLyT8GcDRmVKujw==}
-    dev: true
-
  /js-yaml@4.1.0:
    resolution: {integrity: sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==}
    hasBin: true
--- a/src/lib/SearchableJson.svelte
+++ b/src/lib/SearchableJson.svelte
@@ -1,56 +1,48 @@
 <script lang="ts">
-	import slugify from '@sindresorhus/slugify';
 	import ComponentCard from '$lib/components/ComponentIndex/Card.svelte';
 	import CardList from '$lib/components/ComponentIndex/CardList.svelte';
-	import SearchLayout from '$layouts/SearchLayout.svelte';
-	import { extractUnique } from '$lib/utils/extractUnique';
 	import Seo from '$lib/components/Seo.svelte';
-	import Search from '$lib/components/Search.svelte';
 	import Select from '$lib/components/Select.svelte';
 	import { packageManager } from '$stores/packageManager';
+	import TagFilters from '$lib/TagFilters.svelte';
+	import { filterArray, sortArray } from '$utils/arrayUtils';

 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	export let data: any[];
+	export let tags: string[];
+	export let selectedTags: string[];
+	export let sortableFields: { value: string; label: string; asc: boolean }[];
 	export let displayTitle = '';
 	export let displayTitleSingular = '';
 	export let submittingType = '';

-	const sortableFields = [
-		{ identifier: 'stars', title: 'Stars', ascending: false },
-		{ identifier: 'title', title: 'Name', ascending: true },
-		{ identifier: 'date', title: 'Date', ascending: false }
-	];
-
 	let searchValue: string;
+	let sort = sortableFields[0];

-	const dataDefault = { category: '' };
-	$: dataToDisplay = data.map((line) => ({ ...dataDefault, ...line }));
-
-	$: categories = extractUnique(dataToDisplay, 'category');
+	$: filteredData = filterArray(data, searchValue);
+	$: sortedData = sortArray(filteredData, sort);
 </script>

 <Seo title={displayTitle} />

-<SearchLayout title={displayTitle}>
-	<section slot="controls" class="controls">
+<h1>{displayTitle}</h1>
+
+<TagFilters {tags} {selectedTags} />
+<br />
+<section class="controls">
+	<input
+		class="searchbar"
+		type="text"
+		placeholder="Search for {displayTitle.toLowerCase()}..."
+		bind:value={searchValue}
+	/>
 	<div class="inputs">
-			<Search
-				data={dataToDisplay}
-				bind:query={searchValue}
-				{sortableFields}
-				searchableFields={['title', 'description']}
-				facetsConfig={[
-					{
-						title: 'Category',
-						identifier: 'category'
-					},
-					{
-						title: 'Tags',
-						identifier: 'tags',
-						isMulti: true
-					}
-				]}
-				on:search={(a) => (dataToDisplay = a.detail.data.items)}
+		<Select
+			items={sortableFields}
+			bind:value={sort}
+			label="Sorting"
+			showIndicator
+			isClearable={false}
 		/>
 		<Select
 			label="Package manager"
@@ -69,23 +61,14 @@
 			>Submit a {displayTitleSingular}</a
 		>
 	</div>
-
-		<input
-			class="searchbar"
-			type="text"
-			placeholder="Search for {displayTitle.toLowerCase()}..."
-			bind:value={searchValue}
-		/>
 	<span class="searchbar-count"
-			>{dataToDisplay.length} result{#if dataToDisplay.length !== 1}s{/if}</span
+		>{data.length} result{#if data.length !== 1}s{/if}</span
 	>
-	</section>
-	<section slot="items">
-		{#each categories as category}
-			<CardList title={category.label} id={slugify(category.label)}>
-				{#each dataToDisplay.filter((d) => d.category === category.value || (!categories
-							.map((v) => v.value)
-							.includes(d.category) && category.value === '')) as entry (entry.title)}
+</section>
+<hr />
+<section>
+	<CardList>
+		{#each sortedData as entry (entry.title)}
 			<ComponentCard
 				title={entry.title}
 				description={entry.description}
@@ -98,9 +81,7 @@
 			/>
 		{/each}
 	</CardList>
-		{/each}
-	</section>
-</SearchLayout>
+</section>

 <style>
 	.controls {
@@ -119,7 +100,6 @@
 		padding: 20.5px var(--s-2);
 		border: 2px solid var(--dark-gray);
 		border-radius: 2px;
-		align-self: flex-end;
 		grid-row: 1/2;
 		font-family: Overpass;
 		background: #f3f6f9 url(/images/search-icon.svg) 98% no-repeat;
@@ -135,15 +115,9 @@
 		right: 0;
 	}

-	@media (min-width: 1280px) {
-		.controls {
-			grid-template-columns: 2fr 1fr;
-		}
+	@media (min-width: 1024px) {
 		.inputs {
-			grid-template-columns: repeat(4, auto);
-		}
-		.searchbar {
-			grid-row: auto;
+			grid-template-columns: repeat(2, auto);
 		}
 	}
 </style>
--- a/src/lib/TagFilters.svelte
+++ b/src/lib/TagFilters.svelte
@@ -0,0 +1,68 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+	import Icon from '$lib/components/Icon/index.svelte';
+
+	export let tags: string[];
+	export let selectedTags: string[];
+</script>
+
+<div data-sveltekit-noscroll>
+	{#each selectedTags as tag}
+		{@const newTags = selectedTags.filter((t) => t !== tag)}
+		{@const title = tag.replaceAll('-', ' ')}
+		{#if newTags.length === 0}
+			<a class="tag active" href={$page.url.pathname}>{title}</a>
+		{:else}
+			<a
+				class="tag active"
+				href={`${$page.url.pathname}?${newTags.map((t) => `tag=${t}`).join('&')}`}
+			>
+				{title}
+			</a>
+		{/if}
+	{/each}
+
+	{#each tags as tag}
+		{#if !selectedTags.includes(tag)}
+			{@const newTags = [...selectedTags, tag]}
+			{@const title = tag.replaceAll('-', ' ')}
+			<a class="tag" href={`${$page.url.pathname}?${newTags.map((t) => `tag=${t}`).join('&')}`}>
+				{title}
+			</a>
+		{/if}
+	{/each}
+
+	{#if selectedTags.length !== 0}
+		<a href={$page.url.pathname}><Icon name="close" /></a>
+	{/if}
+</div>
+
+<style>
+	div {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		gap: 0.5rem;
+	}
+
+	a {
+		border: none;
+	}
+
+	.tag {
+		padding: 4px 12px;
+		border: 1px solid var(--link-color);
+		border-radius: 9999px;
+		font-family: Overpass;
+		font-style: normal;
+		font-weight: normal;
+		font-size: 14px;
+		line-height: 150%;
+		text-align: center;
+	}
+
+	.active {
+		color: #ff3e01;
+		background: #ffdbcf;
+	}
+</style>
--- a/src/lib/components/ComponentIndex/CardList.svelte
+++ b/src/lib/components/ComponentIndex/CardList.svelte
@@ -1,23 +1,10 @@
-<script lang="ts">
-	export let title: string;
-	export let id = `category-${title}`;
-</script>
-
 <div class="list">
-	<h1 {id}>{title} <a href="#{id}">#</a></h1>
 	<div class="grid">
 		<slot />
 	</div>
 </div>

 <style>
-	h1 {
-		font-family: Overpass;
-		font-style: normal;
-		font-weight: 600;
-		line-height: 150%;
-		margin-bottom: 1rem;
-	}
 	.grid {
 		display: grid;
 		grid-template-columns: repeat(3, 1fr);
--- a/src/lib/components/Search.svelte
+++ b/src/lib/components/Search.svelte
@@ -1,115 +0,0 @@
-<script lang="ts">
-	import type { Configuration } from 'itemsjs';
-	import itemsjs from 'itemsjs';
-	import { createEventDispatcher } from 'svelte';
-	import Select from '$lib/components/Select.svelte';
-
-	const dispatch = createEventDispatcher();
-
-	type Facet = {
-		identifier: string;
-		title: string;
-		isMulti?: boolean;
-	};
-	type SortField = {
-		identifier: string;
-		title: string;
-		ascending: boolean;
-	};
-	type FacetValue = { value: string } | Array<{ value: string }>;
-
-	export let facetsConfig: Array<Facet> = [];
-	export let data;
-	let sort = { value: 'stars_desc' };
-	export let searchableFields: Array<string> = [];
-	export let sortableFields: Array<SortField> = [];
-	export let query = '';
-
-	let facets: Array<Facet & { value: FacetValue; values: Array<string> }> = facetsConfig.map(
-		(facet) => ({ ...facet, values: [], value: undefined })
-	);
-
-	const configurations = {
-		aggregations: facetsConfig.reduce(
-			(object, line) => ({
-				...object,
-				[line.identifier]: { sort: ['key'], order: ['asc'], size: 1000, ...line }
-			}),
-			{}
-		),
-		sortings: sortableFields.reduce(
-			(object, { identifier, ascending }) => ({
-				...object,
-				[`${identifier}_${ascending ? 'asc' : 'desc'}`]: {
-					field: identifier,
-					order: ascending ? 'asc' : 'desc'
-				}
-			}),
-			{}
-		),
-		searchableFields
-	};
-	const searcher = itemsjs(data, configurations as Configuration<string, string, string>);
-
-	export function search(): void {
-		const results = searcher.search({
-			per_page: 100000,
-			query,
-			filters: facets
-				.filter((facet) => facet.value !== null && facet.value !== undefined)
-				.reduce((object, facet) => {
-					let filterValue;
-					const facetValue = facet.value;
-					if (Array.isArray(facetValue)) {
-						filterValue = facetValue.map((value) => revertDefaultValue(value.value));
-					} else {
-						filterValue = [revertDefaultValue(facetValue.value)];
-					}
-					return {
-						...object,
-						[facet.identifier]: filterValue
-					};
-				}, {}),
-			sort: sort.value
-		});
-		facets = facets.map((facet) => {
-			let values = Object.values(results.data.aggregations)
-				.find((value) => value.name === facet.identifier)
-				.buckets.map((b) => b.key);
-			return {
-				...facet,
-				values
-			};
-		});
-		dispatch('search', results);
-	}
-
-	$: query, facets, sort, search();
-
-	function defaultEmpty(values: Array<string>, defaultValue = 'Unclassified'): Array<string> {
-		return values.map((value) => value || defaultValue);
-	}
-	function revertDefaultValue(value: string, defaultValue = 'Unclassified'): string {
-		return value === defaultValue ? '' : value;
-	}
-</script>
-
-{#each facets as facet (facet.identifier)}
-	<Select
-		{...facet}
-		bind:value={facet.value}
-		items={defaultEmpty(facet.values)}
-		label={facet.title}
-	/>
-{/each}
-
-<Select
-	items={sortableFields.map(({ identifier, title, ascending }) => ({
-		value: identifier + '_' + (ascending ? 'asc' : 'desc'),
-		label: title
-	}))}
-	bind:value={sort}
-	label="Sorting"
-	showIndicator
-	isClearable={false}
-/>
--- a/src/lib/layouts/SearchLayout.svelte
+++ b/src/lib/layouts/SearchLayout.svelte
@@ -1,8 +0,0 @@
-<script lang="ts">
-	export let title;
-</script>
-
-<h1>{title}</h1>
-<slot name="controls" />
-<hr />
-<slot name="items" />
--- a/src/lib/schemas.js
+++ b/src/lib/schemas.js
@@ -1,6 +1,58 @@
 import { z } from 'zod';
 import { packageNameRegex } from 'package-name-regex';

+const PACKAGES_TAGS = /** @type {const} */ ([
+	'animations',
+	'async-data',
+	'async-loading',
+	'audio-and-video',
+	'auth',
+	'bundler-plugins',
+	'charts',
+	'cli-tools',
+	'components-and-libraries',
+	'css-and-layout',
+	'data-visualisation',
+	'debugging',
+	'design-pattern',
+	'design-system',
+	'developer-experience',
+	'development-and-documentation',
+	'display-components',
+	'fonts-and-icons',
+	'forms-and-validation',
+	'graphql',
+	'images',
+	'in-page-navigation',
+	'inputs-and-widgets',
+	'integrations',
+	'interactions',
+	'internationalization',
+	'intersection-observer',
+	'jsx',
+	'layout-and-structure',
+	'linting-and-formatting',
+	'maps',
+	'markdown',
+	'modals',
+	'multimedia',
+	'native',
+	'network-events',
+	'notifications',
+	'offline-and-online-detection',
+	'preprocessors',
+	'routers',
+	'ssr',
+	'stores-and-state',
+	'sveltekit-adapters',
+	'testing',
+	'third-party-services',
+	'time-and-date',
+	'typescript',
+	'user-interaction',
+	'viewport'
+]);
+
 export const packagesSchema = z.array(
 	z.object({
 		title: z.string().max(50),
@@ -8,39 +60,41 @@ export const packagesSchema = z.array(
 		url: z.string().url().optional(),
 		repository: z.string().url(),
 		description: z.string().max(250),
-		category: z.enum([
-			'Bundler Plugins',
-			'CSS and Layout',
-			'Data Visualisation',
-			'Debugging',
-			'Design Pattern',
-			'Design System',
-			'Developer Experience',
-			'Display Components',
-			'Forms & User Input',
-			'Icons',
-			'Integration',
-			'Internationalization',
-			'Linting and Formatting',
-			'Multimedia',
-			'Preprocessors',
-			'Routers',
-			'Stores',
-			'SvelteKit Adapters',
-			'Testing',
-			'User Interaction'
-		]),
-		tags: z.array(z.string()).max(5)
+		tags: z.array(z.enum(PACKAGES_TAGS)).min(1).max(6)
 	})
 );

+const TEMPLATES_TAGS = /** @type {const} */ ([
+	'blog',
+	'code-splitting',
+	'component-sets',
+	'components-and-libraries',
+	'database',
+	'electron',
+	'integrations',
+	'lazy-loading',
+	'markdown',
+	'mdsvex',
+	'mobile',
+	'preprocessors',
+	'seo',
+	'ssr',
+	'stores-and-state',
+	'storybook',
+	'svelte',
+	'svelte-add',
+	'sveltekit',
+	'testing',
+	'typescript',
+	'webpack'
+]);
+
 export const templatesSchema = z.array(
 	z.object({
 		title: z.string().max(50),
 		url: z.string().url().optional(),
 		repository: z.string().url(),
 		description: z.string().max(250),
-		category: z.enum(['Svelte Add', 'SvelteKit', 'Svelte']),
-		tags: z.array(z.string()).max(5)
+		tags: z.array(z.enum(TEMPLATES_TAGS)).min(1).max(6)
 	})
 );
--- a/src/lib/utils/arrayUtils.ts
+++ b/src/lib/utils/arrayUtils.ts
@@ -0,0 +1,34 @@
+import dayjs from 'dayjs';
+
+export const filterArray = <T>(arr: T[], filter: string): T[] => {
+	if (!filter) {
+		return arr;
+	}
+	// cast to string and lowercase to have non-dependant type and case search
+	filter = String(filter).toLowerCase();
+	return arr.filter((object) =>
+		// get only values from iterated objects
+		Object.values(object).some((objValue) => {
+			// casting field values to the same shape
+			return String(objValue).toLowerCase().includes(filter);
+		})
+	);
+};
+
+export const sortArray = <T>(arr: T[], filter: { value: string; asc: boolean }): T[] => {
+	return arr.toSorted((a, b) => {
+		if (filter.asc) {
+			if (filter.value === 'date') {
+				return dayjs(a[filter.value]) > dayjs(b[filter.value]) ? 1 : -1;
+			} else {
+				return a[filter.value] > b[filter.value] ? 1 : -1;
+			}
+		} else {
+			if (filter.value === 'date') {
+				return dayjs(a[filter.value]) < dayjs(b[filter.value]) ? 1 : -1;
+			} else {
+				return a[filter.value] < b[filter.value] ? 1 : -1;
+			}
+		}
+	});
+};
--- a/src/lib/utils/getTags.ts
+++ b/src/lib/utils/getTags.ts
@@ -0,0 +1,11 @@
+export const getTags = (input) => {
+	const output = [];
+	input.forEach((item) => {
+		item.tags.forEach((tag) => {
+			if (!output.includes(tag)) {
+				output.push(tag);
+			}
+		});
+	});
+	return output.toSorted();
+};
--- a/src/lib/utils/injectData.ts
+++ b/src/lib/utils/injectData.ts
@@ -3,9 +3,9 @@ import gitlab from '$lib/data/gitlab.json';
 import npm from '$lib/data/npm.json';
 import publint from '$lib/data/publint.json';
 import type { z } from 'zod';
-import type { packagesSchema } from '$lib/schemas';
+import type { packagesSchema, templatesSchema } from '$lib/schemas';

-export const injectData = (input: z.infer<typeof packagesSchema>) => {
+export const injectData = (input: z.infer<typeof packagesSchema | typeof templatesSchema>) => {
 	const output = [];
 	for (const item of input) {
 		// Github
--- a/src/routes/packages/+page.server.ts
+++ b/src/routes/packages/+page.server.ts
@@ -0,0 +1,22 @@
+import { packagesSchema } from '$lib/schemas.js';
+import { getTags } from '$utils/getTags';
+import { injectData } from '$utils/injectData';
+import packages from './packages.json';
+
+export const prerender = false;
+
+export const load = async ({ url }) => {
+	const data = injectData(packagesSchema.parse(packages));
+
+	const selectedTags = url.searchParams.getAll('tag');
+
+	if (!selectedTags) {
+		return { packages: data, tags: getTags(data), selectedTags: [] };
+	}
+
+	const filteredData = data.filter((entry) => {
+		return selectedTags.every((val) => entry.tags.includes(val));
+	});
+
+	return { packages: filteredData, tags: getTags(filteredData), selectedTags };
+};
--- a/src/routes/packages/+page.svelte
+++ b/src/routes/packages/+page.svelte
@@ -1,11 +1,18 @@
 <script lang="ts">
-	import packages from './packages.json';
 	import SearchableJson from '$lib/SearchableJson.svelte';
-	import { injectData } from '$utils/injectData';
+
+	export let data;
 </script>

 <SearchableJson
-	data={injectData(packages)}
+	data={data.packages}
+	tags={data.tags}
+	selectedTags={data.selectedTags}
+	sortableFields={[
+		{ value: 'stars', label: 'Stars', asc: false },
+		{ value: 'title', label: 'Name', asc: true },
+		{ value: 'date', label: 'Date', asc: false }
+	]}
 	displayTitle="Packages"
 	displayTitleSingular="package"
 	submittingType="package"
--- a/src/routes/packages/packages.json
+++ b/src/routes/packages/packages.json
--- a/src/routes/templates/+page.server.ts
+++ b/src/routes/templates/+page.server.ts
@@ -0,0 +1,22 @@
+import { templatesSchema } from '$lib/schemas.js';
+import { getTags } from '$utils/getTags';
+import { injectData } from '$utils/injectData';
+import templates from './templates.json';
+
+export const prerender = false;
+
+export const load = async ({ url }) => {
+	const data = injectData(templatesSchema.parse(templates));
+
+	const selectedTags = url.searchParams.getAll('tag');
+
+	if (!selectedTags) {
+		return { packages: data, tags: getTags(data), selectedTags: [] };
+	}
+
+	const filteredData = data.filter((entry) => {
+		return selectedTags.every((val) => entry.tags.includes(val));
+	});
+
+	return { templates: filteredData, tags: getTags(filteredData), selectedTags };
+};
--- a/src/routes/templates/+page.svelte
+++ b/src/routes/templates/+page.svelte
@@ -1,11 +1,17 @@
 <script lang="ts">
-	import templates from './templates.json';
 	import SearchableJson from '$lib/SearchableJson.svelte';
-	import { injectData } from '$utils/injectData';
+
+	export let data;
 </script>

 <SearchableJson
-	data={injectData(templates)}
+	data={data.templates}
+	tags={data.tags}
+	selectedTags={data.selectedTags}
+	sortableFields={[
+		{ value: 'stars', label: 'Stars', asc: false },
+		{ value: 'title', label: 'Name', asc: true }
+	]}
 	displayTitle="Templates"
 	displayTitleSingular="template"
 	submittingType="template"
--- a/src/routes/templates/templates.json
+++ b/src/routes/templates/templates.json
@@ -3,517 +3,443 @@
 		"title": "openai-quickstart-sveltekit",
 		"repository": "https://github.com/nguyentuansi/openai-quickstart-sveltekit",
 		"description": "This is an example pet name generator app used in the OpenAI API. It uses the SvelteKit framework with Pico. Check out the tutorial or follow the instructions below to get set up.",
-		"category": "SvelteKit",
-		"tags": ["typescript"]
+		"tags": ["typescript", "sveltekit"]
 	},
 	{
 		"title": "Skinny Pug Starter Template",
 		"repository": "https://github.com/lightning-jar/svelte-typescript-tailwind-pug-starter",
 		"description": "Sveltekit template with Typescript, Tailwind, Pug, Playwright, EsLint, Prettier",
-		"category": "SvelteKit",
-		"tags": ["typescript"]
+		"tags": ["typescript", "sveltekit"]
 	},
 	{
 		"title": "SvelteKit Authentication Example",
 		"repository": "https://github.com/nstuyvesant/sveltekit-auth-example",
 		"description": "Fully documented example of how to setup local and \"Sign in with Google\" authentication (including Google One-Tap) using PostgreSQL, signup, page authorization, user profile management and password reset using SendGrid.",
-		"category": "SvelteKit",
-		"tags": ["database", "integrations", "ssr", "typescript"]
+		"tags": ["database", "integrations", "ssr", "typescript", "sveltekit"]
 	},
 	{
 		"title": "sveltekit-windicss-flowbite-template",
 		"repository": "https://github.com/AlessioGr/sveltekit-windicss-flowbite-template",
 		"description": "Minimal SvelteKit template with a perfect set-up for WindiCSS and Flowbite",
-		"category": "SvelteKit",
-		"tags": ["typescript", "integrations"]
+		"tags": ["typescript", "integrations", "sveltekit"]
 	},
 	{
 		"title": "CMSvelte",
 		"repository": "https://github.com/sawyerclick/CMSvelte",
 		"description": "A Svelte template built with newsroom CMS's in mind",
-		"category": "Svelte",
-		"tags": ["blog"]
+		"tags": ["blog", "svelte"]
 	},
 	{
-		"category": "Svelte",
 		"description": "Boilerplate with TypeScript, Webpack, Storybook, Travis CI, SCSS, Babel, EsLint, Prettier, Jest",
-		"tags": [],
+		"tags": ["svelte"],
 		"title": "agusID/boilerplate-svelte",
 		"repository": "https://github.com/agusID/boilerplate-svelte"
 	},
 	{
-		"category": "Svelte",
 		"description": "An example repo of a Svelte app that is IE11 compatible",
-		"tags": [],
+		"tags": ["svelte"],
 		"title": "benjazehr/svelte-example-museums",
 		"repository": "https://github.com/benjazehr/svelte-example-museums"
 	},
 	{
-		"category": "Svelte",
 		"description": "A truffle box for Svelte, a seed for building an Ethereum dapp using Truffle",
-		"tags": [],
+		"tags": ["svelte"],
 		"title": "antony/svelte-box",
 		"repository": "https://github.com/antony/svelte-box"
 	},
 	{
-		"category": "Svelte",
 		"description": "Typescript template for Svelte v3",
-		"tags": [],
+		"tags": ["svelte"],
 		"title": "Axelen123/svelte-ts-template",
 		"repository": "https://github.com/Axelen123/svelte-ts-template"
 	},
 	{
-		"category": "Svelte",
 		"description": "A complete implementation with components, store, unit e2e tests and linting.",
-		"tags": [],
+		"tags": ["svelte"],
 		"title": "TodoMVC Svelte",
 		"repository": "https://github.com/vuesomedev/todomvc-svelte"
 	},
 	{
-		"category": "Svelte",
 		"description": "Electron Svelte boilerplate",
-		"tags": ["electron"],
+		"tags": ["electron", "svelte"],
 		"title": "Blade67/Sveltron",
 		"repository": "https://github.com/Blade67/Sveltron"
 	},
 	{
-		"category": "Svelte",
 		"description": "A template to create multi-page application powered by Webpack",
-		"tags": [],
+		"tags": ["svelte"],
 		"title": "brandonxiang/svelte-webpack-mpa",
 		"repository": "https://github.com/brandonxiang/svelte-webpack-mpa"
 	},
 	{
-		"category": "Svelte",
 		"description": "The bare minimum boilerplate to use Svelte in electron",
-		"tags": ["electron"],
+		"tags": ["electron", "svelte"],
 		"title": "chuanqisun/svelte-electron-template",
 		"repository": "https://github.com/chuanqisun/svelte-electron-template"
 	},
 	{
-		"category": "Svelte",
 		"description": "Minimal boilerplate example of Svelte with Typescript using Parcel. This also includes scss support",
-		"tags": [],
+		"tags": ["svelte"],
 		"title": "dafn/svelte-typescript-parcel",
 		"repository": "https://github.com/dafn/svelte-typescript-parcel"
 	},
 	{
-		"category": "Svelte",
 		"description": "Minimal boilerplate example of Svelte with Typescript using Rollup. This also includes scss support",
-		"tags": [],
+		"tags": ["svelte"],
 		"title": "dafn/svelte-typescript-rollup",
 		"repository": "https://github.com/dafn/svelte-typescript-rollup"
 	},
 	{
-		"category": "Svelte",
 		"description": "Skeleton app with Parcel, Jest, ESLint, Prettier, Babel, Wallaby",
-		"tags": [],
+		"tags": ["svelte"],
 		"title": "devghost/svelte",
 		"repository": "https://github.com/devghost/svelte"
 	},
 	{
-		"category": "Svelte",
 		"description": "Svelte template with basic Babel setup for IE11 compatibility",
-		"tags": [],
+		"tags": ["svelte"],
 		"title": "svelte-ie11",
 		"repository": "https://github.com/elsonigo/svelte-ie11"
 	},
 	{
-		"category": "Svelte",
 		"description": "Typescript + Storybook + Webpack boilerplate",
-		"tags": [],
+		"tags": ["svelte"],
 		"title": "farhan2106/svelte-typescript",
 		"repository": "https://github.com/farhan2106/svelte-typescript"
 	},
 	{
-		"category": "Svelte",
 		"description": "Typescript + Storybook + Webpack with SSR boilerplate",
-		"tags": [],
+		"tags": ["svelte"],
 		"title": "farhan2106/svelte-typescript-ssr",
 		"repository": "https://github.com/farhan2106/svelte-typescript-ssr"
 	},
 	{
-		"category": "Svelte",
 		"description": "Starter for Svelte 3/rollup/typescript/vscode",
-		"tags": [],
+		"tags": ["svelte"],
 		"title": "geakstr/svelte-3-rollup-typescript-vscode",
 		"repository": "https://github.com/geakstr/svelte-3-rollup-typescript-vscode"
 	},
 	{
-		"category": "Svelte",
 		"description": "A small starter template to get up and running with Svelte v3",
-		"tags": [],
+		"tags": ["svelte"],
 		"title": "bholmesdev/svelte-starter-template",
 		"repository": "https://github.com/bholmesdev/svelte-starter-template"
 	},
 	{
-		"category": "Svelte",
 		"description": "The open-source storefront for any eCommerce. Built with a PWA and headless approach, using a modern JS stack.",
-		"tags": [],
+		"tags": ["svelte"],
 		"title": "svelte-commerce",
 		"repository": "https://github.com/itswadesh/svelte-commerce"
 	},
 	{
-		"category": "Svelte",
 		"description": "Svelte + Storybook + Tailwind - Starter Template",
-		"tags": [],
+		"tags": ["svelte"],
 		"title": "jerriclynsjohn/svelte-storybook-tailwind",
 		"repository": "https://github.com/jerriclynsjohn/svelte-storybook-tailwind"
 	},
 	{
-		"category": "Svelte",
 		"description": "A template to help you start developing SPAs with Svelte and Firebase",
-		"tags": [],
+		"tags": ["svelte"],
 		"title": "jorgegorka/svelte-firebase",
 		"repository": "https://github.com/jorgegorka/svelte-firebase"
 	},
 	{
-		"category": "Svelte",
 		"description": "SvelteJS and TailwindCSS template",
-		"tags": [],
+		"tags": ["svelte"],
 		"title": "justinekizhak/svelte-tailwind-template",
 		"repository": "https://github.com/justinekizhak/svelte-tailwind-template"
 	},
 	{
-		"category": "Svelte",
 		"description": "Template for building phonegap hybrid applications with Svelte",
-		"tags": ["mobile"],
+		"tags": ["mobile", "svelte"],
 		"title": "lpshanley/svelte-phonegap",
 		"repository": "https://github.com/lpshanley/svelte-phonegap"
 	},
 	{
-		"category": "Svelte",
 		"description": "Minimal setup for building svelte as a web component module",
-		"tags": [],
+		"tags": ["svelte"],
 		"title": "LunaTK/svelte-web-component-builder",
 		"repository": "https://github.com/LunaTK/svelte-web-component-builder"
 	},
 	{
-		"category": "Svelte",
 		"description": "Tailwindcss v1 + Svelte v3 = <3",
-		"tags": [],
+		"tags": ["svelte"],
 		"title": "marcograhl/tailwindcss-svelte-starter",
 		"repository": "https://github.com/marcograhl/tailwindcss-svelte-starter"
 	},
 	{
-		"category": "Svelte",
 		"description": "Svelte template with webpack, babel, eslint and scss. Using browserslist with corejs for legacy browser support",
-		"tags": [],
+		"tags": ["svelte"],
 		"title": "svelte-webpack-babel-scss",
 		"repository": "https://github.com/markoboy/svelte-webpack-babel-scss"
 	},
 	{
-		"category": "Svelte",
 		"description": "Svelte + Tailwind = ❤",
-		"tags": [],
+		"tags": ["svelte"],
 		"title": "muhajirdev/svelte-tailwind-template",
 		"repository": "https://github.com/muhajirdev/svelte-tailwind-template"
 	},
 	{
-		"category": "Svelte",
 		"description": "Boilerplate code with Typescript and Sass bundled by Webpack",
-		"tags": [],
+		"tags": ["svelte"],
 		"title": "n0th1ng-else/svelte-typescript-sass",
 		"repository": "https://github.com/n0th1ng-else/svelte-typescript-sass"
 	},
 	{
-		"category": "Svelte",
 		"description": "Modern build process with Svelte, WebPack, PurgeCSS, code splitting, lazy loading...etc",
-		"tags": ["testing", "typescript", "code splitting", "lazy loading", "preprocessors"],
+		"tags": ["testing", "typescript", "code-splitting", "lazy-loading", "preprocessors", "svelte"],
 		"title": "NazimHAli/svelte-template",
 		"repository": "https://github.com/NazimHAli/svelte-template"
 	},
 	{
-		"category": "Svelte",
 		"description": "Offline-Capable todo list built with Svelte, PouchDB and CouchDB",
-		"tags": [],
+		"tags": ["svelte"],
 		"title": "neighbourhoodie/svelte-pouchdb-couchdb",
 		"repository": "https://github.com/neighbourhoodie/svelte-pouchdb-couchdb"
 	},
 	{
-		"category": "Svelte",
 		"description": "Template with Typescript, Sass, Storybook, Webpack",
-		"tags": [],
+		"tags": ["svelte"],
 		"title": "ryburn52/svelte-typescript-sass-template",
 		"repository": "https://github.com/ryburn52/svelte-typescript-sass-template"
 	},
 	{
-		"category": "Svelte",
 		"description": "Starter to built Electron apps with Svelte and Better SQLite3",
-		"tags": ["electron", "database"],
+		"tags": ["electron", "database", "svelte"],
 		"title": "nye/svelte-electron-better-sqlite3-starter",
 		"repository": "https://github.com/nye/svelte-electron-better-sqlite3-starter"
 	},
 	{
-		"category": "Svelte",
 		"description": "Svelte webpack template with routing and lazy-loading",
-		"tags": [],
+		"tags": ["svelte"],
 		"title": "OrdinaryJellyfish/svelte-routing-template",
 		"repository": "https://github.com/OrdinaryJellyfish/svelte-routing-template"
 	},
 	{
-		"category": "Svelte",
 		"description": "Svelte application boilerplate with Webpack, Sass, BabelJS, Fetch, PostCSS, Jest, and .Env",
-		"tags": [],
+		"tags": ["svelte"],
 		"title": "pankod/svelte-boilerplate",
 		"repository": "https://github.com/pankod/svelte-boilerplate"
 	},
 	{
-		"category": "Svelte",
 		"description": "A base for building Svelte component library",
-		"tags": [],
+		"tags": ["svelte"],
 		"title": "patoi/svelte-component-library-template",
 		"repository": "https://github.com/patoi/svelte-component-library-template"
 	},
 	{
-		"category": "Svelte",
 		"description": "Svelte 3 starter with POI 12 and Prettier. Outputs web apps or web components",
-		"tags": [],
+		"tags": ["svelte"],
 		"title": "pbastowski/svelte-poi-starter",
 		"repository": "https://github.com/pbastowski/svelte-poi-starter"
 	},
 	{
-		"category": "Svelte",
 		"description": "Typescript monorepo for Svelte v3 (preprocess, template, types)",
-		"tags": [],
+		"tags": ["svelte"],
 		"title": "pyoner/svelte-typescript",
 		"repository": "https://github.com/pyoner/svelte-typescript"
 	},
 	{
-		"category": "Svelte",
 		"description": "Typescript monorepo for Svelte v3 (preprocess, template, types)",
-		"tags": ["integrations", "preprocessors"],
+		"tags": ["integrations", "preprocessors", "svelte"],
 		"title": "@pyoner/svelte-ts-preprocess",
 		"repository": "https://github.com/pyoner/svelte-typescript"
 	},
 	{
-		"category": "Svelte",
 		"description": "Svelte App with Firebase Authentication for all purposes",
-		"tags": [],
+		"tags": ["svelte"],
 		"title": "ricalamino/svelte-firebase-auth",
 		"repository": "https://github.com/ricalamino/svelte-firebase-auth"
 	},
 	{
-		"category": "Svelte",
 		"description": "A template for building Electron apps with Svelte (**VERSION 2**)",
-		"tags": ["electron"],
+		"tags": ["electron", "svelte"],
 		"title": "Rich-Harris/svelte-template-electron",
 		"repository": "https://github.com/Rich-Harris/svelte-template-electron"
 	},
 	{
-		"category": "Svelte",
 		"description": "Clone of official Svelte template with added HMR support using Nollup",
-		"tags": [],
+		"tags": ["svelte"],
 		"title": "rixo/svelte-template-hot",
 		"repository": "https://github.com/rixo/svelte-template-hot"
 	},
 	{
-		"category": "Svelte",
 		"description": "Yeoman generator generating a boilerplate Svelte.js app with all of svelte-preprocess' options",
-		"tags": ["preprocessors"],
+		"tags": ["preprocessors", "svelte"],
 		"title": "generator-svelte",
 		"repository": "https://github.com/Samuel-Martineau/generator-svelte"
 	},
 	{
-		"category": "Svelte",
 		"description": "A boilerplate with Material, Babel, PostCSS, and Webpack",
-		"tags": [],
+		"tags": ["svelte"],
 		"title": "Shyam-Chen/Svelte-Starter",
 		"repository": "https://github.com/Shyam-Chen/Svelte-Starter"
 	},
 	{
-		"category": "Svelte",
 		"description": "A Svelte template for browserify",
-		"tags": [],
+		"tags": ["svelte"],
 		"title": "soapdog/svelte-template-browserify",
 		"repository": "https://github.com/soapdog/svelte-template-browserify"
 	},
 	{
-		"category": "Svelte",
 		"description": "Boilerplate template project for SPA router spaceavocado/svelte-router",
-		"tags": [],
+		"tags": ["svelte"],
 		"title": "spaceavocado/svelte-router-template",
 		"repository": "https://github.com/spaceavocado/svelte-router-template"
 	},
 	{
-		"category": "Svelte",
 		"description": "Boilerplate with Webpack, Cypress, Travis CI, Storybook, and SASS",
-		"tags": [],
+		"tags": ["svelte"],
 		"title": "stephanepericat/svelte-boilerplate",
 		"repository": "https://github.com/stephanepericat/svelte-boilerplate"
 	},
 	{
-		"category": "Svelte",
 		"description": "Template with VSCode, Prettier, ESLint, Cypress, and Rollup",
-		"tags": [],
+		"tags": ["svelte"],
 		"title": "SteveALee/svelte-code-cypress-project",
 		"repository": "https://github.com/SteveALee/svelte-code-cypress-project"
 	},
 	{
-		"category": "Svelte",
 		"description": "A base for building shareable Svelte components",
-		"tags": [],
+		"tags": ["svelte"],
 		"title": "sveltejs/component-template",
 		"repository": "https://github.com/sveltejs/component-template"
 	},
 	{
-		"category": "Svelte",
 		"description": "Template for building basic applications with Svelte with rollup",
-		"tags": [],
+		"tags": ["svelte"],
 		"title": "sveltejs/template",
 		"repository": "https://github.com/sveltejs/template"
 	},
 	{
-		"category": "Svelte",
 		"description": "Template for building basic applications with Svelte and custom elements",
-		"tags": [],
+		"tags": ["svelte"],
 		"title": "sveltejs/template-custom-element",
 		"repository": "https://github.com/sveltejs/template-custom-element"
 	},
 	{
-		"category": "Svelte",
 		"description": "Template for building basic Svelte applications with webpack",
-		"tags": [],
+		"tags": ["svelte"],
 		"title": "sveltejs/template-webpack",
 		"repository": "https://github.com/sveltejs/template-webpack"
 	},
 	{
-		"category": "Svelte",
 		"description": "Starter template for Cordova featuring hot reload",
-		"tags": ["mobile"],
+		"tags": ["mobile", "svelte"],
 		"title": "syonip/svelte-cordova",
 		"repository": "https://github.com/syonip/svelte-cordova"
 	},
 	{
-		"category": "Svelte",
 		"description": "A showcase app for all Ionic UI elements to create awesome mobile apps. Published as web app too.",
-		"tags": ["components and libraries", "component sets", "mobile"],
+		"tags": ["components-and-libraries", "component-sets", "mobile", "svelte"],
 		"title": "Ionic Svelte UI demo",
 		"repository": "https://github.com/Tommertom/svelte-ionic-app"
 	},
 	{
-		"category": "Svelte",
 		"description": "Starter pack for Rollup, Typescript, and VSCode",
-		"tags": [],
+		"tags": ["svelte"],
 		"title": "tonyrewin/svelte3-ts-boilerplate",
 		"repository": "https://github.com/tonyrewin/svelte3-ts-boilerplate"
 	},
 	{
-		"category": "Svelte",
 		"description": "Template with TypeScript, Babel, Jest, Svelte-Testing-Library, Eslint, and Prettier",
-		"tags": [],
+		"tags": ["svelte"],
 		"title": "will-wow/svelte-typescript-template",
 		"repository": "https://github.com/will-wow/svelte-typescript-template"
 	},
 	{
-		"category": "Svelte",
 		"description": "A base for building shareable Svelte 3 components",
-		"tags": [],
+		"tags": ["svelte"],
 		"title": "YogliB/svelte-component-template",
 		"repository": "https://github.com/YogliB/svelte-component-template"
 	},
 	{
-		"category": "Svelte",
 		"description": "A base for building shareable Svelte 3 components.",
-		"tags": [],
+		"tags": ["svelte"],
 		"title": "svelte-component-template",
 		"repository": "https://github.com/YogliB/svelte-component-template"
 	},
 	{
-		"category": "SvelteKit",
 		"description": "SvelteKit template with TailwindCSS, Storybook, TypeScript and Sass.",
-		"tags": [],
+		"tags": ["sveltekit"],
 		"title": "tejasag/sveltetron-9000",
 		"repository": "https://github.com/tejasag/sveltetron-9000"
 	},
 	{
-		"category": "SvelteKit",
 		"description": "SvelteKit Starter template with Typescript, Postcss, scss, TailwindCSS, Storybook, husky, and eslint.",
-		"tags": ["blog", "seo", "ssr", "storybook"],
+		"tags": ["blog", "seo", "ssr", "storybook", "sveltekit"],
 		"title": "navneetsharmaui/sveltekit-starter",
 		"repository": "https://github.com/navneetsharmaui/sveltekit-starter"
 	},
 	{
-		"category": "SvelteKit",
 		"description": "SvelteKit Blog Starter template with Typescript, Postcss, scss, TailwindCSS, Storybook, husky, and eslint. The template is free to use and developers are welcome to contribute to it.",
-		"tags": ["blog", "mdsvex", "seo", "ssr", "storybook"],
+		"tags": ["blog", "mdsvex", "seo", "ssr", "storybook", "sveltekit"],
 		"title": "navneetsharmaui/sveltekit-blog",
 		"repository": "https://github.com/navneetsharmaui/sveltekit-blog"
 	},
 	{
-		"category": "SvelteKit",
 		"description": "SvelteKit boilerplate with Koa for building backend API, Typescript support, Docker support",
-		"tags": [],
+		"tags": ["sveltekit"],
 		"title": "kaladivo/svelte-kit-koa-boilerplate",
 		"repository": "https://github.com/kaladivo/svelte-kit-koa-boilerplate"
 	},
 	{
-		"category": "SvelteKit",
 		"description": "SvelteKit template with Stripe Checkout and Typescript.",
-		"tags": [],
+		"tags": ["sveltekit"],
 		"title": "srmullen/sveltekit-stripe",
 		"repository": "https://github.com/srmullen/sveltekit-stripe"
 	},
 	{
-		"category": "SvelteKit",
 		"description": "A minimalistic blog template built with SvelteKit and MDsveX",
-		"tags": [],
+		"tags": ["sveltekit"],
 		"title": "mvasigh/sveltekit-mdsvex-blog",
 		"repository": "https://github.com/mvasigh/sveltekit-mdsvex-blog"
 	},
 	{
-		"category": "SvelteKit",
 		"description": "A personal website built with SvelteKit",
-		"tags": [],
+		"tags": ["sveltekit"],
 		"title": "babichjacob/university-website",
 		"repository": "https://github.com/babichjacob/university-website"
 	},
 	{
-		"category": "Svelte Add",
 		"description": "Add PostCSS to your Svelte project",
-		"tags": [],
+		"tags": ["svelte-add"],
 		"title": "svelte-add/postcss",
 		"repository": "https://github.com/svelte-add/postcss"
 	},
 	{
-		"category": "Svelte Add",
 		"description": "Add Tailwind CSS to your Svelte project",
-		"tags": [],
+		"tags": ["svelte-add"],
 		"title": "svelte-add/tailwindcss",
 		"repository": "https://github.com/svelte-add/tailwindcss"
 	},
 	{
-		"category": "Svelte Add",
 		"description": "Add Tauri to your Svelte project",
-		"tags": [],
+		"tags": ["svelte-add"],
 		"title": "svelte-add/tauri",
 		"repository": "https://github.com/svelte-add/tauri"
 	},
 	{
-		"category": "Svelte Add",
 		"description": "Add Bulma to your Svelte project",
-		"tags": [],
+		"tags": ["svelte-add"],
 		"title": "svelte-add/bulma",
 		"repository": "https://github.com/svelte-add/bulma"
 	},
 	{
-		"category": "Svelte Add",
 		"description": "Add CoffeeScript to your Svelte project",
-		"tags": [],
+		"tags": ["svelte-add"],
 		"title": "svelte-add/coffeescript",
 		"repository": "https://github.com/svelte-add/coffeescript"
 	},
 	{
-		"category": "Svelte Add",
 		"description": "A command to add a GraphQL server to your Svelte project",
-		"tags": [],
+		"tags": ["svelte-add"],
 		"title": "svelte-add/graphql-server",
 		"repository": "https://github.com/svelte-add/graphql-server"
 	},
 	{
-		"category": "Svelte Add",
 		"description": "A command to add hosting on Firebase to your Svelte project",
-		"tags": [],
+		"tags": ["svelte-add"],
 		"title": "svelte-add/firebase-hosting",
 		"repository": "https://github.com/svelte-add/firebase-hosting"
 	},
@@ -521,48 +447,41 @@
 		"title": "svelte-add/scss",
 		"repository": "https://github.com/svelte-add/scss",
 		"description": "Add SCSS to your Svelte project",
-		"tags": [],
-		"category": "Svelte Add"
+		"tags": ["svelte-add"]
 	},
 	{
 		"title": "svelte-add/3d",
 		"repository": "https://github.com/svelte-add/3d",
 		"description": "Add 3D scenes to your Svelte project",
-		"tags": [],
-		"category": "Svelte Add"
+		"tags": ["svelte-add"]
 	},
 	{
 		"title": "vhscom/svelte-headlessui-starter",
 		"repository": "https://github.com/vhscom/svelte-headlessui-starter",
 		"description": "Template designed to make it faster and easier to build libre Svelte apps using Headless UI.",
-		"category": "SvelteKit",
-		"tags": ["ssr", "typescript"]
+		"tags": ["ssr", "typescript", "sveltekit"]
 	},
 	{
-		"category": "Svelte Add",
 		"description": "Add mdsvex to your Svelte project",
-		"tags": [],
+		"tags": ["svelte-add"],
 		"title": "svelte-add/mdsvex",
 		"repository": "https://github.com/svelte-add/mdsvex"
 	},
 	{
-		"category": "Svelte Add",
 		"description": "Add Supabase to your Svelte project",
-		"tags": [],
+		"tags": ["svelte-add"],
 		"title": "supabase-community/svelte-supabase",
 		"repository": "https://github.com/supabase-community/svelte-supabase"
 	},
 	{
-		"category": "Svelte Add",
 		"description": "Add Jest to your SvelteKit project",
-		"tags": [],
+		"tags": ["svelte-add"],
 		"title": "rossyman/svelte-add-jest",
 		"repository": "https://github.com/rossyman/svelte-add-jest"
 	},
 	{
-		"category": "SvelteKit",
 		"description": "SvelteKit blog powered with mdsvex, json schema support, sitemap.xml, RSS-feed and other tools required for good SEO.",
-		"tags": ["ssr", "mdsvex", "seo"],
+		"tags": ["ssr", "mdsvex", "seo", "sveltekit"],
 		"title": "MailCheck-co/mailcheck.site",
 		"repository": "https://github.com/MailCheck-co/mailcheck.site"
 	},
@@ -570,247 +489,212 @@
 		"title": "svelte-postgrest-template",
 		"repository": "https://github.com/guyromm/svelte-postgrest-template",
 		"description": "SvelteKit & auth with a PostgreSQL + postgREST backend",
-		"category": "SvelteKit",
-		"tags": ["database", "integrations", "ssr"]
+		"tags": ["database", "integrations", "ssr", "sveltekit"]
 	},
 	{
 		"title": "SvelteKit i18n Template",
 		"repository": "https://github.com/ivanhofer/typesafe-i18n-demo-sveltekit",
 		"description": "A fully working SEO optimized i18n template",
-		"category": "SvelteKit",
-		"tags": ["code splitting", "lazy loading", "seo", "ssr", "typescript"]
+		"tags": ["code-splitting", "lazy-loading", "seo", "ssr", "typescript", "sveltekit"]
 	},
 	{
 		"title": "svelte-ts-tailwind-template",
 		"repository": "https://github.com/colinbate/svelte-ts-tailwind-template",
 		"description": "Svelte app template with TypeScript and TailwindCSS.",
-		"category": "Svelte",
-		"tags": ["typescript"]
+		"tags": ["typescript", "svelte"]
 	},
 	{
 		"title": "SENT-template",
 		"repository": "https://github.com/the-homeless-god/SENT-template",
 		"description": "Skip setup and start code with SENT (Sapper Express Node Template) and other tools like TypeScript, Linters, Tests, Docker and so on",
-		"category": "Svelte",
-		"tags": ["code splitting", "webpack", "typescript", "storybook", "ssr"]
+		"tags": ["code-splitting", "webpack", "typescript", "storybook", "ssr", "svelte"]
 	},
 	{
 		"title": "Yuyutsu",
 		"repository": "https://github.com/sharu725/yuyutsu",
 		"description": "A minimal Sveltekit theme with a sidebar.",
-		"category": "SvelteKit",
-		"tags": ["blog", "markdown"]
+		"tags": ["blog", "markdown", "sveltekit"]
 	},
 	{
 		"title": "sveltekit-blog-template",
 		"repository": "https://github.com/K-Sato1995/sveltekit-blog-template",
 		"description": "A minimalistic markdown based blog template built with Sveltekit",
-		"category": "SvelteKit",
-		"tags": ["blog"]
+		"tags": ["blog", "sveltekit"]
 	},
 	{
 		"title": "Urara",
 		"repository": "https://github.com/importantimport/urara",
 		"description": "Sweet, Powerful, IndieWeb-Compatible SvelteKit Blog Starter.",
-		"category": "SvelteKit",
-		"tags": ["blog", "mdsvex", "typescript"]
+		"tags": ["blog", "mdsvex", "typescript", "sveltekit"]
 	},
 	{
 		"title": "Svelte-Typescript-Electron-Webpack",
 		"repository": "https://github.com/ryan-way-boilerplate/stew",
 		"description": "Template with Svelte Typescript Electron and webpack",
-		"category": "Svelte",
-		"tags": ["typescript", "webpack", "electron"]
+		"tags": ["typescript", "webpack", "electron", "svelte"]
 	},
 	{
 		"title": "Svelte SCSS/TailwindCSS/Typescript Template",
 		"repository": "https://github.com/timoyo93/svelte-template",
 		"description": "A template that uses TailwindCSS v3, Typescript and SCSS",
-		"category": "Svelte",
-		"tags": ["typescript", "preprocessors"]
+		"tags": ["typescript", "preprocessors", "svelte"]
 	},
 	{
 		"title": "Svelte + FAST + Vite template",
 		"repository": "https://github.com/microsoft/fast/tree/master/examples/svelte-starters/svelte-fast-starter",
 		"description": "A Svelte + FAST + Vite starter project",
-		"category": "Svelte",
-		"tags": []
+		"tags": ["svelte"]
 	},
 	{
 		"title": "Svelte + FAST + Vite + TypeScript template",
 		"repository": "https://github.com/microsoft/fast/tree/master/examples/svelte-starters/svelte-fast-typescript-starter",
 		"description": "A Svelte + FAST + Vite + TypeScript starter project",
-		"category": "Svelte",
-		"tags": []
+		"tags": ["svelte"]
 	},
 	{
 		"title": "svelte-vite-typescript-tailwindcss-template",
 		"repository": "https://github.com/skshahriarahmedraka/vite-svelte-tailwind-template",
 		"description": "svelte & vite & typescript & tailwindcss",
-		"category": "Svelte",
-		"tags": ["typescript"]
+		"tags": ["typescript", "svelte"]
 	},
 	{
 		"title": "Swyxkit",
 		"repository": "https://github.com/swyxio/swyxkit/",
 		"description": "An opinionated blog starter for SvelteKit + Tailwind + Netlify. Refreshed for the great SvelteKit refactor of 2022!",
-		"category": "SvelteKit",
-		"tags": ["blog", "mdsvex", "markdown"]
+		"tags": ["blog", "mdsvex", "markdown", "sveltekit"]
 	},
 	{
 		"title": "QWER Blog Starter",
 		"repository": "https://github.com/kwchang0831/svelte-QWER",
 		"description": "Blog Starter built with SvelteKit and Love. 100 Lighthouse, SEO, Post tags and TOC, Atom feed, Sitemap, PWA, image optimisation, Giscus, UnoCSS, typesafe-i18n",
-		"category": "SvelteKit",
-		"tags": ["blog", "markdown", "seo", "typescript"]
+		"tags": ["blog", "markdown", "seo", "typescript", "sveltekit"]
 	},
 	{
 		"title": "svelte-mpa",
 		"repository": "https://github.com/kokizzu/svelte-mpa",
 		"description": "Multipage Svelte for any backend",
-		"category": "Svelte",
-		"tags": ["integrations"]
+		"tags": ["integrations", "svelte"]
 	},
 	{
 		"title": "SvelteKit with Prisma and AuthJS",
 		"repository": "https://github.com/KoljaL/SK-AuthJS",
 		"description": "Just to try out the new way to authorizes with a common library",
-		"category": "SvelteKit",
-		"tags": ["database", "typescript", "integrations"]
+		"tags": ["database", "typescript", "integrations", "sveltekit"]
 	},
 	{
 		"title": "SveDev",
 		"repository": "https://github.com/etherCorps/SveDev",
 		"description": "A blog starter for SvelteKit + Dev.to + Tailwind with DaisyUI + Any Adapter",
-		"category": "SvelteKit",
-		"tags": ["blog", "typescript"]
+		"tags": ["blog", "typescript", "sveltekit"]
 	},
 	{
 		"title": "Wails.io w/ Sveltekit",
 		"repository": "https://github.com/plihelix/wails-template-sveltekit",
 		"description": "A template to generate cross-platform golang applications with a SvelteKit front-end.",
-		"category": "SvelteKit",
-		"tags": ["integrations"]
+		"tags": ["integrations", "sveltekit"]
 	},
 	{
 		"title": "Tablog",
 		"repository": "https://github.com/lemmon/tablog-svelte",
 		"description": "A minimalistic blog theme built with SvelteKit and mdsvex.",
-		"category": "SvelteKit",
-		"tags": ["blog", "markdown", "mdsvex", "seo"]
+		"tags": ["blog", "markdown", "mdsvex", "seo", "sveltekit"]
 	},
 	{
 		"title": "Web3 Hardhat & Svelte Boilerplate",
 		"repository": "https://github.com/fede-rodes/hardhat-svelte-boilerplate",
 		"description": "This boilerplate includes Hardhat, Svelte, Tailwind, TS and cva libs. Example integration using MetaMask",
-		"category": "Svelte",
-		"tags": ["testing", "typescript"]
+		"tags": ["testing", "typescript", "svelte"]
 	},
 	{
 		"title": "Sveltepress",
 		"url": "https://sveltepress.site/",
 		"repository": "https://github.com/SveltePress/sveltepress",
 		"description": "A markdown centered site build tool with full power of sveltekit.",
-		"category": "SvelteKit",
-		"tags": ["markdown", "integrations"]
+		"tags": ["markdown", "integrations", "sveltekit"]
 	},
 	{
 		"title": "SvelteKit PWA Template",
 		"repository": "https://github.com/joemmalatesta/SvelteKit-PWA-Guide",
 		"description": "A PWA Starter Template for SvelteKit",
-		"category": "SvelteKit",
-		"tags": []
+		"tags": ["sveltekit"]
 	},
 	{
 		"title": "Vontigo",
 		"repository": "https://github.com/Vontigo/Vontigo",
 		"description": "An open-source CMS built with SvelteKit, featuring 🤖 AI-powered (ChatGPT) content generation. With fast page loads and seamless routing, Vontigo offers a user-friendly interface with customizable themes and templates.",
-		"category": "SvelteKit",
-		"tags": ["blog", "typescript", "components and libraries", "component sets"]
+		"tags": ["blog", "typescript", "components-and-libraries", "component-sets", "sveltekit"]
 	},
 	{
 		"title": "svelte-pilot-template",
 		"repository": "https://github.com/svelte-pilot/svelte-pilot-template",
 		"description": "A template based on the Svelte Pilot routing library, offering server-side rendering (SSR) and other rich features.",
-		"category": "Svelte",
-		"tags": ["ssr"]
+		"tags": ["ssr", "svelte"]
 	},
 	{
 		"title": "surreal-sveltekit",
 		"repository": "https://github.com/oskar-gmerek/surreal-sveltekit",
 		"description": "A Starter Kit with SurrealDB and SvelteKit, featuring Authentication and CRUD Operations + Realtime",
-		"category": "SvelteKit",
-		"tags": ["database", "integrations", "typescript", "ssr"]
+		"tags": ["database", "integrations", "typescript", "ssr", "sveltekit"]
 	},
 	{
 		"title": "SvelteStore",
 		"repository": "https://github.com/gitbreaker222/SvelteStore",
 		"description": "Template for client side svelte store",
-		"category": "Svelte",
-		"tags": ["stores and state"]
+		"tags": ["stores-and-state", "svelte"]
 	},
 	{
 		"title": "sveltekit-shadcn-ai",
 		"url": "https://github.com/juliuslipp/sveltekit-shadcn-ai",
 		"repository": "https://github.com/juliuslipp/sveltekit-shadcn-ai",
 		"description": "An innovative project combining Svelte, AI, and a range of web technologies, powered by Bun as its efficient package manager.",
-		"category": "SvelteKit",
-		"tags": ["blog", "database", "mdsvex", "markdown", "typescript"]
+		"tags": ["blog", "database", "mdsvex", "markdown", "typescript", "sveltekit"]
 	},
 	{
 		"title": "svelte-library-template",
 		"repository": "https://github.com/lachlancollins/svelte-library-template",
 		"description": "Template to use svelte-package for library development.",
-		"category": "Svelte",
-		"tags": ["typescript", "testing"]
+		"tags": ["typescript", "testing", "svelte"]
 	},
 	{
 		"title": "KitForStartups",
 		"repository": "https://github.com/okupter/kitforstartups",
 		"description": "A starter kit for building and shipping fast, secure, and scalable full stack SaaS applications with SvelteKit and TypeScript.",
-		"category": "SvelteKit",
-		"tags": ["typescript"]
+		"tags": ["typescript", "sveltekit"]
 	},
 	{
 		"title": "Animotion",
 		"repository": "https://github.com/animotionjs/animotion",
 		"description": "Animotion is a presentational framework for creating beautiful slides and visualizing ideas with code using Svelte, Reveal.js and Tailwind CSS.",
-		"category": "Svelte",
-		"tags": []
+		"tags": ["svelte"]
 	},
 	{
 		"title": "create-o7-app",
 		"repository": "https://github.com/ottomated/create-o7-app",
 		"description": "An opinionated CLI for creating type-safe Svelte apps.",
-		"category": "SvelteKit",
-		"tags": []
+		"tags": ["sveltekit"]
 	},
 	{
 		"title": "Sveltekit Auth Starter",
 		"repository": "https://github.com/delay/sveltekit-auth-starter",
 		"description": "Utilizes Lucia for authentication, Skeleton for ui elements, Prisma for database connectivity and type safety, Lucide for icons, inlang for translation, Zod and Superforms to handle forms and validation and Sveltekit.",
-		"category": "SvelteKit",
-		"tags": []
+		"tags": ["sveltekit"]
 	},
 	{
 		"title": "Svelte Realworld",
 		"repository": "https://github.com/sveltejs/realworld",
 		"description": "Svelte codebase containing real world examples (CRUD, auth, advanced patterns, etc) that adheres to the RealWorld spec and API.",
-		"category": "SvelteKit",
-		"tags": []
+		"tags": ["sveltekit"]
 	},
 	{
 		"title": "editable-website",
 		"repository": "https://github.com/michael/editable-website",
 		"description": "A SvelteKit template for coding completely custom websites, while allowing non-technical people to make edits to the content by simply logging in with a secure admin password.",
-		"category": "SvelteKit",
-		"tags": []
+		"tags": ["sveltekit"]
 	},
 	{
 		"title": "SPLAT",
 		"repository": "https://github.com/zeucapua/splat-template",
 		"description": "A project template to get started with the SPLAT stack (SvelteKit, Prisma, Lucia (Auth), TailwindCSS)",
-		"category": "SvelteKit",
-		"tags": []
+		"tags": ["sveltekit"]
 	}
 ]