docs-site: implement site search

2025-10-10 11:10:52 +08:00
parent 5299fe7259
commit a4cc333533
7 changed files with 254 additions and 18 deletions
--- a/docs/site/getting-started/add-machines.md
+++ b/docs/site/getting-started/add-machines.md
@@ -71,7 +71,7 @@ This example demonstrates what is needed based on a machine called `jon`:
 ```

 1. Tags can be used to automatically add this machine to services later on. - You dont need to set this now.
-2. Add your *ssh key* here - That will ensure you can always login to your machine via *ssh* in case something goes wrong.
+2. Add your _ssh key_ here - That will ensure you can always login to your machine via _ssh_ in case something goes wrong.

 ### (Optional) Create a `configuration.nix`

@@ -99,8 +99,8 @@ git mv ./machines/jon ./machines/<your-machine-name>

 Since your Clan configuration lives inside a Git repository, remember:

-* Only files tracked by Git (`git add`) are recognized.
-* Whenever you add, rename, or remove files, run:
+- Only files tracked by Git (`git add`) are recognized.
+- Whenever you add, rename, or remove files, run:

 ```bash
 git add ./machines/<your-machine-name>
--- a/pkgs/docs-site/.gitignore
+++ b/pkgs/docs-site/.gitignore
@@ -7,6 +7,7 @@ node_modules
 .wrangler
 /.svelte-kit
 /build
+/static/pagefind

 # Env
 .env
--- a/pkgs/docs-site/package-lock.json
+++ b/pkgs/docs-site/package-lock.json
@@ -11,7 +11,7 @@
        "@fontsource-variable/geist": "^5.2.8",
        "@shikijs/rehype": "^3.13.0",
        "@shikijs/transformers": "^3.13.0",
-        "@sveltejs/adapter-auto": "^6.1.1",
+        "@sveltejs/adapter-static": "^3.0.10",
        "@sveltejs/kit": "^2.43.2",
        "@sveltejs/vite-plugin-svelte": "^6.2.0",
        "@types/node": "^24.7.0",
@@ -25,6 +25,7 @@
        "mdast-util-from-markdown": "^2.0.2",
        "mdast-util-to-hast": "^13.2.0",
        "mdast-util-toc": "^7.1.0",
+        "pagefind": "^1.4.0",
        "postcss-preset-env": "^10.4.0",
        "prettier": "^3.6.2",
        "prettier-plugin-svelte": "^3.4.0",
@@ -43,7 +44,8 @@
        "unist-util-visit": "^5.0.0",
        "vfile": "^6.0.3",
        "vfile-matter": "^5.0.1",
-        "vite": "^7.1.7"
+        "vite": "^7.1.7",
+        "vite-plugin-pagefind": "^1.0.7"
      }
    },
    "node_modules/@csstools/cascade-layer-name-parser": {
@@ -1772,6 +1774,90 @@
        "@jridgewell/sourcemap-codec": "^1.4.14"
      }
    },
