feat: add site search with pagefind

.cspell.json

@@ -1,9 +1,9 @@
 {
-  "version": "0.2",
-  "dictionaryDefinitions": [
-    { "addWords": true, "path": ".cspell/dictionary.txt", "name": "dictionary" }
-  ],
 	"language": "en",
 	"dictionaries": ["dictionary"],
-  "ignorePaths": ["dist"]
+	"ignorePaths": ["dist"],
+	"dictionaryDefinitions": [
+		{ "path": ".cspell/dictionary.txt", "addWords": true, "name": "dictionary" }
+	],
+	"version": "0.2"
 }

.cspell/dictionary.txt

@@ -1853,3 +1853,41 @@ zurück
 ōnin
 καλός
 σθένος
+bestellt
+Bilder
+einfach
+erntet
+Erste
+Extremsituationen
+Fortgeschrittene
+gesunde
+Handwerk
+Hilfe
+Jagen
+Kochen
+Künste
+meistern
+middlewares
+Nahrung
+natürlich
+Notfallversorgung
+pagefind
+Praxisführer
+Sammeln
+schnell
+seinen
+sirv
+Swup
+swup
+trainied
+Überleben
+Überlebenstechniken
+ultimative
+Unlighthouse
+unlighthouse
+Vergessene
+Wildnis
+Workflo
+animationend
+keyframes
+keydown

astro.config.mjs

@@ -4,6 +4,7 @@ import prefetch from '@astrojs/prefetch';
 import sitemap from '@astrojs/sitemap';
 import tailwind from '@astrojs/tailwind';
 import { astroImageTools } from 'astro-imagetools';
+import pagefind from 'astro-pagefind';
 import webmanifest from 'astro-webmanifest';
 import { defineConfig } from 'astro/config';
 import serviceWorker from 'astrojs-service-worker';
@@ -32,6 +33,7 @@ export default defineConfig({
 		}),
 		astroImageTools,
 		prefetch(),
