zudoku 0.0.0-e5be921 → 0.0.0-e614aaa

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

@@ -1,6 +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;
@@ -18,33 +26,85 @@ export type ApiCatalogPluginOptions = {
   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,
+  categories = [],
+  filterCatalogItems,
 }: {
   navigationId: string;
   label: string;
   categories?: CatalogCategory[];
   items: ApiCatalogItem[];
+  filterCatalogItems?: filterCatalogItems;
 }): ZudokuPlugin => {
   return {
-    getRoutes: () => {
-      return [
-        {
-          path: navigationId,
+    getSidebar: async function Sidebar(path) {
+      if (!matchPath({ path: joinUrl(navigationId), end: false }, path)) {
+        return [];
+      }
+
+      const sidebar: SidebarItem[] = categories.map((category) => ({
+        type: "category" as const,
+        label: category.label,
+        collapsible: false,
+        items: category.tags.map((tag) => {
+          const tagPath = getKey(category.label, tag);
+          return {
+            type: "doc" as const,
+            id: joinUrl(navigationId, tagPath),
+            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: () =>
+      categories.flatMap((category) =>
+        [undefined, ...category.tags].map((tag) => ({
+          path: joinUrl(
+            navigationId,
+            tag ? getKey(category.label, tag) : undefined,
+          ),
           element: (
             <Catalog
               label={label}
+              categoryLabel={tag}
               items={items}
-              categories={categories ?? []}
+              filterCatalogItems={filterCatalogItems}
+              categories={categories}
             />
           ),
-        },
-      ];
-    },
+        })),
+      ),
   };
 };

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

@@ -1,6 +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 { Link, useNavigate } from "react-router";
 import {
   Select,
   SelectContent,
@@ -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,5 +1,5 @@
 import { FileKey2Icon } from "lucide-react";
-import { type RouteObject } from "react-router-dom";
+import { type RouteObject } from "react-router";
 import { ZudokuContext } from "../../core/ZudokuContext.js";
 import {
   type ApiIdentityPlugin,
@@ -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/custom-pages/index.tsx

@@ -1,5 +1,5 @@
 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 { NavigationPlugin, ZudokuPlugin } from "../../core/plugins.js";
 import { CustomPage } from "./CustomPage.js";

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

@@ -2,7 +2,7 @@ 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 } from "react-router-dom";
+import { Link, useHref } from "react-router";
 import { CategoryHeading } from "../../components/CategoryHeading.js";
 import { Heading } from "../../components/Heading.js";
 import { ProseClasses } from "../../components/Markdown.js";
@@ -51,6 +51,13 @@ 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;
   const hideToc = frontmatter.toc === false || defaultOptions?.toc === false;
@@ -83,15 +90,20 @@ export const MdxPage = ({
   }, [file]);
 
   return (
-    <div className="xl:grid grid-cols-[--sidecar-grid-cols] gap-8 justify-between">
+    <div
+      className="xl:grid 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] pb-[--padding-content-bottom]",
         )}
       >
         {(category || title) && (

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

@@ -1,6 +1,7 @@
 import type { Toc } from "@stefanprobst/rehype-extract-toc";
 import type { MDXProps } from "mdx/types.js";
-import { RouteObject } from "react-router-dom";
+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";

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/CollapsibleCode.tsx

@@ -1,3 +1,4 @@
+import { FoldVerticalIcon, UnfoldVerticalIcon } from "lucide-react";
 import { type CSSProperties, type ReactNode, useRef, useState } from "react";
 import { Button } from "zudoku/ui/Button.js";
 import {
@@ -43,22 +44,23 @@ export const CollapsibleCode = ({
       <CollapsibleContent
         forceMount
         className={cn(
-          "relative overflow-hidden",
+          "relative overflow-hidden group",
           !open && isOverflowing && "max-h-[--max-height]",
         )}
       >
         {!open && isOverflowing && (
-          <div className="absolute inset-0 bg-gradient-to-b from-transparent to-zinc-50/90 dark:to-zinc-800/90 z-10"></div>
+          <div className=" absolute inset-0 bg-gradient-to-b from-transparent to-zinc-50/60 dark:to-zinc-950/90 z-10 group-hover:to-transparent"></div>
         )}
         <div ref={contentRef}>{children}</div>
         {!open && isOverflowing && (
           <CollapsibleTrigger
-            className="absolute inset-0 grid place-items-center z-10"
+            className="absolute inset-0 grid place-items-center z-10 cursor-pointer peer"
             asChild
           >
             <div>
-              <Button className="bg-primary/70 border border-accent-foreground/25">
-                Expand code
+              <Button variant="outline" className="hidden group-hover:flex">
+                <UnfoldVerticalIcon size={14} className="mr-1.5" />
+                Click to expand
               </Button>
             </div>
           </CollapsibleTrigger>
@@ -69,8 +71,9 @@ export const CollapsibleCode = ({
           className={cn("flex justify-center w-full mb-2", !open && "hidden")}
         >
           <CollapsibleTrigger asChild>
-            <Button className="border border-accent-foreground/25">
-              Collapse code
+            <Button variant="outline" size="sm">
+              Collapse
+              <FoldVerticalIcon size={14} className="ml-1.5" />
             </Button>
           </CollapsibleTrigger>
         </div>

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

@@ -7,18 +7,29 @@ export const DATA_ATTR = "data-linked-param";
 
 export const usePastellizedColor = (name: string) => {
   const { resolvedTheme } = useTheme();
-  return pastellize(
-    name,
-    resolvedTheme === "light" ? { saturation: 85, lightness: 50 } : undefined,
-  );
+
+  return {
+    text: pastellize(
+      name,
+      resolvedTheme === "light" ? { saturation: 95, lightness: 38 } : {},
+    ),
+    background: pastellize(
+      name,
+      resolvedTheme === "light" ? { saturation: 85, lightness: 40 } : {},
+    ),
+  };
+};
+
+export const useParamColor = (name: string) => {
+  const normalized = name.replace(/[{}]/g, "");
+  return usePastellizedColor(normalized);
 };
 
 export const ColorizedParam = ({
   name,
   className,
-  backgroundOpacity = "100%",
-  borderOpacity = "100%",
   slug,
+  title,
   children,
   onClick,
 }: {
@@ -28,15 +39,17 @@ export const ColorizedParam = ({
   borderOpacity?: string;
   slug?: string;
   children?: ReactNode;
+  title?: string;
   onClick?: () => void;
 }) => {
   const ref = useRef<HTMLSpanElement>(null);
-  const normalized = name.replace(/[{}]/g, "");
   const normalizedSlug = slug?.replace(/[{}]/g, "");
-  const color = usePastellizedColor(normalized);
+  const normalized = name.replace(/[{}]/g, "");
+  const { text, background } = usePastellizedColor(normalized);
 
-  const borderColor = `hsl(${color} / ${borderOpacity})`;
-  const backgroundColor = `hsl(${color} / ${backgroundOpacity})`;
+  const textColor = `hsl(${text} / 100%)`;
+  const backgroundColor = `hsl(${background} / 10%)`;
+  const borderColor = `hsl(${background} / 50%)`;
 
   useEffect(() => {
     if (!normalizedSlug) return;
@@ -76,15 +89,19 @@ export const ColorizedParam = ({
     <span
       {...{ [DATA_ATTR]: normalizedSlug }}
       className={cn(
-        "relative after:rounded after:absolute after:inset-0 after:-bottom-0.5 after:border-b-2 after:transition-opacity after:duration-200",
-        "after:pointer-events-none after:border-[--border-color] after:opacity-30 after:data-[active=true]:opacity-100",
+        // 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",
+        "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,
       )}
+      title={title}
       suppressHydrationWarning
       ref={ref}
       onClick={onClick}
       style={
         {
+          "--param-color": textColor,
           "--border-color": borderColor,
           "--background-color": backgroundColor,
         } as CSSProperties

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

@@ -1,7 +1,7 @@
 import { useSuspenseQuery } from "@tanstack/react-query";
 import { CheckIcon, CopyIcon } from "lucide-react";
 import { useState, useTransition } from "react";
-import { useSelectedServerStore } from "../../authentication/state.js";
+import { useSelectedServer } from "../../authentication/state.js";
 import { InlineCode } from "../../components/InlineCode.js";
 import { Button } from "../../ui/Button.js";
 import { useCreateQuery } from "./client/useCreateQuery.js";
@@ -48,43 +48,45 @@ export const Endpoint = () => {
   const query = useCreateQuery(ServersQuery, { input, type });
   const result = useSuspenseQuery(query);
   const [, startTransition] = useTransition();
-  const { selectedServer, setSelectedServer } = useSelectedServerStore();
+  const { selectedServer, setSelectedServer } = useSelectedServer(
+    result.data.schema.servers,
+  );
 
   const { servers } = result.data.schema;
 
+  if (servers.length === 0) return null;
+
+  const firstServer = servers.at(0)!;
+
   if (servers.length === 1) {
     return (
       <div className="flex items-center gap-2">
         <span className="font-medium text-sm">Endpoint:</span>
         <InlineCode className="text-xs px-2 py-1.5" selectOnClick>
-          {servers[0]!.url}
+          {firstServer.url}
         </InlineCode>
-        <CopyButton url={servers[0]!.url} />
+        <CopyButton url={firstServer.url} />
       </div>
     );
   }
 
   return (
     <div className="flex flex-wrap items-center gap-2">
-      <span className="font-medium text-sm">
-        {servers.length > 1 ? "Endpoints" : "Endpoint"}:
-      </span>
+      <span className="font-medium text-sm">Endpoint</span>
 
       <SimpleSelect
         className="font-mono text-xs bg-border/50 dark:bg-border/70 py-1.5 max-w-[450px] truncate"
         onChange={(e) =>
-          startTransition(() => {
-            setSelectedServer(e.target.value);
-          })
+          startTransition(() => setSelectedServer(e.target.value))
         }
-        value={selectedServer ?? result.data.schema.url}
+        value={selectedServer}
         showChevrons={servers.length > 1}
         options={servers.map((server) => ({
           value: server.url,
           label: server.url,
         }))}
       />
-      <CopyButton url={selectedServer ?? result.data.schema.url} />
+      <CopyButton url={selectedServer} />
     </div>
   );
 };

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>
+  );
+};