zudoku 0.0.0-f417aae → 0.0.0-f471fb8

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

@@ -1,4 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
+import { type RecordAny, traverse } from "../../../util/traverse.js";
 import type { OpenAPIDocument } from "../index.js";
 /**
  * Upgrade from OpenAPI 3.0.x to 3.1.0
@@ -6,30 +7,8 @@ import type { OpenAPIDocument } from "../index.js";
  * Taken from https://github.com/scalar/openapi-parser/blob/main/packages/openapi-parser/src/utils/upgradeFromThreeToThreeOne.ts
  * https://www.openapis.org/blog/2021/02/16/migrating-from-openapi-3-0-to-3-1-0
  */
-export function traverse(
-  specification: Record<string, any>,
-  transform: (specification: Record<string, any>) => Record<string, any>,
-) {
-  const result: Record<string, any> = {};
 
-  for (const [key, value] of Object.entries(specification)) {
-    if (Array.isArray(value)) {
-      result[key] = value.map((item) =>
-        typeof item === "object" && item !== null
-          ? traverse(item, transform)
-          : item,
-      );
-    } else if (typeof value === "object" && value !== null) {
-      result[key] = traverse(value, transform);
-    } else {
-      result[key] = value;
-    }
-  }
-
-  return transform(result);
-}
-
-export const upgradeSchema = (schema: Record<string, any>): OpenAPIDocument => {
+export const upgradeSchema = (schema: RecordAny): OpenAPIDocument => {
   if (schema.openapi?.startsWith("3.0")) {
     schema.openapi = "3.1.0";
   }
@@ -62,20 +41,36 @@ export const upgradeSchema = (schema: Record<string, any>): OpenAPIDocument => {
   });
 
   schema = traverse(schema, (sub) => {
-    if (sub.example !== undefined) {
-      sub.examples = {
-        default: sub.example,
-      };
+    // may be null or undefined
+    if (sub.example) {
+      const isExampleObject =
+        typeof sub.example === "object" &&
+        (sub.example.summary !== undefined ||
+          sub.example.description !== undefined ||
+          sub.example.value !== undefined ||
+          sub.example.externalValue !== undefined);
+
+      const exampleValue = isExampleObject
+        ? sub.example
+        : { value: sub.example };
+
+      if (!sub.examples) {
+        sub.examples = { default: exampleValue };
+      } else {
+        sub.examples = {
+          default: exampleValue,
+          ...sub.examples,
+        };
+      }
       delete sub.example;
     }
-
     return sub;
   });
 
   schema = traverse(schema, (sub) => {
     if (sub.type === "object" && sub.properties !== undefined) {
       for (const [, value] of Object.entries(sub.properties)) {
-        const v = (value ?? {}) as Record<string, any>;
+        const v = (value ?? {}) as RecordAny;
         if (v.type === "string" && v.format === "binary") {
           v.contentEncoding = "application/octet-stream";
           delete v.format;

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

@@ -0,0 +1,76 @@
+import { useSuspenseQuery } from "@tanstack/react-query";
+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 { joinUrl } from "../../util/joinUrl.js";
+import { type ApiCatalogPluginOptions, getKey } from "./index.js";
+
+export const Catalog = ({
+  items,
+  filterCatalogItems = (items) => items,
+  label = "API Library",
+  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]"
+      {...dataSet}
+    >
+      <Helmet>
+        <title>
+          {categoryLabel ? `${categoryLabel} - ` : ""}
+          {label}
+        </title>
+      </Helmet>
+      <div className="grid gap-4">
+        <Heading level={2}>
+          {label}
+          {categoryLabel && ` - ${categoryLabel}`}
+        </Heading>
+
+        <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>
+    </section>
+  );
+};

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

@@ -0,0 +1,115 @@
+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;
+  description: string;
+  categories: CatalogCategory[];
+};
+
+export type CatalogCategory = {
+  label: string;
+  tags: string[];
+};
+
+export type ApiCatalogPluginOptions = {
+  navigationId: string;
+  label: string;
+  categories?: CatalogCategory[];
+  items: ApiCatalogItem[];
+  filterCatalogItems?: filterCatalogItems;
+};
+
+export type CatalogContext<ProviderData = unknown> = {
+  auth: AuthState<ProviderData>;
+};
+
+export type filterCatalogItems<ProviderData = unknown> = (
+  items: ApiCatalogItem[],
+  { auth }: CatalogContext<ProviderData>,
+) => ApiCatalogItem[];
+
+export const apiCatalogPlugin = ({
+  navigationId,
+  items,
+  label,
+  categories = [],
+  filterCatalogItems,
+}: {
+  navigationId: string;
+  label: string;
+  categories?: CatalogCategory[];
+  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 {
+    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,7 +1,6 @@
-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-dom";
-import { useZudoku } from "../../components/context/ZudokuContext.js";
+import { Link, useNavigate } from "react-router";
 import {
   Select,
   SelectContent,
@@ -9,7 +8,8 @@ import {
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "../../components/Select.js";
+} from "zudoku/ui/Select.js";
+import { useZudoku } from "../../components/context/ZudokuContext.js";
 import { Button } from "../../ui/Button.js";
 import { Input } from "../../ui/Input.js";
 import { ApiKeyService } from "./index.js";
@@ -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/ProtectedRoute.tsx

@@ -1,4 +1,4 @@
-import { Outlet } from "react-router-dom";
+import { Outlet } from "react-router";
 import { useAuth } from "../../authentication/hook.js";
 import { DeveloperHint } from "../../components/DeveloperHint.js";
 import { Button } from "../../ui/Button.js";

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

@@ -12,7 +12,7 @@ import {
   TrashIcon,
 } from "lucide-react";
 import { useState } from "react";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { useZudoku } from "../../components/context/ZudokuContext.js";
 import { Slotlet } from "../../components/SlotletProvider.js";
 import { Button } from "../../ui/Button.js";

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

@@ -1,8 +1,9 @@
-import { type RouteObject } from "react-router-dom";
-import { DevPortalContext } from "../../core/DevPortalContext.js";
+import { FileKey2Icon } from "lucide-react";
+import { type RouteObject } from "react-router";
+import { ZudokuContext } from "../../core/ZudokuContext.js";
 import {
   type ApiIdentityPlugin,
-  type DevPortalPlugin,
+  type ZudokuPlugin,
   ProfileMenuPlugin,
 } from "../../core/plugins.js";
 import { RouterError } from "../../errors/RouterError.js";
@@ -15,17 +16,17 @@ const DEFAULT_API_KEY_ENDPOINT =
   "https://zudoku-rewiringamerica-main-ef9c9c0.d2.zuplo.dev";
 
 export type ApiKeyService = {
-  getKeys: (context: DevPortalContext) => Promise<ApiKey[]>;
-  rollKey?: (id: string, context: DevPortalContext) => Promise<void>;
-  deleteKey?: (id: string, context: DevPortalContext) => Promise<void>;
+  getKeys: (context: ZudokuContext) => Promise<ApiKey[]>;
+  rollKey?: (id: string, context: ZudokuContext) => Promise<void>;
+  deleteKey?: (id: string, context: ZudokuContext) => Promise<void>;
   updateKeyDescription?: (
     apiKey: { id: string; description: string },
-    context: DevPortalContext,
+    context: ZudokuContext,
   ) => Promise<void>;
-  getUsage?: (apiKeys: string[], context: DevPortalContext) => Promise<void>;
+  getUsage?: (apiKeys: string[], context: ZudokuContext) => Promise<void>;
   createKey?: (
     apiKey: { description: string; expiresOn?: string },
-    context: DevPortalContext,
+    context: ZudokuContext,
   ) => Promise<void>;
 };
 
@@ -91,9 +92,12 @@ const createDefaultHandler = (endpoint: string): ApiKeyService => {
   };
 };
 
+export const createApiKeyService = <T extends ApiKeyService>(service: T): T =>
+  service;
+
 export const apiKeyPlugin = (
   options: ApiKeyPluginOptions,
-): DevPortalPlugin & ApiIdentityPlugin & ProfileMenuPlugin => {
+): ZudokuPlugin & ApiIdentityPlugin & ProfileMenuPlugin => {
   const endpoint =
     "endpoint" in options ? options.endpoint : DEFAULT_API_KEY_ENDPOINT;
 
@@ -105,6 +109,8 @@ export const apiKeyPlugin = (
       {
         label: "API Keys",
         path: "/settings/api-keys",
+        category: "middle",
+        icon: FileKey2Icon,
       },
     ],
     getIdentities: async (context) => {

package/src/lib/plugins/custom-pages/CustomPage.tsx

@@ -9,8 +9,8 @@ export const CustomPage = ({
   render,
   prose = true,
 }: Omit<CustomPageConfig, "path">) => {
-  const slotletProps = useExposedProps();
-  const content = render ? React.createElement(render, slotletProps) : element;
+  const exposedProps = useExposedProps();
+  const content = render ? React.createElement(render, exposedProps) : element;
 
   return (
     <div className={cn(prose && ProseClasses, "max-w-full")}>{content}</div>

package/src/lib/plugins/custom-pages/index.tsx

@@ -1,7 +1,7 @@
 import { type ComponentType, type ReactNode } from "react";
-import type { RouteObject } from "react-router-dom";
+import type { RouteObject } from "react-router";
 import { type ExposedComponentProps } from "../../components/SlotletProvider.js";
-import type { DevPortalPlugin, NavigationPlugin } from "../../core/plugins.js";
+import type { NavigationPlugin, ZudokuPlugin } from "../../core/plugins.js";
 import { CustomPage } from "./CustomPage.js";
 
 export type CustomPageConfig = {
@@ -13,7 +13,7 @@ export type CustomPageConfig = {
 
 export const customPagesPlugin = (
   config: CustomPageConfig[],
-): DevPortalPlugin & NavigationPlugin => {
+): ZudokuPlugin & NavigationPlugin => {
   return {
     getRoutes: (): RouteObject[] =>
       config.map(({ path, ...props }) => ({

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

@@ -1,19 +1,27 @@
 import { useMDXComponents } from "@mdx-js/react";
 import slugify from "@sindresorhus/slugify";
 import { Helmet } from "@zudoku/react-helmet-async";
-import { type PropsWithChildren } from "react";
-import { Link } from "react-router-dom";
+import { type PropsWithChildren, useEffect } from "react";
 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 {
+    __getReactRefreshIgnoredExports?: (args: {
+      id: string;
+    }) => string[] | undefined;
+  }
+}
 
 const MarkdownHeadings = {
   h2: ({ children, id }) => (
@@ -30,16 +38,20 @@ const MarkdownHeadings = {
 
 export const MdxPage = ({
   mdxComponent: MdxComponent,
+  file,
   frontmatter = {},
   defaultOptions,
   tableOfContents,
+  excerpt,
 }: PropsWithChildren<
   Omit<MDXImport, "default"> & {
+    file: string;
     mdxComponent: MDXImport["default"];
     defaultOptions?: MarkdownPluginDefaultOptions;
   }
 >) => {
   const categoryTitle = useCurrentItem()?.categoryLabel;
+
   const title = frontmatter.title;
   const category = frontmatter.category ?? categoryTitle;
   const hideToc = frontmatter.toc === false || defaultOptions?.toc === false;
@@ -57,15 +69,34 @@ export const MdxPage = ({
 
   const { prev, next } = usePrevNext();
 
+  useEffect(() => {
+    if (process.env.NODE_ENV === "development") {
+      window.__getReactRefreshIgnoredExports = ({ id }) => {
+        if (!id.endsWith(file)) return;
+
+        return ["frontmatter", "tableOfContents"];
+      };
+
+      return () => {
+        window.__getReactRefreshIgnoredExports = undefined;
+      };
+    }
+  }, [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} />}
       </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] pb-[--padding-content-bottom]",
         )}
       >
         {(category || title) && (
@@ -84,40 +115,10 @@ 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>
+            <Pagination
+              prev={prev ? { to: prev.id, label: prev.label } : undefined}
+              next={next ? { to: next.id, label: next.label } : undefined}
+            />
           </>
         )}
       </div>

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

@@ -1,13 +1,14 @@
 import type { Toc } from "@stefanprobst/rehype-extract-toc";
 import type { MDXProps } from "mdx/types.js";
-import type { DevPortalPlugin } from "../../core/plugins.js";
-import { generateRoutes } from "./generateRoutes.js";
+import { type JSX } from "react";
+import { RouteObject } from "react-router";
+import { ZudokuDocsConfig } from "../../../config/validators/common.js";
+import type { ZudokuPlugin } from "../../core/plugins.js";
+import { DocResolver } from "./resolver.js";
 
-export type MarkdownPluginOptions = {
-  markdownFiles: Record<string, () => Promise<MDXImport>>;
-  defaultOptions?: MarkdownPluginDefaultOptions;
-  filesPath: string;
-};
+export interface MarkdownPluginOptions extends ZudokuDocsConfig {
+  fileImports: Record<string, () => Promise<MDXImport>>;
+}
 export type MarkdownPluginDefaultOptions = Pick<
   Frontmatter,
   "toc" | "disablePager"
@@ -24,13 +25,52 @@ export type Frontmatter = {
 export type MDXImport = {
   tableOfContents: Toc;
   frontmatter: Frontmatter;
+  excerpt?: string;
   default: (props: MDXProps) => JSX.Element;
 };
 
-export const markdownPlugin = ({
-  markdownFiles,
-  defaultOptions,
-  filesPath,
-}: MarkdownPluginOptions): DevPortalPlugin => ({
-  getRoutes: () => generateRoutes(markdownFiles, filesPath, defaultOptions),
+export const markdownPlugin = (
+  options: MarkdownPluginOptions[],
+): ZudokuPlugin => ({
+  getRoutes: () => {
+    const routeMap = new Map<string, RouteObject>();
+    options.forEach(({ fileImports, files, defaultOptions }) =>
+      Object.entries(fileImports).flatMap(([file, importPromise]) => {
+        const routePath = DocResolver.resolveRoutePath({
+          filesGlob: files,
+          fsPath: file,
+        });
+
+        if (!routePath) return [];
+
+        if (routeMap.has(routePath)) {
+          // eslint-disable-next-line no-console
+          console.warn(
+            `Duplicate route path found for ${routePath}. Skipping file at '${file}'.`,
+          );
+          return [];
+        }
+
+        const route: RouteObject = {
+          path: routePath,
+          lazy: async () => {
+            const { MdxPage } = await import("./MdxPage.js");
+            const { default: Component, ...props } = await importPromise();
+            return {
+              element: (
+                <MdxPage
+                  file={file}
+                  mdxComponent={Component}
+                  {...props}
+                  defaultOptions={defaultOptions}
+                />
+              ),
+            };
+          },
+        };
+        routeMap.set(routePath, route);
+      }),
+    );
+    return [...routeMap.values()];
+  },
 });