@lukoweb/apitogo 0.1.1 → 0.1.2

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

@@ -1,202 +1,202 @@
-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 { 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 { 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>
-  );
-};
+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

@@ -1,118 +1,122 @@
-import { BracketsIcon, FileTextIcon } from "lucide-react";
-import { useLayoutEffect, useRef } from "react";
-import { Link, useNavigate } from "react-router";
-import { CommandGroup, CommandItem, CommandList } from "@lukoweb/apitogo/ui/Command.js";
-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>
-  );
-};
+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>
+  );
+};