zudoku 0.0.0-ec30b50 → 0.0.0-ed94abf

package/src/lib/oas/parser/index.ts

@@ -3,11 +3,15 @@ import { OpenAPIV3, type OpenAPIV3_1 } from "openapi-types";
 import { dereference, type JSONSchema } from "./dereference/index.js";
 import { upgradeSchema } from "./upgrade/index.js";
 
-type ReferenceObject = OpenAPIV3_1.ReferenceObject;
-type DeepOmitReference<T> = T extends ReferenceObject
+// Must be an interface (not a type) to allow merging with OpenAPI types with index signatures
+interface WithRef {
+  __$ref?: string;
+}
+
+type DeepOmitReference<T> = T extends OpenAPIV3_1.ReferenceObject
   ? never
   : T extends object
-    ? { [K in keyof T]: DeepOmitReference<T[K]> }
+    ? { [K in keyof T]: DeepOmitReference<T[K]> } & WithRef
     : T;
 
 export type OpenAPIDocument = DeepOmitReference<OpenAPIV3_1.Document>;
@@ -24,25 +28,6 @@ export type ServerObject = DeepOmitReference<OpenAPIV3_1.ServerObject>;
 
 export const HttpMethods = Object.values(OpenAPIV3.HttpMethods);
 
-// class ValidationError extends Error {
-//   constructor(public errors: OutputUnit[]) {
-//     super("Validation error");
-//   }
-// }
-
-// const getValidator = async (openApiVersion: string) => {
-//   if (openApiVersion.startsWith("3.0")) {
-//     const schema = (await import("./schemas/v3.0.json")) as any;
-//     return new Validator(schema, "4");
-//   }
-//   if (openApiVersion.startsWith("3.1")) {
-//     const schema = (await import("./schemas/v3.1.json")) as any;
-//     return new Validator(schema as any, "2020-12");
-//   }
-
-//   throw new Error(`Unsupported OpenAPI version: ${openApiVersion}`);
-// };
-
 const parseSchemaInput = async (
   schemaInput: unknown,
 ): Promise<JSONSchema & { openapi?: string }> => {
@@ -110,13 +95,6 @@ export const validate = async (schemaInput: unknown) => {
     throw new GraphQLError("OpenAPI version is not defined");
   }
 
-  // const validator = await getValidator(schema.openapi);
-  // const result = validator.validate(schema);
-  //
-  // if (!result.valid) {
-  //   throw new ValidationError(result.errors);
-  // }
-
   const dereferenced = await dereference(schema);
 
   return upgradeSchema(dereferenced);

package/src/lib/oas/parser/upgrade/index.ts

@@ -41,7 +41,8 @@ export const upgradeSchema = (schema: RecordAny): OpenAPIDocument => {
   });
 
   schema = traverse(schema, (sub) => {
-    if (sub.example !== undefined) {
+    // may be null or undefined
+    if (sub.example) {
       const isExampleObject =
         typeof sub.example === "object" &&
         (sub.example.summary !== undefined ||

package/src/lib/plugins/api-catalog/Catalog.tsx

@@ -1,121 +1,71 @@
-import slugify from "@sindresorhus/slugify";
 import { useSuspenseQuery } from "@tanstack/react-query";
-import { useSearchParams } from "react-router";
-import { Head, Link } from "zudoku/components";
+import { Helmet } from "@zudoku/react-helmet-async";
+import { useMatch } from "react-router";
+import { Link } from "zudoku/components";
 import { useAuthState } from "../../authentication/state.js";
+import { Heading } from "../../components/Heading.js";
 import { Markdown } from "../../components/Markdown.js";
-import { cn } from "../../util/cn.js";
-import type { ApiCatalogPluginOptions } from "./index.js";
-
-const getKey = (category: string, tag: string) => slugify(`${category}-${tag}`);
+import { joinUrl } from "../../util/joinUrl.js";
+import { type ApiCatalogPluginOptions, getKey } from "./index.js";
 
 export const Catalog = ({
   items,
   filterCatalogItems = (items) => items,
-  categories,
   label = "API Library",
-}: Omit<ApiCatalogPluginOptions, "navigationId">) => {
-  const [searchParams, setSearchParams] = useSearchParams();
-  const activeCategory = searchParams.get("category");
+  categoryLabel,
+}: Omit<ApiCatalogPluginOptions, "navigationId"> & {
+  categoryLabel?: string;
+}) => {
   const auth = useAuthState();
+  const match = useMatch({ path: "/catalog/:category" });
+  const activeCategory = match?.params.category;
 
   const catalogItems = useSuspenseQuery({
     queryFn: () => filterCatalogItems(items, { auth }),
     queryKey: ["catalogItems", auth],
   });
 
+  // Only index the overview page, ignore the rest
+  const dataSet = activeCategory ? { "data-pagefind-ignore": "all" } : {};
+
   return (
-    <section className="pt-[--padding-content-top] pb-[--padding-content-bottom]">
-      <Head>
-        <title>{label}</title>
-      </Head>
-      <div className="grid grid-cols-12 gap-12">
-        <div className="flex flex-col gap-4 col-span-3 not-prose sticky top-48">
-          <div className="max-w-[--side-nav-width] flex flex-col gap-4 justify-between">
-            {categories?.map((category, idx) => (
-              <div key={category.label}>
-                <div className="flex justify-between mb-2.5">
-                  <span className="font-medium text-sm">{category.label}</span>
-                  {idx === 0 && activeCategory && (
-                    <button
-                      type="button"
-                      className="text-end text-sm text-foreground/60 hover:text-foreground"
-                      onClick={() => setSearchParams({})}
-                    >
-                      Clear
-                    </button>
-                  )}
-                </div>
-                <ul className="space-y-1 [&>li]:py-2">
-                  {category.tags
-                    .map((tag) => ({
-                      tag,
-                      count: items.filter((api) =>
-                        api.categories.find((c) => c.tags.includes(tag)),
-                      ).length,
-                    }))
-                    .map(({ tag, count }) => {
-                      const slug = getKey(category.label, tag);
-                      const isActive = slug === activeCategory;
+    <section className="pt-[--padding-content-top]" {...dataSet}>
+      <Helmet>
+        <title>
+          {categoryLabel ? `${categoryLabel} - ` : ""}
+          {label}
+        </title>
+      </Helmet>
+      <div className="grid gap-4">
+        <Heading level={2}>
+          {label}
+          {categoryLabel && ` - ${categoryLabel}`}
+        </Heading>
 
-                      return (
-                        <li
-                          key={slug}
-                          className={cn(
-                            "flex rounded-lg justify-between text-sm cursor-pointer hover:text-primary transition px-[--padding-nav-item] -mx-[--padding-nav-item]",
-                            isActive && "bg-border/30 rounded",
-                          )}
-                          onClick={() => setSearchParams({ category: slug })}
-                        >
-                          <span>{tag}</span>
-                          <span
-                            className={cn(
-                              "flex items-center justify-center border rounded-md w-8 text-xs font-semibold",
-                              isActive &&
-                                "bg-primary border-primary text-primary-foreground",
-                            )}
-                          >
-                            {count}
-                          </span>
-                        </li>
-                      );
-                    })}
-                </ul>
-              </div>
+        <div className="grid grid-cols-2 gap-4">
+          {catalogItems.data
+            .filter(
+              (api) =>
+                !activeCategory ||
+                api.categories.find((c) =>
+                  c.tags.find((t) => getKey(c.label, t) === activeCategory),
+                ),
+            )
+            .map((api) => (
+              <Link
+                to={joinUrl(api.path)}
+                className="no-underline hover:!text-foreground"
+                key={api.path}
+              >
+                <div className="border h-full rounded-lg p-4 flex flex-col gap-2 cursor-pointer hover:bg-border/20 font-normal">
+                  <span className="font-semibold">{api.label}</span>
+                  <Markdown
+                    className="text-sm whitespace-pre-wrap mb-6 line-clamp-2"
+                    content={api.description}
+                  />
+                </div>
+              </Link>
             ))}
-          </div>
-        </div>
-        <div className="col-span-9">
-          <h3 className="mt-0 text-2xl font-bold mb-4">{label}</h3>
-
-          <div className="grid grid-cols-2 gap-4">
-            {catalogItems.data
-              .filter(
-                (api) =>
-                  !activeCategory ||
-                  api.categories.find((c) =>
-                    c.tags.find((t) => getKey(c.label, t) === activeCategory),
-                  ),
-              )
-              .map((api) => (
-                <Link
-                  to={{
-                    pathname: `/${api.path}`,
-                    search: activeCategory ? `category=${activeCategory}` : "",
-                  }}
-                  className="no-underline hover:!text-foreground"
-                  key={api.path}
-                >
-                  <div className="border h-full rounded p-4 flex flex-col gap-2 cursor-pointer hover:bg-border/20 font-normal">
-                    <span className="font-semibold">{api.label}</span>
-                    <Markdown
-                      className="text-sm whitespace-pre-wrap mb-6 line-clamp-2"
-                      content={api.description}
-                    />
-                  </div>
-                </Link>
-              ))}
-          </div>
         </div>
       </div>
     </section>

package/src/lib/plugins/api-catalog/index.tsx

@@ -1,7 +1,14 @@
+import slugify from "@sindresorhus/slugify";
+import { matchPath } from "react-router";
+import type { SidebarItem } from "../../../config/validators/SidebarSchema.js";
 import type { AuthState } from "../../authentication/state.js";
 import type { ZudokuPlugin } from "../../core/plugins.js";
+import { joinUrl } from "../../util/joinUrl.js";
 import { Catalog } from "./Catalog.js";
 
+export const getKey = (category: string, tag: string) =>
+  slugify(`${category}-${tag}`);
+
 export type ApiCatalogItem = {
   path: string;
   label: string;
@@ -35,7 +42,7 @@ export const apiCatalogPlugin = ({
   navigationId,
   items,
   label,
-  categories,
+  categories = [],
   filterCatalogItems,
 }: {
   navigationId: string;
@@ -44,21 +51,65 @@ export const apiCatalogPlugin = ({
   items: ApiCatalogItem[];
   filterCatalogItems?: filterCatalogItems;
 }): ZudokuPlugin => {
+  const paths = Object.fromEntries(
+    categories.flatMap((category) =>
+      [undefined, ...category.tags].map((tag) => [
+        joinUrl(navigationId, tag ? getKey(category.label, tag) : undefined),
+        tag,
+      ]),
+    ),
+  );
+
   return {
-    getRoutes: () => {
-      return [
-        {
-          path: navigationId,
-          element: (
-            <Catalog
-              label={label}
-              items={items}
-              filterCatalogItems={filterCatalogItems}
-              categories={categories ?? []}
-            />
-          ),
-        },
-      ];
+    getSidebar: async (currentPath) => {
+      const matches = Object.keys(paths).some((path) =>
+        matchPath(path, currentPath),
+      );
+
+      if (!matches) {
+        return [];
+      }
+
+      const sidebar: SidebarItem[] = categories.map((category) => ({
+        type: "category" as const,
+        label: category.label,
+        collapsible: false,
+        items: category.tags.map((tag) => ({
+          type: "doc" as const,
+          id: joinUrl(navigationId, getKey(category.label, tag)),
+          label: tag,
+          badge: {
+            label: String(
+              items.filter((api) =>
+                api.categories.find((c) => c.tags.includes(tag)),
+              ).length,
+            ),
+            color: "outline" as const,
+          },
+        })),
+      }));
+
+      sidebar.unshift({
+        type: "doc" as const,
+        id: joinUrl(navigationId),
+        label: "Overview",
+        badge: { label: String(items.length), color: "outline" as const },
+      });
+
+      return sidebar;
     },
+    getRoutes: () =>
+      Object.entries(paths).map(([path, tag]) => ({
+        path,
+        element: (
+          <Catalog
+            label={label}
+            categoryLabel={tag}
+            items={items}
+            filterCatalogItems={filterCatalogItems}
+            categories={categories}
+          />
+        ),
+      })),
   };
 };

package/src/lib/plugins/api-keys/CreateApiKey.tsx

@@ -1,4 +1,4 @@
-import { useMutation } from "@tanstack/react-query";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { useForm } from "react-hook-form";
 import { Link, useNavigate } from "react-router";
 import {
@@ -18,6 +18,7 @@ type CreateApiKey = { description: string; expiresOn?: string };
 
 export const CreateApiKey = ({ service }: { service: ApiKeyService }) => {
   const context = useZudoku();
+  const queryClient = useQueryClient();
   const navigate = useNavigate();
   const form = useForm<CreateApiKey>({
     defaultValues: {
@@ -27,7 +28,7 @@ export const CreateApiKey = ({ service }: { service: ApiKeyService }) => {
   const createKeyMutation = useMutation({
     mutationFn: ({ description, expiresOn }: CreateApiKey) => {
       if (!service.createKey) {
-        throw new Error("deleteKey not implemented");
+        throw new Error("createKey not implemented");
       }
 
       const expiresOnDate =
@@ -38,7 +39,10 @@ export const CreateApiKey = ({ service }: { service: ApiKeyService }) => {
         context,
       );
     },
-    onSuccess: () => navigate("/settings/api-keys/"),
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({ queryKey: ["api-keys"] });
+      await navigate("/settings/api-keys/");
+    },
   });
 
   if (!service.createKey) {

package/src/lib/plugins/api-keys/index.tsx

@@ -92,6 +92,9 @@ const createDefaultHandler = (endpoint: string): ApiKeyService => {
   };
 };
 
+export const createApiKeyService = <T extends ApiKeyService>(service: T): T =>
+  service;
+
 export const apiKeyPlugin = (
   options: ApiKeyPluginOptions,
 ): ZudokuPlugin & ApiIdentityPlugin & ProfileMenuPlugin => {

package/src/lib/plugins/markdown/MdxPage.tsx

@@ -2,18 +2,18 @@ import { useMDXComponents } from "@mdx-js/react";
 import slugify from "@sindresorhus/slugify";
 import { Helmet } from "@zudoku/react-helmet-async";
 import { type PropsWithChildren, useEffect } from "react";
-import { Link, useHref } from "react-router";
 import { CategoryHeading } from "../../components/CategoryHeading.js";
 import { Heading } from "../../components/Heading.js";
 import { ProseClasses } from "../../components/Markdown.js";
+import { Pagination } from "../../components/Pagination.js";
+import { Toc } from "../../components/navigation/Toc.js";
 import {
   useCurrentItem,
   usePrevNext,
 } from "../../components/navigation/utils.js";
 import type { MdxComponentsType } from "../../util/MdxComponents.js";
 import { cn } from "../../util/cn.js";
-import { Toc } from "./Toc.js";
-import { MarkdownPluginDefaultOptions, MDXImport } from "./index.js";
+import { type MarkdownPluginDefaultOptions, type MDXImport } from "./index.js";
 
 declare global {
   interface Window {
@@ -51,12 +51,6 @@ export const MdxPage = ({
   }
 >) => {
   const categoryTitle = useCurrentItem()?.categoryLabel;
-  let canonicalUrl = null;
-  const path = useHref("");
-  if (typeof window !== "undefined") {
-    const domain = window.location.origin;
-    canonicalUrl = `${domain}${path}`;
-  }
 
   const title = frontmatter.title;
   const category = frontmatter.category ?? categoryTitle;
@@ -90,16 +84,19 @@ export const MdxPage = ({
   }, [file]);
 
   return (
-    <div className="xl:grid grid-cols-[--sidecar-grid-cols] gap-8 justify-between">
+    <div
+      className="grid grid-cols-1 xl:grid-cols-[--sidecar-grid-cols] gap-8 justify-between"
+      data-pagefind-filter="section:markdown"
+      data-pagefind-meta="section:markdown"
+    >
       <Helmet>
         <title>{pageTitle}</title>
         {excerpt && <meta name="description" content={excerpt} />}
-        {canonicalUrl && <link rel="canonical" href={canonicalUrl} />}
       </Helmet>
       <div
         className={cn(
           ProseClasses,
-          "max-w-full xl:w-full xl:max-w-prose flex-1 flex-shrink pt-[--padding-content-top] pb-[--padding-content-bottom]",
+          "max-w-full xl:w-full xl:max-w-3xl flex-1 flex-shrink pt-[--padding-content-top]",
         )}
       >
         {(category || title) && (
@@ -117,41 +114,12 @@ export const MdxPage = ({
         />
         {!hidePager && (
           <>
-            <hr />
-            <div className="not-prose flex flex-wrap items-center justify-between gap-2 lg:gap-8">
-              {prev ? (
-                <Link
-                  to={prev.id}
-                  className="flex flex-col items-stretch gap-2 flex-1 min-w-max border rounded px-6 py-4 text-start hover:border-primary/85 transition shadow-sm hover:shadow-md"
-                  title={prev.label}
-                >
-                  <div className="text-sm text-muted-foreground">
-                    ← Previous page
-                  </div>
-                  <div className="text-lg text-primary truncate">
-                    {prev.label}
-                  </div>
-                </Link>
-              ) : (
-                <div className="flex-1" />
-              )}
-              {next ? (
-                <Link
-                  to={next.id}
-                  className="flex flex-col items-stretch gap-2 flex-1 min-w-max border rounded px-6 py-4 text-end hover:border-primary/85 transition shadow-sm hover:shadow-md"
-                  title={next.label}
-                >
-                  <div className="text-sm text-muted-foreground">
-                    Next page →
-                  </div>
-                  <div className="text-lg text-primary truncate">
-                    {next.label}
-                  </div>
-                </Link>
-              ) : (
-                <div className="flex-1" />
-              )}
-            </div>
+            <hr className="my-10" />
+            <Pagination
+              prev={prev ? { to: prev.id, label: prev.label } : undefined}
+              next={next ? { to: next.id, label: next.label } : undefined}
+              className="mb-4"
+            />
           </>
         )}
       </div>

package/src/lib/plugins/markdown/resolver.ts

@@ -1,13 +1,8 @@
-import fs from "fs";
-import path from "path";
 import { ZudokuDocsConfig } from "../../../config/validators/common.js";
 import { ZudokuConfig } from "../../../config/validators/validate.js";
 
 const DEFAULT_DOCS_FILES = "/pages/**/*.{md,mdx}";
 
-// TODO: This should be dynamic based on the glob selector
-const SUPPORTED_EXTENSIONS = [".md", ".mdx"];
-
 /**
  * Utilities for resolving markdown file paths and routes
  */
@@ -29,34 +24,6 @@ export class DocResolver {
     return docsConfigs;
   }
 
-  /**
-   * Resolves the first matching file system path for a given docId
-   * @param docId - The docId to resolve
-   * @returns
-   */
-  resolveFilePath(docId: string) {
-    const docsConfigs = this.getDocsConfigs();
-    let fsPath: string | undefined;
-
-    docsConfigs.forEach(({ files: fileGlob }) => {
-      if (fsPath) {
-        return;
-      }
-      const rootDir = DocResolver.getRootDir(fileGlob);
-      for (const ext of SUPPORTED_EXTENSIONS) {
-        if (fsPath) {
-          return;
-        }
-        const checkPath = path.join(rootDir, `${docId}${ext}`);
-        if (fs.existsSync(checkPath)) {
-          fsPath = checkPath;
-        }
-      }
-    });
-
-    return fsPath;
-  }
-
   /**
    * Gets the root directory from a files glob
    */

package/src/lib/plugins/openapi/ColorizedParam.tsx

@@ -90,7 +90,7 @@ export const ColorizedParam = ({
       {...{ [DATA_ATTR]: normalizedSlug }}
       className={cn(
         // This may not contain (inline-)flex or (inline-)block otherwise it breaks the browser's full text search
-        "relative rounded transition-all duration-100 rounded-lg",
+        "relative transition-all duration-100 rounded-lg",
         "border border-[--border-color] p-0.5 text-[--param-color] bg-[--background-color]",
         "data-[active=true]:border-[--param-color] data-[active=true]:shadow data-[active=true]:bottom-px",
         className,

package/src/lib/plugins/openapi/Endpoint.tsx

@@ -1,13 +1,13 @@
 import { useSuspenseQuery } from "@tanstack/react-query";
 import { CheckIcon, CopyIcon } from "lucide-react";
 import { useState, useTransition } from "react";
-import { useSelectedServer } from "../../authentication/state.js";
 import { InlineCode } from "../../components/InlineCode.js";
 import { Button } from "../../ui/Button.js";
 import { useCreateQuery } from "./client/useCreateQuery.js";
 import { useOasConfig } from "./context.js";
 import { graphql } from "./graphql/index.js";
 import { SimpleSelect } from "./SimpleSelect.js";
+import { useSelectedServer } from "./state.js";
 
 const ServersQuery = graphql(/* GraphQL */ `
   query ServersQuery($input: JSON!, $type: SchemaType!) {

package/src/lib/plugins/openapi/OasProvider.tsx

@@ -0,0 +1,51 @@
+import { useMemo } from "react";
+import { Outlet } from "react-router";
+import { joinPath } from "../../util/joinPath.js";
+import type { GraphQLClient } from "./client/GraphQLClient.js";
+import { GraphQLProvider } from "./client/GraphQLContext.js";
+import { OasConfigProvider } from "./context.js";
+import { type OasPluginConfig } from "./interfaces.js";
+import { getVersions } from "./util/getRoutes.js";
+
+export const OasProvider = ({
+  basePath,
+  version,
+  config,
+  client,
+}: {
+  basePath: string;
+  version?: string;
+  config: OasPluginConfig;
+  client: GraphQLClient;
+}) => {
+  const value = useMemo(() => {
+    const versions = getVersions(config);
+    const firstVersion = Object.values(config.input).at(0);
+    const input =
+      config.type === "file"
+        ? {
+            type: config.type,
+            input: version ? config.input[version]! : firstVersion!,
+          }
+        : { type: config.type, input: config.input };
+
+    return {
+      config: {
+        ...config,
+        version: version ?? versions.at(0),
+        versions: Object.fromEntries(
+          versions.map((version) => [version, joinPath(basePath, version)]),
+        ),
+        ...input,
+      },
+    };
+  }, [config, basePath, version]);
+
+  return (
+    <OasConfigProvider value={value}>
+      <GraphQLProvider client={client}>
+        <Outlet />
+      </GraphQLProvider>
+    </OasConfigProvider>
+  );
+};