+    "node_modules/@pagefind/darwin-arm64": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@pagefind/darwin-arm64/-/darwin-arm64-1.4.0.tgz",
+      "integrity": "sha512-2vMqkbv3lbx1Awea90gTaBsvpzgRs7MuSgKDxW0m9oV1GPZCZbZBJg/qL83GIUEN2BFlY46dtUZi54pwH+/pTQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@pagefind/darwin-x64": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@pagefind/darwin-x64/-/darwin-x64-1.4.0.tgz",
+      "integrity": "sha512-e7JPIS6L9/cJfow+/IAqknsGqEPjJnVXGjpGm25bnq+NPdoD3c/7fAwr1OXkG4Ocjx6ZGSCijXEV4ryMcH2E3A==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@pagefind/freebsd-x64": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@pagefind/freebsd-x64/-/freebsd-x64-1.4.0.tgz",
+      "integrity": "sha512-WcJVypXSZ+9HpiqZjFXMUobfFfZZ6NzIYtkhQ9eOhZrQpeY5uQFqNWLCk7w9RkMUwBv1HAMDW3YJQl/8OqsV0Q==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@pagefind/linux-arm64": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@pagefind/linux-arm64/-/linux-arm64-1.4.0.tgz",
+      "integrity": "sha512-PIt8dkqt4W06KGmQjONw7EZbhDF+uXI7i0XtRLN1vjCUxM9vGPdtJc2mUyVPevjomrGz5M86M8bqTr6cgDp1Uw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@pagefind/linux-x64": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@pagefind/linux-x64/-/linux-x64-1.4.0.tgz",
+      "integrity": "sha512-z4oddcWwQ0UHrTHR8psLnVlz6USGJ/eOlDPTDYZ4cI8TK8PgwRUPQZp9D2iJPNIPcS6Qx/E4TebjuGJOyK8Mmg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@pagefind/windows-x64": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@pagefind/windows-x64/-/windows-x64-1.4.0.tgz",
+      "integrity": "sha512-NkT+YAdgS2FPCn8mIA9bQhiBs+xmniMGq1LFPDhcFn0+2yIUEiIG06t7bsZlhdjknEQRTSdT7YitP6fC5qwP0g==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
    "node_modules/@polka/url": {
      "version": "1.0.0-next.29",
      "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.29.tgz",
@@ -2204,10 +2290,10 @@
        "acorn": "^8.9.0"
      }
    },
-    "node_modules/@sveltejs/adapter-auto": {
-      "version": "6.1.1",
-      "resolved": "https://registry.npmjs.org/@sveltejs/adapter-auto/-/adapter-auto-6.1.1.tgz",
-      "integrity": "sha512-cBNt4jgH4KuaNO5gRSB2CZKkGtz+OCZ8lPjRQGjhvVUD4akotnj2weUia6imLl2v07K3IgsQRyM36909miSwoQ==",
+    "node_modules/@sveltejs/adapter-static": {
+      "version": "3.0.10",
+      "resolved": "https://registry.npmjs.org/@sveltejs/adapter-static/-/adapter-static-3.0.10.tgz",
+      "integrity": "sha512-7D9lYFWJmB7zxZyTE/qxjksvMqzMuYrrsyh1f4AlZqeZeACPRySjbC3aFiY55wb1tWUaKOQG9PVbm74JcN2Iew==",
      "dev": true,
      "license": "MIT",
      "peerDependencies": {
@@ -3102,6 +3188,13 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/colorette": {
+      "version": "2.0.20",
+      "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.20.tgz",
+      "integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==",
+      "dev": true,
+      "license": "MIT"
+    },
    "node_modules/comma-separated-tokens": {
      "version": "2.0.3",
      "resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-2.0.3.tgz",
@@ -6882,6 +6975,34 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/package-manager-detector": {
+      "version": "0.2.11",
+      "resolved": "https://registry.npmjs.org/package-manager-detector/-/package-manager-detector-0.2.11.tgz",
+      "integrity": "sha512-BEnLolu+yuz22S56CU1SUKq3XC3PkwD5wv4ikR4MfGvnRVcmzXR9DwSlW2fEamyTPyXHomBJRzgapeuBvRNzJQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "quansync": "^0.2.7"
+      }
+    },
+    "node_modules/pagefind": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/pagefind/-/pagefind-1.4.0.tgz",
+      "integrity": "sha512-z2kY1mQlL4J8q5EIsQkLzQjilovKzfNVhX8De6oyE6uHpfFtyBaqUpcl/XzJC/4fjD8vBDyh1zolimIcVrCn9g==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "pagefind": "lib/runner/bin.cjs"
+      },
+      "optionalDependencies": {
+        "@pagefind/darwin-arm64": "1.4.0",
+        "@pagefind/darwin-x64": "1.4.0",
+        "@pagefind/freebsd-x64": "1.4.0",
+        "@pagefind/linux-arm64": "1.4.0",
+        "@pagefind/linux-x64": "1.4.0",
+        "@pagefind/windows-x64": "1.4.0"
+      }
+    },
    "node_modules/param-case": {
      "version": "1.1.2",
      "resolved": "https://registry.npmjs.org/param-case/-/param-case-1.1.2.tgz",
@@ -8277,6 +8398,23 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/quansync": {
+      "version": "0.2.11",
+      "resolved": "https://registry.npmjs.org/quansync/-/quansync-0.2.11.tgz",
+      "integrity": "sha512-AifT7QEbW9Nri4tAwR5M/uzpBuqfZf+zwaEM/QkzEjj7NBuFD2rBuy0K3dE+8wltbezDV7JMA0WfnCPYRSYbXA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/antfu"
+        },
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/sxzz"
+        }
+      ],
+      "license": "MIT"
+    },
    "node_modules/randomatic": {
      "version": "3.1.1",
      "resolved": "https://registry.npmjs.org/randomatic/-/randomatic-3.1.1.tgz",
@@ -9884,6 +10022,20 @@
        }
      }
    },
