@mehdad67/apitogo 0.1.24

package/src/lib/plugins/search-pagefind/IndexingDialog.tsx

@@ -0,0 +1,162 @@
+import { Button } from "@lukoweb/apitogo/ui/Button.js";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@lukoweb/apitogo/ui/Dialog.js";
+import { DialogTrigger } from "@radix-ui/react-dialog";
+import {
+  type PropsWithChildren,
+  useCallback,
+  useEffect,
+  useState,
+} from "react";
+
+type IndexingState =
+  | { status: "idle" }
+  | { status: "indexing"; total: number; current: number; path: string }
+  | { status: "complete"; indexed: number }
+  | { status: "error"; message: string };
+
+const ProgressBar = ({
+  total,
+  current,
+  barLength = 25,
+  emptyChar = "░",
+  filledChar = "█",
+}: {
+  total: number;
+  current: number;
+  barLength?: number;
+  emptyChar?: string;
+  filledChar?: string;
+}) => {
+  const percent = Math.round((current / total) * 100);
+  const filled = Math.round((percent / 100) * barLength);
+  const empty = barLength - filled;
+
+  return (
+    <>
+      {filledChar.repeat(filled)}
+      {emptyChar.repeat(empty)} {percent}% ({current}/{total})
+    </>
+  );
+};
+
+const IndexingDialog = ({ children }: PropsWithChildren) => {
+  const [indexingState, setIndexingState] = useState<IndexingState>({
+    status: "idle",
+  });
+
+  const startIndexing = useCallback(() => {
+    setIndexingState({ status: "indexing", total: 0, current: 0, path: "" });
+
+    const eventSource = new EventSource("/__z/pagefind-reindex");
+
+    eventSource.onmessage = (event) => {
+      const data = JSON.parse(event.data);
+
+      if (data.type === "progress") {
+        setIndexingState({
+          status: "indexing",
+          total: data.total,
+          current: data.current,
+          path: data.path,
+        });
+      } else if (data.type === "complete") {
+        eventSource.close();
+        if (data.success) {
+          setIndexingState({ status: "complete", indexed: data.indexed });
+        } else {
+          setIndexingState({
+            status: "error",
+            message: data.error ?? "Indexing failed",
+          });
+        }
+      }
+    };
+
+    eventSource.onerror = () => {
+      eventSource.close();
+      setIndexingState({
+        status: "error",
+        message: "Connection lost during indexing",
+      });
+    };
+
+    return () => eventSource.close();
+  }, []);
+
+  useEffect(() => {
+    return startIndexing();
+  }, [startIndexing]);
+
+  const handleDone = () => {
+    if (indexingState.status !== "complete") return;
+    window.location.reload();
+  };
+
+  return (
+    <Dialog>
+      <DialogTrigger asChild>{children}</DialogTrigger>
+      <DialogContent
+        className="max-w-sm! top-1/3"
+        showCloseButton={false}
+        onInteractOutside={(e) => e.preventDefault()}
+      >
+        <DialogHeader>
+          <DialogTitle>
+            {indexingState.status === "indexing" && "Building Search Index"}
+            {indexingState.status === "complete" && "Indexing Complete"}
+            {indexingState.status === "error" && "Indexing Failed"}
+            {indexingState.status === "idle" && "Build Search Index"}
+          </DialogTitle>
+          <DialogDescription>
+            {indexingState.status === "indexing" && (
+              <>
+                {indexingState.total > 0 && (
+                  <span className="font-mono text-sm mb-2 block">
+                    <ProgressBar {...indexingState} />
+                  </span>
+                )}
+                {indexingState.path && (
+                  <span className="block text-xs truncate">
+                    {indexingState.path}
+                  </span>
+                )}
+              </>
+            )}
+            {indexingState.status === "complete" && (
+              <>Successfully indexed {indexingState.indexed} pages.</>
+            )}
+            {indexingState.status === "error" && (
+              <span className="text-destructive">{indexingState.message}</span>
+            )}
+          </DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <div className="flex justify-end gap-2">
+            {indexingState.status === "complete" && (
+              <Button size="sm" onClick={handleDone}>
+                Close and reload
+              </Button>
+            )}
+            {indexingState.status === "error" && (
+              <>
+                <Button variant="outline" onClick={handleDone}>
+                  Cancel
+                </Button>
+                <Button onClick={startIndexing}>Retry</Button>
+              </>
+            )}
+          </div>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default IndexingDialog;

package/src/lib/plugins/search-pagefind/PagefindSearch.tsx

@@ -0,0 +1,202 @@
+import { Button } from "@lukoweb/apitogo/ui/Button.js";
+import {
+  CommandDialog,
+  CommandEmpty,
+  CommandInput,
+} from "@lukoweb/apitogo/ui/Command.js";
+import { DialogTitle } from "@lukoweb/apitogo/ui/Dialog.js";
+import { Kbd, KbdGroup } from "@lukoweb/apitogo/ui/Kbd.js";
+import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
+import { keepPreviousData, useQuery } from "@tanstack/react-query";
+import { ListPlusIcon } from "lucide-react";
+import { lazy, useEffect, useRef, useState } from "react";
+import { useAuthState } from "../../authentication/state.js";
+import { useZudoku } from "../../components/context/ZudokuContext.js";
+import { SEARCH_PROTECTED_SECTION } from "../../core/RouteGuard.js";
+import { joinUrl } from "../../util/joinUrl.js";
+import { getResults } from "./get-results.js";
+import type { PagefindOptions } from "./index.js";
+import { ResultList } from "./ResultList.js";
+import type { Pagefind } from "./types.js";
+
+const IndexingDialog = lazy(() => import("./IndexingDialog.js"));
+
+const DEFAULT_RANKING = {
+  // Slightly lower than default because API docs tend to have repetitive terms (parameter names, HTTP methods, etc.)
+  termFrequency: 0.8,
+  // Lower than default because API documentation pages tend to be longer due to comprehensive endpoint documentation
+  pageLength: 0.6,
+  // Slightly higher than default because in technical documentation, exact matches should be prioritized
+  termSimilarity: 1.2,
+  // Slightly lower than default because API docs might have legitimate repetition of terms
+  termSaturation: 1.2,
+};
+
+const importPagefind = (basePath?: string): Promise<Pagefind> =>
+  import.meta.env.DEV
+    ? // @ts-expect-error TypeScript can't resolve the import
+      import(/* @vite-ignore */ "/pagefind/pagefind.js")
+    : import(/* @vite-ignore */ joinUrl(basePath, "/pagefind/pagefind.js"));
+
+const usePagefind = (options: PagefindOptions) => {
+  const {
+    options: { basePath },
+  } = useZudoku();
+  const { data: pagefind, ...result } = useQuery<Pagefind>({
+    queryKey: ["pagefind", options.ranking],
+    retry: false,
+    queryFn: async () => {
+      const pagefind = await importPagefind(basePath);
+      await pagefind.init();
+      await pagefind.options({
+        ranking: {
+          termFrequency:
+            options.ranking?.termFrequency ?? DEFAULT_RANKING.termFrequency,
+          pageLength: options.ranking?.pageLength ?? DEFAULT_RANKING.pageLength,
+          termSimilarity:
+            options.ranking?.termSimilarity ?? DEFAULT_RANKING.termSimilarity,
+          termSaturation:
+            options.ranking?.termSaturation ?? DEFAULT_RANKING.termSaturation,
+        },
+      });
+
+      return pagefind;
+    },
+    enabled: typeof window !== "undefined",
+  });
+
+  if (result.isError && result.error.message !== "NOT_BUILT_YET") {
+    // biome-ignore lint/suspicious/noConsole: Logging allowed here
+    console.error(result.error);
+  }
+
+  return { ...result, pagefind };
+};
+
+export const PagefindSearch = ({
+  isOpen,
+  onClose,
+  options,
+}: {
+  isOpen: boolean;
+  onClose: () => void;
+  options: PagefindOptions;
+}) => {
+  const { pagefind, error, isError } = usePagefind(options);
+  const [searchTerm, setSearchTerm] = useState("");
+  const [selectedValue, setSelectedValue] = useState<string>("");
+  const auth = useAuthState();
+  const context = useZudoku();
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const { data: searchResults } = useQuery({
+    queryKey: ["pagefind-search", searchTerm, auth.isAuthenticated],
+    queryFn: async () => {
+      const filters = auth.isAuthenticated
+        ? undefined
+        : { not: { section: SEARCH_PROTECTED_SECTION } };
+
+      const search = await pagefind?.search(searchTerm, { filters });
+      if (!search) return [];
+      return getResults({ search, options, auth, context });
+    },
+    placeholderData: keepPreviousData,
+    enabled: !!pagefind && !!searchTerm,
+  });
+
+  useEffect(() => {
+    if (!searchResults?.length) return;
+
+    const firstResult = searchResults.at(0);
+    if (!firstResult) return;
+
+    const firstValue = `${firstResult.meta.title}-${firstResult.url}`;
+    setSelectedValue(firstValue);
+  }, [searchResults]);
+
+  return (
+    <CommandDialog
+      command={{
+        shouldFilter: false,
+        loop: true,
+        value: selectedValue,
+        onValueChange: setSelectedValue,
+      }}
+      content={{ className: "max-w-[750px]" }}
+      open={isOpen}
+      onOpenChange={onClose}
+    >
+      <VisuallyHidden>
+        <DialogTitle>Search</DialogTitle>
+      </VisuallyHidden>
+      <CommandInput
+        ref={inputRef}
+        placeholder="Search..."
+        value={searchTerm}
+        onValueChange={setSearchTerm}
+        disabled={isError}
+      />
+      <CommandEmpty>
+        {searchTerm ? (
+          <div className="flex flex-col items-center">
+            No results found.
+            <Button
+              variant="link"
+              onClick={() => {
+                setSearchTerm("");
+                inputRef.current?.focus();
+              }}
+            >
+              Clear search
+            </Button>
+          </div>
+        ) : (
+          "Start typing to search"
+        )}
+      </CommandEmpty>
+      {isError && error.message !== "NOT_BUILT_YET" ? (
+        <div className="p-4 text-sm">
+          An error occurred while loading search.
+        </div>
+      ) : (
+        <>
+          <ResultList
+            basePath={context.options.basePath}
+            searchResults={searchResults ?? []}
+            searchTerm={searchTerm}
+            onClose={onClose}
+            maxSubResults={options.maxSubResults}
+          />
+          <div className="flex justify-between p-2 items-center">
+            <div className="flex items-center text-xs text-muted-foreground">
+              <KbdGroup className="ms-0 me-1">
+                <Kbd>↑</Kbd>
+                <Kbd>↓</Kbd>
+              </KbdGroup>
+              Navigate
+              <KbdGroup className="ms-4 me-1">
+                <Kbd>↵</Kbd>
+              </KbdGroup>
+              Select
+              <KbdGroup className="ms-4 me-1">
+                <Kbd>Esc</Kbd>
+              </KbdGroup>
+              Close dialog
+            </div>
+            {import.meta.env.DEV && (
+              <IndexingDialog>
+                <Button
+                  variant="outline"
+                  className="h-7 text-xs text-muted-foreground"
+                >
+                  <ListPlusIcon />
+                  Build Search Index
+                </Button>
+              </IndexingDialog>
+            )}
+          </div>
+        </>
+      )}
+    </CommandDialog>
+  );
+};

package/src/lib/plugins/search-pagefind/ResultList.tsx

@@ -0,0 +1,122 @@
+import {
+  CommandGroup,
+  CommandItem,
+  CommandList,
+} from "@lukoweb/apitogo/ui/Command.js";
+import { BracketsIcon, FileTextIcon } from "lucide-react";
+import { useLayoutEffect, useRef } from "react";
+import { Link, useNavigate } from "react-router";
+import { joinUrl } from "../../util/joinUrl.js";
+import type { PagefindSearchFragment, PagefindSubResult } from "./types.js";
+
+const sortSubResults = (a: PagefindSubResult, b: PagefindSubResult) => {
+  const aScore = a.weighted_locations.reduce(
+    (sum, loc) => sum + loc.balanced_score,
+    0,
+  );
+  const bScore = b.weighted_locations.reduce(
+    (sum, loc) => sum + loc.balanced_score,
+    0,
+  );
+  return bScore - aScore;
+};
+
+const hoverClassname = `cursor-pointer border border-transparent data-[selected=true]:border-border`;
+
+export const ResultList = ({
+  basePath,
+  searchResults,
+  searchTerm,
+  onClose,
+  maxSubResults = 4,
+}: {
+  basePath?: string;
+  searchResults: PagefindSearchFragment[];
+  searchTerm: string;
+  onClose: () => void;
+  maxSubResults?: number;
+}) => {
+  const navigate = useNavigate();
+  const commandListRef = useRef<HTMLDivElement | null>(null);
+
+  useLayoutEffect(() => {
+    if (!searchTerm) return;
+    requestAnimationFrame(() => {
+      commandListRef.current?.scrollTo({ top: 0 });
+    });
+  }, [searchTerm]);
+
+  const stripBasePath = (url: string) => {
+    if (basePath && url.startsWith(basePath)) {
+      return joinUrl(url.slice(basePath.length));
+    }
+    return url;
+  };
+
+  return (
+    <CommandList className="max-h-[450px]" ref={commandListRef}>
+      {searchTerm && searchResults.length > 0 && (
+        <CommandGroup
+          className="text-sm text-muted-foreground"
+          heading={`${searchResults.length} results for "${searchTerm}"`}
+        />
+      )}
+      {searchTerm &&
+        searchResults.map((result) => (
+          <CommandGroup
+            key={[result.meta.title ?? result.excerpt, result.url].join("-")}
+          >
+            <CommandItem
+              asChild
+              value={`${result.meta.title}-${result.url}`}
+              className={hoverClassname}
+              onSelect={() => {
+                void navigate(stripBasePath(result.url));
+                onClose();
+              }}
+            >
+              <Link to={stripBasePath(result.url)}>
+                {result.meta.section === "openapi" ? (
+                  <BracketsIcon />
+                ) : (
+                  <FileTextIcon />
+                )}
+                {result.meta.category && (
+                  <span className="text-muted-foreground">
+                    {result.meta.category} &rsaquo;{" "}
+                  </span>
+                )}
+                {result.meta.title}
+              </Link>
+            </CommandItem>
+            {result.sub_results
+              .sort(sortSubResults)
+              .slice(0, maxSubResults)
+              .map((subResult) => (
+                <CommandItem
+                  asChild
+                  key={`sub-${result.meta.title}-${subResult.url}`}
+                  value={`sub-${result.meta.title}-${subResult.url}`}
+                  className={hoverClassname}
+                  onSelect={() => {
+                    void navigate(stripBasePath(subResult.url));
+                    onClose();
+                  }}
+                >
+                  <Link to={stripBasePath(subResult.url)} onClick={onClose}>
+                    <div className="flex flex-col items-start gap-2 ms-2.5 ps-5 border-l border-muted-foreground/50">
+                      <span className="font-bold">{subResult.title}</span>
+                      <span
+                        className="line-clamp-2 text-[13px] [&_mark]:bg-primary [&_mark]:text-primary-foreground"
+                        // biome-ignore lint/security/noDangerouslySetInnerHtml: Pagefind provides sanitized HTML
+                        dangerouslySetInnerHTML={{ __html: subResult.excerpt }}
+                      />
+                    </div>
+                  </Link>
+                </CommandItem>
+              ))}
+          </CommandGroup>
+        ))}
+    </CommandList>
+  );
+};

package/src/lib/plugins/search-pagefind/get-results.tsx

@@ -0,0 +1,74 @@
+import type { AuthState } from "../../authentication/state.js";
+import type { ZudokuContext } from "../../core/ZudokuContext.js";
+import type { PagefindOptions } from "./index.js";
+import type { PagefindSearchFragment, PagefindSearchResults } from "./types.js";
+
+export const getResults = async ({
+  search,
+  options,
+  auth,
+  context,
+}: {
+  search: PagefindSearchResults;
+  options: PagefindOptions;
+  auth: AuthState;
+  context: ZudokuContext;
+}) => {
+  const maxResults = options.maxResults ?? 10;
+  const transformFn = options.transformResults ?? (() => true);
+
+  const transformedResults: PagefindSearchFragment[] = [];
+
+  const generator = searchResultGenerator({
+    search,
+    transformFn,
+    auth,
+    context,
+  });
+
+  for await (const result of generator) {
+    transformedResults.push(result);
+    if (transformedResults.length >= maxResults) break;
+  }
+
+  return transformedResults;
+};
+
+async function* searchResultGenerator({
+  search,
+  transformFn,
+  auth,
+  context,
+}: {
+  search: PagefindSearchResults;
+  transformFn: NonNullable<PagefindOptions["transformResults"]>;
+  auth: AuthState;
+  context: ZudokuContext;
+}) {
+  const batchSize = 5;
+  let processedCount = 0;
+
+  while (processedCount < search.results.length) {
+    const batch = search.results.slice(
+      processedCount,
+      processedCount + batchSize,
+    );
+    processedCount += batch.length;
+
+    const batchData = await Promise.all(batch.map((result) => result.data()));
+
+    for (const result of batchData) {
+      const transformed = transformFn({ result, auth, context });
+
+      if (transformed === false) {
+        // Skip this result
+      } else if (transformed === true || transformed == null) {
+        // Keep the original result
+        yield result;
+      } else {
+        // Return the transformed result
+        yield transformed;
+      }
+    }
+  }
+}

package/src/lib/plugins/search-pagefind/index.tsx

@@ -0,0 +1,21 @@
+import type { ZudokuConfig } from "../../../config/validators/ZudokuConfig.js";
+import { ClientOnly } from "../../components/ClientOnly.js";
+import type { ApitogoPlugin } from "../../core/plugins.js";
+import { PagefindSearch } from "./PagefindSearch.js";
+
+export type PagefindOptions = Extract<
+  ZudokuConfig["search"],
+  { type: "pagefind" }
+>;
+
+export const pagefindSearchPlugin = (
+  options: PagefindOptions,
+): ApitogoPlugin => {
+  return {
+    renderSearch: ({ isOpen, onClose }) => (
+      <ClientOnly>
+        <PagefindSearch isOpen={isOpen} onClose={onClose} options={options} />
+      </ClientOnly>
+    ),
+  };
+};

package/src/lib/plugins/search-pagefind/types.ts

@@ -0,0 +1,118 @@
+interface PagefindIndexOptions {
+  basePath?: string;
+  baseUrl?: string;
+  excerptLength?: number;
+  indexWeight?: number;
+  mergeFilter?: Record<string, unknown>;
+  highlightParam?: string;
+  language?: string;
+  primary?: boolean;
+  ranking?: PagefindRankingWeights;
+}
+
+interface PagefindRankingWeights {
+  termSimilarity?: number;
+  pageLength?: number;
+  termSaturation?: number;
+  termFrequency?: number;
+}
+
+interface PagefindSearchOptions {
+  preload?: boolean;
+  verbose?: boolean;
+  filters?: Record<string, unknown>;
+  sort?: Record<string, unknown>;
+}
+
+type PagefindFilterCounts = Record<string, Record<string, number>> & {};
+
+interface PagefindSearchResults {
+  results: PagefindSearchResult[];
+  unfilteredResultCount: number;
+  filters: PagefindFilterCounts;
+  totalFilters: PagefindFilterCounts;
+  timings: {
+    preload: number;
+    search: number;
+    total: number;
+  };
+}
+
+interface PagefindSearchResult {
+  id: string;
+  score: number;
+  words: number[];
+  data: () => Promise<PagefindSearchFragment>;
+}
+
+interface PagefindSearchFragment {
+  url: string;
+  raw_url?: string;
+  content: string;
+  raw_content?: string;
+  excerpt: string;
+  sub_results: PagefindSubResult[];
+  word_count: number;
+  locations: number[];
+  weighted_locations: PagefindWordLocation[];
+  filters: Record<string, string[]>;
+  meta: Record<string, string>;
+  anchors: PagefindSearchAnchor[];
+}
+
+interface PagefindSubResult {
+  title: string;
+  url: string;
+  locations: number[];
+  weighted_locations: PagefindWordLocation[];
+  excerpt: string;
+  anchor?: PagefindSearchAnchor;
+}
+
+interface PagefindWordLocation {
+  weight: number;
+  balanced_score: number;
+  location: number;
+}
+
+interface PagefindSearchAnchor {
+  element: string;
+  id: string;
+  text?: string;
+  location: number;
+}
+
+interface Pagefind {
+  debouncedSearch: (
+    query: string,
+    options?: PagefindSearchOptions,
+    duration?: number,
+  ) => Promise<PagefindSearchResults>;
+  destroy: () => Promise<void>;
+  filters: () => Promise<PagefindFilterCounts>;
+  init: () => Promise<void>;
+  mergeIndex: (
+    indexPath: string,
+    options?: Record<string, unknown>,
+  ) => Promise<void>;
+  options: (options: PagefindIndexOptions) => Promise<void>;
+  preload: (term: string, options?: PagefindIndexOptions) => Promise<void>;
+  search: (
+    term: string,
+    options?: PagefindSearchOptions,
+  ) => Promise<PagefindSearchResults>;
+}
+
+export type {
+  Pagefind,
+  PagefindFilterCounts,
+  PagefindIndexOptions,
+  PagefindRankingWeights,
+  PagefindSearchAnchor,
+  PagefindSearchFragment,
+  PagefindSearchOptions,
+  PagefindSearchResult,
+  PagefindSearchResults,
+  PagefindSubResult,
+  PagefindWordLocation,
+};