Import pagefind-ui instead of linking to it by URL to get it compiled

package-lock.json

@@ -8,6 +8,7 @@
 			"name": "bgenc.net-new",
 			"version": "0.0.1",
 			"dependencies": {
+				"@pagefind/default-ui": "^1.1.0",
 				"@sveltejs/adapter-static": "^2.0.3",
 				"pagefind": "^1.1.0",
 				"reading-time-estimator": "^1.11.0"
@@ -265,6 +266,11 @@
 				"darwin"
 			]
 		},
+		"node_modules/@pagefind/default-ui": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/@pagefind/default-ui/-/default-ui-1.1.0.tgz",
+			"integrity": "sha512-+XiAJAK++C64nQcD7s3Prdmd5S92lT05fwjOxm0L1jj80jbL+tmvcqkkFnPpoqhnicIPgcAX/Y5W0HRZnBt35w=="
+		},
 		"node_modules/@pagefind/linux-arm64": {
 			"version": "1.1.0",
 			"resolved": "https://registry.npmjs.org/@pagefind/linux-arm64/-/linux-arm64-1.1.0.tgz",

package.json

@@ -40,6 +40,7 @@
 	},
 	"type": "module",
 	"dependencies": {
+		"@pagefind/default-ui": "^1.1.0",
 		"@sveltejs/adapter-static": "^2.0.3",
 		"pagefind": "^1.1.0",
 		"reading-time-estimator": "^1.11.0"

scripts/new-post.js

@@ -13,7 +13,7 @@ const filename = `${format(new Date(), 'yyyy.MM.dd')}.${slug}.md`;
 const contents = `---
 title: '${title}'
 date: ${formatISO(new Date())}
-description: 'Blog post description here'
+description: ''
 ---
 `;
 

src/routes/Header.svelte

@@ -8,6 +8,9 @@
 	import WebP from './logo.avif?w=192&format=webp';
 	import List from 'phosphor-svelte/lib/List';
 	import { afterNavigate } from '$app/navigation';
+	// @ts-ignore
+	import { PagefindUI } from '@pagefind/default-ui';
+	import '@pagefind/default-ui/css/ui.css';
 
 	function loadPagefind() {
 		// @ts-ignore
@@ -33,11 +36,6 @@
 	});
 </script>
 
-<svelte:head>
-	<link href="/pagefind/pagefind-ui.css" rel="stylesheet" />
-	<script async src="/pagefind/pagefind-ui.js"></script>
-</svelte:head>
-
 <header>
 	<a class="logo" href="/">
 		<picture>