docs: add search bar and libraries page

2025-09-13 07:55:18 +00:00 · 2025-08-14 22:20:09 +06:00 · 2025-08-14 22:20:09 +06:00 · 3f18f35c0b
commit 3f18f35c0b
parent 30fd4acf37
7 changed files with 198 additions and 25 deletions
--- a/website/astro.config.mjs
+++ b/website/astro.config.mjs
@ -5,6 +5,7 @@ import react from "@astrojs/react";
 import mdx from "@astrojs/mdx";
 import rehypeSlug from "rehype-slug";
 import rehypeAutolinkHeadings from "rehype-autolink-headings";
+import pagefind from "astro-pagefind";

 // https://astro.build/config
 export default defineConfig({
@ -40,7 +41,7 @@ export default defineConfig({
      ],
    ],
  },
-  integrations: [react(), mdx()],
+  integrations: [react(), mdx(), pagefind()],
  redirects: {
    "/docs": "/docs/get-started/introduction",
    "/docs/get-started": "/docs/get-started/introduction",
--- a/website/package.json
+++ b/website/package.json
@ -17,6 +17,7 @@
    "@types/react": "^19.1.9",
    "@types/react-dom": "^19.1.7",
    "astro": "^5.12.8",
+    "astro-pagefind": "^1.8.3",
    "date-fns": "^4.1.0",
    "markdown-it": "^14.1.0",
    "react": "^19.1.1",
--- a/website/pnpm-lock.yaml
+++ b/website/pnpm-lock.yaml
@ -32,6 +32,9 @@ importers:
      astro:
        specifier: ^5.12.8
        version: 5.12.8(@types/node@24.1.0)(jiti@2.5.1)(lightningcss@1.30.1)(rollup@4.46.2)(typescript@5.9.2)
+      astro-pagefind:
+        specifier: ^1.8.3
+        version: 1.8.3(astro@5.12.8(@types/node@24.1.0)(jiti@2.5.1)(lightningcss@1.30.1)(rollup@4.46.2)(typescript@5.9.2))
      date-fns:
        specifier: ^4.1.0
        version: 4.1.0
@ -542,6 +545,37 @@ packages:
  '@oslojs/encoding@1.1.0':
    resolution: {integrity: sha512-70wQhgYmndg4GCPxPPxPGevRKqTIJ2Nh4OkiMWmDAVYsTQ+Ta7Sq+rPevXyXGdzr30/qZBnyOalCszoMxlyldQ==}

+  '@pagefind/darwin-arm64@1.3.0':
+    resolution: {integrity: sha512-365BEGl6ChOsauRjyVpBjXybflXAOvoMROw3TucAROHIcdBvXk9/2AmEvGFU0r75+vdQI4LJdJdpH4Y6Yqaj4A==}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@pagefind/darwin-x64@1.3.0':
+    resolution: {integrity: sha512-zlGHA23uuXmS8z3XxEGmbHpWDxXfPZ47QS06tGUq0HDcZjXjXHeLG+cboOy828QIV5FXsm9MjfkP5e4ZNbOkow==}
+    cpu: [x64]
+    os: [darwin]
+
+  '@pagefind/default-ui@1.3.0':
+    resolution: {integrity: sha512-CGKT9ccd3+oRK6STXGgfH+m0DbOKayX6QGlq38TfE1ZfUcPc5+ulTuzDbZUnMo+bubsEOIypm4Pl2iEyzZ1cNg==}
+
+  '@pagefind/linux-arm64@1.3.0':
+    resolution: {integrity: sha512-8lsxNAiBRUk72JvetSBXs4WRpYrQrVJXjlRRnOL6UCdBN9Nlsz0t7hWstRk36+JqHpGWOKYiuHLzGYqYAqoOnQ==}
+    cpu: [arm64]
+    os: [linux]
+
+  '@pagefind/linux-x64@1.3.0':
+    resolution: {integrity: sha512-hAvqdPJv7A20Ucb6FQGE6jhjqy+vZ6pf+s2tFMNtMBG+fzcdc91uTw7aP/1Vo5plD0dAOHwdxfkyw0ugal4kcQ==}
+    cpu: [x64]
+    os: [linux]
+
+  '@pagefind/windows-x64@1.3.0':
+    resolution: {integrity: sha512-BR1bIRWOMqkf8IoU576YDhij1Wd/Zf2kX/kCI0b2qzCKC8wcc2GQJaaRMCpzvCCrmliO4vtJ6RITp/AnoYUUmQ==}
+    cpu: [x64]
+    os: [win32]
+
+  '@polka/url@1.0.0-next.29':
+    resolution: {integrity: sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==}
+
  '@rolldown/pluginutils@1.0.0-beta.27':
    resolution: {integrity: sha512-+d0F4MKMCbeVUJwG96uQ4SgAznZNSq93I3V+9NHA4OpvqG8mRCpGdKmK8l/dl02h2CCDHwW2FqilnTyDcAnqjA==}

@ -985,6 +1019,11 @@ packages:
    resolution: {integrity: sha512-LElXdjswlqjWrPpJFg1Fx4wpkOCxj1TDHlSV4PlaRxHGWko024xICaa97ZkMfs6DRKlCguiAI+rbXv5GWwXIkg==}
    hasBin: true

+  astro-pagefind@1.8.3:
+    resolution: {integrity: sha512-Nfo1TdlEHdkXTiI0KpimLqX6awK3qWTil7IOJvk5Q8x+0VBTpIEp9QvGgoAxXDe3upAHLVsg4y7U1uUPm7GC9w==}
+    peerDependencies:
+      astro: ^2.0.4 || ^3 || ^4 || ^5
+
  astro@5.12.8:
    resolution: {integrity: sha512-KkJ7FR+c2SyZYlpakm48XBiuQcRsrVtdjG5LN5an0givI/tLik+ePJ4/g3qrAVhYMjJOxBA2YgFQxANPiWB+Mw==}
    engines: {node: 18.20.8 || ^20.3.0 || >=22.0.0, npm: '>=9.6.5', pnpm: '>=7.1.0'}
@ -1796,6 +1835,10 @@ packages:
  package-manager-detector@1.3.0:
    resolution: {integrity: sha512-ZsEbbZORsyHuO00lY1kV3/t72yp6Ysay6Pd17ZAlNGuGwmWDLCJxFpRs0IzfXfj1o4icJOkUEioexFHzyPurSQ==}

+  pagefind@1.3.0:
+    resolution: {integrity: sha512-8KPLGT5g9s+olKMRTU9LFekLizkVIu9tes90O1/aigJ0T5LmyPqTzGJrETnSw3meSYg58YH7JTzhTTW/3z6VAw==}
+    hasBin: true
+
  pako@0.2.9:
    resolution: {integrity: sha512-NUcwaKxUxWrZLpDG+z/xZaCgQITkA/Dv4V/T6bw7VON6l1Xz/VnrBqrYjZQ12TamKHzITTfOEIYUj48y2KXImA==}

@ -1984,6 +2027,10 @@ packages:
  simple-swizzle@0.2.2:
    resolution: {integrity: sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==}

+  sirv@3.0.1:
+    resolution: {integrity: sha512-FoqMu0NCGBLCcAkS1qA+XJIQTR6/JHfQXl+uGteNCQ76T91DMUjPa9xfmeqMY3z80nLSg9yQmNjK0Px6RWsH/A==}
+    engines: {node: '>=18'}
+
  sisteransi@1.0.5:
    resolution: {integrity: sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==}

@ -2048,6 +2095,10 @@ packages:
    resolution: {integrity: sha512-tX5e7OM1HnYr2+a2C/4V0htOcSQcoSTH9KgJnVvNm5zm/cyEWKJ7j7YutsH9CxMdtOkkLFy2AHrMci9IM8IPZQ==}
    engines: {node: '>=12.0.0'}

+  totalist@3.0.1:
+    resolution: {integrity: sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==}
+    engines: {node: '>=6'}
+
  tr46@0.0.3:
    resolution: {integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==}

@ -2819,6 +2870,25 @@ snapshots:

  '@oslojs/encoding@1.1.0': {}

+  '@pagefind/darwin-arm64@1.3.0':
+    optional: true
+
+  '@pagefind/darwin-x64@1.3.0':
+    optional: true
+
+  '@pagefind/default-ui@1.3.0': {}
+
+  '@pagefind/linux-arm64@1.3.0':
+    optional: true
+
+  '@pagefind/linux-x64@1.3.0':
+    optional: true
+
+  '@pagefind/windows-x64@1.3.0':
+    optional: true
+
+  '@polka/url@1.0.0-next.29': {}
+
  '@rolldown/pluginutils@1.0.0-beta.27': {}

  '@rollup/pluginutils@5.2.0(rollup@4.46.2)':
@ -3313,6 +3383,13 @@ snapshots:

  astring@1.9.0: {}

+  astro-pagefind@1.8.3(astro@5.12.8(@types/node@24.1.0)(jiti@2.5.1)(lightningcss@1.30.1)(rollup@4.46.2)(typescript@5.9.2)):
+    dependencies:
+      '@pagefind/default-ui': 1.3.0
+      astro: 5.12.8(@types/node@24.1.0)(jiti@2.5.1)(lightningcss@1.30.1)(rollup@4.46.2)(typescript@5.9.2)
+      pagefind: 1.3.0
+      sirv: 3.0.1
+
  astro@5.12.8(@types/node@24.1.0)(jiti@2.5.1)(lightningcss@1.30.1)(rollup@4.46.2)(typescript@5.9.2):
    dependencies:
      '@astrojs/compiler': 2.12.2
@ -4527,6 +4604,14 @@ snapshots:

  package-manager-detector@1.3.0: {}

+  pagefind@1.3.0:
+    optionalDependencies:
+      '@pagefind/darwin-arm64': 1.3.0
+      '@pagefind/darwin-x64': 1.3.0
+      '@pagefind/linux-arm64': 1.3.0
+      '@pagefind/linux-x64': 1.3.0
+      '@pagefind/windows-x64': 1.3.0
+
  pako@0.2.9: {}

  parse-entities@4.0.2:
@ -4851,6 +4936,12 @@ snapshots:
      is-arrayish: 0.3.2
    optional: true

+  sirv@3.0.1:
+    dependencies:
+      '@polka/url': 1.0.0-next.29
+      mrmime: 2.0.1
+      totalist: 3.0.1
+
  sisteransi@1.0.5: {}

  smol-toml@1.4.1: {}
@ -4916,6 +5007,8 @@ snapshots:
      fdir: 6.4.6(picomatch@4.0.3)
      picomatch: 4.0.3

+  totalist@3.0.1: {}
+
  tr46@0.0.3: {}

  trim-lines@3.0.1: {}
--- a/website/src/components/navigation/DocSideBar.astro
+++ b/website/src/components/navigation/DocSideBar.astro
@ -18,7 +18,7 @@ interface Props {
  classList?: string;
  bottomGroups?: NavigationGroup[];
 }
-const { topGroups, bottomGroups, classList } = Astro.props;
+const { classList } = Astro.props;

 const sortByOrder = (a: CollectionEntry<"docs">, b: CollectionEntry<"docs">) =>
  a.data.order - b.data.order;
@ -33,17 +33,6 @@ async function queryCollection(startsWith: string) {
    })
  ).toSorted(sortByOrder);
 }
