fix: Improve types and remove unused code (#550)

src/lib/SearchableJson.svelte

@@ -9,12 +9,19 @@
 	import Select from '$lib/components/Select.svelte';
 	import { packageManager } from '$stores/packageManager';
 
-	export let data;
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	export let data: any[];
 	export let displayTitle = '';
 	export let displayTitleSingular = '';
 	export let submittingType = '';
 
-	let searchValue;
+	const sortableFields = [
+		{ identifier: 'stars', title: 'Stars', ascending: false },
+		{ identifier: 'title', title: 'Name', ascending: true },
+		{ identifier: 'date', title: 'Date', ascending: false }
+	];
+
+	let searchValue: string;
 
 	const dataDefault = { category: '' };
 	$: dataToDisplay = data.map((line) => ({ ...dataDefault, ...line }));
@@ -30,11 +37,7 @@
 			<Search
 				data={dataToDisplay}
 				bind:query={searchValue}
-				sortableFields={[
+				{sortableFields}
-					{ identifier: 'stars', title: 'Stars', ascending: false },
-					{ identifier: 'title', title: 'Name', ascending: true },
-					{ identifier: 'date', title: 'Date', ascending: false }
-				]}
 				searchableFields={['title', 'description']}
 				facetsConfig={[
 					{
@@ -79,14 +82,20 @@
 	</section>
 	<section slot="items">
 		{#each categories as category}
-			<CardList
+			<CardList title={category.label} id={slugify(category.label)}>
-				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}
+							.includes(d.category) && category.value === '')) as entry (entry.title)}
-					<ComponentCard {...cardData} />
+					<ComponentCard
+						title={entry.title}
+						description={entry.description}
+						repository={entry.repository}
+						stars={entry.stars}
+						tags={entry.tags}
+						date={entry.date}
+						npm={entry.npm}
+						version={entry.version}
+					/>
 				{/each}
 			</CardList>
 		{/each}

src/lib/components/ComponentIndex/Card.svelte

@@ -4,12 +4,10 @@
 	import { packageManager as manager } from '$stores/packageManager';
 	import { relativeDate } from '$utils/relativeDate';
 
-	export let active = false;
+	export let title: string;
-	export let title = '';
+	export let description: string;
-	export let description = '';
+	export let tags: string[];
-	export let tags = [];
+	export let stars: string;
-	export let stars;
-	export let url = '';
 	export let npm = '';
 	export let repository = undefined;
 	export let date = undefined;
@@ -18,9 +16,7 @@
 	let clipboardCopy = false;
 
 	const copy = () => {
-		copyToClipboard(`${packageManagers[$manager]} ${cleanupNpm(npm)}`).then(
+		copyToClipboard(`${packageManagers[$manager]} ${npm}`).then(() => (clipboardCopy = false));
-			() => (clipboardCopy = false)
-		);
 		clipboardCopy = true;
 	};
 
@@ -29,28 +25,23 @@
 		pnpm: 'pnpm add',
 		yarn: 'yarn add'
 	};
-
-	const cleanupNpm = (npm) => {
-		return npm.replace('https://www.npmjs.com/package/', '');
-	};
 </script>
 
-<div class="card" class:active id="component-{title}">
+<div class="card" id="component-{title}">
 	<div class="card__top">
 		<div>
 			<h3>
 				<a href="#component-{title}">#</a>
