fix: emit Pagefind under a versioned directory

astro.config.mjs

@@ -1,3 +1,5 @@
+import fs from "node:fs";
+import path from "node:path";
 import sitemap from "@astrojs/sitemap";
 import svelte from "@astrojs/svelte";
 import tailwind from "@astrojs/tailwind";
@@ -24,6 +26,10 @@ import { remarkExcerpt } from "./src/plugins/remark-excerpt.js";
 import { remarkReadingTime } from "./src/plugins/remark-reading-time.mjs";
 import { pluginCustomCopyButton } from "./src/plugins/expressive-code/custom-copy-button.js";
 
+const pagefindVersion = JSON.parse(
+	fs.readFileSync(path.resolve("node_modules/pagefind/package.json"), "utf8"),
+).version;
+
 // https://astro.build/config
 export default defineConfig({
 	site: "https://fuwari.vercel.app/",
@@ -154,6 +160,9 @@ export default defineConfig({
 		],
 	},
 	vite: {
+		define: {
+			__PAGEFIND_VERSION__: JSON.stringify(pagefindVersion),
+		},
 		build: {
 			rollupOptions: {
 				onwarn(warning, warn) {

package.json

@@ -6,7 +6,8 @@
     "dev": "astro dev",
     "start": "astro dev",
     "check": "astro check",
-    "build": "astro build && pagefind --site dist",
+    "build": "astro build && pagefind --site dist && node scripts/version-pagefind.mjs",
+    "check:pagefind": "node scripts/check-pagefind-versioned.mjs",
     "preview": "astro preview",
     "astro": "astro",
     "type-check": "tsc --noEmit --isolatedDeclarations",

scripts/check-pagefind-versioned.mjs

@@ -0,0 +1,62 @@
+import fs from "node:fs";
+import path from "node:path";
+import { getPagefindVersion } from "./pagefind-version.mjs";
+
+const version = getPagefindVersion();
+const dist = path.resolve("dist");
+const expectedBase = `/pagefind-${version}/`;
+const expectedScript = `${expectedBase}pagefind.js`;
+const legacyScript = "/pagefind/pagefind.js";
+
+const failures = [];
+
+if (!fs.existsSync(path.join(dist, `pagefind-${version}`, "pagefind.js"))) {
+	failures.push(
+		`missing ${path.join("dist", `pagefind-${version}`, "pagefind.js")}`,
+	);
+}
+if (
+	!fs.existsSync(path.join(dist, `pagefind-${version}`, "pagefind-entry.json"))
+) {
+	failures.push(
+		`missing ${path.join("dist", `pagefind-${version}`, "pagefind-entry.json")}`,
+	);
+}
+if (fs.existsSync(path.join(dist, "pagefind"))) {
+	failures.push("legacy dist/pagefind directory still exists");
+}
+
+const htmlFiles = fs
+	.readdirSync(dist, { recursive: true })
+	.filter((file) => file.endsWith(".html"));
+
+let references = 0;
+for (const file of htmlFiles) {
+	const content = fs.readFileSync(path.join(dist, file), "utf8");
+	if (!content.includes("pagefind")) continue;
+	references += 1;
+	if (!content.includes(expectedScript)) {
+		failures.push(`${file} does not reference ${expectedScript}`);
+	}
+	if (content.includes(legacyScript)) {
+		failures.push(`${file} still references ${legacyScript}`);
+	}
+	if (!content.includes(expectedBase)) {
+		failures.push(
+			`${file} does not pass ${expectedBase} as the Pagefind base path`,
+		);
+	}
+}
+
+if (references === 0) {
+	failures.push("no generated page references Pagefind");
+}
+
+if (failures.length > 0) {
+	console.error(failures.join("\n"));
+	process.exit(1);
+}
+
+console.log(
+	`OK: ${references} page(s) reference Pagefind ${version} under ${expectedBase}`,
+);

scripts/pagefind-version.mjs

@@ -0,0 +1,9 @@
+import fs from "node:fs";
+import path from "node:path";
+
+export function getPagefindVersion() {
+	const pkg = JSON.parse(
+		fs.readFileSync(path.resolve("node_modules/pagefind/package.json"), "utf8"),
+	);
+	return pkg.version;
+}

scripts/version-pagefind.mjs

@@ -0,0 +1,19 @@
+import fs from "node:fs";
+import path from "node:path";
+import { getPagefindVersion } from "./pagefind-version.mjs";
+
+const version = getPagefindVersion();
+const source = path.resolve("dist", "pagefind");
+const target = path.resolve("dist", `pagefind-${version}`);
+
+if (!fs.existsSync(path.join(source, "pagefind.js"))) {
+	console.error(`Pagefind output not found at ${source}. Run pagefind first.`);
+	process.exit(1);
+}
+
+fs.rmSync(target, { recursive: true, force: true });
+fs.renameSync(source, target);
+
+console.log(
+	`Moved Pagefind ${version} output to ${path.relative(process.cwd(), target)}`,
+);

src/components/Navbar.astro

@@ -10,6 +10,7 @@ import DisplaySettings from "./widget/DisplaySettings.svelte";
 import NavMenuPanel from "./widget/NavMenuPanel.astro";
 
 const className = Astro.props.class;
+const pagefindBasePath = `/pagefind-${__PAGEFIND_VERSION__}/`;
 
 let links: NavBarLink[] = navBarConfig.links.map(
 	(item: NavBarLink | LinkPreset): NavBarLink => {
@@ -104,7 +105,7 @@ function loadButtonScript() {
 loadButtonScript();
 </script>
 
-{import.meta.env.PROD && <script is:inline define:vars={{scriptUrl: url('/pagefind/pagefind.js')}}>
+{import.meta.env.PROD && <script is:inline define:vars={{scriptUrl: url(`${pagefindBasePath}pagefind.js`), basePath: url(pagefindBasePath)}}>
 async function loadPagefind() {
     try {
         const response = await fetch(scriptUrl, { method: 'HEAD' });
@@ -115,7 +116,8 @@ async function loadPagefind() {
         const pagefind = await import(scriptUrl);
 
         await pagefind.options({
-            excerptLength: 20
+            excerptLength: 20,
+            basePath: basePath,
         });
 
         window.pagefind = pagefind;

src/global.d.ts

@@ -1,6 +1,8 @@
 import type { AstroIntegration } from "@swup/astro";
 
 declare global {
+	const __PAGEFIND_VERSION__: string;
+
 	interface Window {
 		// type from '@swup/astro' is incorrect
 		swup: AstroIntegration;