+		pagefind(),
 		sitemap({
 			filter: (page) =>
 				page !== 'https://www.stefanimhoff.de/cv/' &&
@@ -86,5 +88,6 @@ export default defineConfig({
 	compressHTML: true,
 	build: {
 		inlineStylesheets: 'always',
+		client: './dist',
 	},
 });

package.json

@@ -33,6 +33,7 @@
 		"astro": "^2.7.2",
 		"astro-icon": "^0.8.1",
 		"astro-imagetools": "^0.8.1",
+		"astro-pagefind": "^1.2.1",
 		"astro-seo": "^0.7.4",
 		"astro-webmanifest": "^0.6.0",
 		"astrojs-service-worker": "^1.0.0",

pnpm-lock.yaml

@@ -57,6 +57,9 @@ dependencies:
   astro-imagetools:
     specifier: ^0.8.1
     version: 0.8.1(astro@2.7.2)
+  astro-pagefind:
+    specifier: ^1.2.1
+    version: 1.2.1(astro@2.7.2)
   astro-seo:
     specifier: ^0.7.4
     version: 0.7.4
@@ -336,6 +339,19 @@ packages:
       - supports-color
     dev: false
 
+  /@astrojs/node@5.3.0(astro@2.7.2):
+    resolution: {integrity: sha512-q7gJEPSZzC4FIRNmq3ks6mw0Jby4irXTfRhbOPOS4HRmbu4FDANnRqnZBOGe96cfBQTgDC3/FhQccDQtx+n4pg==}
+    peerDependencies:
+      astro: ^2.7.0
+    dependencies:
+      '@astrojs/webapi': 2.2.0
+      astro: 2.7.2(@types/node@20.3.2)(sharp@0.32.1)
+      send: 0.18.0
+      server-destroy: 1.0.1
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
   /@astrojs/preact@2.2.1(preact@10.15.1):
     resolution: {integrity: sha512-lObgrX/qfK2sEnGDWoyQ8KojFJ54FIKB4TeywWmgj4ZTg0yLnvvOz6ReyPQ8VfR/1MU+vWs22jE4cuZJ/vPnOA==}
     engines: {node: '>=16.12.0'}
@@ -4248,6 +4264,10 @@ packages:
       '@octokit/openapi-types': 18.0.0
     dev: true
 
+  /@pagefind/default-ui@0.12.0:
+    resolution: {integrity: sha512-O+27oCGwIjHjcb3AMJ9J1KWwXqv+hm71jCfTyUf+BrJusNBpgX4BaqKRRx8rbElYew2aglqf9yl5wYJUt5w33Q==}
+    dev: false
+
   /@pkgr/utils@2.4.1:
     resolution: {integrity: sha512-JOqwkgFEyi+OROIyq7l4Jy28h/WwhDnG/cPkXG2Z1iFbubB6jsHW1NDvmyOzTBxHr3yg68YGirmh1JUgMqa+9w==}
     engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
@@ -4280,6 +4300,10 @@ packages:
       config-chain: 1.1.13
     dev: true
 
+  /@polka/url@1.0.0-next.21:
+    resolution: {integrity: sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==}
+    dev: false
+
   /@preact/compat@17.1.2(preact@10.15.1):
     resolution: {integrity: sha512-7pOZN9lMDDRQ+6aWvjwTp483KR8/zOpfS83wmOo3zfuLKdngS8/5RLbsFWzFZMGdYlotAhX980hJ75bjOHTwWg==}
     peerDependencies:
@@ -5030,7 +5054,6 @@ packages:
       debug: 4.3.4(supports-color@9.4.0)
     transitivePeerDependencies:
       - supports-color
-    dev: true
 
   /aggregate-error@3.1.0:
     resolution: {integrity: sha512-4I7Td01quW/RpocfNayFdFVk1qSuoh0E7JrbRJ16nH01HhKFQ88INq9Sd+nd72zqRySlr9BmDA8xlEJ6vJMrYA==}
@@ -5431,6 +5454,20 @@ packages:
       imagetools-core: 3.0.2
     dev: false
 
+  /astro-pagefind@1.2.1(astro@2.7.2):
+    resolution: {integrity: sha512-Yi8+NEtEc5fz260hG+tnH3UOSPEEcgHxYDbDPxRFeJm/E5opBXz7Kx4D297f/SZhxkPPHzPgjJWD3+dCp95C8g==}
+    peerDependencies:
+      astro: ^2.0.4
+    dependencies:
+      '@astrojs/node': 5.3.0(astro@2.7.2)
+      '@pagefind/default-ui': 0.12.0
+      astro: 2.7.2(@types/node@20.3.2)(sharp@0.32.1)
+      pagefind: 0.12.0
+      sirv: 2.0.3
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
   /astro-seo@0.7.4:
     resolution: {integrity: sha512-E+wJmxOnvBRjgzVctdGk/VdwoEqeQ6Q/KgVW2wRBXZWJVDgOweB32Da/UiH0/FpGncPzo2daOrc08DNn5wTanw==}
     dev: false
@@ -6994,7 +7031,6 @@ packages:
         optional: true
     dependencies:
       ms: 2.0.0
-    dev: true
 
   /debug@4.3.4(supports-color@9.4.0):
     resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==}
@@ -7166,7 +7202,6 @@ packages:
   /depd@2.0.0:
     resolution: {integrity: sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==}
     engines: {node: '>= 0.8'}
-    dev: true
 
   /deprecation@2.3.1:
     resolution: {integrity: sha512-xmHIy4F3scKVwMsQ4WnVaS8bHOx0DmVwRywosKhaILI0ywMDWPtBSku2HNxRvF7jtwDRsoEwYQSfbxj8b7RlJQ==}
@@ -7180,7 +7215,6 @@ packages:
   /destroy@1.2.0:
     resolution: {integrity: sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==}
     engines: {node: '>= 0.8', npm: 1.2.8000 || >= 1.4.16}
-    dev: true
 
   /detect-file@1.0.0:
     resolution: {integrity: sha512-DtCOLG98P007x7wiiOmfI0fi3eIKyWiLTGJ2MDnVi/E04lWGbf+JzrRHMm0rgIIZJGtHpKpbVgLWHrv8xXpc3Q==}
@@ -7409,7 +7443,6 @@ packages:
 
   /ee-first@1.1.1:
     resolution: {integrity: sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==}
-    dev: true
 
   /ejs@3.1.9:
     resolution: {integrity: sha512-rC+QVNMJWv+MtPgkt0y+0rVEIdbtxVADApW9JXrUVlzHetgcyczP/E7DJmWJ4fJCZF2cPcBk0laWO9ZHMG3DmQ==}
@@ -7447,7 +7480,6 @@ packages:
   /encodeurl@1.0.2:
     resolution: {integrity: sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==}
     engines: {node: '>= 0.8'}
-    dev: true
 
   /end-of-stream@1.4.4:
     resolution: {integrity: sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==}
@@ -7610,7 +7642,6 @@ packages:
 
   /escape-html@1.0.3:
     resolution: {integrity: sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==}
-    dev: true
 
   /escape-string-regexp@1.0.5:
     resolution: {integrity: sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==}
@@ -7860,7 +7891,6 @@ packages:
   /etag@1.8.1:
     resolution: {integrity: sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==}
     engines: {node: '>= 0.6'}
-    dev: true
 
   /event-target-shim@5.0.1:
     resolution: {integrity: sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ==}
@@ -8548,7 +8578,6 @@ packages:
   /fresh@0.5.2:
     resolution: {integrity: sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==}
     engines: {node: '>= 0.6'}
-    dev: true
 
   /from2-array@0.0.4:
     resolution: {integrity: sha512-0G0cAp7sYLobH7ALsr835x98PU/YeVF7wlwxdWbCUaea7wsa7lJfKZUAo6p2YZGZ8F94luCuqHZS3JtFER6uPg==}
@@ -9248,7 +9277,6 @@ packages:
       setprototypeof: 1.2.0
       statuses: 2.0.1
       toidentifier: 1.0.1
-    dev: true
 
   /http-proxy-middleware@2.0.6(debug@4.3.4):
     resolution: {integrity: sha512-ya/UeJ6HVBYxrgYotAZo1KvPWlgB48kUJLDePFeneHsVujFaW5WNj2NgWCAE//B1Dl02BIfYlpNgBy8Kf8Rjmw==}
@@ -9295,7 +9323,6 @@ packages:
       debug: 4.3.4(supports-color@9.4.0)
     transitivePeerDependencies:
       - supports-color
-    dev: true
 
   /human-signals@2.1.0:
     resolution: {integrity: sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==}
@@ -11578,16 +11605,19 @@ packages:
     engines: {node: '>=4'}
     dev: false
 
+  /mrmime@1.0.1:
+    resolution: {integrity: sha512-hzzEagAgDyoU1Q6yg5uI+AorQgdvMCur3FcKf7NhMKWsaYg+RnbTyHRa/9IlLF9rf455MOCtcqqrQQ83pPP7Uw==}
+    engines: {node: '>=10'}
+    dev: false
+
   /ms@2.0.0:
     resolution: {integrity: sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==}
-    dev: true
 
   /ms@2.1.2:
     resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==}
 
   /ms@2.1.3:
     resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
-    dev: true
 
   /multiparty@4.2.3:
     resolution: {integrity: sha512-Ak6EUJZuhGS8hJ3c2fY6UW5MbkGUPMBEGd13djUzoY/BHqV/gTuFWtC6IuVA7A2+v3yjBS6c4or50xhzTQZImQ==}
@@ -12163,7 +12193,6 @@ packages:
     engines: {node: '>= 0.8'}
     dependencies:
       ee-first: 1.1.1
-    dev: true
 
   /on-headers@1.0.2:
     resolution: {integrity: sha512-pZAE+FJLoyITytdqK0U5s+FIpjN0JP3OzFi/u8Rx+EV5/W+JTWGXG8xFzevE7AjBfDqHv/8vL8qQsIhHnqRkrA==}
@@ -12455,6 +12484,17 @@ packages:
       semver: 7.5.3
     dev: true
 
+  /pagefind@0.12.0:
+    resolution: {integrity: sha512-LHUmlYYweBM6/rK1G+7z2q2WjYeycrB7g5Kuw0w6yMkYztzsEdO2Qj2pJ3z8gsWV8eJsYQyAGOAdqE3SZWlCqA==}
+    hasBin: true
+    requiresBuild: true
+    dependencies:
+      https-proxy-agent: 5.0.1(supports-color@9.4.0)
+      proxy-from-env: 1.1.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
   /pako@1.0.11:
     resolution: {integrity: sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==}
 
@@ -13835,6 +13875,10 @@ packages:
       ipaddr.js: 1.9.1
     dev: true
 
+  /proxy-from-env@1.1.0:
+    resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==}
+    dev: false
+
   /ps-list@8.1.1:
     resolution: {integrity: sha512-OPS9kEJYVmiO48u/B9qneqhkMvgCxT+Tm28VCEJpheTpl8cJ0ffZRRNgS5mrQRTrX5yRTpaJ+hRDeefXYmmorQ==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
@@ -13908,7 +13952,6 @@ packages:
   /range-parser@1.2.1:
     resolution: {integrity: sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==}
     engines: {node: '>= 0.6'}
-    dev: true
 
   /raw-body@2.5.1:
     resolution: {integrity: sha512-qqJBtEyVgS0ZmPGdCFPWJ3FreoqvG4MVQln/kCgF7Olq95IbOp0/BWyMwbdtn4VTvkM8Y7khCQ2Xgk/tcrCXig==}
@@ -14682,7 +14725,6 @@ packages:
       statuses: 2.0.1
     transitivePeerDependencies:
       - supports-color
-    dev: true
 
   /sentence-case@3.0.4:
     resolution: {integrity: sha512-8LS0JInaQMCRoQ7YUytAo/xUu5W2XnQxV2HI/6uM6U7CITS1RqPElr30V6uIqyMKM9lJGRVFy5/4CuzcixNYSg==}
@@ -14734,7 +14776,6 @@ packages:
 
   /setprototypeof@1.2.0:
     resolution: {integrity: sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==}
-    dev: true
 
   /sharp@0.29.3:
     resolution: {integrity: sha512-fKWUuOw77E4nhpyzCCJR1ayrttHoFHBT2U/kR/qEMRhvPEcluG4BKj324+SCO1e84+knXHwhJ1HHJGnUt4ElGA==}
@@ -14877,6 +14918,15 @@ packages:
     dependencies:
       is-arrayish: 0.3.2
 
+  /sirv@2.0.3:
+    resolution: {integrity: sha512-O9jm9BsID1P+0HOi81VpXPoDxYP374pkOLzACAoyUQ/3OUVndNpsz6wMnY2z+yOxzbllCKZrM+9QrWsv4THnyA==}
+    engines: {node: '>= 10'}
+    dependencies:
+      '@polka/url': 1.0.0-next.21
+      mrmime: 1.0.1
+      totalist: 3.0.1
+    dev: false
+
   /sisteransi@1.0.5:
     resolution: {integrity: sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==}
     dev: false
@@ -15126,7 +15176,6 @@ packages:
   /statuses@2.0.1:
     resolution: {integrity: sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==}
     engines: {node: '>= 0.8'}
-    dev: true
 
   /stdin-discarder@0.1.0:
     resolution: {integrity: sha512-xhV7w8S+bUwlPTb4bAOUQhv8/cSS5offJuX8GQGq32ONF0ZtDWKfkdomM3HMRA+LhX6um/FZ0COqlwsjD53LeQ==}
@@ -15813,7 +15862,6 @@ packages:
   /toidentifier@1.0.1:
     resolution: {integrity: sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==}
     engines: {node: '>=0.6'}
-    dev: true
 
   /token-types@4.2.1:
     resolution: {integrity: sha512-6udB24Q737UD/SDsKAHI9FCRP7Bqc9D/MQUV02ORQg5iskjtLJlZJNdN4kKtcdtwCeWIwIHDGaUsTsCCAa8sFQ==}
@@ -15838,6 +15886,11 @@ packages:
     resolution: {integrity: sha512-2Ulkc8T7mXJ2l0W476YC/A209PR38Nw8PuaCNtk9uI3t1zzFdGQeWYGQvmj2PZkVvRC/Yoi4xQKMRnWc/N29tQ==}
     dev: true
 
+  /totalist@3.0.1:
+    resolution: {integrity: sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==}
+    engines: {node: '>=6'}
+    dev: false
+
   /tr46@0.0.3:
     resolution: {integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==}
     dev: true

public/pinterest-428b1.html

@@ -1,293 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-		<meta name="p:domain_verify" content="428b17b09e5e7de45f2c96ea7fbdc760" />
-		<title>Pinterest</title>
-	</head>
-	<body
-		lang="en"
-		style="
-			background-color: #f7f5f5;
-			background: #f7f5f5 url('https://s-passets-cache-ak0.pinimg.com/images/paper.jpg')
-				repeat;
-			padding: 0;
-			margin: 0;
-		"
-	>
-		<table
-			cellspacing="0"
-			cellpadding="0"
-			border="0"
-			width="100%"
-			background="https://s-passets-cache-ak0.pinimg.com/images/paper.jpg"
-		>
-			<tr>
-				<td id="wrapper" style="padding: 20px 20px 40px">
-					<table id="content" cellspacing="0" cellpadding="0" border="0" width="620">
-						<tr>
-							<td id="logo" style="padding: 20px 0 40px">
-								<a
-									href="https://www.pinterest.com/website/verify/"
-									title="Verify domain"
-									style="border: none"
-								>
-									<img
-										src="https://s-passets-cache-ak0.pinimg.com/images/email/logo.gif"
-										width="200"
-										height="52"
-										style="vertical-align: top; outline: none; border: none"
-										alt="Verify website"
-									/>
-								</a>
-							</td>
-						</tr>
-						<tr>
-							<td
-								class="header"
-								background="https://s-passets-cache-ak0.pinimg.com/images/mail/double_rules620.gif"
-							>
-								<table cellspacing="0" cellpadding="0" border="0">
-									<tr>
-										<td
-											background="https://s-passets-cache-ak0.pinimg.com/images/paper.jpg"
-											style="background-color: #f7f5f5"
-										>
-											<h1
-												style="
-													font-family: georgia, serif;
-													font-weight: normal;
-													font-size: 22px;
-													line-height: 21px;
-													color: #211922 !important;
-													text-shadow: 0 1px 0 #ffffff;
-													margin: 0;
-													padding: 0 20px;
-												"
-											>
-												Hi, Stefan!
-											</h1>
-										</td>
-									</tr>
-								</table>
-							</td>
-						</tr>
-
-						<tr>
-							<td class="comment_wrap" style="padding: 30px 0 30px 8px">
-								<table cellspacing="0" cellpadding="0" border="0">
-									<tr>
-										<td width="1" style="background-color: #eceaeb"></td>
-										<td
-											class=""
-											style="
-												background-color: #ffffff;
-												padding: 0px;
-												border-top: 1px solid #eae9e9;
-												border-bottom: 1px solid #b2b1b1;
-												border-left: 1px solid #d4d2d3;
-												border-right: 1px solid #d4d2d3;
-											"
-										>
-											<table cellspacing="0" cellpadding="0" border="0">
-												<tr>
-													<td>
-														<table
-															class="comment_container"
-															cellspacing="0"
-															cellpadding="0"
-															border="0"
-															width="617"
-														>
-															<tr>
-																<td
-																	class="profile_image"
-																	width="80"
-																>
-																	<a
-																		href="https://www.pinterest.com/website/verify/"
-																		title="Stefan Imhoff"
-																	>
-																		<img
-																			src="https://s-media-cache-ak0.pinimg.com/avatars/kogakure-1373992383_140.jpg"
-																			width="80"
-																			height="80"
-																			style="
-																				vertical-align: top;
-																				outline: none;
-																				border: none;
-																			"
-																			alt="Stefan Imhoff"
-																		/>
-																	</a>
-																</td>
-
-																<td
-																	class="comment_text"
-																	width="341"
-																>
-																	<p
-																		style="
-																			font-family: 'helvetica neue',
-																				helvetica, arial,
-																				sans-serif;
-																			font-size: 14px;
-																			color: #211922;
-																			line-height: 20px;
-																			text-shadow: 0 1px 0
-																				#ffffff;
-																			margin: 0;
-																			padding: 5px 0 5px 15px;
-																		"
-																	>
-																		Looking good! You are ready
-																		to return to the
-																		verification page and
-																		complete the process.
-																	</p>
-																</td>
-
-																<td
-																	class="button_row"
-																	width="140"
-																	style="padding: 20px"
-																>
-																	<table
-																		class="button"
-																		cellspacing="0"
-																		cellpadding="0"
-																		border="0"
-																	>
-																		<tr>
-																			<td
-																				class="button_text"
-																				height="34"
-																				background="https://s-passets-cache-ak0.pinimg.com/images/mail/button_borderless.gif"
-																				style="
-																					background-repeat: repeat-x;
-																					-moz-border-radius: 6px;
-																					-webkit-border-radius: 6px;
-																					-o-border-radius: 6px;
-																					-ms-border-radius: 6px;
-																					-khtml-border-radius: 6px;
-																					border-radius: 6px;
-																					background-position: top
-																						left;
-																					background-color: #d43638;
-																					border: 1px
-																						solid
-																						#910101;
-																					white-space: nowrap;
-																					height: 34px;
-																				"
-																			>
-																				<a
-																					href="https://www.pinterest.com/website/verify/"
-																					style="
-																						color: #fcf9f9;
-																						cursor: pointer;
-																						text-align: center;
-																						text-decoration: none;
-																						vertical-align: baseline;
-																					"
-																					title="Go To Board"
-																				>
-																				</a>
-																			</td>
-																		</tr>
-																	</table>
-																</td>
-															</tr>
-														</table>
-													</td>
-												</tr>
-											</table>
-										</td>
-										<td width="1" style="background-color: #eceaeb"></td>
-									</tr>
-									<tr>
-										<td width="1" style="background-color: #eceaeb"></td>
-										<td height="1" style="background-color: #d5d3d4"></td>
-										<td width="1" style="background-color: #eceaeb"></td>
-									</tr>
-									<tr>
-										<td width="1"></td>
-										<td height="1" style="background-color: #e8e6e7"></td>
-										<td width="1"></td>
-									</tr>
-								</table>
-							</td>
-						</tr>
-
-						<tr>
-							<td style="padding: 10px 0 30px">
-								<h4
-									style="
-										font-family: georgia, serif;
-										font-weight: normal;
-										font-size: 21px;
-										color: #211922 !important;
-										text-shadow: 0 1px 0 #ffffff;
-										margin: 0;
-										padding: 0;
-									"
-								>
-									Happy pinning!
-								</h4>
-							</td>
-						</tr>
-						<tr>
-							<td
-								id="badge_rule"
-								height="18"
-								width="100%"
-								background="https://s-passets-cache-ak0.pinimg.com/images/mail/badge_rule620.gif"
-							></td>
-						</tr>
-						<tr>
-							<td style="padding: 30px 0 15px"></td>
-						</tr>
-						<tr>
-							<td>
-								<p
-									style="
-										font-family: 'helvetica neue', helvetica, arial, sans-serif;
-										font-size: 10px;
-										color: #999999;
-										text-shadow: 0 1px 0 #ffffff;
-										line-height: 1.35em;
-										margin: 0;
-										padding: 0;
-									"
-								>
-									<span class="symbolfix">&copy;</span>2015 Pinterest, Inc.
-									<font style="color: #aaa; padding: 0 2px">|</font> All Rights
-									Reserved<br /><a
-										href="https://www.pinterest.com/_/_/about/privacy/"
-										style="
-											color: #999;
-											text-decoration: underline;
-											text-shadow: 0 1px 0 #ffffff;
-										"
-										>Privacy Policy</a
-									>
-									<font style="color: #aaa; padding: 0 2px"> |</font>
-									<a
-										href="https://www.pinterest.com/_/_/about/terms/"
-										style="
-											color: #999;
-											text-decoration: underline;
-											text-shadow: 0 1px 0 #ffffff;
-										"
-										>Terms and Conditions</a
-									>
-								</p>
-							</td>
-						</tr>
-					</table>
-				</td>
-			</tr>
-		</table>
-	</body>
-</html>

src/components/MainNavigation.astro

@@ -2,10 +2,11 @@
 import { Link } from '.';
 
 import navigation from '../data/navigation.json';
+import SearchLink from './SearchLink.astro';
 ---
 
 <nav
-	class="navigation col-span-12 col-start-4 self-center md:col-span-14 md:col-start-3"
+	class="navigation col-span-12 col-start-4 flex items-center self-center md:col-span-14 md:col-start-3"
 	role="navigation"
 	aria-label="Main"
 >
@@ -23,4 +24,5 @@ import navigation from '../data/navigation.json';
 			))
 		}
 	</ul>
