From 5b20159ff8fca1387762b7f3af3cf194090e9173 Mon Sep 17 00:00:00 2001
From: Yuchan Lee <lasuillard@gmail.com>
Date: Thu, 22 Aug 2024 13:36:18 +0000
Subject: [PATCH 01/18] test: Test `Comment.svelte`

---
 src/components/content/Comment.svelte  | 30 +++++++++++---------------
 src/components/content/Comment.test.ts | 11 ++++++----
 src/routes/blog/[slug]/+page.svelte    |  9 +++++++-
 3 files changed, 28 insertions(+), 22 deletions(-)

diff --git a/src/components/content/Comment.svelte b/src/components/content/Comment.svelte
index 38dd997..4aa653b 100644
--- a/src/components/content/Comment.svelte
+++ b/src/components/content/Comment.svelte
@@ -1,23 +1,19 @@
 <script lang="ts">
-	import { Theme, currentTheme } from '~/lib/theme';
-
-	$: theme = $currentTheme == Theme.Light ? 'github-light' : 'github-dark';
+	export let theme: 'github-light' | 'github-dark';
 </script>
 
-{#key $currentTheme}
-	<div data-testid="utterances" {...$$restProps}>
-		<script
-			src="https://utteranc.es/client.js"
-			repo="lasuillard/lasuillard.github.io"
-			issue-term="pathname"
-			label="comment"
-			{theme}
-			crossorigin="anonymous"
-			async
-		>
-		</script>
-	</div>
-{/key}
+<div data-testid="utterances" {...$$restProps}>
+	<script
+		src="https://utteranc.es/client.js"
+		repo="lasuillard/lasuillard.github.io"
+		issue-term="pathname"
+		label="comment"
+		{theme}
+		crossorigin="anonymous"
+		async
+	>
+	</script>
+</div>
 
 <style lang="postcss">
 	:global(.utterances) {
diff --git a/src/components/content/Comment.test.ts b/src/components/content/Comment.test.ts
index c5d4124..4b40e6e 100644
--- a/src/components/content/Comment.test.ts
+++ b/src/components/content/Comment.test.ts
@@ -3,7 +3,10 @@ import Comment from '$components/content/Comment.svelte';
 import { render } from '@testing-library/svelte';
 import { expect, it } from 'vitest';
 
-it('has a valid locator', () => {
-	const { getByTestId } = render(Comment);
-	expect(getByTestId('utterances')).toBeTruthy();
-});
+it.each([{ theme: 'github-light' }, { theme: 'github-dark' }])(
+	'renders the component with the given props',
+	(theme) => {
+		const { getByTestId } = render(Comment, { theme });
+		expect(getByTestId('utterances')).toBeTruthy();
+	}
+);
diff --git a/src/routes/blog/[slug]/+page.svelte b/src/routes/blog/[slug]/+page.svelte
index 9eaeee0..9c1461f 100644
--- a/src/routes/blog/[slug]/+page.svelte
+++ b/src/routes/blog/[slug]/+page.svelte
@@ -2,6 +2,7 @@
 	import Comment from '$components/content/Comment.svelte';
 	import Markdown from '$components/content/Markdown.svelte';
 	import Toc from '$components/content/Toc.svelte';
+	import { currentTheme, Theme } from '^/src/lib/theme';
 	import { format } from 'date-fns';
 	import mermaid from 'mermaid';
 	import { onMount } from 'svelte';
@@ -63,7 +64,13 @@
 			>
 				<Markdown {content} />
 			</article>
-			<Comment class="w-full" />
+
+			{#key $currentTheme}
+				<Comment
+					theme={$currentTheme == Theme.Light ? 'github-light' : 'github-dark'}
+					class="w-full"
+				/>
+			{/key}
 		</div>
 	</div>
 </div>

From d8166b5b999fb1d07c1ac272b94563796c5d0514 Mon Sep 17 00:00:00 2001
From: Yuchan Lee <lasuillard@gmail.com>
Date: Thu, 22 Aug 2024 13:47:26 +0000
Subject: [PATCH 02/18] chore: Update parametrized test case name

---
 src/components/content/Comment.test.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/content/Comment.test.ts b/src/components/content/Comment.test.ts
index 4b40e6e..ad8577c 100644
--- a/src/components/content/Comment.test.ts
+++ b/src/components/content/Comment.test.ts
@@ -4,8 +4,8 @@ import { render } from '@testing-library/svelte';
 import { expect, it } from 'vitest';
 
 it.each([{ theme: 'github-light' }, { theme: 'github-dark' }])(
-	'renders the component with the given props',
-	(theme) => {
+	'renders the component for theme $theme',
+	({ theme }) => {
 		const { getByTestId } = render(Comment, { theme });
 		expect(getByTestId('utterances')).toBeTruthy();
 	}

From 84ad6f4f215463c6fd880faf3b327cb9c82fd69a Mon Sep 17 00:00:00 2001
From: Yuchan Lee <lasuillard@gmail.com>
Date: Thu, 22 Aug 2024 14:12:24 +0000
Subject: [PATCH 03/18] test: Test `Markdown.svelte` and `markdown.ts`

---
 src/components/content/Markdown.svelte  |  3 +--
 src/components/content/Markdown.test.ts | 12 +++++++---
 src/lib/markdown.test.ts                | 32 +++++++++++++++++++++----
 3 files changed, 37 insertions(+), 10 deletions(-)

diff --git a/src/components/content/Markdown.svelte b/src/components/content/Markdown.svelte
index 5e3787e..f7dae10 100644
--- a/src/components/content/Markdown.svelte
+++ b/src/components/content/Markdown.svelte
@@ -17,7 +17,7 @@
 	 *
 	 * Just ignore this to use slotted inputs for raw markdown text.
 	 */
-	export let content: string | undefined = undefined;
+	export let content: string;
 
 	// Binding wrapper for input slot to obtain its contents
 	let wrapper: HTMLElement;
@@ -33,7 +33,6 @@
 	<!-- eslint-disable-next-line svelte/no-at-html-tags -->
 	{@html content}
 {:else}
-	<!-- Internal-->
 	<div bind:this={wrapper} class="hidden">
 		<slot />
 	</div>
diff --git a/src/components/content/Markdown.test.ts b/src/components/content/Markdown.test.ts
index e155e62..f7f3605 100644
--- a/src/components/content/Markdown.test.ts
+++ b/src/components/content/Markdown.test.ts
@@ -18,9 +18,15 @@ Lorem Ipsum is simply dummy text of the printing and typesetting industry.`);
 		component: { $$: component }
 	} = render(Markdown, { content });
 	expect(component.ctx[component.props['frontMatter']]).toBeUndefined();
-	expect(component.ctx[component.props['content']])
-		.toEqual(`<h1 id="lorem-ipsum"><a href="#lorem-ipsum">Lorem Ipsum</a></h1>
-<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>`);
+	expect(component.ctx[component.props['content']]).toMatchInlineSnapshot(`
+		"<h1 id="lorem-ipsum"><a href="#lorem-ipsum">Lorem Ipsum</a></h1>
+		<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>"
+	`);
+});
+
+it('render with nothing', async () => {
+	const { container } = render(Markdown);
+	expect(container.innerHTML).toMatchInlineSnapshot(`"<div class="hidden"></div>"`);
 });
 
 it.todo('render with raw markdown input slot'); // https://github.com/testing-library/svelte-testing-library/issues/48
diff --git a/src/lib/markdown.test.ts b/src/lib/markdown.test.ts
index 635e442..314c719 100644
--- a/src/lib/markdown.test.ts
+++ b/src/lib/markdown.test.ts
@@ -11,8 +11,10 @@ message: "Hello, World!"
 
 Lorem Ipsum is simply dummy text of the printing and typesetting industry.`);
 		expect(result.frontMatter).toEqual({ message: 'Hello, World!' });
-		expect(result.content).toEqual(`<h1 id="lorem-ipsum"><a href="#lorem-ipsum">Lorem Ipsum</a></h1>
-<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>`);
+		expect(result.content).toMatchInlineSnapshot(`
+			"<h1 id="lorem-ipsum"><a href="#lorem-ipsum">Lorem Ipsum</a></h1>
+			<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>"
+		`);
 	});
 
 	it('should work with no problem if there is no front matter', async () => {
@@ -20,9 +22,29 @@ Lorem Ipsum is simply dummy text of the printing and typesetting industry.`);
 
 Lorem Ipsum is simply dummy text of the printing and typesetting industry.`);
 		expect(result.frontMatter).toBeUndefined();
-		expect(result.content).toEqual(`<h1 id="lorem-ipsum"><a href="#lorem-ipsum">Lorem Ipsum</a></h1>
-<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>`);
+		expect(result.content).toMatchInlineSnapshot(`
+			"<h1 id="lorem-ipsum"><a href="#lorem-ipsum">Lorem Ipsum</a></h1>
+			<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>"
+		`);
 	});
 
-	it.todo('rewrite paths');
+	it('rewrite /static paths in markdown images', async () => {
+		const result = await parse('![Preview](/static/posts/my-post/preview.png)');
+
+		expect(result.frontMatter).toBeUndefined();
+		expect(result.content).toMatchInlineSnapshot(
+			`"<p><img src="/posts/my-post/preview.png" alt="Preview"></p>"`
+		);
+	});
+
+	it('rewrite /static paths in HTML img elements', async () => {
+		const result = await parse(
+			'<img src="/static/posts/my-post/diagram.png" alt="Diagram" width="50%" />'
+		);
+
+		expect(result.frontMatter).toBeUndefined();
+		expect(result.content).toMatchInlineSnapshot(
+			`"<img src="/posts/my-post/diagram.png" alt="Diagram" width="50%" />"`
+		);
+	});
 });

