temporarily inlining external package until it has support for pagefi…

…nd subdir config OR we publish our own fork.

astro.config.mjs

@@ -1,13 +1,13 @@
-import { defineConfig } from 'astro/config'
-import pagefind from "astro-pagefind";
+import { defineConfig } from 'astro/config';
+import pagefind from "./lib/astro-pagefind/pagefind.ts"
 import tailwind from '@astrojs/tailwind'
 
 // https://astro.build/config
 export default defineConfig({
-  build: {
-      inlineStylesheets: 'always',
-      assets: 'assets/docs/_astro'
-  },
-    
-    integrations: [tailwind(), pagefind()]
+    build: {
+        inlineStylesheets: 'always',
+        assets: 'assets/docs/_astro'
+    },
+
+    integrations: [tailwind(), pagefind({site: 'dist', outputSubdir: 'assets/docs/pagefind'})]
 })

lib/astro-pagefind/components/Search.astro

@@ -0,0 +1,55 @@
+---
+// Temporarily inlined from: https://github.com/shishkin/astro-pagefind
+// Need functionality from PR: https://github.com/shishkin/astro-pagefind/pull/58
+import "@pagefind/default-ui/css/ui.css";
+
+export interface Props {
+  readonly id?: string;
+  readonly className?: string;
+  readonly query?: string;
+  readonly uiOptions?: Record<string, any>;
+}
+
+const { id, className, query, uiOptions = {} } = Astro.props as Props;
+const { PAGEFIND_OUTPUT_SUBDIR = 'pagefind', PAGEFIND_SITE} = process.env;
+
+const bundlePath = `${import.meta.env.BASE_URL}${PAGEFIND_OUTPUT_SUBDIR}/`;
+---
+
+<div
+  id={id}
+  class:list={[className]}
+  data-pagefind-ui
+  data-bundle-path={bundlePath}
+  data-query={query}
+  data-ui-options={JSON.stringify(uiOptions)}
+>
+</div>
+<script>
+ import { PagefindUI } from "@pagefind/default-ui";
+ window.addEventListener("DOMContentLoaded", () => {
+   const allSelector = "[data-pagefind-ui]";
+   for (const el of document.querySelectorAll(allSelector)) {
+     const elSelector = [
+       ...(el.id ? [`#${el.id}`] : []),
+       ...[...el.classList.values()].map((c) => `.${c}`),
+       allSelector,
+     ].join("");
+     const bundlePath = el.getAttribute("data-bundle-path");
+     const opts = JSON.parse(el.getAttribute("data-ui-options") ?? "{}");
+     new PagefindUI({
+       ...opts,
+       element: elSelector,
+       bundlePath,
+     });
+     const query = el.getAttribute("data-query");
+     if (query) {
+       const input = el.querySelector<HTMLInputElement>(`input[type="text"]`);
+       if (input) {
+         input.value = query;
+         input.dispatchEvent(new Event("input", { bubbles: true }));
+       }
+     }
+   }
+ });
+</script>

lib/astro-pagefind/components/Search.ts

@@ -0,0 +1,5 @@
+// Temporarily inlined from: https://github.com/shishkin/astro-pagefind
+// Need functionality from PR: https://github.com/shishkin/astro-pagefind/pull/58
+// TODO: figure out how to avoid this:
+// @ts-expect-error
+export { default } from "./Search.astro";

lib/astro-pagefind/pagefind.ts

@@ -0,0 +1,71 @@
+// Temporarily inlined from: https://github.com/shishkin/astro-pagefind
+// Need functionality from PR: https://github.com/shishkin/astro-pagefind/pull/58
+
+import type { AstroIntegration } from "astro";
+import { fileURLToPath } from "node:url";
+import { execSync } from "child_process";
+import sirv from "sirv";
+
+export default function pagefind(pagefindConfig: { site?: string; outputSubdir?: string } = {}): AstroIntegration {
+  const {site, outputSubdir = 'pagefind'} = pagefindConfig
+
+  process.env.PAGEFIND_OUTPUT_SUBDIR = outputSubdir
+  process.env.PAGEFIND_SITE = site
+
+  let outDir: string;
+  return {
+    name: "pagefind",
+    hooks: {
+      "astro:config:setup": ({ config }) => {
+        if (config.output === "server") {
+          console.warn(
+            "Output type `server` does not produce static *.html pages in its output and thus will not work with astro-pagefind integration.",
+          );
+          return;
+        }
+
+        if (config.adapter?.name.startsWith("@astrojs/vercel")) {
+          outDir = fileURLToPath(new URL(".vercel/output/static/", config.root));
+        } else if (config.adapter?.name === "@astrojs/cloudflare") {
+          outDir = fileURLToPath(new URL(config.base?.replace(/^\//, ""), config.outDir));
+        } else if (config.adapter?.name === "@astrojs/node" && config.output === "hybrid") {
+          outDir = fileURLToPath(config.build.client!);
+        } else {
+          outDir = fileURLToPath(config.outDir);
+        }
+      },
+      "astro:server:setup": ({ server }) => {
+        if (!outDir) {
+          console.warn(
+            "astro-pagefind could reliably determine the output directory. Search assets will not be served.",
+          );
+          return;
+        }
+
+        const serve = sirv(outDir, {
+          dev: true,
+          etag: true,
+        });
+        server.middlewares.use((req, res, next) => {
+          if (req.url?.startsWith(`/${outputSubdir}/`)) {
+            serve(req, res, next);
+          } else {
+            next();
+          }
+        });
+      },
+      "astro:build:done": () => {
+        if (!outDir) {
+          console.warn(
+            "astro-pagefind could reliably determine the output directory. Search index will not be built.",
+          );
+          return;
+        }
+        const cmd = `npx pagefind --site "${outDir}" --output-subdir "${outputSubdir}"`;
+        execSync(cmd, {
+          stdio: [process.stdin, process.stdout, process.stderr],
+        });
+      },
+    },
+  };
+}

package.json

@@ -42,16 +42,20 @@
   },
   "dependencies": {
     "@astrojs/tailwind": "^3.1.3",
+    "@pagefind/default-ui": "^1.0.4",
     "astro": "^2.10.15",
+    "pagefind": "^1.0.4",
+    "sirv": "^2.0.3",
     "tailwindcss": "^3.3.5"
   },
   "devDependencies": {
     "@tailwindcss/typography": "^0.5.10",
-    "astro-pagefind": "^1.3.0",
+    "astro-pagefind": "1800joe/astro-pagefind#main",
     "concurrently": "^8.2.2",
     "eslint": "^8.53.0",
     "eslint-config-standard": "^17.1.0",
-    "prettier": "^2.8.8"
+    "prettier": "^2.8.8",
+    "typescript": "^5.2.2"
   },
   "eslintConfig": {
     "root": true,

pagefind.yml

@@ -1,2 +1,2 @@
-site: dist
+site: distoooooo
 output_subdir: assets/docs/pagefind

src/components/Search.astro

@@ -1,5 +1,5 @@
 ---
-import Search from "astro-pagefind/components/Search";
+import Search from "../../lib/astro-pagefind/components/Search.astro";
 const {id} = Astro.props
 ---
 <div>