-
-async function queryMetaCollection(startsWith: string) {
-  return (
-    await getCollection("docs", (entry) => {
-      if (!entry.id.startsWith(startsWith)) return false;
-      if (!entry.id.endsWith("meta")) return false;
-      return true;
-    })
-  ).toSorted(sortByOrder);
-}
-
 const toNavItems = (entries: CollectionEntry<"docs">[]) =>
  entries.map((page) => ({
    title: page.data.title,
@ -63,16 +52,16 @@ const sections: [
 ];

 // Build navigation dynamically
-const navigation: NavigationGroup[] = [
-  ...(topGroups ?? []),
-  ...(await Promise.all(
+const navigation: NavigationGroup[] = await Promise.all(
  sections.map(async ([title, prefix, queryFn]) => ({
    title,
    items: toNavItems(await queryFn(prefix)),
  }))
-  )),
-  ...(bottomGroups ?? []),
-];
+);
+
+const pathname = Astro.url.pathname.endsWith("/")
+  ? Astro.url.pathname.slice(0, -1)
+  : Astro.url.pathname;
 ---

 <aside class="text-sm grid gap-10" class:list={[classList]}>
@ -92,8 +81,8 @@ const navigation: NavigationGroup[] = [
                  class="grow px-2 py-1 rounded-base"
                  class:list={[
                    {
-                      "preset-tonal": Astro.url.pathname === item.href,
-                      anchor: Astro.url.pathname !== item.href,
+                      "preset-tonal": pathname === item.href,
+                      anchor: pathname !== item.href,
                    },
                  ]}
                >
--- a/website/src/components/navigation/TopBar.astro
+++ b/website/src/components/navigation/TopBar.astro
@ -2,6 +2,7 @@
 import { routes } from "~/collections/app";
 import { FaGithub } from "react-icons/fa6";
 import SidebarButton from "./sidebar-button";
+import Search from "astro-pagefind/components/Search";

 const pathname = Astro.url.pathname;
 ---
@ -19,6 +20,16 @@ const pathname = Astro.url.pathname;
        </a>
      </h2>
    </div>
+
+    <Search
+      id="search"
+      className="pagefind-ui"
+      uiOptions={{
+        showImages: false,
+        showSubResults: true,
+      }}
+    />
+
    <a
      class="mw-2 md:me-4"
      href="https://github.com/KRTirtho/spotube?referrer=spotube.krtirtho.dev"
--- a/website/src/content/docs/reference/libraries.mdx
+++ b/website/src/content/docs/reference/libraries.mdx
@ -0,0 +1,15 @@
+---
+layout: "layouts/DocLayout.astro"
+title: Libraries
+description: List of libraries for Spotube Plugins.
+order: 0
+---
+
+- [`hetu_std`][hetu_std] (built-in) - A standard library for hetu_script that provides standard set of functions and utilities.
+- [`hetu_spotube_plugin`][hetu_spotube_plugin] (built-in) - Access to Spotube Plugin API, which provides functions to interact with Spotube.
+- [`hetu_otp_util`][hetu_otp_util] - A pure hetu_script library for OTP utilities, such as generating and verifying OTPs.
+
+{/* Links */}
+[hetu_std]: https://github.com/hetu-community/hetu_std
+[hetu_spotube_plugin]: https://github.com/KRTirtho/hetu_spotube_plugin
+[hetu_otp_util]: https://github.com/hetu-community/hetu_otp_util
--- a/website/src/styles/global.css
+++ b/website/src/styles/global.css
@ -7,6 +7,15 @@
@import "@skeletonlabs/skeleton/optional/presets";
@import "@skeletonlabs/skeleton/themes/wintry";

+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  scroll-margin-top: 80px;
+}
+
 .prose code::before,
 .prose code::after {
  content: none !important;
@ -19,3 +28,57 @@
 .prose a code {
  @apply text-primary-500 underline decoration-primary-500;
 }
+
+/* Astro PageFind */
+.pagefind-ui {
+  --pagefind-ui-scale: 0.75;
+  --pagefind-ui-primary: var(--color-primary-500);
+  --pagefind-ui-text: var(--color-surface-900-100);
+  --pagefind-ui-border: var(--color-surface-300-700);
+  --pagefind-ui-border-width: 1px;
+  --pagefind-ui-border-radius: 0.5rem;
+
+  width: 50%;
+}
+
+.pagefind-ui .pagefind-ui__drawer:not(.pagefind-ui__hidden) {
+  position: absolute;
+  left: 0;
+  right: 0;
+  margin-top: 0px;
+  z-index: 9999;
+  padding: 0 2em 1em;
+  overflow-y: auto;
+  box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.2),
+    0 2px 2px 0 rgba(0, 0, 0, 0.1);
+  border-bottom-right-radius: var(--pagefind-ui-border-radius);
+  border-bottom-left-radius: var(--pagefind-ui-border-radius);
+
+  @apply bg-gray-50 dark:bg-surface-900;
+}
+
+.pagefind-ui .pagefind-ui__result-link {
+  color: var(--pagefind-ui-primary);
+}
+
+.pagefind-ui .pagefind-ui__result-excerpt {
+  @apply font-normal text-surface-900-100;
+}
+
+.pagefind-ui .pagefind-ui__search-input {
+  background-color: var(--color-white) !important;
+}
+
+.pagefind-ui .pagefind-ui__search-clear {
+  background: var(--color-white) !important;
+}
+
+@media (prefers-color-scheme: dark) {
+  .pagefind-ui .pagefind-ui__search-input {
+    background-color: var(--color-surface-900) !important;
+  }
+
+  .pagefind-ui .pagefind-ui__search-clear {
+    background: var(--color-surface-900) !important;
+  }
+}