From 70e90b61b59e59c6eed7f22858d066b15a5ec40b Mon Sep 17 00:00:00 2001
From: Yuchan Lee <lasuillard@gmail.com>
Date: Thu, 22 Aug 2024 14:23:51 +0000
Subject: [PATCH 04/18] [ci skip] chore: Default `SENTRY_DSN` to empty string

---
 src/hooks.server.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/hooks.server.ts b/src/hooks.server.ts
index e6ce1fd..16988fa 100644
--- a/src/hooks.server.ts
+++ b/src/hooks.server.ts
@@ -5,7 +5,7 @@ import { handleErrorWithSentry, sentryHandle } from '@sentry/sveltekit';
 import { sequence } from '@sveltejs/kit/hooks';
 
 Sentry.init({
-	dsn: import.meta.env.SENTRY_DSN,
+	dsn: import.meta.env.SENTRY_DSN || '',
 	tracesSampleRate: 0.05,
 	environment: import.meta.env.MODE
 });

From addc9e3040684f3bc8ad42559652384aaa3fb91a Mon Sep 17 00:00:00 2001
From: Yuchan Lee <lasuillard@gmail.com>
Date: Sat, 24 Aug 2024 09:54:16 +0000
Subject: [PATCH 05/18] test: Uncovered QRCode component

---
 src/components/content/QRCode.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/content/QRCode.svelte b/src/components/content/QRCode.svelte
index 87f34aa..d8de7ac 100644
--- a/src/components/content/QRCode.svelte
+++ b/src/components/content/QRCode.svelte
@@ -30,4 +30,4 @@
 	});
 </script>
 
-<canvas bind:this={qrCode} title={text} data-testid="qrcode" {...$$restProps} />
+<canvas bind:this={qrCode} data-testid="qrcode" title={text} {width} />

From 93b8a6f54bd0e4c985146a6927a2497d84d64b65 Mon Sep 17 00:00:00 2001
From: Yuchan Lee <lasuillard@gmail.com>
Date: Sat, 24 Aug 2024 10:08:26 +0000
Subject: [PATCH 06/18] test: TOC

---
 src/components/content/Toc.svelte      | 12 +++++-------
 src/components/content/TocTree.test.ts | 15 +++++++++++++++
 2 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/src/components/content/Toc.svelte b/src/components/content/Toc.svelte
index e3f7f2e..5dfc207 100644
--- a/src/components/content/Toc.svelte
+++ b/src/components/content/Toc.svelte
@@ -4,7 +4,7 @@
 	import { onMount } from 'svelte';
 
 	export let content: HTMLElement | undefined;