+    "node_modules/vite-plugin-pagefind": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/vite-plugin-pagefind/-/vite-plugin-pagefind-1.0.7.tgz",
+      "integrity": "sha512-BTYGhqbEsEBfG7ZIbV41HjKAKGlJcq+h819Lsq+83+bkN5mcrl0YLqbh0fx+tCvmdOZs9rfgMpKoBlyv8pcvfQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "colorette": "^2.0.20",
+        "package-manager-detector": "^0.2.11"
+      },
+      "peerDependencies": {
+        "vite": ">=4.0.0"
+      }
+    },
    "node_modules/vitefu": {
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/vitefu/-/vitefu-1.1.1.tgz",
--- a/pkgs/docs-site/package.json
+++ b/pkgs/docs-site/package.json
@@ -5,7 +5,7 @@
  "type": "module",
  "scripts": {
    "dev": "vite dev",
-    "build": "vite build",
+    "build": "vite build && pagefind --site build",
    "preview": "vite preview",
    "prepare": "svelte-kit sync || echo ''",
    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
@@ -17,7 +17,7 @@
    "@fontsource-variable/geist": "^5.2.8",
    "@shikijs/rehype": "^3.13.0",
    "@shikijs/transformers": "^3.13.0",
-    "@sveltejs/adapter-auto": "^6.1.1",
+    "@sveltejs/adapter-static": "^3.0.10",
    "@sveltejs/kit": "^2.43.2",
    "@sveltejs/vite-plugin-svelte": "^6.2.0",
    "@types/node": "^24.7.0",
@@ -31,6 +31,7 @@
    "mdast-util-from-markdown": "^2.0.2",
    "mdast-util-to-hast": "^13.2.0",
    "mdast-util-toc": "^7.1.0",
+    "pagefind": "^1.4.0",
    "postcss-preset-env": "^10.4.0",
    "prettier": "^3.6.2",
    "prettier-plugin-svelte": "^3.4.0",
@@ -49,6 +50,7 @@
    "unist-util-visit": "^5.0.0",
    "vfile": "^6.0.3",
    "vfile-matter": "^5.0.1",
-    "vite": "^7.1.7"
+    "vite": "^7.1.7",
+    "vite-plugin-pagefind": "^1.0.7"
  }
 }
--- a/pkgs/docs-site/src/routes/+layout.svelte
+++ b/pkgs/docs-site/src/routes/+layout.svelte
@@ -2,6 +2,11 @@
  import favicon from "$lib/assets/favicon.svg";
  import type { NavLink } from "$lib";
  import { onNavigate } from "$app/navigation";
+  import { onMount } from "svelte";
+  import type {
+    Pagefind,
+    PagefindSearchFragment,
+  } from "vite-plugin-pagefind/types";
  import "./index.css";

  const { data, children } = $props();
