zudoku 0.0.0-eff6f9b → 0.0.0-f06d326

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 slugify from "../../util/slugify.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,65 +69,56 @@ 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]",
         )}
       >
-        <header>
-          {category && <CategoryHeading>{category}</CategoryHeading>}
-          {title && (
-            <Heading level={1} id={slugify(title, { lower: true })}>
-              {title}
-            </Heading>
-          )}
-        </header>
+        {(category || title) && (
+          <header>
+            {category && <CategoryHeading>{category}</CategoryHeading>}
+            {title && (
+              <Heading level={1} id={slugify(title)}>
+                {title}
+              </Heading>
+            )}
+          </header>
+        )}
         <MdxComponent
           components={{ ...useMDXComponents(), ...MarkdownHeadings }}
         />
         {!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()];
+  },
 });

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

@@ -0,0 +1,57 @@
+import { ZudokuDocsConfig } from "../../../config/validators/common.js";
+import { ZudokuConfig } from "../../../config/validators/validate.js";
+
+const DEFAULT_DOCS_FILES = "/pages/**/*.{md,mdx}";
+
+/**
+ * Utilities for resolving markdown file paths and routes
+ */
+export class DocResolver {
+  constructor(private config: ZudokuConfig) {}
+
+  fileMap = new Map<string, string>();
+
+  /**
+   * Gets the default docs config from the zudoku config
+   */
+  getDocsConfigs() {
+    const docsConfigs: ZudokuDocsConfig[] = this.config.docs
+      ? Array.isArray(this.config.docs)
+        ? this.config.docs
+        : [this.config.docs]
+      : [{ files: DEFAULT_DOCS_FILES }];
+
+    return docsConfigs;
+  }
+
+  /**
+   * Gets the root directory from a files glob
+   */
+  private static getRootDir(filesGlob: string) {
+    let rootDir = filesGlob.split("**")[0];
+    if (!rootDir) {
+      throw new Error("Invalid files glob. Must have '**' in the path.");
+    }
+    rootDir = rootDir.replace("/**", "/");
+    return rootDir;
+  }
+
+  /**
+   * Resolves the route path for a given file system path
+   * @param options - The options to resolve the route path
+   * @returns The string route path
+   */
+  static resolveRoutePath({
+    filesGlob,
+    fsPath,
+  }: {
+    filesGlob: string;
+    fsPath: string;
+  }) {
+    const rootDir = this.getRootDir(filesGlob);
+    const re = new RegExp(`^${rootDir}(.*).mdx?`);
+    const match = fsPath.match(re);
+    const routePath = match?.at(1);
+    return routePath;
+  }
+}

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

@@ -0,0 +1,83 @@
+import { FoldVerticalIcon, UnfoldVerticalIcon } from "lucide-react";
+import { type CSSProperties, type ReactNode, useRef, useState } from "react";
+import { Button } from "zudoku/ui/Button.js";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "zudoku/ui/Collapsible.js";
+import { cn } from "../../util/cn.js";
+import useIsomorphicLayoutEffect from "../../util/useIsomorphicLayoutEffect.js";
+
+export const CollapsibleCode = ({
+  children,
+  maxHeight = 250,
+}: {
+  children: ReactNode;
+  maxHeight?: number;
+}) => {
+  const contentRef = useRef<HTMLDivElement | null>(null);
+  const [isOverflowing, setIsOverflowing] = useState(false);
+  const [open, setOpen] = useState(false);
+
+  useIsomorphicLayoutEffect(() => {
+    const el = contentRef.current;
+    if (!el) return;
+
+    setIsOverflowing(el.scrollHeight > maxHeight);
+
+    const observer = new ResizeObserver(() => {
+      setIsOverflowing(el.scrollHeight > maxHeight);
+    });
+    observer.observe(el);
+
+    return () => observer.disconnect();
+  }, [maxHeight]);
+
+  return (
+    <Collapsible
+      className="group"
+      open={open}
+      onOpenChange={setOpen}
+      style={{ "--max-height": `${maxHeight}px` } as CSSProperties}
+    >
+      <CollapsibleContent
+        forceMount
+        className={cn(
+          "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/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 cursor-pointer peer"
+            asChild
+          >
+            <div>
+              <Button variant="outline" className="hidden group-hover:flex">
+                <UnfoldVerticalIcon size={14} className="mr-1.5" />
+                Click to expand
+              </Button>
+            </div>
+          </CollapsibleTrigger>
+        )}
+      </CollapsibleContent>
+      {isOverflowing && (
+        <div
+          className={cn("flex justify-center w-full mb-2", !open && "hidden")}
+        >
+          <CollapsibleTrigger asChild>
+            <Button variant="outline" size="sm">
+              Collapse
+              <FoldVerticalIcon size={14} className="ml-1.5" />
+            </Button>
+          </CollapsibleTrigger>
+        </div>
+      )}
+    </Collapsible>
+  );
+};

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