-				{#if url || repository}<a href={url || repository}>{title}</a>{:else}<span>{title}</span
+				{#if repository}<a href={repository}>{title}</a>{:else}<span>{title}</span>{/if}
-					>{/if}
 			</h3>
 		</div>
 		<div>
-			{#if (repository || url || '').includes('github')}
+			{#if repository.includes('github')}
-				<a class="repo" title="Go to the source code" href={repository || url}
+				<a class="repo" title="Go to the source code" href={repository}
 					><img style="display:inline" src="/images/github_logo.svg" alt="github logo" /></a
 				>
-			{:else if (repository || url || '').includes('gitlab')}
+			{:else if repository.includes('gitlab')}
-				<a class="repo" title="Go to the source code" href={repository || url}
+				<a class="repo" title="Go to the source code" href={repository}
 					><img style="display:inline" src="/images/gitlab_logo.svg" alt="gitlab logo" /></a
 				>
 				<!-- {:else} -->
@@ -62,7 +53,7 @@
 		<Tag
 			click={() => copy()}
 			variant="copy"
-			title={clipboardCopy ? 'copied!' : `${packageManagers[$manager]} ${cleanupNpm(npm)}`}
+			title={clipboardCopy ? 'copied!' : `${packageManagers[$manager]} ${npm}`}
 		/>
 	{/if}
 	<p class="flex-grow">{description}</p>
@@ -97,7 +88,6 @@
 		word-break: none;
 		font-size: var(--font-300);
 	}
-	.active,
 	.card:hover {
 		background: #e8f3fe;
 	}

src/lib/components/ComponentIndex/CardList.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	export let title;
+	export let title: string;
-	export let id = `category-${encodeURI(title)}`;
+	export let id = `category-${title}`;
 </script>
 
 <div class="list">
@@ -17,7 +17,6 @@
 		font-weight: 600;
 		line-height: 150%;
 		margin-bottom: 1rem;
-		@apply text-4xl;
 	}
 	.grid {
 		display: grid;

src/lib/components/EventListElement/index.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
 	import Icon from '$lib/components/Icon/index.svelte';
-	export let title,
+
-		date,
+	export let title: string;
-		url = '';
+	export let date: string;
+	export let url = '';
 
 	const MILLIS_IN_A_DAY = 24 * 60 * 60 * 1000;
 	$: isPast = Date.now() - new Date(date).getTime() > MILLIS_IN_A_DAY;

src/lib/components/Icon/index.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
-	export let name;
+	export let name: string;
 	export let width = '24px';
 	export let height = '24px';
+
 	let icons = [
 		{
 			box: '24 24',
@@ -142,6 +143,7 @@
     />`
 		}
 	];
+
 	let displayIcon = icons.find((e) => e.name === name);
 	if (!displayIcon) {
 		throw Error(`Could not find icon with name ${name}`);

src/lib/components/_SocialLinks/Link.svelte

@@ -1,23 +0,0 @@
-<script lang="ts">
-	export let path, image, alt;
-</script>
-
-<li class="flex-0 lg:flex-auto flex flex-wrap justify-center font-bold">
-	<a
-		href={path}
-		class="text-basics-900 text-lg no-underline uppercase text-center border-b-4 border-transparent hover:border-b-primary focus:border-b-primary"
-		><img src={image} {alt} /><slot /></a
-	>
-</li>
-
-<style>
-	img {
-		width: 128px;
-	}
-	a {
-		font-size: var(--font-100);
-		transition: border-bottom 0.2s;
-		letter-spacing: 0.05rem;
-		font-weight: lighter;
-	}
-</style>

src/lib/components/layout/Header.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
 	import Link from './Link.svelte';
-
 	import { page } from '$app/stores';
+
 	const linksLeft = [
 		['/packages', 'packages'],
 		['/templates', 'templates']
 	];
+
 	const linksRight = [
 		['/resources', 'resources'],
 		['/recipes', 'recipes'],

src/lib/components/recipes/CategoryTree.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
 	import { page } from '$app/stores';
+	import type { Recipe } from '$lib/stores/recipes';
 
-	export let nodes;
+	export let nodes: Recipe[];
 </script>
 
 <ul>

src/lib/stores/recipes.ts

@@ -1,7 +1,7 @@
 import type { Writable } from 'svelte/store';
 import { writable } from 'svelte/store';
 
-type Recipe = {
+export type Recipe = {
 	title: string;
 	layout: string;
 	icon?: string;

src/routes/packages/packages.json

@@ -2468,7 +2468,7 @@
 		"title": "Code Entry component for SvelteKit",
 		"repository": "https://github.com/bonosoft/sveltekit-codeentry",
 		"description": "Allows user to enter pin or numeric codes for example onetime passwords",
-		"npm": "@bonosoft/sveltekit-qrcode",
+		"npm": "@bonosoft/sveltekit-codeentry",
 		"category": "Forms & User Input",
 		"tags": ["auth"]
 	},

src/routes/recipes/+page.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import CategoryTree from '$lib/components/recipes/CategoryTree.svelte';
 	import Icon from '$lib/components/Icon/index.svelte';
-	import { page } from '$app/stores';
 	import { categories } from '$lib/stores/recipes';
 	import Seo from '$lib/components/Seo.svelte';
 </script>
@@ -39,7 +38,7 @@
 							<a href={category.path} class="list-title">{category.title}</a>
 						</h3>
 						<div class="category-list">
-							<CategoryTree currentPath={$page.url.pathname} nodes={category.children} />
+							<CategoryTree nodes={category.children} />
 						</div>
 					</section>
 				{/if}