@@ -9,6 +14,26 @@
  let menuOpen = $state(false);
  onNavigate(() => {
    menuOpen = false;
+    query = "";
+  });
+  let pagefind: Pagefind | undefined;
+  let query = $state("");
+  let searchResults: PagefindSearchFragment[] = $state([]);
+  onMount(async () => {
+    // @ts-expect-error
+    pagefind = await import("/pagefind/pagefind.js");
+    pagefind!.init();
+  });
+  $effect(() => {
+    (async () => {
+      query;
+      const search = await pagefind?.debouncedSearch(query);
+      if (search) {
+        searchResults = await Promise.all(
+          search.results.slice(0, 5).map((r) => r.data()),
+        );
+      }
+    })();
  });
 </script>

@@ -19,6 +44,25 @@
 <div class="global-bar">
  <span class="logo">Clan Docs</span>
  <nav>
+    <div class="search">
+      <input type="search" bind:value={query} />
+      {#if searchResults.length > 0}
+        <ul>
+          {#each searchResults as searchResult}
+            <li class="search-result">
+              <div class="search-result-title">
+                <a href={searchResult.url.slice(0, -".html".length)}
+                  >{searchResult.meta.title}</a
+                >
+              </div>
+              <div class="search-result-excerpt">
+                {@html searchResult.excerpt}
+              </div>
+            </li>
+          {/each}
+        </ul>
+      {/if}
+    </div>
    <div class={["menu", menuOpen && "open"]}>
      <button onclick={() => (menuOpen = !menuOpen)}>Menu</button>
      <ul>
@@ -63,6 +107,27 @@
    border-bottom: 1px solid;
    padding: 0 var(--pagePadding);
  }
+  .search {
+    & > ul {
+      position: fixed;
+      z-index: 10;
+      left: 0;
+      top: var(--globalBarHeight);
+      width: 100vw;
+      height: 100vh;
+      background: #fff;
+    }
+  }
+  .search-result {
+    padding: 15px;
+    border-bottom: 1px solid #a3a3a3;
+  }
+  .search-result-title {
+    padding: 0 0 15px;
+  }
+  .search-result-excerpt {
+    color: #666;
+  }
  .menu {
    & > ul {
      visibility: hidden;
@@ -81,6 +146,11 @@
      padding-left: 1em;
    }
  }
+
+  nav {
+    display: flex;
+    align-items: center;
+  }
  ul {
    list-style: none;
    padding: 0;
--- a/pkgs/docs-site/svelte.config.js
+++ b/pkgs/docs-site/svelte.config.js
@@ -1,4 +1,4 @@
-import adapter from "@sveltejs/adapter-auto";
+import adapter from "@sveltejs/adapter-static";
 import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";

 /** @type {import('@sveltejs/kit').Config} */
@@ -10,7 +10,10 @@ const config = {
    // adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list.
    // If your environment is not supported, or you settled on a specific environment, switch out the adapter.
    // See https://svelte.dev/docs/kit/adapters for more information about adapters.
-    adapter: adapter(),
+    adapter: adapter({
+      pages: "build",
+      strict: true,
+    }),
    prerender: {
      handleHttpError: "warn",
      handleMissingId: "warn",
--- a/pkgs/docs-site/vite.config.ts
+++ b/pkgs/docs-site/vite.config.ts
@@ -1,7 +1,15 @@
 import { sveltekit } from "@sveltejs/kit/vite";
+import { pagefind } from "vite-plugin-pagefind";
 import { defineConfig } from "vite";
 import markdown from "./src/lib/markdown/vite";

 export default defineConfig({
-  plugins: [sveltekit(), markdown()],
+  plugins: [
+    sveltekit(),
+    markdown(),
+    pagefind({
+      outputDirectory: "build",
+      assetsDirectory: "static",
+    }),
+  ],
 });