zudoku 0.0.0-f471fb8 → 0.0.0-f52e8af

package/src/lib/plugins/openapi/util/generateSchemaExample.ts

@@ -1,10 +1,15 @@
 import { type SchemaObject } from "../../../oas/graphql/index.js";
+import { isCircularRef } from "../schema/utils.js";
 
 export const generateSchemaExample = (
-  schema: SchemaObject,
+  schema?: SchemaObject,
   name?: string,
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
 ): any => {
+  if (!schema || isCircularRef(schema)) {
+    return null;
+  }
+
   // Check for schema-level example first
   if (schema.example !== undefined) {
     return schema.example;
@@ -24,6 +29,11 @@ export const generateSchemaExample = (
     }
   }
 
+  // No example needed for const values
+  if (schema.const !== undefined) {
+    return schema.const;
+  }
+
   // For object schemas with properties
   if (schema.type === "object" && schema.properties) {
     const example: Record<string, any> = {};
@@ -50,10 +60,50 @@ export const generateSchemaExample = (
     return [];
   }
 
+  if (schema.format !== undefined) {
+    // Partial implementation of JSON Schema format examples
+    // https://json-schema.org/draft/2020-12/draft-bhutton-json-schema-validation-00#rfc.section.7.3
+    switch (schema.format) {
+      case "date-time":
+        return "2024-08-25T15:00:00Z";
+      case "date":
+        return "2024-08-25";
+      case "time":
+        return "15:00:00";
+      case "email":
+        return "test@example.com";
+      case "uri":
+        return "https://www.example.com/path/to/resource";
+      case "uri-reference":
+        return "/path/to/resource";
+      case "uuid":
+        return "00000000-0000-0000-0000-000000000000";
+    }
+  }
+
   if (schema.enum) {
     return schema.enum[0];
   }
 
+  if (schema.oneOf) {
+    const randomIndex = Math.floor(Math.random() * schema.oneOf.length);
+    return generateSchemaExample(schema.oneOf[randomIndex] as SchemaObject);
+  }
+
+  if (schema.anyOf) {
+    // Should likely be expanded to return a partial set of values, but it would require
+    // detection if being used within an array or a string type.
+    const randomIndex = Math.floor(Math.random() * schema.anyOf.length);
+    return generateSchemaExample(schema.anyOf[randomIndex] as SchemaObject);
+  }
+
+  if (schema.allOf) {
+    // https://swagger.io/docs/specification/v3_0/data-models/oneof-anyof-allof-not/#allof
+    return schema.allOf.reduce((acc, allOfSchema) => {
+      return { ...acc, ...generateSchemaExample(allOfSchema as SchemaObject) };
+    }, {});
+  }
+
   switch (schema.type) {
     case "string":
       return name || "string";

package/src/lib/plugins/openapi/util/getRoutes.tsx

@@ -1,7 +1,21 @@
-import { redirect, type RouteObject } from "react-router";
+import { useSuspenseQuery } from "@tanstack/react-query";
+import {
+  generatePath,
+  Navigate,
+  redirect,
+  type RouteObject,
+  useLocation,
+  useParams,
+} from "react-router";
 import { joinUrl } from "../../../util/joinUrl.js";
 import type { GraphQLClient } from "../client/GraphQLClient.js";
-import { type OpenApiPluginOptions, UNTAGGED_PATH } from "../index.js";
+import { useCreateQuery } from "../client/useCreateQuery.js";
+import { useOasConfig } from "../context.js";
+import {
+  GetSidebarOperationsQuery,
+  type OpenApiPluginOptions,
+  UNTAGGED_PATH,
+} from "../index.js";
 import type { OasPluginConfig } from "../interfaces.js";
 
 // Creates the main provider route that wraps operation routes.
@@ -47,6 +61,72 @@ const createRoute = ({
   },
 });
 
+const NonTagPagesOperationList = ({
+  render,
+  path,
+}: {
+  render: (tag: string) => React.ReactNode;
+  path: string;
+}) => {
+  const { type, input } = useOasConfig();
+  const { tag: currentTag } = useParams();
+  const location = useLocation();
+  const query = useCreateQuery(GetSidebarOperationsQuery, { type, input });
+  const {
+    data: { schema },
+  } = useSuspenseQuery(query);
+
+  const firstTag = schema.tags.at(0);
+
+  if (!currentTag && firstTag?.slug) {
+    return (
+      <Navigate
+        to={{
+          pathname: generatePath(path, { tag: firstTag.slug }),
+          search: location.search,
+        }}
+      />
+    );
+  }
+
+  if (currentTag && schema.tags.some((t) => t.slug === currentTag)) {
+    return render(currentTag);
+  }
+
+  return null;
+};
+
+const createNonTagPagesRoute = ({ path }: { path: string }): RouteObject => ({
+  path,
+  async lazy() {
+    const { OperationList } = await import("../OperationList.js");
+    return {
+      element: (
+        <NonTagPagesOperationList
+          path={path}
+          render={(tag) => <OperationList tag={tag} />}
+        />
+      ),
+    };
+  },
+});
+
+const createAdditionalRoutes = (basePath: string) => [
+  // Category without tagged operations
+  createRoute({
+    path: joinUrl(basePath, UNTAGGED_PATH),
+    untagged: true,
+  }),
+  // Schema list route
+  {
+    path: joinUrl(basePath, "~schemas"),
+    lazy: async () => {
+      const { SchemaList } = await import("../SchemaList.js");
+      return { element: <SchemaList /> };
+    },
+  },
+];
+
 // Creates routes for a specific version, including tag-based routes and the untagged operations route.
 const createVersionRoutes = (
   versionPath: string,
@@ -64,18 +144,7 @@ const createVersionRoutes = (
         tag,
       }),
     ),
-    // Category without tagged operations
-    createRoute({
-      path: joinUrl(versionPath, UNTAGGED_PATH),
-      untagged: true,
-    }),
-    {
-      path: joinUrl(versionPath, "~schemas"),
-      lazy: async () => {
-        const { SchemaList } = await import("../SchemaList.js");
-        return { element: <SchemaList /> };
-      },
-    },
+    ...createAdditionalRoutes(versionPath),
   ];
 };
 
