Made not-found page for missing slug and normalized inputs

src/helpers/parse.js

@@ -1,8 +1,9 @@
+import normalize from './normalize';
+
 export function parseSlug(slug) {
-    return slug.replaceAll("_", " ")
+    return normalize(slug).replaceAll("-", " ")
 }
 
-
 export function parseName(name) {
-    return name.replaceAll(" ","_")
+    return normalize(name).replaceAll(" ","-")
 }

src/lib/Layout/Products.svelte

@@ -16,7 +16,7 @@
 		<a class={productStyle} on:click={currentProduct.set(product)} href={parseName(product.name)}>
 			<p
 				class={`pl-12 hover:bg-blue-300 ${
-					$currentProduct.name === product.name ? 'bg-blue-300' : ''
+					$currentProduct && $currentProduct.name === product.name ? 'bg-blue-300' : ''
 				} text-sm`}
 			>
 				{product.name}

src/lib/NotFound.svelte

@@ -0,0 +1,7 @@
+<script>
+  const back = () => window.history.back()
+</script>
+
+<div class='flex flex-col w-screen text-2xl p-24 items-start'><p>This item could not be found!</p> 
+<button on:click={back} class='outline outline-1 p-1 mt-2'>Go back?</button>
+</div>

src/routes/[slug].svelte

@@ -1,20 +1,25 @@
 <script>
 	import Feature from '$lib/Feature.svelte';
+	import NotFound from '$lib/NotFound.svelte';
 	import { page } from '$app/stores';
 	import { products, currentProduct, tags, productsView } from '$lib/stores';
 	import { parseSlug } from '$helpers/parse.js';
+	import normalize from '$helpers/normalize';
 	export let data;
 
 	products.set(data.products);
 	tags.set(data.tags);
 	productsView.set(data.products);
 
-	let currentProductName = parseSlug($page.params.slug);
-	currentProduct.set($products.find((product) => product.name == currentProductName));
+	let currProd = $products.find((product) => normalize(product.name) ===  parseSlug($page.params.slug))
+	if (currProd) currentProduct.set(currProd);
 
-	let currentProductIndex = $products.findIndex((product) => product.name == $currentProduct.name);
 </script>
 
 <div class="container">
+	{#if currProd}
 	<Feature product={$currentProduct} />
+	{:else}
+	<NotFound/>
+	{/if}
 </div>

src/routes/product.svelte

@@ -1,9 +1,10 @@
 <script>
 	import Feature from '$lib/Feature.svelte';
 	import { productsView, currentProduct } from '$lib/stores';
+	import normalize from '$helpers/normalize';
 
 	let currentProductIndex = $productsView.findIndex(
-		(product) => product.name == $currentProduct.name
+		({name}) => normalize(name) === normalize($currentProduct.name)
 	);
 
 	function nextProduct() {