diff --git a/src/lib/items.ts b/src/lib/items.ts
index 72faa48..da8373f 100644
--- a/src/lib/items.ts
+++ b/src/lib/items.ts
@@ -308,7 +308,7 @@ const allItems: Array = [
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).map((item) => ({
title: item.title,
@@ -316,7 +316,7 @@ const allItems: Array = [
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<
diff --git a/src/lib/schemas.js b/src/lib/schemas.js
index 7195f2f..08b18fe 100644
--- a/src/lib/schemas.js
+++ b/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)
})
);
diff --git a/src/lib/utils/extractUnique.test.ts b/src/lib/utils/extractUnique.test.ts
deleted file mode 100644
index 0c9e699..0000000
--- a/src/lib/utils/extractUnique.test.ts
+++ /dev/null
@@ -1,145 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { extractUnique } from './extractUnique';
-
-describe('extractUnique', () => {
- it("creates an object using the item's `category` field", () => {
- const extracted = extractUnique(oneItem, 'category');
- expect(extracted).toEqual([{ label: 'Testing', value: 'Testing' }]);
- });
-
- it('reduces down to unique values, including the empty string', () => {
- const extracted = extractUnique(manyItems, 'category');
- expect(extracted.length).toBeLessThan(manyItems.length);
- expect(extracted.map((i) => i.value)).toEqual([
- '',
- 'Data Visualisation',
- 'Forms & User Input',
- 'SvelteKit Adapters',
- 'Testing',
- 'User Interaction'
- ]);
- });
-});
-
-const oneItem = [
- {
- title: 'svelte-carbonbadge',
- url: 'https://gitlab.com/davidhund/svelte-carbonbadge',
- description: 'Svelte badge component for https://www.websitecarbon.com/',
- npm: 'svelte-carbonbadge',
- addedOn: '2022-02-08',
- category: 'Testing',
- stars: 0
- }
-];
-
-const manyItems = [
- {
- title: 'svelte-carbonbadge',
- url: 'https://gitlab.com/davidhund/svelte-carbonbadge',
- description: 'Svelte badge component for https://www.websitecarbon.com/',
- npm: 'svelte-carbonbadge',
- addedOn: '2022-02-08',
- category: 'Testing',
- stars: 0
- },
- {
- title: 'svelte-form-validation',
- url: 'https://github.com/DhyeyMoliya/svelte-form-validation',
- npm: 'svelte-form-validation',
- description: 'Svelte Form Validation Library',
- tags: ['forms', 'form validation', 'components and libraries'],
- addedOn: '2021-11-14T17:10:00.000Z',
- category: 'Forms & User Input',
- stars: 0
- },
- {
- title: 'Date Picker Svelte',
- url: 'https://github.com/probablykasper/date-picker-svelte',
- description: 'Date and time picker for Svelte',
- npm: 'date-picker-svelte',
- addedOn: '2021-10-23',
- category: 'Forms & User Input',
- tags: [
- 'time and date',
- 'forms',
- 'components and libraries',
- 'form validation',
- 'inputs and widgets',
- 'component sets'
- ]
- },
- {
- title: 'svelte-virtual-table',
- description: 'A virtual, sortable table for Svelte ',
- url: 'https://github.com/BernhardWebstudio/svelte-virtual-table',
- npm: 'svelte-virtual-table',
- tags: ['components and libraries'],
- addedOn: '2021-10-04',
- category: 'Data Visualisation',
- stars: 1
- },
- {
- title: 'svelte-number-spinner',
- description:
- 'A number input field that can be controlled by mouse/touch drag, arrow keys or usual editing.',
- url: 'https://github.com/bohnacker/svelte-number-spinner',
- npm: 'svelte-number-spinner',
- tags: ['components and libraries', 'inputs and widgets'],
- addedOn: '2021-08-29T00:00:00Z',
- category: 'Forms & User Input',
- stars: 4
- },
- {
- title: 'svelte-remixicon',
- description:
- 'An icon library for svelte based on Remix Icon. Consists of more than 2000 icons.',
- url: 'https://github.com/ABarnob/svelte-remixicon',
- npm: 'https://www.npmjs.com/package/svelte-remixicon',
- tags: ['components and libraries'],
- addedOn: '2021-08-25T00:00:00Z',
- category: '',
- stars: 14
- },
- {
- title: 'svelte-fast-marquee',
- description: 'A Marquee component for Svelte inspired by react-fast-marquee.',
- url: 'https://github.com/abosch19/svelte-fast-marquee',
- npm: 'svelte-fast-marquee',
- tags: ['components and libraries'],
- addedOn: '2021-08-25T00:00:00Z',
- category: '',
- stars: 2
- },
- {
- title: 'sswr',
- category: 'User Interaction',
- description: 'Svelte stale while revalidate (SWR) data fetching strategy',
- url: 'https://github.com/ConsoleTVs/sswr',
- npm: 'https://www.npmjs.com/package/sswr',
- tags: ['components and libraries', 'fonts and icons'],
- addedOn: '2021-07-29T00:00:00Z',
- stars: 59
- },
- {
- title: 'svelte-adapter-firebase',
- description:
- 'SvelteKit adapter for Firebase Hosting rewrites to either Cloud Functions or Cloud Run for a Svelte SSR experience',
- url: 'https://github.com/jthegedus/svelte-adapter-firebase',
- npm: 'https://www.npmjs.com/package/svelte-adapter-firebase',
- stars: 54,
- tags: ['integrations'],
- addedOn: '2021-03-31T00:00:00Z',
- category: 'SvelteKit Adapters'
- },
- {
- title: 'architect/sveltekit-adapter',
- description:
- 'Adapter for Svelte apps that creates a Begin or Architect app, using a function for dynamic server rendering.',
- url: 'https://github.com/architect/sveltekit-adapter',
- npm: 'https://www.npmjs.com/package/@architect/sveltekit-adapter',
- stars: 3,
- tags: ['integrations'],
- addedOn: '2021-08-09T00:00:00Z'
- }
-];
diff --git a/src/lib/utils/extractUnique.ts b/src/lib/utils/extractUnique.ts
deleted file mode 100644
index a892aa3..0000000
--- a/src/lib/utils/extractUnique.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-export const extractUnique = (
- source: Array>,
- field: string
-): Array> => {
- const extracted = source.map((item) => item[field] ?? '');
- const uniqued = Array.from(new Set(extracted.flat()));
- return uniqued
- .map((value) => ({ label: value, value }))
- .sort((a, b) => {
- if (typeof a.value === 'string' && typeof b.value === 'string') {
- return a.value.toLowerCase().localeCompare(b.value.toLowerCase());
- }
- if (typeof a.value === 'number' && typeof b.value === 'number') {
- return a.value - b.value;
- }
- return 0;
- });
-};
diff --git a/src/lib/utils/getCategories.ts b/src/lib/utils/getCategories.ts
new file mode 100644
index 0000000..3c5666d
--- /dev/null
+++ b/src/lib/utils/getCategories.ts
@@ -0,0 +1,11 @@
+export const getCategories = (input) => {
+ const output: string[] = [];
+ input.forEach((item) => {
+ item.categories.forEach((category) => {
+ if (!output.includes(category)) {
+ output.push(category);
+ }
+ });
+ });
+ return output.toSorted();
+};
diff --git a/src/lib/utils/getTags.ts b/src/lib/utils/getTags.ts
deleted file mode 100644
index 01801fe..0000000
--- a/src/lib/utils/getTags.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-export const getTags = (input) => {
- const output = [];
- input.forEach((item) => {
- item.tags.forEach((tag) => {
- if (!output.includes(tag)) {
- output.push(tag);
- }
- });
- });
- return output.toSorted();
-};
diff --git a/src/lib/utils/injectData.ts b/src/lib/utils/injectData.ts
index a818d8d..ce62ecf 100644
--- a/src/lib/utils/injectData.ts
+++ b/src/lib/utils/injectData.ts
@@ -6,7 +6,7 @@ import type { z } from 'zod';
import type { packagesSchema, templatesSchema } from '$lib/schemas';
export const injectData = (input: z.infer) => {
- const output = [];
+ const output: z.infer = [];
for (const item of input) {
// Github
const githubIndex = Object.keys(github).find((key) =>
diff --git a/src/routes/help/submitting/+page.svelte b/src/routes/help/submitting/+page.svelte
index 4c55f03..af71e68 100644
--- a/src/routes/help/submitting/+page.svelte
+++ b/src/routes/help/submitting/+page.svelte
@@ -4,7 +4,7 @@
import templates from '../../templates/templates.json';
import { onMount, tick } from 'svelte';
import { copyToClipboard } from '$lib/utils/clipboard';
- import { extractUnique } from '$lib/utils/extractUnique';
+ import { getCategories } from '$utils/getCategories';
import Seo from '$lib/components/Seo.svelte';
const repoURL = 'https://github.com/svelte-society/sveltesociety.dev';
@@ -15,10 +15,10 @@
const data = {
package: {
- tags: extractUnique(packages, 'tags')
+ categories: getCategories(packages)
},
template: {
- tags: extractUnique(templates, 'tags')
+ categories: getCategories(templates)
}
};
@@ -33,7 +33,7 @@
let url = 'https://svelte-lorem-ipsum.dev';
let description = 'A dummy text generator that does not exist';
let npm = 'svelte-lorem-ipsum';
- let tags;
+ let categories;
let repository = 'https://github.com/sveltejs/svelte-lorem-ipsum';
$: pathName = `${type.value}s`;
@@ -43,19 +43,19 @@
repository: repository ? repository : undefined,
description,
npm: npm ? npm : undefined,
- tags: tags?.map((tag) => tag.value)
+ categories: categories?.map((c) => c.value)
};
- $: currentTags = data[type.value].tags;
+ $: currentCategories = data[type.value].categories;
onMount(() => {
const typeQuery = new URLSearchParams(location.search).get('type');
type = types.find((t) => t.value == typeQuery) || types[0];
});
- async function clearTags() {
+ async function clearCategories() {
await tick();
- tags = null;
+ categories = null;
}
@@ -80,7 +80,7 @@
isClearable={false}
showIndicator
bind:value={type}
- on:select={clearTags}
+ on:select={clearCategories}
/>
The type of snippet to generate
@@ -123,10 +123,16 @@