@@ -100,7 +169,10 @@ export const getRoutes = ({
       createOasProvider({
         basePath,
         routePath: basePath,
-        routes: [createRoute({ path: basePath + "/:tag?" })],
+        routes: [
+          createNonTagPagesRoute({ path: basePath + "/:tag?" }),
+          ...createAdditionalRoutes(basePath),
+        ],
         client,
         config,
       }),

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

@@ -11,6 +11,7 @@ import {
 import { DialogTitle } from "zudoku/ui/Dialog.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";
@@ -35,11 +36,14 @@ const importPagefind = (basePath?: string): Promise<Pagefind> =>
     : 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(options.basePath);
+      const pagefind = await importPagefind(basePath);
       await pagefind.init();
       await pagefind.options({
         ranking: {
@@ -82,9 +86,13 @@ export const PagefindSearch = ({
   const inputRef = useRef<HTMLInputElement>(null);
 
   const { data: searchResults } = useQuery({
-    queryKey: ["pagefind-search", searchTerm],
+    queryKey: ["pagefind-search", searchTerm, auth.isAuthenticated],
     queryFn: async () => {
-      const search = await pagefind?.search(searchTerm);
+      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 });
     },
@@ -145,7 +153,6 @@ export const PagefindSearch = ({
         </div>
       ) : (
         <ResultList
-          basePath={options.basePath}
           searchResults={searchResults ?? []}
           searchTerm={searchTerm}
           onClose={onClose}

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

@@ -1,5 +1,5 @@
 import { BracketsIcon, FileTextIcon } from "lucide-react";
-import { useCallback, useLayoutEffect, useRef } from "react";
+import { useLayoutEffect, useRef } from "react";
 import { Link, useNavigate } from "react-router";
 import { CommandGroup, CommandItem, CommandList } from "zudoku/ui/Command.js";
 import {
@@ -22,7 +22,6 @@ const sortSubResults = (a: PagefindSubResult, b: PagefindSubResult) => {
 const hoverClassname = `cursor-pointer border border-transparent data-[selected=true]:border-border`;
 
 export const ResultList = ({
-  basePath,
   searchResults,
   searchTerm,
   onClose,
@@ -37,16 +36,6 @@ export const ResultList = ({
   const navigate = useNavigate();
   const commandListRef = useRef<HTMLDivElement | null>(null);
 
-  const cleanResultUrl = useCallback(
-    (url: string) => {
-      const clean = url.replace(".html", "");
-      return basePath && clean.startsWith(basePath)
-        ? clean.slice(basePath.length)
-        : clean;
-    },
-    [basePath],
-  );
-
   useLayoutEffect(() => {
     requestIdleCallback(() => {
       commandListRef.current?.scrollTo({ top: 0 });
@@ -71,11 +60,11 @@ export const ResultList = ({
               value={`${result.meta.title}-${result.url}`}
               className={hoverClassname}
               onSelect={() => {
-                void navigate(cleanResultUrl(result.url));
+                void navigate(result.url);
                 onClose();
               }}
             >
-              <Link to={cleanResultUrl(result.url)}>
+              <Link to={result.url}>
                 {result.meta.section === "openapi" ? (
                   <BracketsIcon />
                 ) : (
@@ -94,11 +83,11 @@ export const ResultList = ({
                   value={`sub-${result.meta.title}-${subResult.url}`}
                   className={hoverClassname}
                   onSelect={() => {
-                    void navigate(cleanResultUrl(subResult.url));
+                    void navigate(subResult.url);
                     onClose();
                   }}
                 >
-                  <Link to={cleanResultUrl(subResult.url)} onClick={onClose}>
+                  <Link to={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

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

@@ -6,7 +6,7 @@ import { PagefindSearch } from "./PagefindSearch.js";
 export type PagefindOptions = Extract<
   ZudokuConfig["search"],
   { type: "pagefind" }
-> & { basePath?: string };
+>;
 
 export const pagefindSearchPlugin = (
   options: PagefindOptions,

package/src/lib/shiki.ts

@@ -0,0 +1,133 @@
+import rehypeShikiFromHighlighter, {
+  type RehypeShikiCoreOptions,
+} from "@shikijs/rehype/core";
+import {
+  transformerMetaHighlight,
+  transformerMetaWordHighlight,
+} from "@shikijs/transformers";
+import type { Root } from "hast";
+import { toJsxRuntime } from "hast-util-to-jsx-runtime";
+import { Fragment, type JSX } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import type { BundledLanguage, BundledTheme, HighlighterCore } from "shiki";
+import { createHighlighterCore } from "shiki/core";
+import { createJavaScriptRegexEngine } from "shiki/engine/javascript";
+import type { Pluggable } from "unified";
+import { visit } from "unist-util-visit";
+import { cn } from "./util/cn.js";
+
+const engine = createJavaScriptRegexEngine({ forgiving: true });
+export const highlighter = await createHighlighterCore({
+  engine,
+  langAlias: {
+    markup: "html",
+    svg: "xml",
+    mathml: "xml",
+    atom: "xml",
+    ssml: "xml",
+    rss: "xml",
+    webmanifest: "json",
+  },
+});
+
+export const defaultHighlightOptions = {
+  themes: {
+    light: "github-light",
+    dark: "github-dark",
+  } satisfies { light: BundledTheme; dark: BundledTheme },
+  defaultColor: false,
+  inline: "tailing-curly-colon",
+  addLanguageClass: true,
+  transformers: [transformerMetaHighlight(), transformerMetaWordHighlight()],
+  parseMetaString: (str) => {
+    // Matches key="value", key=value, or key attributes
+    const matches = str.matchAll(
+      /([a-z0-9]+)(?:=(["'])(.*?)\2|=(.*?)(?:\s|$)|(?:\s|$))/gi,
+    );
+    return Object.fromEntries(
+      Array.from(matches).map((match) => {
+        const key = match[1];
+        const value = match[3] || match[4] || true;
+        return [key, value];
+      }),
+    );
+  },
+} satisfies RehypeShikiCoreOptions;
+
+export const defaultLanguages: BundledLanguage[] = [
+  "shellscript",
+  "javascript",
+  "jsx",
+  "typescript",
+  "tsx",
+  "json",
+  "python",
+  "java",
+  "go",
+  "csharp",
+  "kotlin",
+  "objective-c",
+  "php",
+  "ruby",
+  "swift",
+  "css",
+  "html",
+  "xml",
+  "yaml",
+  "markdown",
+  "mdx",
+];
+
+const rehypeCodeBlockPlugin = () => (tree: Root) => {
+  visit(tree, "element", (node, _index, parent) => {
+    if (node.tagName !== "code") return;
+
+    const isCodeBlock = parent?.type === "element" && parent.tagName === "pre";
+    node.properties.inline = JSON.stringify(!isCodeBlock);
+
+    // Pass through properties from <pre> to <code> so we can handle it in `code` only
+    if (isCodeBlock) {
+      node.properties = {
+        ...node.properties,
+        ...structuredClone(parent.properties),
+        class: cn(node.properties.class, parent.properties.class),
+      };
+      parent.properties = {};
+    }
+  });
+};
+
+export const createConfiguredShikiRehypePlugins = (themes?: {
+  light: BundledTheme;
+  dark: BundledTheme;
+}) => {
+  return [
+    [
+      rehypeShikiFromHighlighter,
+      highlighter,
+      {
+        ...defaultHighlightOptions,
+        themes: themes ?? defaultHighlightOptions.themes,
+      } satisfies RehypeShikiCoreOptions,
+    ] satisfies Pluggable,
+    rehypeCodeBlockPlugin,
+  ];
+};
+
+export const highlight = (
+  highlighter: HighlighterCore,
+  code: string,
+  lang = "text",
+  themes: {
+    light: BundledTheme;
+    dark: BundledTheme;
+  } = defaultHighlightOptions.themes,
+) => {
+  const value = highlighter.codeToHast(code, {
+    lang,
+    ...defaultHighlightOptions,
+    themes,
+  });
+
+  return toJsxRuntime(value, { Fragment, jsx, jsxs }) as JSX.Element;
+};

package/src/lib/ui/Callout.tsx

@@ -77,7 +77,8 @@ export const Callout = ({
           "grid grid-cols-[min-content_1fr] items-baseline grid-rows-[fit-content_1fr] gap-x-4 gap-y-2",
         !icon && title && "flex flex-col gap-2",
         "[&_a]:underline [&_a]:decoration-current [&_a]:decoration-from-font [&_a]:underline-offset-4 hover:[&_a]:decoration-1",
-        "[&_code]:!bg-gray-50 [&_code]:dark:!bg-gray-800 [&_code]:!border-none",
+        "[&_.code-block-wrapper]:border",
+        "[&_ul]:list-disc [&_ol]:list-decimal [&_ul]:ps-4 [&_ul>li]:ps-1 [&_ul>li]:my-1",
         icon && title && "items-center",
         border,
         bg,

package/src/lib/ui/CodeBlock.tsx

@@ -0,0 +1,102 @@
+import { CheckIcon, CopyIcon } from "lucide-react";
+import type { ReactNode } from "react";
+import { useRef, useState } from "react";
+import { cn } from "../util/cn.js";
+
+export type CodeBlockProps = {
+  className?: string;
+  noBackground?: boolean;
+  wrapLines?: boolean;
+  showLanguageIndicator?: boolean;
+  language?: string;
+  title?: string;
+  children?: ReactNode;
+  code?: ReactNode;
+  showCopy?: "hover" | "always" | "never";
+  showCopyText?: boolean;
+  disabled?: boolean;
+  showLineNumbers?: boolean;
+};
+
+export const CodeBlock = ({
+  children,
+  title,
+  language,
+  showCopy = "hover",
+  showCopyText,
+  showLanguageIndicator = true,
+  showLineNumbers,
+  ...props
+}: CodeBlockProps) => {
+  const [isCopied, setIsCopied] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  if (!children) return null;
+
+  return (
+    <div
+      className={cn(
+        "code-block-wrapper relative group bg-muted/50 rounded-md",
+        showLineNumbers && "line-numbers",
+      )}
+    >
+      {title && (
+        <div className="text-xs text-muted-foreground top-2 font-mono border-b w-full py-2 px-4 ">
+          {title}
+        </div>
+      )}
+      <div
+        className={cn(
+          "code-block text-sm not-prose scrollbar overflow-x-auto scrollbar p-4",
+          props.className,
+        )}
+        ref={ref}
+      >
+        {children}
+      </div>
+      {showLanguageIndicator && (
+        <span
+          className={cn(
+            "absolute top-1.5 end-3 !text-[11px] font-mono text-muted-foreground transition group-hover:opacity-0",
+            title && "top-12",
+          )}
+        >
+          {language}
+        </span>
+      )}
+      {showCopy !== "never" && (
+        <button
+          type="button"
+          aria-label="Copy code"
+          title="Copy code"
+          className={cn(
+            "absolute top-2 end-2 p-2 hover:outline hover:outline-border/75 dark:hover:outline-border rounded-md text-sm text-muted-foreground transition",
+            title && "top-10",
+            showCopy === "hover" && "opacity-0 group-hover:opacity-100",
+            showCopyText && "flex gap-2 items-center font-medium",
+          )}
+          disabled={isCopied}
+          onClick={() => {
+            if (!ref.current?.textContent) return;
+
+            setIsCopied(true);
+            void navigator.clipboard.writeText(ref.current.textContent);
+            setTimeout(() => setIsCopied(false), 2000);
+          }}
+        >
+          {isCopied ? (
+            <CheckIcon
+              className="text-emerald-600"
+              size={16}
+              strokeWidth={2.5}
+              absoluteStrokeWidth
+            />
+          ) : (
+            <CopyIcon size={16} />
+          )}
+          {showCopyText && "Copy"}
+        </button>
+      )}
+    </div>
+  );
+};