zudoku 0.33.1 → 0.33.2-local.4

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

@@ -0,0 +1,104 @@
+import { FileTextIcon } from "lucide-react";
+import { useCallback } from "react";
+import { Link, useNavigate } from "react-router";
+import { CommandGroup, CommandItem, CommandList } from "zudoku/ui/Command.js";
+import {
+  type PagefindSearchFragment,
+  type 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 cleanResultUrl = useCallback(
+    (url: string) => {
+      const clean = url.replace(".html", "");
+      return basePath && clean.startsWith(basePath)
+        ? clean.slice(basePath.length)
+        : clean;
+    },
+    [basePath],
+  );
+
+  return (
+    <CommandList className="max-h-[450px]">
+      {searchTerm && searchResults.length > 0 && (
+        <CommandGroup
+          className="text-sm text-muted-foreground"
+          heading={`${searchResults.length} results for "${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(cleanResultUrl(result.url));
+              onClose();
+            }}
+          >
+            <Link to={cleanResultUrl(result.url)}>
+              <FileTextIcon size={20} className="text-muted-foreground" />
+              {result.meta.title}
+            </Link>
+          </CommandItem>
+          {result.sub_results
+            .sort(sortSubResults)
+            .slice(0, maxSubResults)
+            .map((subResult) => (
+              <CommandItem
+                asChild
+                key={`${result.meta.title}-${subResult.url}`}
+                value={`${result.meta.title}-${subResult.url}`}
+                className={hoverClassname}
+                onSelect={() => {
+                  void navigate(cleanResultUrl(subResult.url));
+                  onClose();
+                }}
+              >
+                <Link to={cleanResultUrl(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="text-[13px] [&_mark]:bg-primary [&_mark]:text-primary-foreground"
+                      dangerouslySetInnerHTML={{ __html: subResult.excerpt }}
+                    />
+                  </div>
+                </Link>
+              </CommandItem>
+            ))}
+        </CommandGroup>
+      ))}
+    </CommandList>
+  );
+};

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

@@ -0,0 +1,54 @@
+import type { PagefindOptions } from "./index.js";
+import type { PagefindSearchFragment, PagefindSearchResults } from "./types.js";
+
+export const getResults = async (
+  search: PagefindSearchResults,
+  options: PagefindOptions,
+) => {
+  const maxResults = options.maxResults ?? 10;
+  const transformFn = options.transformResults ?? (() => true);
+
+  const transformedResults: PagefindSearchFragment[] = [];
+
+  const generator = searchResultGenerator(search, transformFn);
+
+  for await (const result of generator) {
+    transformedResults.push(result);
+    if (transformedResults.length >= maxResults) break;
+  }
+
+  return transformedResults;
+};
+
+async function* searchResultGenerator(
+  search: PagefindSearchResults,
+  transformFn: NonNullable<PagefindOptions["transformResults"]>,
+) {
+  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);
+
+      if (transformed === false) {
+        // Skip this result
+        continue;
+      } 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/validate.js";
+import { ClientOnly } from "../../components/ClientOnly.js";
+import type { ZudokuPlugin } from "../../core/plugins.js";
+import { PagefindSearch } from "./PagefindSearch.js";
+
+export type PagefindOptions = Extract<
+  ZudokuConfig["search"],
+  { type: "pagefind" }
+> & { basePath?: string };
+
+export const pagefindSearchPlugin = (
+  options: PagefindOptions,
+): ZudokuPlugin => {
+  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,
+};

package/src/lib/ui/Command.tsx

@@ -2,6 +2,7 @@ import { type DialogProps } from "@radix-ui/react-dialog";
 import { Command as CommandPrimitive } from "cmdk";
 import { Search } from "lucide-react";
 import * as React from "react";
+import { ComponentPropsWithoutRef } from "react";
 import { Dialog, DialogContent } from "zudoku/ui/Dialog.js";
 import { cn } from "../util/cn.js";
 
@@ -20,11 +21,32 @@ const Command = React.forwardRef<
 ));
 Command.displayName = CommandPrimitive.displayName;
 
-const CommandDialog = ({ children, ...props }: DialogProps) => {
+const CommandDialog = ({
+  children,
+  command,
+  content,
+  ...props
+}: DialogProps & {
+  command?: ComponentPropsWithoutRef<typeof CommandPrimitive>;
+  content?: ComponentPropsWithoutRef<typeof DialogContent>;
+}) => {
   return (
     <Dialog {...props}>
-      <DialogContent className="overflow-hidden p-0 shadow-lg">
-        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+      <DialogContent
+        {...content}
+        className={cn(
+          "overflow-hidden p-0 shadow-lg top-[15vh] translate-y-[0%]",
+          content?.className,
+        )}
+        aria-describedby={undefined}
+      >
+        <Command
+          {...command}
+          className={cn(
+            "[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5",
+            command?.className,
+          )}
+        >
           {children}
         </Command>
       </DialogContent>

package/src/lib/util/useScrollToAnchor.ts

@@ -9,21 +9,21 @@ export const useScrollToHash = () => {
 
   const scrollToHash = useCallback(
     (hash: string) => {
-      const cleanHash = hash
-        .replace(/^#/, "")
-        // Operation list items might have subdivisions that the sidebar doesn't show.
-        // The subdivisions are separated by a slash so we need to remove everything before the slash to get the sidebar correct item.
-        .split("/")
-        .at(0)!;
+      const cleanHash = hash.replace(/^#/, "");
+
+      // Operation list items might have subdivisions that the sidebar doesn't show.
+      // The subdivisions are separated by a slash so we need to remove everything before the slash to get the sidebar correct item.
+      const linkHash = cleanHash.split("/").at(0)!;
       const element = document.getElementById(decodeURIComponent(cleanHash));
+
       const link = document.querySelector(
-        `[${DATA_ANCHOR_ATTR}="${cleanHash}"]`,
+        `[${DATA_ANCHOR_ATTR}="${linkHash}"]`,
       );
 
       if (element) {
         element.scrollIntoView();
         scrollIntoViewIfNeeded(link);
-        requestIdleCallback(() => setActiveAnchor(cleanHash));
+        requestIdleCallback(() => setActiveAnchor(linkHash));
         return true;
       }
 

package/README.md

@@ -1,121 +0,0 @@
-<div align=center>
-
-<a href="https://zudoku.dev" alt="Zudoku">
-  <img src="./assets/github-hero.png" width=630 alt="Zudoku Docs & Developer Portal">
-</a>
-
-[![MIT License](https://img.shields.io/badge/license-mit-green?style=flat&labelColor=000000)](https://github.com/zuplo/zudoku/license.md) [![Zudoku Version](https://img.shields.io/npm/v/zudoku.svg?style=flat&labelColor=000000)](https://www.npmjs.com/package/zudoku) [![Create Zudoku App Version](https://img.shields.io/npm/v/create-zudoku-app?label=cli&style=flat&labelColor=000000)](https://www.npmjs.com/package/create-zudoku-app) [![Made with love by Zuplo](https://img.shields.io/badge/Made%20by%20Zuplo-FF00BD.svg?style=flat&logo=data:image/svg%2bxml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAzNyAzMiIgYXJpYS1oaWRkZW49InRydWUiPgogIDxwYXRoIGZpbGw9IiNGRjAwQkQiIGQ9Ik0yNy4xNDIgMTkuOTc4SDE2LjYyTDI3LjgzIDguNzQ2YS43NTguNzU4IDAgMDAtLjUzNC0xLjI5M0g5LjQ4OFYwaDE5LjUzNGE3LjU3MyA3LjU3MyAwIDAxNC4wNjUgMS4xMjUgNy41OTEgNy41OTEgMCAwMTIuODM2IDMuMTI2IDcuNDAyIDcuNDAyIDAgMDEtMS40NjEgOC4zOThsLTcuMzIgNy4zMjh6Ii8+CiAgPHBhdGggZmlsbD0iI0ZGMDBCRCIgZD0iTTkuNDg5IDExLjA0MmgxMC41MjRsLTExLjE5IDExLjIxYS43NzIuNzcyIDAgMDAuNTQzIDEuMzE2aDE3Ljc1OXY3LjQ1Mkg3LjYxYTcuNTc0IDcuNTc0IDAgMDEtNC4wNjUtMS4xMjVBNy41OTMgNy41OTMgMCAwMS43MSAyNi43NjhhNy40MDMgNy40MDMgMCAwMTEuNDYyLTguMzk3bDcuMzE4LTcuMzI5eiIvPgo8L3N2Zz4K&labelColor=000)](https://zuplo.com)
-
-</div>
-
-# Zudoku
-
-API documentation should always be free.
-
-<a href="#-installation"><strong>Installation</strong></a> · <a href="https://zudoku.dev/docs/app-quickstart"><strong>Docs</strong></a> · <a href="#-examples"><strong>Examples</strong></a> · <a href="#-contributing--community"><strong>Contributing</strong></a> · <a href="#-motivation"><strong>Motivation</strong></a>
-
-## Introduction
-
-**Zudoku** (pronounced "zoo-doh-koo") is an open-source, highly customizable API documentation framework for building quality developer experiences around OpenAPI and, soon, GraphQL documents.
-
-Because great API documentation frameworks should be:
-
-🌍 Free & Open Source<br /> ✅ OpenAPI powered<br /> 🔩 Extensible with Plugins<br /> ⚡ Easy to setup & blazing fast to work with<br /> 🔧 Easy to maintain
-
-## 🤩 Try it, right now!
-
-You can test Zudoku with your own OpenAPI document at [zudoku.dev](https://zudoku.dev?utm_source=github&utm_medium=web&utm_content=link&ref=github) and see how good your documentation can look!
-
-## ✨ Features
-
-- 🚀 Generate documentation from a single or multiple [OpenAPI](https://swagger.io/specification/) schema
-- 📄 Create [MDX pages](https://mdxjs.com/) for anything you want to document
-- 🔐 Integrate your users with authentication via OpenID or OAuth2
-- 🧪 Let users test their API calls using the Integrated Playground (includes authentication!)
-- 🌑 Dark mode (of course!)
-
-Zudoku is quick to implement, easy to configure and is highly composable with sensible defaults.
-
-## ⚙️ Installation
-
-You can use the CLI to generate a new project or use it standalone via CDN as a React component.
-
-### ⚡️ Quick start
-
-Fire up your new API docs using the command line generator:
-
-```
-npm create zudoku-app@latest
-```
-
-### 📦 Standalone via CDN
-
-Add the package and styles to your `<head>` and pass the URL for your API schema to the `data-api-url` property, as shown here:
-
-```html
-<!doctype html>
-<html>
-  <head>
-    <title>Zudoku Demo</title>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-
-    <link rel="icon" type="image/svg+xml" href="https://cdn.zudoku.dev/logos/favicon.svg" />
-    <script type="module" src="https://cdn.zudoku.dev/latest/main.js" crossorigin></script>
-    <link rel="stylesheet" href="https://cdn.zudoku.dev/latest/style.css" crossorigin />
-  </head>
-  <body>
-    <div data-api-url="https://api.example.com/openapi.json"></div>
-  </body>
-</html>
-```
-
-### 🧱 Getting started templates
-
-To get started with some of the features Zudoku offers you can use one of these [example templates](https://github.com/zuplo/zudoku/tree/main/examples):
-
-| Template                                                                                | What it does                                          |
-| --------------------------------------------------------------------------------------- | ----------------------------------------------------- |
-| [many-apis](https://github.com/zuplo/zudoku/tree/main/examples/many-apis)               | Using more than one OpenAPI document with Zudoku      |
-| [with-auth0](https://github.com/zuplo/zudoku/tree/main/examples/with-auth0)             | Authenticate users in docs with the Auth0 plugin      |
-| [with-config](https://github.com/zuplo/zudoku/tree/main/examples/with-config)           | Barebones config, ready for you to setup how you like |
-| [with-vite-config](https://github.com/zuplo/zudoku/tree/main/examples/with-vite-config) | Use Zudoku with your Vite config (Advanced)           |
-
-## 🎓 Examples
-
-- [Rick & Morty API](https://zudoku.dev/demo?api-url=https://rickandmorty.zuplo.io/openapi.json)
-- [Pet Store API](https://zudoku.dev/demo?api-url=https://zudoku.dev/petstore.oas.json)
-- [Zuplo API Documentation](https://docs-zudoku.pages.dev/)
-
-### Zudoku use cases
-
-Zudoku is a flexible and highly customizable framework that can be used to create many things, including:
-
-- Standalone documentation websites
-- OpenAPI powered API references
-- A developer portal with documentation, fully functional API reference for testing and authentication support for your user accounts.
-- Internal documentation
-
-## 🔧 Contributing & Community
-
-For details on how to contribute to Zudoku, see the [contributing guide](CONTRIBUTING.md).
-
-## Changelog
-
-Details of the latest updates to Zudoku can be found in the [changelog](CHANGELOG.md).
-
-## 🎯 Motivation
-
-At Zuplo, we couldn’t find an open-source solution that met our high standards for both trustworthiness and programmability, so we decided to create our own. And since no one chooses Zuplo solely because of our documentation, we felt great about open-sourcing this tool and making it easy for anyone to self-host.
-
-We hope that if you use it, you’ll think fondly of Zuplo, and one day, when you’re looking for a gateway or API management product, you’ll consider us as a vendor to evaluate.
-
-Zudoku will always be open-source. It will always be free.
-
-## License
-
-Zudoku is licensed under MIT. See the full [license](LICENSE.md).
-
-<a href="https://twitter.com/zuplo">
-  <img alt="X (formerly Twitter) Follow" src="https://img.shields.io/twitter/follow/zuplo">
-</a>