moved search bar to header and made toggle (#8)

* moved search bar to header and made toggle

* search modal moved to another file

package.json

@@ -16,42 +16,42 @@
   },
   "devDependencies": {
     "@neoconfetti/svelte": "^2.2.1",
-    "@playwright/test": "^1.45.3",
-    "@sveltejs/adapter-static": "^3.0.2",
-    "@sveltejs/adapter-vercel": "^5.4.1",
-    "@sveltejs/enhanced-img": "^0.3.0",
-    "@sveltejs/kit": "^2.5.18",
-    "@sveltejs/vite-plugin-svelte": "^3.1.1",
+    "@playwright/test": "^1.46.1",
+    "@sveltejs/adapter-static": "^3.0.4",
+    "@sveltejs/adapter-vercel": "^5.4.3",
+    "@sveltejs/enhanced-img": "^0.3.3",
+    "@sveltejs/kit": "^2.5.24",
+    "@sveltejs/vite-plugin-svelte": "^3.1.2",
     "@types/eslint": "9.6.0",
-    "@typescript-eslint/eslint-plugin": "^7.17.0",
-    "@typescript-eslint/parser": "^7.17.0",
-    "eslint": "^9.7.0",
+    "@typescript-eslint/eslint-plugin": "^7.18.0",
+    "@typescript-eslint/parser": "^7.18.0",
+    "eslint": "^9.9.1",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-svelte": "^2.43.0",
     "mdsvex": "^0.11.2",
     "prettier": "^3.3.3",
     "prettier-plugin-svelte": "^3.2.6",
     "shiki-transformer-copy-button": "^0.0.3",
-    "svelte": "^4.2.18",
-    "svelte-check": "^3.8.4",
-    "tslib": "^2.6.3",
+    "svelte": "^4.2.19",
+    "svelte-check": "^3.8.6",
+    "tslib": "^2.7.0",
     "typescript": "^5.5.4",
-    "vite": "^5.3.4",
+    "vite": "^5.4.2",
     "vite-plugin-pagefind": "^0.2.10",
-    "vitest": "^2.0.4"
+    "vitest": "^2.0.5"
   },
   "dependencies": {
-    "@fontsource/fira-mono": "^5.0.13",
-    "@fontsource/jetbrains-mono": "^5.0.20",
-    "@fontsource/manrope": "^5.0.20",
+    "@fontsource/fira-mono": "^5.0.14",
+    "@fontsource/jetbrains-mono": "^5.0.21",
+    "@fontsource/manrope": "^5.0.21",
     "@pagefind/default-ui": "^1.1.0",
     "lucide-svelte": "^0.414.0",
     "open-props": "^1.7.5",
     "pagefind": "^1.1.0",
     "rehype-slug": "^6.0.0",
     "remark-toc": "^9.0.0",
     "remark-unwrap-images": "^4.0.0",
-    "shiki": "^1.11.1",
-    "svelte-zoo": "^0.4.10"
+    "shiki": "^1.14.1",
+    "svelte-zoo": "^0.4.11"
   }
 }

src/lib/components/search/PageFindSearch.svelte

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
 	import { onMount } from 'svelte'
 	import { page } from '$app/stores'
 	import { PagefindUI } from '@pagefind/default-ui'
@@ -12,40 +12,74 @@
 			showImages: false,
 			showEmptyFilters: false,
 			autofocus: true,
+			// resetStyles: false,
 			// sort: { date: "desc" },
 			// bundlePath: "/pagefind/",
-			processResult: function (result) {
+			processResult: function (result: any) {
 				// Remove .html from result.url and result.raw_url
 				result.url = result.url.replace(/\.html$/, '')
 				result.raw_url = result.raw_url.replace(/\.html$/, '')
-
 				return result
 			}
 		})
-		pagefind.triggerSearch($page.url.searchParams.get('q'))
-		const search_input = document.querySelector('#search input')
 
-		search_input.addEventListener('input', (e) => {
-			const search_params = new URLSearchParams(window.location.search)
-			search_params.set('q', e.target.value)
-			const new_url = `${window.location.pathname}?${search_params.toString()}`
-			history.pushState(null, '', new_url)
-		})
+		const searchInput = document.querySelector('#search input') as HTMLInputElement
+		if (searchInput) {
+			searchInput.addEventListener('input', (e: Event) => {
+				const target = e.target as HTMLInputElement
+				const searchParams = new URLSearchParams(window.location.search)
+				searchParams.set('q', target.value)
+				const newUrl = `${window.location.pathname}?${searchParams.toString()}`
+				history.pushState(null, '', newUrl)
+			})
+		}
+
+		// Trigger search with current query parameter
+		const currentQuery = $page.url.searchParams.get('q')
+		if (currentQuery) {
+			pagefind.triggerSearch(currentQuery)
+		}
 	})
 </script>
 
 <svelte:head>
 	<title>Search {title}</title>
 </svelte:head>
 
-<div id="search" />
+<div id="search" class="custom_pagefind_search" />
 