@@ -1,24 +1,35 @@
-import { useEffect, useRef, type ReactNode } from "react";
-import { useTheme } from "../../components/context/ThemeContext.js";
+import { useTheme } from "next-themes";
+import { useEffect, useRef, type CSSProperties, type ReactNode } from "react";
 import { cn } from "../../util/cn.js";
 import { pastellize } from "../../util/pastellize.js";
 
 export const DATA_ATTR = "data-linked-param";
 
 export const usePastellizedColor = (name: string) => {
-  const [isDark] = useTheme();
-  return pastellize(
-    name,
-    !isDark ? { saturation: 85, lightness: 50 } : undefined,
-  );
+  const { resolvedTheme } = useTheme();
+
+  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;
@@ -61,27 +74,40 @@ export const ColorizedParam = ({
         });
     };
 
-    ref.current.addEventListener("mouseenter", onMouseEnter);
-    ref.current.addEventListener("mouseleave", onMouseLeave);
+    const el = ref.current;
+
+    el.addEventListener("mouseenter", onMouseEnter);
+    el.addEventListener("mouseleave", onMouseLeave);
 
     return () => {
-      ref.current?.removeEventListener("mouseenter", onMouseEnter);
-      ref.current?.removeEventListener("mouseleave", onMouseLeave);
+      el.removeEventListener("mouseenter", onMouseEnter);
+      el.removeEventListener("mouseleave", onMouseLeave);
     };
   }, [normalizedSlug]);
 
   return (
     <span
-      className={cn("inline-flex relative rounded group", className)}
       {...{ [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",
+        "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
+      }
     >
-      <span
-        className="absolute inset-0 border-b-2 transition-opacity duration-200 opacity-30 group-data-[active=true]:opacity-100"
-        style={{ borderColor, backgroundColor }}
-      />
-      <span className="relative">{children ?? name}</span>
+      {children ?? name}
     </span>
   );
 };

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

@@ -1,31 +1,92 @@
+import { useSuspenseQuery } from "@tanstack/react-query";
 import { CheckIcon, CopyIcon } from "lucide-react";
-import { useState } from "react";
+import { useState, useTransition } from "react";
 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";
 
-export const Endpoint = ({ url }: { url: string }) => {
+const ServersQuery = graphql(/* GraphQL */ `
+  query ServersQuery($input: JSON!, $type: SchemaType!) {
+    schema(input: $input, type: $type) {
+      url
+      servers {
+        url
+      }
+    }
+  }
+`);
+
+const CopyButton = ({ url }: { url: string }) => {
   const [isCopied, setIsCopied] = useState(false);
 
   return (
-    <div className="my-4 flex items-center justify-end gap-2 text-sm">
-      <span className="font-medium">Endpoint:</span>
-      <InlineCode className="p-1.5 flex gap-2.5 items-center text-xs">
-        {url}
-        <button
-          onClick={() => {
-            void navigator.clipboard.writeText(url).then(() => {
-              setIsCopied(true);
-              setTimeout(() => setIsCopied(false), 2000);
-            });
-          }}
-          type="button"
-        >
-          {isCopied ? (
-            <CheckIcon className="text-green-600" size={14} />
-          ) : (
-            <CopyIcon size={14} strokeWidth={1.3} />
-          )}
-        </button>
-      </InlineCode>
+    <Button
+      onClick={() => {
+        void navigator.clipboard.writeText(url).then(() => {
+          setIsCopied(true);
+          setTimeout(() => setIsCopied(false), 2000);
+        });
+      }}
+      variant="ghost"
+      size="icon"
+    >
+      {isCopied ? (
+        <CheckIcon className="text-green-600" size={14} />
+      ) : (
+        <CopyIcon size={14} strokeWidth={1.3} />
+      )}
+    </Button>
+  );
+};
+
+export const Endpoint = () => {
+  const { input, type } = useOasConfig();
+  const query = useCreateQuery(ServersQuery, { input, type });
+  const result = useSuspenseQuery(query);
+  const [, startTransition] = useTransition();
+  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>
+          {firstServer.url}
+        </InlineCode>
+        <CopyButton url={firstServer.url} />
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-wrap items-center gap-2">
+      <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))
+        }
+        value={selectedServer}
+        showChevrons={servers.length > 1}
+        options={servers.map((server) => ({
+          value: server.url,
+          label: server.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>
+  );
+};