-	let rootHeadings: TreeNode<HTMLElement>[];
+	let rootHeadings: TreeNode<HTMLElement>[] = [];
 
 	onMount(() => {
 		if (!content) {
@@ -12,7 +12,7 @@
 			return;
 		}
 
-		const headings = [...(content.querySelectorAll('h1, h2, h3, h4, h5, h6') ?? [])].map(
+		const headings = [...content.querySelectorAll('h1, h2, h3, h4, h5, h6')].map(
 			(elem) => elem as HTMLElement
 		);
 		const root = {
@@ -41,10 +41,8 @@
 
 <div data-testid="toc" {...$$restProps}>
 	<div>
-		{#if rootHeadings}
-			{#each rootHeadings as root}
-				<TocTree tree={root} />
-			{/each}
-		{/if}
+		{#each rootHeadings as root}
+			<TocTree tree={root} />
+		{/each}
 	</div>
 </div>
diff --git a/src/components/content/TocTree.test.ts b/src/components/content/TocTree.test.ts
index 4745609..ea60828 100644
--- a/src/components/content/TocTree.test.ts
+++ b/src/components/content/TocTree.test.ts
@@ -12,3 +12,18 @@ it('has a valid locator', () => {
 	});
 	expect(getByTestId('toc-tree')).toBeTruthy();
 });
+
+it('renders with data', () => {
+	const elem = document.createElement('div');
+	elem.innerHTML = '<a href="#lorem-ipsum">Lorem Ipsum</a>';
+
+	const { container } = render(TocTree, {
+		tree: {
+			data: elem,
+			children: []
+		}
+	});
+	expect(container.innerHTML).toMatchInlineSnapshot(
+		`"<div data-testid="toc-tree"><p class="mb-1.5 font-light"><a class="link-hover link" href="#lorem-ipsum">Lorem Ipsum</a></p> <ul></ul></div>"`
+	);
+});

From 286e8edae06831387804fe8e4765a344c568d09d Mon Sep 17 00:00:00 2001
From: Yuchan Lee <lasuillard@gmail.com>
Date: Sat, 24 Aug 2024 10:11:26 +0000
Subject: [PATCH 07/18] chore: Remove redundant prop

---
 src/routes/blog/[slug]/+page.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/blog/[slug]/+page.svelte b/src/routes/blog/[slug]/+page.svelte
index 9c1461f..eee4194 100644
--- a/src/routes/blog/[slug]/+page.svelte
+++ b/src/routes/blog/[slug]/+page.svelte
@@ -29,7 +29,7 @@
 	});
 </script>
 
-<div {...$$restProps}>
+<div>
 	<div class="flex">
 		<!-- Side TOC for large screen -->
 		<div class="max-lg:-mr-8 ml-8 hidden xl:order-last xl:block">

From 0cee2eca3c69da70a29e1cf58d1d289625f2fbb4 Mon Sep 17 00:00:00 2001
From: Yuchan Lee <lasuillard@gmail.com>
Date: Sat, 24 Aug 2024 10:12:05 +0000
Subject: [PATCH 08/18] chore: Environment variables may undefined

---
 src/hooks.server.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/hooks.server.ts b/src/hooks.server.ts
index 16988fa..6abeabe 100644
--- a/src/hooks.server.ts
+++ b/src/hooks.server.ts
@@ -5,9 +5,9 @@ import { handleErrorWithSentry, sentryHandle } from '@sentry/sveltekit';
 import { sequence } from '@sveltejs/kit/hooks';
 
 Sentry.init({
-	dsn: import.meta.env.SENTRY_DSN || '',
+	dsn: import.meta.env?.SENTRY_DSN || '',
 	tracesSampleRate: 0.05,
-	environment: import.meta.env.MODE
+	environment: import.meta.env?.MODE
 });
 console.debug('Sentry initialized');
 

From b53a84aeba9c4ea0d7d5ffce438e9e4a4ba6ddcb Mon Sep 17 00:00:00 2001
From: Yuchan Lee <lasuillard@gmail.com>
Date: Sat, 24 Aug 2024 10:27:53 +0000
Subject: [PATCH 09/18] test!: Move tests to `tests/` directory

---
 {src => tests}/components/content/Comment.test.ts             | 0
 {src => tests}/components/content/Markdown.test.ts            | 0
 {src => tests}/components/content/QRCode.test.ts              | 0
 {src => tests}/components/content/Toc.test.ts                 | 0
 {src => tests}/components/content/TocTree.test.ts             | 0
 .../components/content/__snapshots__/Toc.test.ts.snap         | 0
 {src => tests}/components/icon/GitHub.test.ts                 | 0
 {src => tests}/components/icon/Gmail.test.ts                  | 0
 {src => tests}/components/icon/LinkedIn.test.ts               | 0
 {src => tests}/components/icon/Menu.test.ts                   | 0
 {src => tests}/components/icon/Moon.test.ts                   | 0
 {src => tests}/components/icon/RSS.test.ts                    | 0
 {src => tests}/components/icon/Search.test.ts                 | 0
 {src => tests}/components/icon/Sun.test.ts                    | 0
 {src => tests}/components/layout/Footer.test.ts               | 0
 {src => tests}/components/layout/Header.test.ts               | 0
 {src => tests}/components/utility/LanguageSelect.test.ts      | 0
 {src => tests}/components/utility/Search.test.ts              | 0
 {src => tests}/components/utility/ThemeSelect.test.ts         | 0
 {src => tests}/hooks.client.test.ts                           | 2 +-
 tests/hooks.server.test.ts                                    | 4 ++++
 {src => tests}/lib/markdown.test.ts                           | 0
 {src => tests}/lib/meta.test.ts                               | 0
 {src => tests}/lib/post.test.ts                               | 0
 {src => tests}/lib/search.test.ts                             | 0
 {src => tests}/lib/store.test.ts                              | 0
 {src => tests}/lib/theme.test.ts                              | 0
 {src => tests}/lib/toc.test.ts                                | 0
 {src => tests}/lib/utils.test.ts                              | 0
 {src => tests}/routes/about-me/page.test.ts                   | 4 ++--
 {src => tests}/routes/api/posts/server.test.ts                | 2 +-
 {src => tests}/routes/blog/[slug]/page.test.ts                | 4 ++--
 {src => tests}/routes/blog/page.test.ts                       | 4 ++--
 {src => tests}/routes/blog/tag/[tag]/page.test.ts             | 4 ++--
 {src => tests}/routes/error.test.ts                           | 2 +-
 {src => tests}/routes/layout.test.ts                          | 4 ++--
 {src => tests}/routes/page.test.ts                            | 4 ++--
 {src => tests}/routes/rss.xml/server.test.ts                  | 2 +-
 vite.config.ts                                                | 4 ++--
 39 files changed, 22 insertions(+), 18 deletions(-)
 rename {src => tests}/components/content/Comment.test.ts (100%)
 rename {src => tests}/components/content/Markdown.test.ts (100%)
 rename {src => tests}/components/content/QRCode.test.ts (100%)
 rename {src => tests}/components/content/Toc.test.ts (100%)
 rename {src => tests}/components/content/TocTree.test.ts (100%)
 rename {src => tests}/components/content/__snapshots__/Toc.test.ts.snap (100%)
 rename {src => tests}/components/icon/GitHub.test.ts (100%)
 rename {src => tests}/components/icon/Gmail.test.ts (100%)
 rename {src => tests}/components/icon/LinkedIn.test.ts (100%)
 rename {src => tests}/components/icon/Menu.test.ts (100%)
 rename {src => tests}/components/icon/Moon.test.ts (100%)
 rename {src => tests}/components/icon/RSS.test.ts (100%)
 rename {src => tests}/components/icon/Search.test.ts (100%)
 rename {src => tests}/components/icon/Sun.test.ts (100%)
 rename {src => tests}/components/layout/Footer.test.ts (100%)
 rename {src => tests}/components/layout/Header.test.ts (100%)
 rename {src => tests}/components/utility/LanguageSelect.test.ts (100%)
 rename {src => tests}/components/utility/Search.test.ts (100%)
 rename {src => tests}/components/utility/ThemeSelect.test.ts (100%)
 rename {src => tests}/hooks.client.test.ts (73%)
 create mode 100644 tests/hooks.server.test.ts
 rename {src => tests}/lib/markdown.test.ts (100%)
 rename {src => tests}/lib/meta.test.ts (100%)
 rename {src => tests}/lib/post.test.ts (100%)
 rename {src => tests}/lib/search.test.ts (100%)
 rename {src => tests}/lib/store.test.ts (100%)
 rename {src => tests}/lib/theme.test.ts (100%)
 rename {src => tests}/lib/toc.test.ts (100%)
 rename {src => tests}/lib/utils.test.ts (100%)
 rename {src => tests}/routes/about-me/page.test.ts (75%)
 rename {src => tests}/routes/api/posts/server.test.ts (87%)
 rename {src => tests}/routes/blog/[slug]/page.test.ts (93%)
 rename {src => tests}/routes/blog/page.test.ts (97%)
 rename {src => tests}/routes/blog/tag/[tag]/page.test.ts (92%)
 rename {src => tests}/routes/error.test.ts (92%)
 rename {src => tests}/routes/layout.test.ts (84%)
 rename {src => tests}/routes/page.test.ts (78%)
 rename {src => tests}/routes/rss.xml/server.test.ts (94%)

diff --git a/src/components/content/Comment.test.ts b/tests/components/content/Comment.test.ts
similarity index 100%
rename from src/components/content/Comment.test.ts
rename to tests/components/content/Comment.test.ts
diff --git a/src/components/content/Markdown.test.ts b/tests/components/content/Markdown.test.ts
similarity index 100%
rename from src/components/content/Markdown.test.ts
rename to tests/components/content/Markdown.test.ts
diff --git a/src/components/content/QRCode.test.ts b/tests/components/content/QRCode.test.ts
similarity index 100%
rename from src/components/content/QRCode.test.ts
rename to tests/components/content/QRCode.test.ts
diff --git a/src/components/content/Toc.test.ts b/tests/components/content/Toc.test.ts
similarity index 100%
rename from src/components/content/Toc.test.ts
rename to tests/components/content/Toc.test.ts
diff --git a/src/components/content/TocTree.test.ts b/tests/components/content/TocTree.test.ts
similarity index 100%
rename from src/components/content/TocTree.test.ts
rename to tests/components/content/TocTree.test.ts
diff --git a/src/components/content/__snapshots__/Toc.test.ts.snap b/tests/components/content/__snapshots__/Toc.test.ts.snap
similarity index 100%
rename from src/components/content/__snapshots__/Toc.test.ts.snap
rename to tests/components/content/__snapshots__/Toc.test.ts.snap
diff --git a/src/components/icon/GitHub.test.ts b/tests/components/icon/GitHub.test.ts
similarity index 100%
rename from src/components/icon/GitHub.test.ts
rename to tests/components/icon/GitHub.test.ts
diff --git a/src/components/icon/Gmail.test.ts b/tests/components/icon/Gmail.test.ts
similarity index 100%
rename from src/components/icon/Gmail.test.ts
rename to tests/components/icon/Gmail.test.ts
diff --git a/src/components/icon/LinkedIn.test.ts b/tests/components/icon/LinkedIn.test.ts
similarity index 100%
rename from src/components/icon/LinkedIn.test.ts
rename to tests/components/icon/LinkedIn.test.ts
diff --git a/src/components/icon/Menu.test.ts b/tests/components/icon/Menu.test.ts
similarity index 100%
rename from src/components/icon/Menu.test.ts
rename to tests/components/icon/Menu.test.ts
diff --git a/src/components/icon/Moon.test.ts b/tests/components/icon/Moon.test.ts
similarity index 100%
rename from src/components/icon/Moon.test.ts
rename to tests/components/icon/Moon.test.ts
diff --git a/src/components/icon/RSS.test.ts b/tests/components/icon/RSS.test.ts
similarity index 100%
rename from src/components/icon/RSS.test.ts
rename to tests/components/icon/RSS.test.ts
diff --git a/src/components/icon/Search.test.ts b/tests/components/icon/Search.test.ts
similarity index 100%
rename from src/components/icon/Search.test.ts
rename to tests/components/icon/Search.test.ts
diff --git a/src/components/icon/Sun.test.ts b/tests/components/icon/Sun.test.ts
similarity index 100%
rename from src/components/icon/Sun.test.ts
rename to tests/components/icon/Sun.test.ts
diff --git a/src/components/layout/Footer.test.ts b/tests/components/layout/Footer.test.ts
similarity index 100%
rename from src/components/layout/Footer.test.ts
rename to tests/components/layout/Footer.test.ts
diff --git a/src/components/layout/Header.test.ts b/tests/components/layout/Header.test.ts
similarity index 100%
rename from src/components/layout/Header.test.ts
rename to tests/components/layout/Header.test.ts
diff --git a/src/components/utility/LanguageSelect.test.ts b/tests/components/utility/LanguageSelect.test.ts
similarity index 100%
rename from src/components/utility/LanguageSelect.test.ts
rename to tests/components/utility/LanguageSelect.test.ts
diff --git a/src/components/utility/Search.test.ts b/tests/components/utility/Search.test.ts
similarity index 100%
rename from src/components/utility/Search.test.ts
rename to tests/components/utility/Search.test.ts
diff --git a/src/components/utility/ThemeSelect.test.ts b/tests/components/utility/ThemeSelect.test.ts
similarity index 100%
rename from src/components/utility/ThemeSelect.test.ts
rename to tests/components/utility/ThemeSelect.test.ts
diff --git a/src/hooks.client.test.ts b/tests/hooks.client.test.ts
similarity index 73%
rename from src/hooks.client.test.ts
rename to tests/hooks.client.test.ts
index 41c3554..a89cd0a 100644
--- a/src/hooks.client.test.ts
+++ b/tests/hooks.client.test.ts
@@ -3,7 +3,7 @@ import { expect, it } from 'vitest';
 
 it('run client hooks', () => {
 	expect(async () => {
-		const { initializers } = await import('./hooks.client');
+		const { initializers } = await import('../src/hooks.client');
 		await Promise.all(initializers);
 	}).not.toThrow();
 });
diff --git a/tests/hooks.server.test.ts b/tests/hooks.server.test.ts
new file mode 100644
index 0000000..5ec1c35
--- /dev/null
+++ b/tests/hooks.server.test.ts
@@ -0,0 +1,4 @@
+// @vitest-environment happy-dom
+import { it } from 'vitest';
+
+it.todo('run server hooks');
diff --git a/src/lib/markdown.test.ts b/tests/lib/markdown.test.ts
similarity index 100%
rename from src/lib/markdown.test.ts
rename to tests/lib/markdown.test.ts
diff --git a/src/lib/meta.test.ts b/tests/lib/meta.test.ts
similarity index 100%
rename from src/lib/meta.test.ts
rename to tests/lib/meta.test.ts
diff --git a/src/lib/post.test.ts b/tests/lib/post.test.ts
similarity index 100%
rename from src/lib/post.test.ts
rename to tests/lib/post.test.ts
diff --git a/src/lib/search.test.ts b/tests/lib/search.test.ts
similarity index 100%
rename from src/lib/search.test.ts
rename to tests/lib/search.test.ts
diff --git a/src/lib/store.test.ts b/tests/lib/store.test.ts
similarity index 100%
rename from src/lib/store.test.ts
rename to tests/lib/store.test.ts
diff --git a/src/lib/theme.test.ts b/tests/lib/theme.test.ts
similarity index 100%
rename from src/lib/theme.test.ts
rename to tests/lib/theme.test.ts
diff --git a/src/lib/toc.test.ts b/tests/lib/toc.test.ts
similarity index 100%
rename from src/lib/toc.test.ts
rename to tests/lib/toc.test.ts
diff --git a/src/lib/utils.test.ts b/tests/lib/utils.test.ts
similarity index 100%
rename from src/lib/utils.test.ts
rename to tests/lib/utils.test.ts
diff --git a/src/routes/about-me/page.test.ts b/tests/routes/about-me/page.test.ts
similarity index 75%
rename from src/routes/about-me/page.test.ts
rename to tests/routes/about-me/page.test.ts
index 02d2356..dc25043 100644
--- a/src/routes/about-me/page.test.ts
+++ b/tests/routes/about-me/page.test.ts
@@ -1,8 +1,8 @@
 // @vitest-environment happy-dom
+import { load } from '$routes/about-me/+page';
+import Page from '$routes/about-me/+page.svelte';
 import { render } from '@testing-library/svelte';
 import { expect, it } from 'vitest';
-import { load } from './+page';
-import Page from './+page.svelte';
 
 it('should render', async () => {
 	// @ts-expect-error Enough for mocking.
diff --git a/src/routes/api/posts/server.test.ts b/tests/routes/api/posts/server.test.ts
similarity index 87%
rename from src/routes/api/posts/server.test.ts
rename to tests/routes/api/posts/server.test.ts
index fc51012..87c9afd 100644
--- a/src/routes/api/posts/server.test.ts
+++ b/tests/routes/api/posts/server.test.ts
@@ -1,8 +1,8 @@
 // @vitest-environment happy-dom
 import { Post } from '$lib/post';
+import * as Endpoint from '$routes/api/posts/+server';
 import { describe, expect, it } from 'vitest';
 import { z } from 'zod';
-import * as Endpoint from './+server';
 
 describe('GET /api/posts', () => {
 	it('respond with list of all posts', async () => {
diff --git a/src/routes/blog/[slug]/page.test.ts b/tests/routes/blog/[slug]/page.test.ts
similarity index 93%
rename from src/routes/blog/[slug]/page.test.ts
rename to tests/routes/blog/[slug]/page.test.ts
index 932a52e..b725309 100644
--- a/src/routes/blog/[slug]/page.test.ts
+++ b/tests/routes/blog/[slug]/page.test.ts
@@ -1,9 +1,9 @@
 // @vitest-environment happy-dom
 import * as post from '$lib/post';
+import { load } from '$routes/blog/[slug]/+page';
+import Page from '$routes/blog/[slug]/+page.svelte';
 import { render } from '@testing-library/svelte';
 import { expect, it, vi } from 'vitest';
-import { load } from './+page';
-import Page from './+page.svelte';
 
 it('renders a post', async () => {
 	const spy = vi.spyOn(post, 'getPost');
diff --git a/src/routes/blog/page.test.ts b/tests/routes/blog/page.test.ts
similarity index 97%
rename from src/routes/blog/page.test.ts
rename to tests/routes/blog/page.test.ts
index 778c5ad..aee2f8f 100644
--- a/src/routes/blog/page.test.ts
+++ b/tests/routes/blog/page.test.ts
@@ -1,8 +1,8 @@
 // @vitest-environment happy-dom
+import { load } from '$routes/blog/+page';
+import Page from '$routes/blog/+page.svelte';
 import { getAllByRole, getByRole, getByText, render } from '@testing-library/svelte';
 import { expect, it, vi } from 'vitest';
-import { load } from './+page';
-import Page from './+page.svelte';
 
 it('list all unique tags', async () => {
 	const fetch = vi.fn(() => ({
diff --git a/src/routes/blog/tag/[tag]/page.test.ts b/tests/routes/blog/tag/[tag]/page.test.ts
similarity index 92%
rename from src/routes/blog/tag/[tag]/page.test.ts
rename to tests/routes/blog/tag/[tag]/page.test.ts
index daa8b5f..448ea42 100644
--- a/src/routes/blog/tag/[tag]/page.test.ts
+++ b/tests/routes/blog/tag/[tag]/page.test.ts
@@ -1,8 +1,8 @@
 // @vitest-environment happy-dom
+import { load } from '$routes/blog/tag/[tag]/+page';
+import Page from '$routes/blog/tag/[tag]/+page.svelte';
 import { render } from '@testing-library/svelte';
 import { expect, it, vi } from 'vitest';
-import { load } from './+page';
-import Page from './+page.svelte';
 
 it('list posts', async () => {
 	// FIXME: Write global fetch stub for later reuse
diff --git a/src/routes/error.test.ts b/tests/routes/error.test.ts
similarity index 92%
rename from src/routes/error.test.ts
rename to tests/routes/error.test.ts
index 266d85b..4847960 100644
--- a/src/routes/error.test.ts
+++ b/tests/routes/error.test.ts
@@ -1,7 +1,7 @@
 // @vitest-environment happy-dom
+import Page from '$routes/+error.svelte';
 import { render } from '@testing-library/svelte';
 import { expect, it } from 'vitest';
-import Page from './+error.svelte';
 
 it.todo('shows error detail', () => {
 	const { getByText } = render(Page, {
diff --git a/src/routes/layout.test.ts b/tests/routes/layout.test.ts
similarity index 84%
rename from src/routes/layout.test.ts
rename to tests/routes/layout.test.ts
index 22c49e7..6efa177 100644
--- a/src/routes/layout.test.ts
+++ b/tests/routes/layout.test.ts
@@ -1,8 +1,8 @@
 // @vitest-environment happy-dom
+import { load } from '$routes/+layout';
+import Layout from '$routes/+layout.svelte';
 import { render } from '@testing-library/svelte';
 import { expect, it } from 'vitest';
-import { load } from './+layout';
-import Layout from './+layout.svelte';
 
 it.todo('renders', async () => {
 	const { container, getByTestId } = render(Layout, {
diff --git a/src/routes/page.test.ts b/tests/routes/page.test.ts
similarity index 78%
rename from src/routes/page.test.ts
rename to tests/routes/page.test.ts
index 9f0c3ac..2cfbb37 100644
--- a/src/routes/page.test.ts
+++ b/tests/routes/page.test.ts
@@ -1,8 +1,8 @@
 // @vitest-environment happy-dom
+import { load } from '$routes/+page';
+import Page from '$routes/+page.svelte';
 import { render } from '@testing-library/svelte';
 import { expect, it } from 'vitest';
-import { load } from './+page';
-import Page from './+page.svelte';
 
 it('renders', async () => {
 	// @ts-expect-error Enough for mocking.
diff --git a/src/routes/rss.xml/server.test.ts b/tests/routes/rss.xml/server.test.ts
similarity index 94%
rename from src/routes/rss.xml/server.test.ts
rename to tests/routes/rss.xml/server.test.ts
index ffca4f4..4ed7c21 100644
--- a/src/routes/rss.xml/server.test.ts
+++ b/tests/routes/rss.xml/server.test.ts
@@ -1,6 +1,6 @@
 // @vitest-environment happy-dom
+import * as Endpoint from '$routes/rss.xml/+server';
 import { describe, expect, it, vi } from 'vitest';
-import * as Endpoint from './+server';
 
 describe('GET /rss.xml', () => {
 	it('returns an parsable XML document', async () => {
diff --git a/vite.config.ts b/vite.config.ts
index 758b3b2..f1fdbb6 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -35,7 +35,7 @@ export default defineConfig({
 		alias: [
 			{ find: /^svelte$/, replacement: 'svelte/internal' } // BUG: https://github.com/vitest-dev/vitest/issues/2834
 		],
-		include: ['{src,tests}/**/*.{test,spec}.{js,ts}'],
+		include: ['tests/**/*.{test,spec}.{js,ts}'],
 		setupFiles: ['tests/setup.ts'],
 		reporters: ['junit'],
 		outputFile: {
@@ -44,7 +44,7 @@ export default defineConfig({
 		coverage: {
 			all: true,
 			include: ['src/**'],
-			exclude: ['src/**/__mocks__/*', 'src/**.d.ts', 'src/**/*.{test,spec}.{js,ts}'],
+			exclude: ['src/**.d.ts'],
 			reporter: ['text', 'clover', 'html']
 		},
 		api: {

From 653bd8c572a716fde3515ab4b4448b215a2e5343 Mon Sep 17 00:00:00 2001
From: Yuchan Lee <lasuillard@gmail.com>
Date: Sun, 25 Aug 2024 01:29:22 +0000
Subject: [PATCH 10/18] test: Exclude hooks from unittest

---
 src/hooks.client.ts        | 15 ++++++---------
 src/hooks.server.ts        |  3 +++
 tests/hooks.client.test.ts |  9 ---------
 tests/hooks.server.test.ts |  4 ----
 4 files changed, 9 insertions(+), 22 deletions(-)
 delete mode 100644 tests/hooks.client.test.ts
 delete mode 100644 tests/hooks.server.test.ts

diff --git a/src/hooks.client.ts b/src/hooks.client.ts
index 5e87ff1..5ea2ef0 100644
--- a/src/hooks.client.ts
+++ b/src/hooks.client.ts
@@ -1,3 +1,4 @@
+/* c8 ignore start */
 import { initEngine } from '$lib/search';
 import { initTheme } from '$lib/theme';
 import * as Sentry from '@sentry/sveltekit';
@@ -13,9 +14,6 @@ Sentry.init({
 });
 console.debug('Sentry initialized');
 
-// Array of initializer promises for testing
-export const initializers: Promise<unknown>[] = [];
-
 initTheme();
 
 // Initialize Mermaid for fancy diagrams
@@ -26,11 +24,10 @@ mermaid.initialize({
 });
 console.debug('Mermaid initialized');
 
-// Initialize search engine
-initializers.push(
-	initEngine().then((engine) => {
-		console.debug(`Search engine initialized, there is ${engine.termCount} terms in the index`);
-	})
-);
+initEngine().then((engine) => {
+	console.debug(`Search engine initialized, there is ${engine.termCount} terms in the index`);
+});
 
 export const handleError = Sentry.handleErrorWithSentry();
+
+/* c8 ignore stop */
diff --git a/src/hooks.server.ts b/src/hooks.server.ts
index 6abeabe..734aad1 100644
--- a/src/hooks.server.ts
+++ b/src/hooks.server.ts
@@ -1,3 +1,4 @@
+/* c8 ignore start */
 // NOTE: Right now there's no server running but keep this for future
 //       Until, this configuration only will be used for development in local
 import * as Sentry from '@sentry/sveltekit';
@@ -16,3 +17,5 @@ export const handle = sequence(sentryHandle());
 
 // If you have a custom error handler, pass it to `handleErrorWithSentry`
 export const handleError = handleErrorWithSentry();
+
+/* c8 ignore stop */
diff --git a/tests/hooks.client.test.ts b/tests/hooks.client.test.ts
deleted file mode 100644
index a89cd0a..0000000
--- a/tests/hooks.client.test.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-// @vitest-environment happy-dom
-import { expect, it } from 'vitest';
-
-it('run client hooks', () => {
-	expect(async () => {
-		const { initializers } = await import('../src/hooks.client');
-		await Promise.all(initializers);
-	}).not.toThrow();
-});
diff --git a/tests/hooks.server.test.ts b/tests/hooks.server.test.ts
deleted file mode 100644
index 5ec1c35..0000000
--- a/tests/hooks.server.test.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-// @vitest-environment happy-dom
-import { it } from 'vitest';
-
-it.todo('run server hooks');

From 2f3912c9a960534e00fd8d48321425b5db46e586 Mon Sep 17 00:00:00 2001
From: Yuchan Lee <lasuillard@gmail.com>
Date: Sun, 25 Aug 2024 01:36:46 +0000
Subject: [PATCH 11/18] refactor: inline `Header` component' `restProps`

---
 src/components/layout/Header.svelte | 2 +-
 src/routes/+layout.svelte           | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/layout/Header.svelte b/src/components/layout/Header.svelte
index 20e0a01..45de949 100644
--- a/src/components/layout/Header.svelte
+++ b/src/components/layout/Header.svelte
@@ -13,7 +13,7 @@
 	export let drawerOpen = false;
 </script>
 
-<div data-testid="header-wrapper" {...$$restProps}>
+<div data-testid="header-wrapper" class="bg-base-100">
 	<!-- Drawer container -->
 	<div class="drawer">
 		<input id="header-drawer" type="checkbox" class="drawer-toggle" bind:checked={drawerOpen} />
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index ae55573..e603ca9 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -23,7 +23,7 @@
 </svelte:head>
 
 <div data-testid="layout" class="grid min-h-screen auto-rows-min grid-cols-1">
-	<Header class="bg-base-100" bind:currentPath={data.current} />
+	<Header bind:currentPath={data.current} />
 
 	<div>
 		{#key data.current}

From 627c8e04d904b865dcc5ecd2d0df4d0bd64b0490 Mon Sep 17 00:00:00 2001
From: Yuchan Lee <lasuillard@gmail.com>
Date: Sun, 25 Aug 2024 02:18:26 +0000
Subject: [PATCH 12/18] chore: Remove unused component `LanguageSelect`

---
 src/components/layout/Header.svelte           |  2 -
 src/components/utility/LanguageSelect.svelte  | 44 -------------------
 tests/components/layout/Header.test.ts        |  5 ---
 .../components/utility/LanguageSelect.test.ts | 12 -----
 4 files changed, 63 deletions(-)
 delete mode 100644 src/components/utility/LanguageSelect.svelte
 delete mode 100644 tests/components/utility/LanguageSelect.test.ts

diff --git a/src/components/layout/Header.svelte b/src/components/layout/Header.svelte
index 45de949..1b1fca4 100644
--- a/src/components/layout/Header.svelte
+++ b/src/components/layout/Header.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
 	import Menu from '$components/icon/Menu.svelte';
-	import LanguageSelect from '$components/utility/LanguageSelect.svelte';
 	import ThemeSelect from '$components/utility/ThemeSelect.svelte';
 
 	const links = [
@@ -55,7 +54,6 @@
 				<!-- Utility buttons -->
 				<div class="navbar-end flex-1">
 					<ThemeSelect class="flex" />
-					<LanguageSelect class="hidden" />
 				</div>
 			</header>
 		</div>
diff --git a/src/components/utility/LanguageSelect.svelte b/src/components/utility/LanguageSelect.svelte
deleted file mode 100644
index 72a1ba6..0000000
--- a/src/components/utility/LanguageSelect.svelte
+++ /dev/null
@@ -1,44 +0,0 @@
-<script lang="ts">
-	const supportedLanguages = [
-		{
-			code: 'ko',
-			name: 'Korean'
-		},
-		{
-			code: 'en',
-			name: 'English'
-		}
-	];
-
-	let currentLanguage = 'ko';
-
-	/**
-	 * Set current language.
-	 * @param code ISO-639 language code.
-	 */
-	function setLanguage(code: string) {
-		currentLanguage = code;
-		console.debug(`Set language to ${code}`);
-	}
-</script>
-
-<div data-testid="language-select" {...$$restProps}>
-	<ul class="menu menu-horizontal z-[1] rounded-box">
-		<li>
-			<details>
-				<summary class="text-base font-light">
-					{supportedLanguages.find((lang) => lang.code == currentLanguage)?.name || 'Unknown'}
-				</summary>
-				<ul class="bg-base-300">
-					{#each supportedLanguages as lang}
-						<li>
-							<button on:click={() => setLanguage(lang.code)}>
-								<span class="text-base font-light">{lang.name}</span>
-							</button>
-						</li>
-					{/each}
-				</ul>
-			</details>
-		</li>
-	</ul>
-</div>
diff --git a/tests/components/layout/Header.test.ts b/tests/components/layout/Header.test.ts
index edeed3a..1239ecb 100644
--- a/tests/components/layout/Header.test.ts
+++ b/tests/components/layout/Header.test.ts
@@ -46,8 +46,3 @@ it('contains theme selector', () => {
 	const { getByTestId } = render(Header);
 	expect(getByTestId('theme-select')).toBeTruthy();
 });
-
-it('contains language selector', () => {
-	const { getByTestId } = render(Header);
-	expect(getByTestId('language-select')).toBeTruthy();
-});
diff --git a/tests/components/utility/LanguageSelect.test.ts b/tests/components/utility/LanguageSelect.test.ts
deleted file mode 100644
index b74d93d..0000000
--- a/tests/components/utility/LanguageSelect.test.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-// @vitest-environment happy-dom
-import LanguageSelect from '$components/utility/LanguageSelect.svelte';
-import { render } from '@testing-library/svelte';
-import { expect, it } from 'vitest';
-
-it('has a valid locator', () => {
-	const { getByTestId } = render(LanguageSelect);
-	expect(getByTestId('language-select')).toBeTruthy();
-});
-
-it.todo('init with language autodetect from browser');
-it.todo('fallbacks to english if user language not supported');

From d6a0a7f3edea483721fb66e109edbdc41aa41946 Mon Sep 17 00:00:00 2001
From: Yuchan Lee <lasuillard@gmail.com>
Date: Sun, 25 Aug 2024 02:38:39 +0000
Subject: [PATCH 13/18] refactor: Reduce `restProps`

---
 src/components/content/Comment.svelte     | 2 +-
 src/components/content/Markdown.svelte    | 2 +-
 src/components/layout/Footer.svelte       | 2 +-
 src/components/layout/Header.svelte       | 2 +-
 src/components/utility/Search.svelte      | 2 +-
 src/components/utility/ThemeSelect.svelte | 2 +-
 src/routes/+layout.svelte                 | 2 +-
 src/routes/blog/+page.svelte              | 2 +-
 src/routes/blog/[slug]/+page.svelte       | 5 +----
 9 files changed, 9 insertions(+), 12 deletions(-)

diff --git a/src/components/content/Comment.svelte b/src/components/content/Comment.svelte
index 4aa653b..5de094c 100644
--- a/src/components/content/Comment.svelte
+++ b/src/components/content/Comment.svelte
@@ -2,7 +2,7 @@
 	export let theme: 'github-light' | 'github-dark';
 </script>
 
-<div data-testid="utterances" {...$$restProps}>
+<div data-testid="utterances" class="w-full">
 	<script
 		src="https://utteranc.es/client.js"
 		repo="lasuillard/lasuillard.github.io"
diff --git a/src/components/content/Markdown.svelte b/src/components/content/Markdown.svelte
index f7dae10..6143503 100644
--- a/src/components/content/Markdown.svelte
+++ b/src/components/content/Markdown.svelte
@@ -17,7 +17,7 @@
 	 *
 	 * Just ignore this to use slotted inputs for raw markdown text.
 	 */
-	export let content: string;
+	export let content: string = '';
 
 	// Binding wrapper for input slot to obtain its contents
 	let wrapper: HTMLElement;
diff --git a/src/components/layout/Footer.svelte b/src/components/layout/Footer.svelte
index 606b22d..f36aa47 100644
--- a/src/components/layout/Footer.svelte
+++ b/src/components/layout/Footer.svelte
@@ -7,7 +7,7 @@
 	const currentYear = new Date().getFullYear();
 </script>
 
-<div data-testid="footer" {...$$restProps}>
+<div data-testid="footer" class="sticky top-[100vh] mt-20 bg-base-200 px-2 py-4 lg:mt-32">
 	<div class="flex flex-col">
 		<footer class="footer px-3 py-2 md:px-12 md:py-8">
 			<aside class="mx-auto items-center">
diff --git a/src/components/layout/Header.svelte b/src/components/layout/Header.svelte
index 1b1fca4..4f1fbee 100644
--- a/src/components/layout/Header.svelte
+++ b/src/components/layout/Header.svelte
@@ -53,7 +53,7 @@
 
 				<!-- Utility buttons -->
 				<div class="navbar-end flex-1">
-					<ThemeSelect class="flex" />
+					<ThemeSelect />
 				</div>
 			</header>
 		</div>
diff --git a/src/components/utility/Search.svelte b/src/components/utility/Search.svelte
index 1dd70c4..88b8c3e 100644
--- a/src/components/utility/Search.svelte
+++ b/src/components/utility/Search.svelte
@@ -44,7 +44,7 @@
 	});
 </script>
 
-<div data-testid="search" {...$$restProps}>
+<div data-testid="search" class="mb-2 w-64">
 	<div class="group relative flex items-center space-x-2">
 		<form class="w-full" autocomplete="off" on:submit|preventDefault role="search">
 			<div class="absolute ml-[11px] mt-[9px]">
diff --git a/src/components/utility/ThemeSelect.svelte b/src/components/utility/ThemeSelect.svelte
index c0e2477..6cc7625 100644
--- a/src/components/utility/ThemeSelect.svelte
+++ b/src/components/utility/ThemeSelect.svelte
@@ -18,7 +18,7 @@
 </script>
 
 <!-- BUG: False-positive uncovered branch; https://github.com/vitest-dev/vitest/issues/1893 -->
-<div data-testid="theme-select" {...$$restProps}>
+<div data-testid="theme-select" class="flex">
 	<label class="btn btn-circle btn-ghost swap swap-rotate" aria-label="Theme Selection">
 		<input
 			data-testid="toggle-input"
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index e603ca9..8958cbd 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -39,5 +39,5 @@
 		{/key}
 	</div>
 
-	<Footer class="sticky top-[100vh] mt-20 bg-base-200 px-2 py-4 lg:mt-32" />
+	<Footer />
 </div>
diff --git a/src/routes/blog/+page.svelte b/src/routes/blog/+page.svelte
index 5adc41a..8fbba76 100644
--- a/src/routes/blog/+page.svelte
+++ b/src/routes/blog/+page.svelte
@@ -12,7 +12,7 @@
 <div>
 	<div class="grid grid-cols-1 xl:grid-cols-4">
 		<div class="mb-32">
-			<Search class="mb-2 w-64" />
+			<Search />
 
 			<!-- All tags -->
 			<div data-testid="tags">
diff --git a/src/routes/blog/[slug]/+page.svelte b/src/routes/blog/[slug]/+page.svelte
index eee4194..212fbbe 100644
--- a/src/routes/blog/[slug]/+page.svelte
+++ b/src/routes/blog/[slug]/+page.svelte
@@ -66,10 +66,7 @@
 			</article>
 
 			{#key $currentTheme}
-				<Comment
-					theme={$currentTheme == Theme.Light ? 'github-light' : 'github-dark'}
-					class="w-full"
-				/>
+				<Comment theme={$currentTheme == Theme.Light ? 'github-light' : 'github-dark'} />
 			{/key}
 		</div>
 	</div>

From 11840c7fa142225b8e5054c7dd5d9f2e67d294b5 Mon Sep 17 00:00:00 2001
From: Yuchan Lee <lasuillard@gmail.com>
Date: Tue, 27 Aug 2024 13:18:12 +0000
Subject: [PATCH 14/18] test: Test search component with
 @testing-library/user-event

---
 package.json                            |  1 +
 src/lib/search.ts                       | 18 ++++++++-----
 tests/_helpers/user.ts                  |  8 ++++++
 tests/_helpers/vitest.ts                | 13 ++++++++++
 tests/components/utility/Search.test.ts | 34 +++++++++++++++++++------
 yarn.lock                               |  5 ++++
 6 files changed, 65 insertions(+), 14 deletions(-)
 create mode 100644 tests/_helpers/user.ts
 create mode 100644 tests/_helpers/vitest.ts

diff --git a/package.json b/package.json
index 0dab726..61e8858 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
 		"@sveltejs/vite-plugin-svelte": "^3.1.0",
 		"@tailwindcss/typography": "^0.5.12",
 		"@testing-library/svelte": "^5.2.0",
+		"@testing-library/user-event": "^14.5.2",
 		"@types/qrcode": "^1.5.5",
 		"@typescript-eslint/eslint-plugin": "^8.0.0",
 		"@typescript-eslint/parser": "^8.0.0",
diff --git a/src/lib/search.ts b/src/lib/search.ts
index 918f60b..477d0e1 100644
--- a/src/lib/search.ts
+++ b/src/lib/search.ts
@@ -6,9 +6,11 @@ let miniSearch: MiniSearch | undefined = undefined;
 
 /**
  * Initialize search engine.
+ * @param posts POsts to index.
  * @returns Initialized search engine.
  */
-export async function initEngine(): Promise<MiniSearch> {
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export async function initEngine(posts?: any[]): Promise<MiniSearch> {
 	console.debug('Initializing search engine');
 	miniSearch = new MiniSearch({
 		fields: ['slug', 'metadata.title', 'metadata.tags' /* FIXME: Sanitize content HTML tags */],
@@ -20,13 +22,17 @@ export async function initEngine(): Promise<MiniSearch> {
 	});
 
 	// TODO: Search for document contents
-	console.debug('Loading post documents');
-	const response = await fetch('/api/posts');
-	const data = await response.json();
-	const allPosts = z.array(Post).parse(data);
+	if (!posts) {
+		console.debug('Loading post documents');
+		const response = await fetch('/api/posts');
+		const data = await response.json();
+		const allPosts = z.array(Post).parse(data);
+
+		posts = allPosts;
+	}
 
 	console.debug('Indexing documents');
-	await miniSearch.addAllAsync(allPosts);
+	await miniSearch.addAllAsync(posts);
 
 	return miniSearch;
 }
diff --git a/tests/_helpers/user.ts b/tests/_helpers/user.ts
new file mode 100644
index 0000000..a14f7c9
--- /dev/null
+++ b/tests/_helpers/user.ts
@@ -0,0 +1,8 @@
+import userEvent, { type UserEvent } from '@testing-library/user-event';
+import type { Use } from '@vitest/runner';
+
+// eslint-disable-next-line no-empty-pattern, jsdoc/require-jsdoc
+export async function user({}, use: Use<UserEvent>) {
+	const user = userEvent.setup();
+	await use(user);
+}
diff --git a/tests/_helpers/vitest.ts b/tests/_helpers/vitest.ts
new file mode 100644
index 0000000..f914c8c
--- /dev/null
+++ b/tests/_helpers/vitest.ts
@@ -0,0 +1,13 @@
+import { type UserEvent } from '@testing-library/user-event';
+import { test as base } from 'vitest';
+import { user } from './user';
+
+export const it = base.extend({
+	user
+});
+
+declare module 'vitest' {
+	export interface TestContext {
+		user: UserEvent;
+	}
+}
diff --git a/tests/components/utility/Search.test.ts b/tests/components/utility/Search.test.ts
index afdc0e9..1057467 100644
--- a/tests/components/utility/Search.test.ts
+++ b/tests/components/utility/Search.test.ts
@@ -1,8 +1,9 @@
 // @vitest-environment happy-dom
 import Search from '$components/utility/Search.svelte';
-import { fireEvent, render } from '@testing-library/svelte';
-import { tick } from 'svelte';
-import { expect, it } from 'vitest';
+import { render } from '@testing-library/svelte';
+import { initEngine } from '^/src/lib/search';
+import { it } from '^/tests/_helpers/vitest';
+import { expect } from 'vitest';
 
 it('has a valid locator', () => {
 	const { getByTestId } = render(Search);
@@ -14,11 +15,28 @@ it('has a text input with placeholder', () => {
 	expect((component.getByRole('textbox') as HTMLInputElement).placeholder).toEqual('Search');
 });
 
-it.todo('shows matching results for given query', async () => {
+it('shows matching results for given query', async ({ user }) => {
+	// Arrange
+	await initEngine([
+		{
+			slug: 'uno-terra-errat',
+			metadata: {
+				title: 'Uno terra errat',
+				publicationDate: new Date(),
+				preview: '/posts/preview.png',
+				tags: ['uno', 'terra', 'errat']
+			},
+			content:
+				'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec purus ut est fermentum aliquam. Nullam sit amet sapien sit amet'
+		}
+	]);
 	const component = render(Search);
+
+	// Act
 	const input = component.getByRole('textbox') as HTMLInputElement;
-	await fireEvent.change(input, { target: { value: 'uno' } });
-	expect(input.value).toEqual('uno');
-	await tick();
-	expect(component.getByText('Uno terra errat')).toBeTruthy(); // FIXME: Not sure why changes aren't reflected
+	await user.click(input);
+	await user.keyboard('uno');
+
+	// Assert
+	expect(component.getByText('Uno terra errat')).toBeTruthy();
 });
diff --git a/yarn.lock b/yarn.lock
index 4ecc1e9..eb857a2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1118,6 +1118,11 @@
   dependencies:
     "@testing-library/dom" "^10.0.0"
 
+"@testing-library/user-event@^14.5.2":
+  version "14.5.2"
+  resolved "https://registry.yarnpkg.com/@testing-library/user-event/-/user-event-14.5.2.tgz#db7257d727c891905947bd1c1a99da20e03c2ebd"
+  integrity sha512-YAh82Wh4TIrxYLmfGcixwD18oIjyC1pFQC2Y01F2lzV2HTMiYrI0nze0FD0ocB//CKS/7jIUgae+adPqxK5yCQ==
+
 "@types/aria-query@^5.0.1":
   version "5.0.4"
   resolved "https://registry.yarnpkg.com/@types/aria-query/-/aria-query-5.0.4.tgz#1a31c3d378850d2778dabb6374d036dcba4ba708"

From 76d7406c04b868863598f2a73f5a6b561f469c96 Mon Sep 17 00:00:00 2001
From: Yuchan Lee <lasuillard@gmail.com>
Date: Wed, 28 Aug 2024 11:24:03 +0000
Subject: [PATCH 15/18] Revert "test: Test `Comment.svelte`"

This reverts commit 5b20159ff8fca1387762b7f3af3cf194090e9173.
---
 src/components/content/Comment.svelte    | 30 ++++++++++++++----------
 src/routes/blog/[slug]/+page.svelte      |  6 +----
 tests/components/content/Comment.test.ts | 11 ++++-----
 3 files changed, 22 insertions(+), 25 deletions(-)

diff --git a/src/components/content/Comment.svelte b/src/components/content/Comment.svelte
index 5de094c..2559e0d 100644
--- a/src/components/content/Comment.svelte
+++ b/src/components/content/Comment.svelte
@@ -1,19 +1,23 @@
 <script lang="ts">
-	export let theme: 'github-light' | 'github-dark';
+	import { currentTheme, Theme } from '$lib/theme';
+
+	$: theme = $currentTheme == Theme.Light ? 'github-light' : 'github-dark';
 </script>
 
-<div data-testid="utterances" class="w-full">
-	<script
-		src="https://utteranc.es/client.js"
-		repo="lasuillard/lasuillard.github.io"
-		issue-term="pathname"
-		label="comment"
-		{theme}
-		crossorigin="anonymous"
-		async
-	>
-	</script>
-</div>
+{#key theme}
+	<div data-testid="utterances" class="w-full">
+		<script
+			src="https://utteranc.es/client.js"
+			repo="lasuillard/lasuillard.github.io"
+			issue-term="pathname"
+			label="comment"
+			{theme}
+			crossorigin="anonymous"
+			async
+		>
+		</script>
+	</div>
+{/key}
 
 <style lang="postcss">
 	:global(.utterances) {
diff --git a/src/routes/blog/[slug]/+page.svelte b/src/routes/blog/[slug]/+page.svelte
index 212fbbe..84cff0d 100644
--- a/src/routes/blog/[slug]/+page.svelte
+++ b/src/routes/blog/[slug]/+page.svelte
@@ -2,7 +2,6 @@
 	import Comment from '$components/content/Comment.svelte';
 	import Markdown from '$components/content/Markdown.svelte';
 	import Toc from '$components/content/Toc.svelte';
-	import { currentTheme, Theme } from '^/src/lib/theme';
 	import { format } from 'date-fns';
 	import mermaid from 'mermaid';
 	import { onMount } from 'svelte';
@@ -64,10 +63,7 @@
 			>
 				<Markdown {content} />
 			</article>
-
-			{#key $currentTheme}
-				<Comment theme={$currentTheme == Theme.Light ? 'github-light' : 'github-dark'} />
-			{/key}
+			<Comment />
 		</div>
 	</div>
 </div>
diff --git a/tests/components/content/Comment.test.ts b/tests/components/content/Comment.test.ts
index ad8577c..c5d4124 100644
--- a/tests/components/content/Comment.test.ts
+++ b/tests/components/content/Comment.test.ts
@@ -3,10 +3,7 @@ import Comment from '$components/content/Comment.svelte';
 import { render } from '@testing-library/svelte';
 import { expect, it } from 'vitest';
 
-it.each([{ theme: 'github-light' }, { theme: 'github-dark' }])(
-	'renders the component for theme $theme',
-	({ theme }) => {
-		const { getByTestId } = render(Comment, { theme });
-		expect(getByTestId('utterances')).toBeTruthy();
-	}
-);
+it('has a valid locator', () => {
+	const { getByTestId } = render(Comment);
+	expect(getByTestId('utterances')).toBeTruthy();
+});

From 96a01979cd61631571ee4eb11641a2599e308834 Mon Sep 17 00:00:00 2001
From: Yuchan Lee <lasuillard@gmail.com>
Date: Wed, 28 Aug 2024 11:58:53 +0000
Subject: [PATCH 16/18] refactor: Replace persisted store with
 svelte-persisted-store library

---
 package.json            |  5 ++--
 src/lib/store.ts        | 57 ----------------------------------------
 src/lib/theme.ts        |  2 +-
 tests/lib/store.test.ts | 58 -----------------------------------------
 tests/lib/theme.test.ts |  7 +++--
 yarn.lock               |  5 ++++
 6 files changed, 13 insertions(+), 121 deletions(-)
 delete mode 100644 src/lib/store.ts
 delete mode 100644 tests/lib/store.test.ts

diff --git a/package.json b/package.json
index 61e8858..64b1866 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
 	"devDependencies": {
 		"@codecov/vite-plugin": "^0.0.1-beta.10",
 		"@playwright/test": "^1.45.0",
+		"@sentry/sveltekit": "^8.21.0",
 		"@sveltejs/adapter-static": "^3.0.1",
 		"@sveltejs/kit": "^2.5.5",
 		"@sveltejs/vite-plugin-svelte": "^3.1.0",
@@ -63,6 +64,7 @@
 		"remark-stringify": "^11.0.0",
 		"svelte": "^4.2.12",
 		"svelte-check": "^3.8.0",
+		"svelte-persisted-store": "^0.11.0",
 		"tailwindcss": "^3.4.3",
 		"tslib": "^2.6.2",
 		"typescript": "^5.5.2",
@@ -71,8 +73,5 @@
 		"vitest": "^2.0.5",
 		"yaml": "^2.5.0",
 		"zod": "^3.22.4"
-	},
-	"dependencies": {
-		"@sentry/sveltekit": "^8.21.0"
 	}
 }
diff --git a/src/lib/store.ts b/src/lib/store.ts
deleted file mode 100644
index bb48441..0000000
--- a/src/lib/store.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-import { browser } from '$app/environment';
-import { writable, type Updater, type Writable } from 'svelte/store';
-
-interface Storage {
-	getItem(key: string): string | null;
-	setItem(key: string, value: string): void;
-	clear(): void;
-}
-
-interface Options {
-	storage?: Storage;
-}
-
-// NOTE: No-op storage for non-browser env (SSR prerendering)
-export const nullStorage = {
-	// eslint-disable-next-line @typescript-eslint/no-unused-vars
-	getItem(key: string): string | null {
-		return null;
-	},
-	// eslint-disable-next-line @typescript-eslint/no-unused-vars
-	setItem(key: string, value: string): void {},
-	clear() {}
-};
-
-/**
- * Custom store persisting data via browser storage API.
- * @param key Key used in persistence storage backend.
- * @param defaultValue Default value for store if value considered not set.
- * @param options Store options.
- * @returns Store instance.
- */
-export function persisted<T>(key: string, defaultValue: T, options?: Options): Writable<T> {
-	const storage = options?.storage ?? (browser ? localStorage : nullStorage);
-
-	// Load previous value from storage
-	const initialValue = JSON.parse(storage.getItem(key) || 'null') ?? defaultValue;
-
-	// Create store and wrap
-	const { subscribe, set: _set, update: _update } = writable(initialValue);
-	const store = {
-		subscribe,
-		set: (value: T) => {
-			storage.setItem(key, JSON.stringify(value));
-			_set(value);
-		},
-		update: (callback: Updater<T>) =>
-			_update((last: T) => {
-				const value = callback(last);
-				storage.setItem(key, JSON.stringify(value));
-				_set(value);
-
-				return value;
-			})
-	};
-
-	return store;
-}
diff --git a/src/lib/theme.ts b/src/lib/theme.ts
index f42f289..7775b99 100644
--- a/src/lib/theme.ts
+++ b/src/lib/theme.ts
@@ -1,5 +1,5 @@
 import { browser } from '$app/environment';
-import { persisted } from '$lib/store';
+import { persisted } from 'svelte-persisted-store';
 import { get, type Writable } from 'svelte/store';
 
 // https://daisyui.com/docs/themes/
diff --git a/tests/lib/store.test.ts b/tests/lib/store.test.ts
deleted file mode 100644
index 50ee6ea..0000000
--- a/tests/lib/store.test.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-// @vitest-environment happy-dom
-import { get } from 'svelte/store';
-import { describe, expect, it } from 'vitest';
-import { nullStorage, persisted } from '~/lib/store';
-import { getVarName } from '~/lib/utils';
-
-describe(getVarName({ nullStorage }), () => {
-	it('should satisfy to browser storage API interface', () => {
-		const key = Math.random().toString();
-		expect(nullStorage.getItem(key)).toBeNull();
-		expect(() => nullStorage.setItem(key, 'hello world')).not.toThrow();
-		expect(() => nullStorage.clear()).not.toThrow();
-	});
-});
-
-describe(getVarName({ persisted }), () => {
-	it('should conform to store interface and use browser local storage by default', () => {
-		const key = Math.random().toString();
-		const store = persisted(key, 'default-value');
-		expect(get(store)).toEqual('default-value');
-
-		let changed = '';
-		store.subscribe((value) => {
-			changed = value;
-		});
-
-		store.set('hello world');
-		expect(changed).toEqual('hello world');
-		expect(localStorage.getItem(key)).toEqual('"hello world"');
-
-		store.update((value) => value + ', done');
-		expect(changed).toEqual('hello world, done');
-		expect(localStorage.getItem(key)).toEqual('"hello world, done"');
-	});
-
-	it('should compatible with browser session storage', () => {
-		const key = Math.random().toString();
-		const store = persisted(key, 'default-value', {
-			storage: sessionStorage
-		});
-		expect(get(store)).toEqual('default-value');
-
-		let changed = '';
-		store.subscribe((value) => {
-			changed = value;
-		});
-
-		store.set('hello world');
-		expect(changed).toEqual('hello world');
-		expect(sessionStorage.getItem(key)).toEqual('"hello world"');
-
-		store.update((value) => value + ', done');
-		expect(changed).toEqual('hello world, done');
-		expect(sessionStorage.getItem(key)).toEqual('"hello world, done"');
-	});
-
-	it.todo('should default to null storage if current environment is not a browser');
-});
diff --git a/tests/lib/theme.test.ts b/tests/lib/theme.test.ts
index 7dcd4be..6b7f657 100644
--- a/tests/lib/theme.test.ts
+++ b/tests/lib/theme.test.ts
@@ -11,11 +11,14 @@ describe(initTheme, () => {
 		expect(currentTheme).toBeDefined();
 	});
 
-	it('coerce to light theme if theme is not valid', () => {
+	it('coerce to preferred theme if theme is not valid', () => {
+		const preferDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+		const themeDefault = preferDark ? Theme.Dark : Theme.Light;
+
 		localStorage.setItem('theme', '"cheddar-cheese"');
 		initTheme();
 		// @ts-expect-error It should be set after init
-		expect(get(currentTheme)).toEqual(Theme.Light);
+		expect(get(currentTheme)).toEqual(themeDefault);
 	});
 });
 
diff --git a/yarn.lock b/yarn.lock
index eb857a2..ea0a7cf 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5281,6 +5281,11 @@ svelte-hmr@^0.16.0:
   resolved "https://registry.yarnpkg.com/svelte-hmr/-/svelte-hmr-0.16.0.tgz#9f345b7d1c1662f1613747ed7e82507e376c1716"
   integrity sha512-Gyc7cOS3VJzLlfj7wKS0ZnzDVdv3Pn2IuVeJPk9m2skfhcu5bq3wtIZyQGggr7/Iim5rH5cncyQft/kRLupcnA==
 
+svelte-persisted-store@^0.11.0:
+  version "0.11.0"
+  resolved "https://registry.yarnpkg.com/svelte-persisted-store/-/svelte-persisted-store-0.11.0.tgz#14de610be20c2242d4b551b5e421d9c0ac6219e3"
+  integrity sha512-9RgJ5DrawGyyfK22A80cfu8Jose3CV8YjEZKz9Tn94rQ0tWyEmYr+XI+wrVF6wjRbW99JMDSVcFRiM3XzVJj/w==
+
 svelte-preprocess@^5.1.3:
   version "5.1.4"
   resolved "https://registry.yarnpkg.com/svelte-preprocess/-/svelte-preprocess-5.1.4.tgz#14ada075c94bbd2b71c5ec70ff72f8ebe1c95b91"

From 424a5a5f863b504c15c988e18aad9a1c546ca343 Mon Sep 17 00:00:00 2001
From: Yuchan Lee <lasuillard@gmail.com>
Date: Wed, 28 Aug 2024 11:59:29 +0000
Subject: [PATCH 17/18] refactor: Shorter import

---
 tests/components/utility/Search.test.ts | 2 +-
 tests/lib/toc.test.ts                   | 2 +-
 tests/lib/utils.test.ts                 | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/tests/components/utility/Search.test.ts b/tests/components/utility/Search.test.ts
index 1057467..f7f1c5f 100644
--- a/tests/components/utility/Search.test.ts
+++ b/tests/components/utility/Search.test.ts
@@ -1,7 +1,7 @@
 // @vitest-environment happy-dom
 import Search from '$components/utility/Search.svelte';
+import { initEngine } from '$lib/search';
 import { render } from '@testing-library/svelte';
-import { initEngine } from '^/src/lib/search';
 import { it } from '^/tests/_helpers/vitest';
 import { expect } from 'vitest';
 
diff --git a/tests/lib/toc.test.ts b/tests/lib/toc.test.ts
index 2cc0d92..af0b8f7 100644
--- a/tests/lib/toc.test.ts
+++ b/tests/lib/toc.test.ts
@@ -1,4 +1,4 @@
-import { makeToc, type TreeSource } from '^/src/lib/toc';
+import { makeToc, type TreeSource } from '$lib/toc';
 import { describe, expect, it } from 'vitest';
 
 describe(makeToc, () => {
diff --git a/tests/lib/utils.test.ts b/tests/lib/utils.test.ts
index 209cbc9..1dbcbc3 100644
--- a/tests/lib/utils.test.ts
+++ b/tests/lib/utils.test.ts
@@ -1,4 +1,4 @@
-import { getVarName, omitKeys, quoteJoin } from '^/src/lib/utils';
+import { getVarName, omitKeys, quoteJoin } from '$lib/utils';
 import { describe, expect, it } from 'vitest';
 
 describe(getVarName, () => {

From 74c251518c5058f679012f92be241bed8c5a4edb Mon Sep 17 00:00:00 2001
From: Yuchan Lee <lasuillard@gmail.com>
Date: Wed, 28 Aug 2024 12:00:18 +0000
Subject: [PATCH 18/18] chore: Test TODOs for later

---
 tests/components/layout/Header.test.ts  | 2 ++
 tests/components/utility/Search.test.ts | 3 +++
 2 files changed, 5 insertions(+)

diff --git a/tests/components/layout/Header.test.ts b/tests/components/layout/Header.test.ts
index 1239ecb..9dcc924 100644
--- a/tests/components/layout/Header.test.ts
+++ b/tests/components/layout/Header.test.ts
@@ -46,3 +46,5 @@ it('contains theme selector', () => {
 	const { getByTestId } = render(Header);
 	expect(getByTestId('theme-select')).toBeTruthy();
 });
+
+it.todo('closes drawer when clicking outside of it');
diff --git a/tests/components/utility/Search.test.ts b/tests/components/utility/Search.test.ts
index f7f1c5f..e37cad6 100644
--- a/tests/components/utility/Search.test.ts
+++ b/tests/components/utility/Search.test.ts
@@ -40,3 +40,6 @@ it('shows matching results for given query', async ({ user }) => {
 	// Assert
 	expect(component.getByText('Uno terra errat')).toBeTruthy();
 });
+
+it.todo('shows no results for non-matching query');
+it.todo('suggest matching results for given query');