Add search bar, fix storybook, fix other minor errors

package.json

@@ -48,9 +48,13 @@
 	},
 	"type": "module",
 	"dependencies": {
-		"@fontsource-variable/roboto-mono": "^5.0.9",
-		"@fontsource-variable/roboto-slab": "^5.0.12",
-		"shiki": "^1.5.2"
+		"@fontsource-variable/roboto-mono": "^5.0.19",
+		"@fontsource-variable/roboto-slab": "^5.0.20",
+		"flexsearch": "^0.7.43",
+		"shiki": "^1.6.1",
+		"shiki-es": "^0.14.0",
+		"vscode-oniguruma": "^2.0.1",
+		"vscode-textmate": "^9.0.0"
 	},
 	"packageManager": "[email protected]"
 }

src/app.html

@@ -30,7 +30,7 @@
 		<link rel="shortcut icon" href="%sveltekit.assets%/favicons/favicon.ico" />
 
 		<link rel="icon" href="%sveltekit.assets%/favicons/favicon.png" />
-		<link rel="icon" type="image/x-icon" href="/favicon.ico" />
+		<link rel="icon" type="image/x-icon" href="/favicons/favicon.ico" />
 
 		<!-- Tell browser this site is responsive -->
 		<meta name="viewport" content="width=device-width, initial-scale=1" />

src/lib/components/organisms/Header.story.svelte

@@ -2,6 +2,9 @@
 	import '$lib/scss/global.scss';
 	import type { Hst as HstType } from '@histoire/plugin-svelte';
 	import Header from './Header.svelte';
+	import type { BlogPost } from '$lib/utils/types';
+
+	export let posts: BlogPost[];
 
 	export let Hst: HstType;
 </script>
@@ -12,10 +15,10 @@
 	layout={{ type: 'single', iframe: true }}
 >
 	<svelte:component this={Hst.Variant} title="Transparent Background">
-		<Header />
+		<Header {posts} />
 	</svelte:component>
 
 	<svelte:component this={Hst.Variant} title="With Background">
-		<Header showBackground />
+		<Header showBackground {posts} />
 	</svelte:component>
 </svelte:component>

src/lib/components/organisms/Header.svelte

@@ -4,9 +4,12 @@
 	import RssLink from '$lib/components/atoms/RssLink.svelte';
 	import Socials from '$lib/components/molecules/Socials.svelte';
 	import AnimatedHamburger from '$lib/components/singletons/AnimatedHamburger.svelte';
-	import Strap from '../singletons/Strap.svelte';
+	import Strap from '$lib/components/singletons/Strap.svelte';
+	import SearchBar from '$lib/components/singletons/SearchBar.svelte';
+	import type { BlogPost } from '$lib/utils/types';
 
 	export let showBackground = false;
+	export let posts: BlogPost[];
 
 	let isMenuOpen = false;
 
@@ -17,6 +20,12 @@
 	function closeMenu() {
 		isMenuOpen = false;
 	}
+
+	function handleLinkClick() {
+		isMenuOpen = false;
+	}
+
+	let searchTerm = '';
 </script>
 
 <Strap />
@@ -28,6 +37,9 @@
 		<AnimatedHamburger {isMenuOpen} {toggleMenu}>
 			<div class="links-wrapper">
 				<ul class="links">
+					<li>
+						<SearchBar {searchTerm} on:linkClick={handleLinkClick} {posts} />
+					</li>
 					<li>
 						<a href="/blog">Blog</a>
 					</li>

src/lib/components/singletons/PrevNextPost.svelte

@@ -23,27 +23,27 @@
 </script>
 
 <div class="container">
-	<div class="nextPost">
-		{#if nextPost}
-			<a href="/{nextPost.slug}">{nextPost.title}</a>
-			<div class="arrow arrowNext">
+	<div class="previousPost">
+		{#if prevPost}
+			<a href="/{prevPost.slug}">{prevPost.title}</a>
+			<div class="arrow arrowPrevious">
 				<Icon icon="material-symbols:arrow-left" width="44" height="44" style="color: #650000" />
-				<p>Next Post</p>
+				<p>Previous Post</p>
 			</div>
 		{:else}
-			<h3 class="inactive">You're up to date. More to come soon!</h3>
+			<h3 class="inactive">You are reading our first post.</h3>
 		{/if}
 	</div>
 
-	<div class="previousPost">
-		{#if prevPost}
-			<a href="/{prevPost.slug}">{prevPost.title}</a>
-			<div class="arrow arrowPrevious">
-				<p>Previous Post</p>
+	<div class="nextPost">
+		{#if nextPost}
+			<a href="/{nextPost.slug}">{nextPost.title}</a>
+			<div class="arrow arrowNext">
+				<p>Next Post</p>
 				<Icon icon="material-symbols:arrow-right" width="44" height="44" style="color: #650000" />
 			</div>
 		{:else}
-			<h3 class="inactive">You are reading our first post.</h3>
+			<h3 class="inactive">You're up to date. More to come soon!</h3>
 		{/if}
 	</div>
 </div>
@@ -64,11 +64,12 @@
 	}
 
 	.nextPost {
-		border-right: 1px solid #979797;
+		border-left: 1px solid #979797;
+		text-align: right;
 	}
 
 	.previousPost {
-		text-align: right;
+		text-align: left;
 	}
 
 	.arrow {
@@ -77,11 +78,11 @@
 	}
 
 	.arrowNext {
-		justify-content: flex-start;
+		justify-content: flex-end;
 	}
 
 	.arrowPrevious {
-		justify-content: flex-end;
+		justify-content: flex-start;
 	}
 
 	.inactive {