-<!-- <style is:global>
-	.dark {
-		--pagefind-ui-primary: #eeeeee;
-		--pagefind-ui-text: #eeeeee;
-		--pagefind-ui-background: #152028;
-		--pagefind-ui-border: #152028;
-		--pagefind-ui-tag: #152028;
+<style>
+	:root {
+		--pagefind-ui-scale: 0.8;
+		--pagefind-ui-primary: #393939;
+		--pagefind-ui-text: #393939;
+		--pagefind-ui-background: #ffffff;
+		--pagefind-ui-border: #eeeeee;
+		--pagefind-ui-tag: #eeeeee;
+		--pagefind-ui-border-width: 2px;
+		--pagefind-ui-border-radius: 8px;
+		--pagefind-ui-image-border-radius: 8px;
+		--pagefind-ui-image-box-ratio: 3 / 2;
 	}
-</style> -->
+	/* @media (prefers-color-scheme: dark) {
+		.custom_pagefind_search {
+			--pagefind-ui-scale: 1;
+			--pagefind-ui-primary: #034ad8;
+			--pagefind-ui-text: #ffffff;
+			--pagefind-ui-background: #ffffff;
+			--pagefind-ui-border: #d21f1f;
+			--pagefind-ui-tag: #20b84d;
+			--pagefind-ui-border-width: 2px;
+			--pagefind-ui-border-radius: 8px;
+			--pagefind-ui-image-border-radius: 8px;
+			--pagefind-ui-image-box-ratio: 3 / 2;
+			--pagefind-ui-font: sans-serif;
+			--pagefind-ui-search-input-background: #ffffff;
+		}
+	} */
+
+	/* .custom_pagefind_search {
+		width: 100%;
+		max-width: 600px;
+	} */
+</style>

src/lib/components/search/SearchModal.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+	import { createEventDispatcher } from 'svelte'
+	import PageFindSearch from './PageFindSearch.svelte'
+
+	const dispatch = createEventDispatcher()
+
+	function closeModal() {
+		// Reset the search query parameter
+		const url = new URL(window.location.href)
+		url.searchParams.delete('q')
+		history.pushState(null, '', url)
+
+		dispatch('close')
+	}
+</script>
+
+<div class="modal-backdrop" on:click={closeModal}>
+	<div class="modal-content" on:click|stopPropagation>
+		<PageFindSearch />
+	</div>
+</div>
+
+<style>
+	.modal-backdrop {
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		background-color: var(--surface-3);
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		z-index: var(--layer-important);
+	}
+
+	.modal-content {
+		background-color: var(--surface-1);
+		color: var(--text-1);
+		padding: var(--size-5);
+		border-radius: var(--radius-3);
+		max-width: 90%;
+		max-height: 90%;
+		overflow-y: auto;
+		position: relative;
+		box-shadow: var(--shadow-3);
+	}
+
+	/* .modal-content.dark {
+		background-color: var(--surface-2);
+	} */
+
+	/* @media (prefers-color-scheme: dark) {
+		.modal-backdrop {
+			background-color: var(--surface-3);
+		}
+
+		.modal-content {
+			background-color: var(--surface-2);
+		}
+	} */
+</style>

src/lib/components/search/index.ts

@@ -1,3 +1,4 @@
 import PageFindSearch from './PageFindSearch.svelte'
+import SearchModal from './SearchModal.svelte'
 
-export { PageFindSearch }
+export { SearchModal, PageFindSearch }

src/routes/header.svelte

@@ -1,30 +1,61 @@
 <script lang="ts">
 	import { base } from '$app/paths'
-
-	import Toggle from './toggle.svelte'
 	import * as config from '$lib/config'
+	import { SearchModal } from '$lib/components/search'
+	import { Search } from 'lucide-svelte'
+	import Toggle from './toggle.svelte'
+	import { onMount } from 'svelte'
+
+	let showSearchModal = false
+
+	onMount(() => {
+		const handleKeydown = (event: KeyboardEvent) => {
+			if (event.ctrlKey && event.key === 'k') {
+				event.preventDefault()
+				toggleSearchModal()
+			}
+			// else if (event.key === 'Escape') {
+			// 	showSearchModal = false
+			// }
+		}
+
+		window.addEventListener('keydown', handleKeydown)
+
+		return () => {
+			window.removeEventListener('keydown', handleKeydown)
+		}
+	})
+
+	function toggleSearchModal() {
+		showSearchModal = !showSearchModal
+		if (!showSearchModal) {
+			// Reset the search query parameter when closing the modal
+			const url = new URL(window.location.href)
+			url.searchParams.delete('q')
+			history.pushState(null, '', url)
+		}
+	}
 </script>
 
 <nav>
-	<a href="{base}/" class="title">
-		<b>{config.title}</b>
-	</a>
-
+	<a href="{base}/" class="title">{config.title}</a>
 	<ul class="links">
+		<li><a href="{base}/about">About</a></li>
+		<li><a href="{base}/contact">Contact</a></li>
+		<li><a href="{base}/rss.xml" target="_blank">RSS</a></li>
 		<li>
-			<a href="{base}/about">About</a>
-		</li>
-		<li>
-			<a href="{base}/contact">Contact</a>
-		</li>
-		<li>
-			<a href="{base}/rss.xml" target="_blank">RSS</a>
+			<a href="/search" on:click|preventDefault={toggleSearchModal} aria-label="Open search">
+				<Search />
+			</a>
 		</li>
 	</ul>
-
 	<Toggle />
 </nav>
 
+{#if showSearchModal}
+	<SearchModal on:close={toggleSearchModal} />
+{/if}
+
 <style>
 	nav {
 		padding-block: var(--size-7);
@@ -51,4 +82,22 @@
 			margin-block: 0;
 		}
 	}
+
+	/* .modal {
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		background: rgba(0, 0, 0, 0.5);
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.modal > :global(.custom_pagefind_search) {
+		background: white;
+		padding: var(--size-7);
+		border-radius: var(--pagefind-ui-border-radius);
+	} */
 </style>

src/routes/post/+page.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import { formatDate } from '$lib/utils'
 	import * as config from '$lib/config'
-	import { PageFindSearch } from '$lib/components/search'
 	import { base } from '$app/paths'
 
 	export let data
@@ -12,7 +11,6 @@
 </svelte:head>
 
 <section>
-	<PageFindSearch />
 	<ul class="posts">
 		{#each data.posts as post}
 			<li class="post">