feat: Submitted data restructure

README.md

@@ -1,6 +1,6 @@
 # Svelte Society Website
 
-Welcome to Svelte Society! This repository hosts the main website, which serves as a central index of events, a components directory, as well as recipes and other useful resources.
+Welcome to Svelte Society! This repository hosts the main website, which serves as a central index of events, a packages directory, as well as recipes and other useful resources.
 
 ## Developing
 

scripts/updateGithub.js

@@ -1,8 +1,7 @@
 import { writeFileSync } from 'node:fs';
-import { componentsSchema, templatesSchema, toolsSchema } from '../src/lib/schemas.js';
-import components from '../src/routes/components/components.json' assert { type: 'json' };
+import { packagesSchema, templatesSchema } from '../src/lib/schemas.js';
+import packages from '../src/routes/packages/packages.json' assert { type: 'json' };
 import templates from '../src/routes/templates/templates.json' assert { type: 'json' };
-import tools from '../src/routes/tools/tools.json' assert { type: 'json' };
 import { chunk } from './chunk.js';
 
 const ghGraphQlUrl = 'https://api.github.com/graphql';
@@ -35,9 +34,8 @@ async function doGraphQlQuery(url, query) {
 
 function getAllGHRepos() {
 	const repos = [
-		...componentsSchema.parse(components).map((component) => component.repository),
-		...templatesSchema.parse(templates).map((template) => template.repository),
-		...toolsSchema.parse(tools).map((tool) => tool.repository)
+		...packagesSchema.parse(packages).map((i) => i.repository),
+		...templatesSchema.parse(templates).map((i) => i.repository)
 	];
 	return repos.filter((url) => url && githubNameRegexp.test(url));
 }

scripts/updateGitlab.js

@@ -1,8 +1,7 @@
 import { writeFileSync } from 'node:fs';
-import { componentsSchema, templatesSchema, toolsSchema } from '../src/lib/schemas.js';
-import components from '../src/routes/components/components.json' assert { type: 'json' };
+import { packagesSchema, templatesSchema } from '../src/lib/schemas.js';
+import packages from '../src/routes/packages/packages.json' assert { type: 'json' };
 import templates from '../src/routes/templates/templates.json' assert { type: 'json' };
-import tools from '../src/routes/tools/tools.json' assert { type: 'json' };
 import { chunk } from './chunk.js';
 
 const gitlabGraphQlUrl = 'https://gitlab.com/api/graphql';
@@ -32,9 +31,8 @@ async function doGraphQlQuery(url, query) {
 
 function getAllGitlabRepos() {
 	const repos = [
-		...componentsSchema.parse(components).map((component) => component.repository),
-		...templatesSchema.parse(templates).map((template) => template.repository),
-		...toolsSchema.parse(tools).map((tool) => tool.repository)
+		...packagesSchema.parse(packages).map((i) => i.repository),
+		...templatesSchema.parse(templates).map((i) => i.repository)
 	];
 	return repos.filter((url) => url && gitlabNameRegExp.test(url));
 }

scripts/updateNpm.js

@@ -3,13 +3,12 @@
 import { writeFileSync } from 'node:fs';
 import { promisify } from 'node:util';
 import { exec } from 'node:child_process';
-import { componentsSchema, toolsSchema } from '../src/lib/schemas.js';
-import components from '../src/routes/components/components.json' assert { type: 'json' };
-import tools from '../src/routes/tools/tools.json' assert { type: 'json' };
+import { packagesSchema } from '../src/lib/schemas.js';
+import packages from '../src/routes/packages/packages.json' assert { type: 'json' };
 
 const execAsync = promisify(exec);
 
-const data = [...componentsSchema.parse(components), ...toolsSchema.parse(tools)];
+const data = packagesSchema.parse(packages);
 
 const npm = await Promise.all(
 	data.map((pkg) => processPackage(pkg).catch((error) => console.log(error.message)))

scripts/updatePublint.js

@@ -4,17 +4,16 @@
 import { writeFileSync } from 'node:fs';
 import { inflate } from 'pako';
 import getNpmTarballUrl from 'get-npm-tarball-url';
-import { componentsSchema, toolsSchema } from '../src/lib/schemas.js';
-import components from '../src/routes/components/components.json' assert { type: 'json' };
-import tools from '../src/routes/tools/tools.json' assert { type: 'json' };
+import { packagesSchema } from '../src/lib/schemas.js';
+import packages from '../src/routes/packages/packages.json' assert { type: 'json' };
 import npm from '../src/lib/data/npm.json' assert { type: 'json' };
 import { publint } from 'publint';
 import { untar } from './untar.js';
 import { createTarballVfs } from './tarball.js';
 
-const dataWithoutVersions = [...componentsSchema.parse(components), ...toolsSchema.parse(tools)];
+const dataWithoutVersions = packagesSchema.parse(packages);
 
-/** @param input {import('zod').infer<typeof toolsSchema>} */
+/** @param input {import('zod').infer<typeof packagesSchema>} */
 const injectVersions = (input) => {
 	const output = [];
 	for (const item of input) {

scripts/validateData.js

@@ -1,15 +1,27 @@
 // @ts-check
 
-import { componentsSchema, templatesSchema, toolsSchema } from '../src/lib/schemas.js';
-import components from '../src/routes/components/components.json' assert { type: 'json' };
+import { packagesSchema, templatesSchema, resourcesSchema } from '../src/lib/schemas.js';
+import packages from '../src/routes/packages/packages.json' assert { type: 'json' };
 import templates from '../src/routes/templates/templates.json' assert { type: 'json' };
-import tools from '../src/routes/tools/tools.json' assert { type: 'json' };
+import books from '../src/routes/resources/books.json' assert { type: 'json' };
+import extensions from '../src/routes/resources/extensions.json' assert { type: 'json' };
+import misc from '../src/routes/resources/misc.json' assert { type: 'json' };
+import videos from '../src/routes/resources/videos.json' assert { type: 'json' };
 
-componentsSchema.parse(components);
-console.log('Validated components.json');
+packagesSchema.parse(packages);
+console.log('Validated packages.json');
 
 templatesSchema.parse(templates);
 console.log('Validated templates.json');
 
-toolsSchema.parse(tools);
-console.log('Validated tools.json');
+resourcesSchema.parse(books);
+console.log('Validated books.json');
+
+resourcesSchema.parse(extensions);
+console.log('Validated extensions.json');
+
+resourcesSchema.parse(misc);
+console.log('Validated misc.json');
+
+resourcesSchema.parse(videos);
+console.log('Validated videos.json');

src/lib/components/layout/Header.svelte

@@ -3,14 +3,13 @@
 
 	import { page } from '$app/stores';
 	const linksLeft = [
-		['/templates', 'templates'],
-		['/components', 'components'],
-		['/tools', 'tools']
+		['/packages', 'packages'],
+		['/templates', 'templates']
 	];
 	const linksRight = [
+		['/resources', 'resources'],
 		['/recipes', 'recipes'],
-		['/events', 'events'],
-		['/resources', 'resources']
+		['/events', 'events']
 	];
 </script>
 

src/lib/items.ts

@@ -1,18 +1,9 @@
-import components from '../routes/components/components.json';
-import tools from '../routes/tools/tools.json';
+import packages from '../routes/packages/packages.json';
 import templates from '../routes/templates/templates.json';
 import { cheatSheet } from '../routes/cheatsheet/cheat-sheet';
 
 export type SearchItem = {
-	type:
-		| 'Component'
-		| 'Tool'
-		| 'Template'
-		| 'Recipe Category'
-		| 'Recipe'
-		| 'CheatSheet'
-		| 'Event'
-		| 'Link';
+	type: 'Package' | 'Template' | 'Recipe Category' | 'Recipe' | 'CheatSheet' | 'Event' | 'Link';
 	url: string;
 	tags: Array<string>;
 	title: string;
@@ -264,20 +255,12 @@ const allItems: Array<SearchItem> = [
 		url: 'https://www.svelteradio.com/'
 	},
 	{
-		title: 'Tools',
-		tags: ['tools'],
+		title: 'Packages',
+		tags: ['Packages'],
 		type: 'Link',
-		description: 'SvelteSociety Tools page',
-		search: 'tools',
-		url: '/tools'
-	},
-	{
-		title: 'Components',
-		tags: ['components'],
-		type: 'Link',
-		description: 'SvelteSociety Components page',
-		search: 'components',
-		url: '/components'
+		description: 'SvelteSociety Packages page',
+		search: 'packages',
+		url: '/packages'
 	},
 	{
 		title: 'Templates',
@@ -319,21 +302,13 @@ const allItems: Array<SearchItem> = [
 		search: 'cheat sheet cheatsheet',
 		url: '/cheatsheet'
 	},
-	...(components as Array<JsonItem>).map<SearchItem>((item) => ({
-		title: item.title,
-		description: item.description,
-		tags: item.tags,
-		type: 'Component',
-		search: searchKeywords(item.title, item.description, ...(item.tags ?? []), item.npm ?? ''),
-		url: '/components#component-' + item.title
-	})),
-	...(tools as Array<JsonItem>).map<SearchItem>((item) => ({
+	...(packages as Array<JsonItem>).map<SearchItem>((item) => ({
 		title: item.title,
 		description: item.description,
 		tags: item.tags,
-		type: 'Tool',
+		type: 'Package',
 		search: searchKeywords(item.title, item.description, ...(item.tags ?? []), item.npm ?? ''),
-		url: '/tools#component-' + item.title
+		url: '/packages#component-' + item.title
 	})),
 	...(templates as Array<JsonItem>).map<SearchItem>((item) => ({
 		title: item.title,

src/lib/schemas.js

@@ -1,30 +1,34 @@
 import { z } from 'zod';
 import { packageNameRegex } from 'package-name-regex';
 
-export const componentsSchema = z.array(
+export const packagesSchema = z.array(
 	z.object({
 		title: z.string(),
 		npm: z.string().regex(packageNameRegex),
 		url: z.string().url().optional(),
 		repository: z.string().url(),
 		description: z.string(),
 		category: z.enum([
-			'Display Components',
-			'Developer Experience',
-			'Internationalization',
+			'Bundler Plugins',
 			'CSS and Layout',
-			'Icons',
-			'Multimedia',
-			'Testing',
 			'Data Visualisation',
-			'Integration',
+			'Debugging',
 			'Design Pattern',
-			'Stores',
+			'Design System',
+			'Developer Experience',
+			'Display Components',
+			'Forms & User Input',
+			'Icons',
+			'Integration',
+			'Internationalization',
+			'Linting and Formatting',
+			'Multimedia',
+			'Preprocessors',
 			'Routers',
+			'Stores',
 			'SvelteKit Adapters',
-			'Design System',
-			'User Interaction',
-			'Forms & User Input'
+			'Testing',
+			'User Interaction'
 		]),
 		tags: z.array(z.string()).optional()
 	})
@@ -41,20 +45,10 @@ export const templatesSchema = z.array(
 	})
 );
 
-export const toolsSchema = z.array(
+export const resourcesSchema = z.array(
 	z.object({
 		title: z.string(),
-		npm: z.string().regex(packageNameRegex).optional(),
-		url: z.string().url().optional(),
-		repository: z.string().url(),
-		description: z.string(),
-		category: z.enum([
-			'Debugging',
-			'Linting and Formatting',
-			'Editor Extensions',
-			'Bundler Plugins',
-			'Preprocessors'
-		]),
-		tags: z.array(z.string()).optional()
+		url: z.string().url(),
+		description: z.string()
 	})
 );

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 { componentsSchema } from '$lib/schemas';
+import type { packagesSchema } from '$lib/schemas';
 
-export const injectData = (input: z.infer<typeof componentsSchema>) => {
+export const injectData = (input: z.infer<typeof packagesSchema>) => {
 	const output = [];
 	for (const item of input) {
 		// Github

src/routes/+page.svelte

@@ -15,7 +15,7 @@
 			We are a volunteer global network of Svelte fans that strive to promote Svelte and its
 			ecosystem. As a service to the community, this site is a central index of <a href="/events"
 				>events</a
-			>, a <a href="/components">components directory</a>, as well as <a href="/recipes">recipes</a>
+			>, a <a href="/packages">packages directory</a>, as well as <a href="/recipes">recipes</a>
 			and other useful resources. Join us or help us out!
 		</p>
 		<p>

src/routes/components/+page.server.ts

@@ -0,0 +1,5 @@
+import { redirect } from '@sveltejs/kit';
+
+export const load = async () => {
+	redirect(302, '/packages');
+};

src/routes/help/_components.svx

@@ -19,19 +19,19 @@ tr:nth-of-type(2n) {
 }
 </style>
 
-# How to submit a new component?
+# How to submit a new package?
 
-To add a new component on the website, the process is rather simple.
+To add a new package on the website, the process is rather simple.
 
-You have to add your component in [components.json](https://github.com/svelte-society/sveltesociety.dev/blob/master/src/routes/components/components.json)
+You have to add your package in [packages.json](https://github.com/svelte-society/sveltesociety.dev/blob/main/src/routes/packages/packages.json)
 
 ## Forking the project
 
 You can fork the [GitHub project](https://github.com/svelte-society/sveltesociety.dev/), add your component and then propose a Pull request.
 
 ## Edit the file
 
-You can edit and propose your changes [directly in GitHub](https://github.com/svelte-society/sveltesociety.dev/edit/master/src/pages/components/components.json)
+You can edit and propose your changes [directly in GitHub](https://github.com/svelte-society/sveltesociety.dev/edit/master/src/pages/packages/packages.json)
 
 # What information should I give ?