+	<SearchLink />
 </nav>

src/components/Scripts.astro

@@ -15,6 +15,7 @@ import '../styles/sal.css';
 	declare const sal: any;
 
 	const swup = new Swup({
+		ignoreVisit: (url, { el } = {}) => el?.closest('[data-pagefind-ui] a'),
 		plugins: [
 			new SwupFadeTheme(),
 			new SwupHeadPlugin(),
@@ -41,6 +42,7 @@ import '../styles/sal.css';
 		}
 	}
 
+	// Register scripts after swup page transition
 	swup.on('pageView', () => {
 		if (typeof sal !== 'undefined') {
 			sal({
@@ -50,6 +52,8 @@ import '../styles/sal.css';
 			setActiveLink();
 			setUpLink();
 			setEmailLink();
+			setSearchModalLink();
+			setSearchLink();
 		}
 	});
 
@@ -78,6 +82,45 @@ import '../styles/sal.css';
 		});
 	}
 
+	function setSearchLink() {
+		const dialog = document.querySelector('dialog');
+		const openDialogLink = document.getElementById('search-link');
+
+		openDialogLink?.addEventListener('click', (event) => {
+			event.preventDefault();
+			dialog?.showModal();
+		});
+
+		document.addEventListener('keydown', (event) => {
+			if (event.key === '/') {
+				event.preventDefault();
+				dialog?.showModal();
+			}
+		});
+	}
+
+	function setSearchModalLink() {
+		const dialog = document.querySelector('dialog');
+
+		dialog?.addEventListener('click', (event) => {
+			if (event.target === dialog) {
+				if (!dialog.classList.contains('hide')) {
+					dialog.classList.add('hide');
+					dialog.addEventListener(
+						'animationend',
+						(animationEvent) => {
+							if (animationEvent.animationName === 'hide-modal') {
+								dialog.close();
+								dialog.classList.remove('hide');
+							}
+						},
+						{ once: true }
+					);
+				}
+			}
+		});
+	}
+
 	function handleEmailClick(event: Event) {
 		event.preventDefault();
 		const currentTarget = event.currentTarget;
@@ -101,6 +144,8 @@ import '../styles/sal.css';
 	setActiveLink();
 	setUpLink();
 	setEmailLink();
+	setSearchLink();
+	setSearchModalLink();
 </script>
 
 <style is:global>

src/components/SearchLink.astro

@@ -0,0 +1,20 @@
+---
+import { Sprite } from 'astro-icon';
+
+import { Link } from '.';
+---
+
+<Link
+	class="col-span-2 col-start-1 h-clickarea w-clickarea items-center justify-center self-center justify-self-center transition-transform duration-500 ease-in-out hover:scale-75 focus:scale-75 print:hidden md:col-span-1"
+	id="search-link"
+	title="Search (/)"
+>
+	<button
+		aria-label="Search the website (/)"
+		class="flex h-clickarea w-clickarea cursor-pointer items-center justify-center border-none text-[0]"
+		tabindex={-1}
+		type="button"
+	>
+		<Sprite name="ri:search-line" class="h-icon w-icon" />
+	</button>
+</Link>

src/components/SearchModal.astro

@@ -0,0 +1,118 @@
+---
+import Search from 'astro-pagefind/components/Search';
+---
+
+<dialog>
+	<Search />
+</dialog>
+
+<style is:global>
+	dialog::backdrop {
+		@apply bg-black/50 backdrop-blur-sm;
+		animation: show-dimmer 0.5s ease-in-out;
+	}
+
+	dialog.hide::backdrop {
+		animation: hide-dimmer 0.5s ease-in-out;
+	}
+
+	dialog[open] {
+		@apply h-[80vh] w-[80vw] max-w-[40em] bg-shibui-100 font-sans font-normal leading-relaxed text-shibui-950 common-ligatures dark:border-1 dark:border-solid dark:border-shibui-200/[0.25] dark:bg-shibui-900 dark:text-shibui-200/[0.87];
+		animation: show-modal 0.5s ease-in-out;
+	}
+
+	dialog.hide {
+		animation: hide-modal 0.5s ease-in-out;
+	}
+
+	@keyframes show-modal {
+		from {
+			opacity: 0;
+			transform: translateY(50px);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
+
+	@keyframes show-dimmer {
+		from {
+			opacity: 0;
+		}
+		to {
+			opacity: 1;
+		}
+	}
+
+	@keyframes hide-modal {
+		from {
+			opacity: 1;
+			transform: translateY(0);
+		}
+		to {
+			opacity: 0;
+			transform: translateY(50px);
+		}
+	}
+
+	@keyframes hide-dimmer {
+		from {
+			opacity: 1;
+		}
+		to {
+			opacity: 0;
+		}
+	}
+
+	.pagefind-ui {
+		@apply bg-shibui-100 !font-sans !font-normal !leading-relaxed text-shibui-950 common-ligatures dark:bg-shibui-900 dark:text-shibui-200/[0.87];
+	}
+
+	.pagefind-ui__form::before {
+		@apply !hidden;
+	}
+
+	.pagefind-ui__search-input,
+	.pagefind-ui__search-clear {
+		@apply !bg-shibui-100 !text-shibui-950 dark:!bg-shibui-850 dark:!text-shibui-200/[0.87];
+	}
+
+	.pagefind-ui__search-input {
+		@apply !border-1 !border-solid !border-shibui-900/[0.25] !bg-shibui-100 !text-shibui-950 !pis-7 dark:!border-shibui-200/[0.25] dark:!bg-shibui-850 dark:!text-shibui-200/[0.87];
+	}
+
+	.pagefind-ui__search-clear {
+		@apply !inline-end-4;
+	}
+
+	.pagefind-ui__result {
+		@apply !border-solid !border-black/[0.1] !border-be-1 !border-bs-0 !border-ie-0 !border-is-0 dark:!border-white/[0.1];
+	}
+
+	.pagefind-ui__result-inner,
+	.pagefind-ui__message,
+	.pagefind-ui__result-link {
+		@apply !text-shibui-950 dark:!text-shibui-200/[0.87];
+	}
+
+	.pagefind-ui__result-link {
+		@apply inline !font-semibold !text-shibui-950 underline !decoration-shibui-900/20 !decoration-4 underline-offset-auto no-common-ligatures hover:!decoration-accent focus:!decoration-accent dark:!text-shibui-100;
+	}
+
+	.pagefind-ui .pagefind-ui__result-link {
+		@apply !text-3 !font-black leading-tight;
+	}
+
+	.pagefind-ui .pagefind-ui__result-excerpt {
+		@apply !text-2;
+	}
+
+	.pagefind-ui__result-excerpt mark {
+		@apply !rounded !border !border-black/[0.1] !bg-marked !text-black/[0.75] !pli-[0.3em] !pbe-[0.2em] !pbs-[0.3em] dark:!bg-marked/[0.7];
+	}
+
+	.pagefind-ui__button {
+		@apply !border-1 !border-solid !border-shibui-900/[0.25] !bg-shibui-200 !text-shibui-950 hover:!bg-shibui-300 dark:!border-shibui-200/[0.25] dark:!bg-shibui-950 dark:!text-shibui-200/[0.87] dark:hover:!bg-shibui-800;
+	}
+</style>

src/layouts/BaseLayout.astro

@@ -8,6 +8,7 @@ import { isProduction } from '../utils';
 import ThemeProvider from '../components/ThemeProvider.astro';
 import PageHeader from '../components/PageHeader.astro';
 import PageFooter from '../components/PageFooter.astro';
+import SearchModal from '../components/SearchModal.astro';
 import Scripts from '../components/Scripts.astro';
 
 export interface Props {
@@ -44,6 +45,7 @@ const schema = JSON.stringify({
 	url: site.url,
 });
 
+const pagefind = !noindex && { 'data-pagefind-body': '' };
 const webManifest = isProduction && {
 	rel: 'manifest',
 	href: '/manifest.webmanifest',
@@ -164,13 +166,14 @@ const webManifest = isProduction && {
 			<Sprite.Provider>
 				{header && <PageHeader backLink={backLink} />}
 				<div class="page-content flex grow">
-					<main class="h-full w-full">
+					<main class="h-full w-full" {...pagefind}>
 						<slot />
 					</main>
 				</div>
 				{footer && <PageFooter />}
 			</Sprite.Provider>
 		</div>
+		<SearchModal />
 		<script>
 			console.info(
 				'👋 I see you’re interested in the source code of this site? You can find it here 👉 https://github.com/kogakure/website-astro-stefanimhoff.de'

src/pages/ai-art.astro

@@ -33,6 +33,7 @@ const description = 'This is a collection of AI art pieces I’ve created with S
 	</article>
 
 	<nav class="col-start-1 col-end-18 md:col-start-1 md:col-end-16" aria-label="AI Art">
+		data-pagefind-ignore
 		<ol
 			class="gap-[max(25px,_2vw)] md:grid md:grid-flow-row-dense md:auto-rows-[50px] md:grid-cols-[repeat(auto-fit,_minmax(50px,_1fr))] md:grid-rows-[50px]"
 		>

src/pages/colophon.mdx

@@ -39,6 +39,7 @@ The source code of this website is available on [GitHub](https://github.com/koga
 - The scroll animations are created with [Sal](https://mciastek.github.io/sal/) and for page transitions I use [Swup](https://swup.js.org/).
 - Icons are handled by [Astro Icon](https://github.com/natemoo-re/astro-icon).
 - All images are optimized with [Astro ImageTools](https://github.com/RafidMuhymin/astro-imagetools/).
+- My site search is build with [Pagefind](https://pagefind.app/) using the [Astro-Pagefind](https://github.com/shishkin/astro-pagefind) integration.
 - I use YouTube Lite, provided by [Astro Embed](https://github.com/astro-community/astro-embed).
 - [Astro SEO](https://github.com/jonasmerlin/astro-seo) makes it easy to add the SEO relevant information.
 - I use [Astro Webmanifest](https://github.com/alextim/astro-lib/tree/main/packages/astro-webmanifest) and [Astro Service Worker](https://github.com/tatethurston/astrojs-service-worker) to optimize the website.

src/pages/haiku.astro

@@ -30,8 +30,9 @@ const description =
 	</article>
 
 	<nav
-		class="col-start-1 col-end-17 print:hidden md:col-start-2 md:col-end-14"
 		aria-label="Haiku"
+		class="col-start-1 col-end-17 print:hidden md:col-start-2 md:col-end-14"
+		data-pagefind-ignore
 	>
 		<ol
 			class="grid list-none grid-cols-[repeat(auto-fill,_minmax(3rem,_1fr))] justify-items-center gap-[1rem]"

src/pages/index.astro

@@ -87,6 +87,7 @@ rssPosts.sort(sortMarkdownByDate);
 
 	<article
 		class="min-[1794px]:[&_li:block col-start-2 col-end-18 grid w-full grid-cols-18 gap-y-gap mbe-12 min-[1097px]:[&_li:nth-child(n+5)]:hidden min-[1410px]:[&_li:nth-child(n+5)]:block min-[1411px]:[&_li:nth-child(n+6)]:hidden min-[1793px]:[&_li:nth-child(n+6)]:block"
+		data-pagefind-ignore
 		{...animation}
 	>
 		<JournalList entries={formattedLatest} />

src/pages/journal.astro

@@ -29,6 +29,7 @@ const description = 'I am writing essays about various topics in this Journal.';
 
 	<article
 		class="col-start-1 col-end-18 grid md:col-start-4 md:col-end-12 xl:col-start-5 xl:col-end-11"
+		data-pagefind-ignore
 		{...animation}
 	>
 		<Intro components={mapping} />

src/pages/sketchnotes.astro

@@ -32,8 +32,9 @@ const description = 'This is a collection of Sketchnotes I’ve drawn.';
 	</article>
 
 	<nav
-		class="col-start-1 col-end-18 w-full md:col-start-1 md:col-end-16"
 		aria-label="Sketchnotes"
+		class="col-start-1 col-end-18 w-full md:col-start-1 md:col-end-16"
+		data-pagefind-ignore
 	>
 		<ol
 			class="gap-[max(25px,_2vw)] print:block md:grid md:grid-flow-row-dense md:auto-rows-[50px] md:grid-cols-[repeat(auto-fit,_minmax(50px,_1fr))] md:grid-rows-[50px]"