refactor: Rename tags to categories (#572)

* Update schema and data

* Rename usage

* Tweak result count and anchors

src/lib/CategoryFilters.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+	import Icon from '$lib/components/Icon/index.svelte';
+
+	export let categories: string[];
+	export let selectedCategories: string[];
+</script>
+
+<div class="flex flex-wrap items-center gap-2" data-sveltekit-noscroll>
+	{#each selectedCategories as category}
+		{@const newCategories = selectedCategories.filter((c) => c !== category)}
+		{@const title = category.replaceAll('-', ' ')}
+		{#if newCategories.length === 0}
+			<a class="category active" href={$page.url.pathname}>{title}</a>
+		{:else}
+			<a
+				class="category active"
+				href={`${$page.url.pathname}?${newCategories.map((t) => `category=${t}`).join('&')}`}
+			>
+				{title}
+			</a>
+		{/if}
+	{/each}
+
+	{#each categories as category}
+		{#if !selectedCategories.includes(category)}
+			{@const newCategories = [...selectedCategories, category]}
+			{@const title = category.replaceAll('-', ' ')}
+			<a
+				class="category"
+				href={`${$page.url.pathname}?${newCategories.map((t) => `category=${t}`).join('&')}`}
+			>
+				{title}
+			</a>
+		{/if}
+	{/each}
+
+	{#if selectedCategories.length !== 0}
+		<a href={$page.url.pathname}><Icon name="close" /></a>
+	{/if}
+</div>
+
+<style>
+	a {
+		text-decoration: none;
+	}
+
+	.category {
+		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>

src/lib/SearchableJson.svelte

@@ -3,13 +3,13 @@
 	import Seo from '$lib/components/Seo.svelte';
 	import Select from '$lib/components/Select.svelte';
 	import { packageManager } from '$stores/packageManager';
-	import TagFilters from '$lib/TagFilters.svelte';
+	import CategoryFilters from '$lib/CategoryFilters.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 categories: string[];
+	export let selectedCategories: string[];
 	export let sortableFields: { value: string; label: string; asc: boolean }[];
 	export let displayTitle = '';
 	export let displayTitleSingular = '';
@@ -26,7 +26,7 @@
 
 <h1>{displayTitle}</h1>
 
-<TagFilters {tags} {selectedTags} />
+<CategoryFilters {categories} {selectedCategories} />
 <br />
 <section class="controls relative grid items-center justify-stretch gap-4">
 	<input
@@ -61,7 +61,7 @@
 		>
 	</div>
 	<span class="searchbar-count"
-		>{data.length} result{#if data.length !== 1}s{/if}</span
+		>{sortedData.length} result{#if sortedData.length !== 1}s{/if}</span
 	>
 </section>
 <hr />
@@ -72,7 +72,6 @@
 			description={entry.description}
 			repository={entry.repository}
 			stars={entry.stars}
-			tags={entry.tags}
 			date={entry.date}
 			npm={entry.npm}
 			version={entry.version}

src/lib/components/ComponentIndex/Card.svelte

@@ -6,7 +6,6 @@
 
 	export let title: string;
 	export let description: string;
-	export let tags: string[];
 	export let stars: string;
 	export let npm = '';
 	export let repository = undefined;
@@ -27,11 +26,11 @@
 	};
 </script>
 
-<div class="card flex flex-col rounded-md p-3 text-base lg:text-lg" id="component-{title}">
+<div class="card flex flex-col rounded-md p-3 text-base lg:text-lg" id={title}>
 	<div class="flex justify-between align-top">
 		<div>
 			<h3 class="text-xl">
-				<a href="#component-{title}"># {title}</a>
+				<a href="#{title}"># {title}</a>
 			</h3>
 		</div>
 		<div>

src/lib/items.ts

@@ -308,15 +308,15 @@ const allItems: Array<SearchItem> = [
 		tags: item.tags,
 		type: 'Package',
 		search: searchKeywords(item.title, item.description, ...(item.tags ?? []), item.npm ?? ''),
-		url: '/packages#component-' + item.title
+		url: '/packages#' + item.title
 	})),
 	...(templates as Array<JsonItem>).map<SearchItem>((item) => ({
 		title: item.title,
 		description: item.description,
 		tags: item.tags,
 		type: 'Template',
 		search: searchKeywords(item.title, item.description, ...(item.tags ?? []), item.npm ?? ''),
-		url: '/templates#component-' + item.title
+		url: '/templates#' + item.title
 	})),
 	...Object.entries(
 		import.meta.glob('../routes/recipes/**/*.svx', { eager: true }) as Record<

src/lib/schemas.js

@@ -1,7 +1,7 @@
 import { z } from 'zod';
 import { packageNameRegex } from 'package-name-regex';
 
-const PACKAGES_TAGS = /** @type {const} */ ([
+const PACKAGES_CATEGORIES = /** @type {const} */ ([
 	'auth',
 	'build-plugins',
 	'data-fetching',
@@ -31,11 +31,11 @@ export const packagesSchema = z.array(
 		url: z.string().url().optional(),
 		repository: z.string().url(),
 		description: z.string().max(250),
-		tags: z.array(z.enum(PACKAGES_TAGS)).min(1).max(6)
+		categories: z.array(z.enum(PACKAGES_CATEGORIES)).min(1).max(6)
 	})
 );
 
-const TEMPLATES_TAGS = /** @type {const} */ ([
+const TEMPLATES_CATEGORIES = /** @type {const} */ ([
 	'blog',
 	'code-splitting',
 	'component-sets',
@@ -66,6 +66,6 @@ export const templatesSchema = z.array(
 		url: z.string().url().optional(),
 		repository: z.string().url(),
 		description: z.string().max(250),
-		tags: z.array(z.enum(TEMPLATES_TAGS)).min(1).max(6)
+		categories: z.array(z.enum(TEMPLATES_CATEGORIES)).min(1).max(6)
 	})
 );