Merge branch 'main' into update-npm-data

.github/pull_request_template.md

@@ -0,0 +1,8 @@
+## 🎯 Changes
+
+<!-- What changes are made in this PR? Is it a feature or a package submission? -->
+
+## ✅ Checklist
+
+- [ ] I have given my PR a descriptive title
+- [ ] I have run `pnpm run lint` locally on my changes

README.md

@@ -1,6 +1,6 @@
 # Svelte Society Website
 
-Using SvelteKit!
+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.
 
 ## Developing
 
@@ -9,17 +9,10 @@ In order to start a development server:
 ```bash
 pnpm install
 pnpm run dev
-
-# or start the server and open the app in a new browser tab
-pnpm run start
 ```
 
-## Building
-
-Before creating a production version of your app, install an [adapter](https://kit.svelte.dev/docs#adapters) for your target environment. Then:
+## Contributing
 
-```bash
-pnpm run build
-```
+If you would like to improve the site, you are very welcome to submit a PR! The website has a [form](https://sveltesociety.dev/help/submitting?type=component) which helps streamline adding your package or resource.
 
-> You can preview the built app with `pnpm run preview`, regardless of whether you installed an adapter. This should _not_ be used to serve your app in production.
+Please locally ensure your code passes `pnpm run lint` before submitting your PR. If you have Prettier formatting issues, please run `pnpm run format`.

package.json

@@ -18,6 +18,7 @@
 	"devDependencies": {
 		"@actions/core": "^1.10.1",
 		"@macfja/svelte-persistent-store": "2.4.1",
+		"@sindresorhus/slugify": "^2.2.1",
 		"@sveltejs/adapter-static": "^3.0.0",
 		"@sveltejs/kit": "^2.0.0",
 		"@sveltejs/vite-plugin-svelte": "^3.0.1",

src/routes/searchableJson.svelte → src/lib/SearchableJson.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
+	import slugify from '@sindresorhus/slugify';
 	import ComponentCard from '$lib/components/ComponentIndex/Card.svelte';
 	import List 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 Select from '$lib/components/Select.svelte';
 	import { packageManager } from '$stores/packageManager';
 
 	export let data;
@@ -19,8 +20,6 @@
 	$: dataToDisplay = data.map((line) => ({ ...dataDefault, ...line }));
 
 	$: categories = extractUnique(dataToDisplay, 'category');
-
-	export let categoryId = {};
 </script>
 
 <Seo title={displayTitle} />
@@ -39,9 +38,7 @@
 				facetsConfig={[
 					{
 						title: 'Category',
-						identifier: 'category',
-						isClearable: true,
-						showIndicator: true
+						identifier: 'category'
 					},
 					{
 						title: 'Tags',
@@ -81,10 +78,7 @@
 	</section>
 	<section slot="items">
 		{#each categories as category}
-			<List
-				title={category.label || 'Unclassified'}
-				id={categoryId[category.label] || category.label || 'unclassified'}
-			>
+			<List title={category.label || 'Unclassified'} id={slugify(category.label) || 'unclassified'}>
 				{#each dataToDisplay.filter((d) => d.category === category.value || (!categories
 							.map((v) => v.value)
 							.includes(d.category) && category.value === '')) as cardData}

src/routes/components/+page.svelte

@@ -1,28 +1,11 @@
 <script lang="ts">
 	import components from './components.json';
-	import SearchableJson from '../searchableJson.svelte';
+	import SearchableJson from '$lib/SearchableJson.svelte';
 	import { injectNpmData } from '$utils/injectNpmData';
 	import { injectStars } from '$utils/stars';
-
-	const categoryId = {
-		Animations: 'animations',
-		'Data Visualisation': 'data-vis',
-		'Design Pattern': 'design-patterns',
-		'Design System': 'design-systems',
-		'Developer Experience': 'dx',
-		'Forms & User Input': 'input',
-		Integration: 'integrations',
-		'Rich Text Editor': 'text-editors',
-		Routers: 'routers',
-		Stores: 'stores',
-		'SvelteKit Adapters': 'adapters',
-		Testing: 'testing',
-		'User Interaction': 'ui'
-	};
 </script>
 
 <SearchableJson
-	{categoryId}
 	data={injectNpmData(injectStars(components))}
 	displayTitle="Components"
 	displayTitleSingular="component"

src/routes/help/submitting/+page.svelte

@@ -166,9 +166,9 @@
 </pre>
 <br />
 Copy this snippet and add it to
-<a href="{repoURL}/blob/main/src/routes/{pathName}/{pathName}.json">{pathName}.json</a>. You can
-propose your changes
-<a href="{repoURL}/edit/main/src/routes/{pathName}/{pathName}.json">directly in GitHub</a>.
+<a href="{repoURL}/blob/main/src/routes/{pathName}/{pathName}.json">{pathName}.json</a>. Before
+submitting a PR, please clone your changes locally and run:
+<pre>pnpm run lint</pre>
 
 <style>
 	.json-generator,

src/routes/templates/+page.svelte

@@ -1,18 +1,10 @@
 <script lang="ts">
 	import templates from './templates.json';
-	import SearchableJson from '../searchableJson.svelte';
+	import SearchableJson from '$lib/SearchableJson.svelte';
 	import { injectStars } from '$utils/stars';
-
-	const categoryId = {
-		Sapper: 'sapper',
-		Svelte: 'svelte',
-		'Svelte Add': 'adders',
-		SvelteKit: 'svelte-kit'
-	};
 </script>
 
 <SearchableJson
-	{categoryId}
 	data={injectStars(templates)}
 	displayTitle="Template"
 	displayTitleSingular="template"

src/routes/tools/+page.svelte

@@ -1,20 +1,11 @@
 <script lang="ts">
 	import tools from '../tools/tools.json';
-	import SearchableJson from '../searchableJson.svelte';
+	import SearchableJson from '$lib/SearchableJson.svelte';
 	import { injectNpmData } from '$utils/injectNpmData';
 	import { injectStars } from '$utils/stars';
-
-	const categoryId = {
-		'Bundler Plugins': 'bundling',
-		Debugging: 'debugging',
-		'Editor Extensions': 'editor-support',
-		'Linting and Formatting': 'code-quality',
-		Preprocessors: 'preprocessors'
-	};
 </script>
 
 <SearchableJson
-	{categoryId}
 	data={injectNpmData(injectStars(tools))}
 	displayTitle="Tools"
 	displayTitleSingular="tool"