zudoku 0.3.0-dev.11 → 0.3.0-dev.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zudoku",
-  "version": "0.3.0-dev.11",
+  "version": "0.3.0-dev.13",
   "type": "module",
   "files": [
     "dist",

package/src/app/App.tsx

@@ -19,16 +19,19 @@ import { DevPortal } from "zudoku/components";
 export default function App() {
   return (
     <DevPortal
-      meta={{
-        headerTitle: config.ui?.headerTitle ?? "Developer Portal",
-        pageTitle: config.ui?.pageTitle ?? "%s | Dev Portal",
-        logo: config.ui?.logo ?? "https://cdn.zuplo.com/www/favicon.png",
-        favicon:
-          config.ui?.metadata?.favicon ??
-          "https://cdn.zuplo.com/www/favicon.png",
+      page={{
+        logo: config.page?.logo ?? "https://cdn.zuplo.com/www/favicon.png",
+        pageTitle: "Developer Portal",
+        ...config.page,
+      }}
+      metadata={{
+        favicon: "https://cdn.zuplo.com/www/favicon.png",
+        title: "%s | Developer Portal",
+        ...config.metadata,
       }}
       navigation={config.navigation ?? []}
       authentication={configuredAuthProvider}
+      mdxComponents={config.mdx?.components}
       plugins={[
         ...configuredDocsPlugins,
         ...configuredApiPlugins,

package/src/lib/components/DevPortal.tsx

@@ -4,20 +4,14 @@ import { Fragment, memo, Suspense, useEffect, useMemo } from "react";
 import {
   DevPortalContext,
   queryClient,
-  type NavigationItem,
+  ZudokuContextOptions,
 } from "../core/DevPortalContext.js";
 import { Helmet, HelmetProvider } from "../core/helmet.js";
-import { hasHead, type DevPortalPlugin } from "../core/plugins.js";
-
-import { AuthenticationProvider } from "../authentication/authentication.js";
-import {
-  MdxComponents,
-  type MdxComponentsType,
-} from "../util/MdxComponents.js";
+import { hasHead } from "../core/plugins.js";
+import { MdxComponents } from "../util/MdxComponents.js";
 import {
   ComponentsProvider,
   DEFAULT_COMPONENTS,
-  type ComponentsContextType,
 } from "./context/ComponentsContext.js";
 import { DevPortalProvider } from "./context/DevPortalProvider.js";
 import { ThemeProvider } from "./context/ThemeContext.js";
@@ -32,22 +26,7 @@ export type DevPortalPath =
   | string
   | (typeof DevPortalSystemPaths)[keyof typeof DevPortalSystemPaths];
 
-export type DevPortalProps = {
-  meta?: Partial<{
-    headerTitle: string;
-    pageTitle: string;
-    description: string;
-    logo: string;
-    favicon: string;
-  }>;
-  authentication?: AuthenticationProvider;
-  navigation: NavigationItem[];
-  plugins?: DevPortalPlugin[];
-  mdxComponents?: MdxComponentsType;
-  overrides?: ComponentsContextType;
-};
-
-const DevPortalInner = (props: DevPortalProps) => {
+const DevPortalInner = (props: ZudokuContextOptions) => {
   const components = useMemo(
     () => ({ ...DEFAULT_COMPONENTS, ...props.overrides }),
     [props.overrides],

package/src/lib/components/Header.tsx

@@ -9,7 +9,7 @@ import { useTheme } from "./context/ThemeContext.js";
 export const Header = memo(function HeaderInner() {
   const [isDark, toggleTheme] = useTheme();
   const { isAuthenticated, profile, isAuthEnabled, login, logout } = useAuth();
-  const { meta } = useDevPortal();
+  const { page } = useDevPortal();
 
   const ThemeIcon = isDark ? MoonStarIcon : SunIcon;
 
@@ -18,11 +18,11 @@ export const Header = memo(function HeaderInner() {
       <div className="max-w-screen-2xl mx-auto">
         <div className="grid grid-cols-[calc(var(--side-nav-width))_1fr] lg:gap-12 items-center border-b border-border px-12 h-[--top-header-height]">
           <div className="flex items-center gap-3.5">
-            {meta?.logo && (
-              <img src={meta.logo} alt="My Dev Portal" className="h-10" />
+            {page?.logo && (
+              <img src={page.logo} alt={page.pageTitle} className="h-10" />
             )}
             <span className="font-bold text-2xl text-foreground/85 tracking-wide">
-              {meta?.headerTitle}
+              {page?.pageTitle}
             </span>
           </div>
           <div className="grid grid-cols-[--sidecar-grid-cols] items-center gap-8">

package/src/lib/components/Heading.tsx

@@ -1,7 +1,24 @@
-import { type ReactNode } from "react";
-import { cn } from "../util/cn.js";
+import React, { type ReactNode } from "react";
 import { useRegisterAnchorElement } from "./context/ViewportAnchorContext.js";
 
+import { cva, type VariantProps } from "class-variance-authority";
+
+const heading = cva("group relative", {
+  variants: {
+    level: {
+      6: "text-md",
+      5: "text-lg",
+      4: "text-xl",
+      3: "text-xl font-semibold",
+      2: "text-2xl font-bold",
+      1: "text-4xl font-extrabold",
+    },
+  },
+  defaultVariants: {
+    level: 1,
+  },
+});
+
 const getComponent = (level: number) => {
   switch (level) {
     case 1:
@@ -21,27 +38,29 @@ const getComponent = (level: number) => {
   }
 };
 
-export type HeadingProps = {
+export interface HeadingProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof heading> {
   children: ReactNode;
   className?: string;
   id?: string;
   level?: 1 | 2 | 3 | 4 | 5 | 6;
   registerSidebarAnchor?: boolean;
-};
+}
 
-export const Heading = ({
+export const Heading: React.FC<HeadingProps> = ({
   level,
   children,
   id,
   className,
   registerSidebarAnchor,
-}: HeadingProps) => {
+}) => {
   const Component = getComponent(level ?? 1);
   const { ref } = useRegisterAnchorElement();
 
   return (
     <Component
-      className={cn("group relative", className)}
+      className={heading({ className, level })}
       ref={registerSidebarAnchor ? ref : undefined}
       id={id}
     >

package/src/lib/components/Layout.tsx

@@ -29,7 +29,7 @@ export const Layout = ({ children }: { children?: ReactNode }) => {
 
   return (
     <>
-      <Helmet titleTemplate={meta?.pageTitle}>
+      <Helmet titleTemplate={meta?.title}>
         <title>Home</title>
         {meta?.description && (
           <meta name="description" content={meta.description} />

package/src/lib/core/DevPortalContext.ts

@@ -2,16 +2,15 @@ import { QueryClient } from "@tanstack/react-query";
 import { type ReactNode } from "react";
 import { create } from "zustand";
 import { type AuthenticationProvider } from "../authentication/authentication.js";
+import type { ComponentsContextType } from "../components/context/ComponentsContext.js";
+import { type DevPortalPath } from "../components/DevPortal.js";
+import type { MdxComponentsType } from "../util/MdxComponents.js";
 import {
-  type DevPortalPath,
-  type DevPortalProps,
-} from "../components/DevPortal.js";
-import {
+  type DevPortalPlugin,
   isApiIdentityPlugin,
   isNavigationPlugin,
-  needsInitialization,
-  type DevPortalPlugin,
   type NavigationPlugin,
+  needsInitialization,
 } from "./plugins.js";
 
 export interface ApiIdentity {
@@ -66,21 +65,50 @@ export const useRoutingState = create<RoutingState>(() => ({}));
 export type ApiKeyCache = "api-keys";
 export type DevPortalCacheKey = ApiKeyCache | string;
 
+export type ZudokuContextMetadataOptions = Partial<{
+  title: string;
+  description: string;
+  logo: string;
+  favicon: string;
+  generator: string;
+  applicationName: string;
+  referrer: string;
+  keywords: string[];
+  authors: string[];
+  creator: string;
+  publisher: string;
+}>;
+export type ZudokuContextPageOptions = Partial<{
+  pageTitle?: string;
+  logo?: string;
+}>;
+export type ZudokuContextOptions = {
+  metadata?: ZudokuContextMetadataOptions;
+  page?: ZudokuContextPageOptions;
+  authentication?: AuthenticationProvider;
+  navigation: NavigationItem[];
+  plugins?: DevPortalPlugin[];
+  mdxComponents?: MdxComponentsType;
+  overrides?: ComponentsContextType;
+};
+
 export class DevPortalContext {
   private plugins: DevPortalPlugin[] = [];
   private navigationPlugins: NavigationPlugin[];
 
   public navigation: NavigationItem[];
-  public meta: DevPortalProps["meta"];
+  public meta: ZudokuContextOptions["metadata"];
+  public page: ZudokuContextOptions["page"];
   public authentication?: AuthenticationProvider;
   public state: typeof useRoutingState;
 
-  constructor(config: DevPortalProps) {
+  constructor(config: ZudokuContextOptions) {
     this.plugins = config.plugins ?? [];
     this.navigation = config.navigation;
     this.navigationPlugins = this.plugins.filter(isNavigationPlugin);
     this.authentication = config.authentication;
-    this.meta = config.meta;
+    this.meta = config.metadata;
+    this.page = config.page;
     this.state = useRoutingState;
   }
 

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

@@ -12,7 +12,7 @@ import { cn } from "../../util/cn.js";
 import slugify from "../../util/slugify.js";
 import { traverseNavigation } from "../../util/traverseNavigation.js";
 import { Toc } from "./Toc.js";
-import type { MDXImport } from "./index.js";
+import { MarkdownPluginDefaultOptions, MDXImport } from "./index.js";
 
 const MarkdownHeadings = {
   h2: ({ children, id }) => (
@@ -31,10 +31,12 @@ const MarkdownHeadings = {
 export const MdxPage = ({
   mdxComponent: MdxComponent,
   frontmatter = {},
+  defaultOptions,
   tableOfContents,
 }: PropsWithChildren<
   Omit<MDXImport, "default"> & {
     mdxComponent: MDXImport["default"];
+    defaultOptions?: MarkdownPluginDefaultOptions;
   }
 >) => {
   const navItem = useTopNavigationItem();
@@ -50,10 +52,11 @@ export const MdxPage = ({
 
   const title = frontmatter.title;
   const category = frontmatter.category ?? categoryTitle;
-  const hideToc = frontmatter.toc === false;
-
+  const hideToc = frontmatter.toc === false || defaultOptions?.toc === false;
   const pageTitle =
     tableOfContents.find((item) => item.depth === 1)?.value ?? title;
+  const hidePager =
+    frontmatter.disablePager ?? defaultOptions?.disablePager ?? false;
 
   const tocEntries =
     tableOfContents.find((item) => item.depth === 1)?.children ??
@@ -112,35 +115,49 @@ export const MdxPage = ({
         <MdxComponent
           components={{ ...useMDXComponents(), ...MarkdownHeadings }}
         />
-        <hr />
-        <div className="not-prose flex items-center justify-between gap-8">
-          {prev.path ? (
-            <Link
-              to={prev.path}
-              className="flex flex-col items-stretch gap-2 flex-1 truncate border border-border rounded px-6 py-4 text-start hover:border-primary/85 transition shadow-sm hover:shadow-md"
-              title={typeof prev.label === "string" ? prev.label : undefined}
-            >
-              <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.path ? (
-            <Link
-              to={next.path}
-              className="flex flex-col items-stretch gap-2 flex-1 truncate border border-border rounded px-6 py-4 text-end hover:border-primary/85 transition shadow-sm hover:shadow-md"
-              title={typeof next.label === "string" ? next.label : undefined}
-            >
-              <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>
+        {!hidePager && (
+          <>
+            <hr />
+            <div className="not-prose flex items-center justify-between gap-8">
+              {prev.path ? (
+                <Link
+                  to={prev.path}
+                  className="flex flex-col items-stretch gap-2 flex-1 truncate border border-border rounded px-6 py-4 text-start hover:border-primary/85 transition shadow-sm hover:shadow-md"
+                  title={
+                    typeof prev.label === "string" ? prev.label : undefined
+                  }
+                >
+                  <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.path ? (
+                <Link
+                  to={next.path}
+                  className="flex flex-col items-stretch gap-2 flex-1 truncate border border-border rounded px-6 py-4 text-end hover:border-primary/85 transition shadow-sm hover:shadow-md"
+                  title={
+                    typeof next.label === "string" ? next.label : undefined
+                  }
+                >
+                  <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>
+          </>
+        )}
       </div>
       <div className="hidden xl:block">
         {showToc && <Toc entries={tocEntries} />}

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

@@ -3,10 +3,14 @@ import { isPathItem } from "../../components/navigation/util.js";
 import { Navigate, type RouteObject } from "../../core/router.js";
 import { traverseNavigation } from "../../util/traverseNavigation.js";
 import { MdxPage } from "./MdxPage.js";
-import type { MarkdownPluginOptions } from "./index.js";
+import {
+  MarkdownPluginDefaultOptions,
+  MarkdownPluginOptions,
+} from "./index.js";
 
 export const generateRoutes = (
   markdownFiles: MarkdownPluginOptions["markdownFiles"],
+  defaultOptions?: MarkdownPluginDefaultOptions,
 ): RouteObject[] => {
   const routes = Object.entries(markdownFiles).flatMap(
     ([file, importPromise]) => {
@@ -28,7 +32,13 @@ export const generateRoutes = (
           const { default: Component, ...props } = await importPromise();
 
           return {
-            element: <MdxPage mdxComponent={Component} {...props} />,
+            element: (
+              <MdxPage
+                mdxComponent={Component}
+                {...props}
+                defaultOptions={defaultOptions}
+              />
+            ),
           };
         },
       } satisfies RouteObject;

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

@@ -5,13 +5,19 @@ import { generateRoutes } from "./generateRoutes.js";
 
 export type MarkdownPluginOptions = {
   markdownFiles: Record<string, () => Promise<MDXImport>>;
+  defaultOptions?: MarkdownPluginDefaultOptions;
 };
+export type MarkdownPluginDefaultOptions = Pick<
+  Frontmatter,
+  "toc" | "disablePager"
+>;
 
 export type Frontmatter = {
   title?: string;
   description?: string;
   category?: string;
   toc?: boolean;
+  disablePager?: boolean;
 };
 
 export type MDXImport = {
@@ -22,10 +28,11 @@ export type MDXImport = {
 
 export const markdownPlugin = ({
   markdownFiles,
+  defaultOptions,
 }: MarkdownPluginOptions): DevPortalPlugin => {
   return {
     getRoutes() {
-      return generateRoutes(markdownFiles);
+      return generateRoutes(markdownFiles, defaultOptions);
     },
   };
 };

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

@@ -1,11 +1,12 @@
 import { ResultOf } from "@graphql-typed-document-node/core";
 import { CategoryHeading } from "../../components/CategoryHeading.js";
 import { Heading } from "../../components/Heading.js";
-import { Markdown, ProseClasses } from "../../components/Markdown.js";
+import { Markdown } from "../../components/Markdown.js";
 import { cn } from "../../util/cn.js";
 import { OperationListItem } from "./OperationListItem.js";
 import { graphql } from "./graphql/index.js";
 import { useOasConfig } from "./index.js";
+import { SchemaProseClasses } from "./util/prose.js";
 import { useQuery } from "./util/urql.js";
 
 export const OperationsFragment = graphql(/* GraphQL */ `
@@ -94,7 +95,12 @@ export const OperationList = () => {
 
   return (
     <div className="pt-[--padding-content-top]">
-      <div className={cn(ProseClasses, "mb-16")}>
+      <div
+        className={cn(
+          SchemaProseClasses,
+          "mb-16 max-w-full prose-img:max-w-prose",
+        )}
+      >
         <CategoryHeading>Overview</CategoryHeading>
         <Heading level={1} id="description" registerSidebarAnchor>
           {result.data.schema.title}
@@ -108,7 +114,7 @@ export const OperationList = () => {
             {tag.name && <CategoryHeading>{tag.name}</CategoryHeading>}
             {tag.description && (
               <Markdown
-                className={`${ProseClasses} mt-2 mb-12`}
+                className={`${SchemaProseClasses} mt-2 mb-12`}
                 content={tag.description}
               />
             )}

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

@@ -1,11 +1,13 @@
 import { Heading } from "../../components/Heading.js";
-import { Markdown, ProseClasses } from "../../components/Markdown.js";
+import { Markdown } from "../../components/Markdown.js";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../ui/Tabs.js";
+import { renderIf } from "../../util/renderIf.js";
 import { OperationsFragment } from "./OperationList.js";
 import { ParameterList } from "./ParameterList.js";
 import { SchemaListView } from "./SchemaListView.js";
 import { Sidecar } from "./Sidecar.js";
 import { FragmentType, useFragment } from "./graphql/index.js";
+import { SchemaProseClasses } from "./util/prose.js";
 
 export const PARAM_GROUPS = ["path", "query", "header", "cookie"] as const;
 export type ParameterGroup = (typeof PARAM_GROUPS)[number];
@@ -20,24 +22,24 @@ export const OperationListItem = ({
     operation.parameters ?? [],
     (param) => param.in,
   );
-  const first = operation.responses.find((re) => re.statusCode === "200");
+  const first = operation.responses.at(0);
   return (
     <div
       key={operation.operationId}
-      className="grid grid-cols-2 gap-8 items-start border-b-2 mb-16 pb-16 border-border"
+      className="grid grid-cols-[4fr_3fr] gap-8 items-start border-b-2 mb-16 pb-16 border-border"
     >
-      <div className={ProseClasses}>
-        <Heading
-          level={2}
-          className="mt-0"
-          id={operation.slug}
-          registerSidebarAnchor
-        >
+      <div className="flex flex-col gap-4">
+        <Heading level={2} id={operation.slug} registerSidebarAnchor>
           {operation.summary}
         </Heading>
-        {operation.description && <Markdown content={operation.description} />}
+        {operation.description && (
+          <Markdown
+            className={SchemaProseClasses}
+            content={operation.description}
+          />
+        )}
         {operation.parameters && operation.parameters.length > 0 && (
-          <div className="mt-4">
+          <>
             {PARAM_GROUPS.flatMap((group) =>
               groupedParameters[group]?.length ? (
                 <ParameterList
@@ -50,11 +52,22 @@ export const OperationListItem = ({
                 []
               ),
             )}
-          </div>
+          </>
         )}
+        {renderIf(operation.requestBody?.content?.at(0)?.schema, (schema) => (
+          <div className="mt-4 flex flex-col gap-4">
+            <Heading level={3} className="capitalize">
+              Request Body
+            </Heading>
+            <SchemaListView schema={schema} />
+          </div>
+        ))}
         {operation.responses.length > 0 && (
           <>
-            <Heading level={3} className="capitalize">
+            <Heading
+              level={3}
+              className="capitalize mt-8 pt-8 border-border border-t"
+            >
               Responses
             </Heading>
             <Tabs defaultValue={`${first?.statusCode}${first?.description}`}>
@@ -75,10 +88,18 @@ export const OperationListItem = ({
                     value={response.statusCode + response.description}
                     key={response.statusCode}
                   >
-                    <SchemaListView
-                      schema={response.content?.at(0)?.schema}
-                      name=""
-                    />
+                    {renderIf(
+                      response.content?.find((content) => content.schema),
+                      (content) => {
+                        return (
+                          <SchemaListView schema={content.schema} name="" />
+                        );
+                      },
+                    ) ?? (
+                      <div className="border-border font-mono text-sm border rounded p-4">
+                        No response body
+                      </div>
+                    )}
                   </TabsContent>
                 ))}
               </ul>

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

@@ -18,7 +18,7 @@ export const ParameterList = ({
     <Heading level={3} id={`${id}/${group}-parameters`} className="capitalize">
       {group === "header" ? "Headers" : `${group} Parameters`}
     </Heading>
-    <ul className="list-none m-0 px-0 overflow-hidden">
+    <ul className="list-none m-0 px-0 overflow-hidden border border-border divide-y divide-border rounded">
       {parameters.map((parameter) => (
         <ParameterListItem
           key={`${parameter.name}-${parameter.in}`}

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

@@ -28,14 +28,13 @@ export const ParameterListItem = ({
   group: ParameterGroup;
   id: string;
 }) => (
-  <li className="not-prose px-2 py-4 border-t border-border bg-border/20 text-sm flex flex-col gap-1">
+  <li className="p-4 bg-border/20 text-sm flex flex-col gap-1">
     <div className="flex items-center gap-2">
       <code>
         {group === "path" ? (
           <ColorizedParam
             name={parameter.name}
             backgroundOpacity="15%"
-            className="px-1"
             slug={id + "-" + parameter.name.toLocaleLowerCase()}
           />
         ) : (
@@ -43,12 +42,12 @@ export const ParameterListItem = ({
         )}
       </code>
       {parameter.required && (
-        <span className="py-px px-1.5 font-medium text-xs bg-primary/75 text-muted rounded-lg">
+        <span className="py-px px-1.5 font-medium bg-primary/75 text-muted rounded-lg">
           required
         </span>
       )}
       {getParameterSchema(parameter).type && (
-        <span className="text-xs text-muted-foreground">
+        <span className="text-muted-foreground">
           {getParameterSchema(parameter).type}
         </span>
       )}

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

@@ -1,9 +1,7 @@
-import { useState } from "react";
 import { SyntaxHighlight } from "../../components/SyntaxHighlight.js";
 import { type SchemaObject } from "../../oas/graphql/index.js";
 import type { OperationListItemResult } from "./OperationList.js";
 import * as SidecarBox from "./SidecarBox.js";
-import { SimpleSelect } from "./SimpleSelect.js";
 import { generateSchemaExample } from "./util/generateSchemaExample.js";
 
 type Content = NonNullable<
@@ -12,24 +10,13 @@ type Content = NonNullable<
 
 // @todo should we handle multiple content types?
 export const RequestBodySidecarBox = ({ content }: { content: Content }) => {
-  const [selected, setSelected] = useState("example");
-
   if (!content.length) return null;
 
   return (
     <>
-      <div>lol</div>
       <SidecarBox.Root>
         <SidecarBox.Head className="text-xs flex justify-between items-center">
-          <span className="font-mono">Request Body</span>
-          <SimpleSelect
-            value={selected}
-            onChange={(e) => setSelected(e.target.value)}
-            options={[
-              { value: "example", label: "Example" },
-              { value: "schema", label: "Schema" },
-            ]}
-          />
+          <span className="font-mono">Request Body Example</span>
         </SidecarBox.Head>
         <SidecarBox.Body>
           <SyntaxHighlight
@@ -38,9 +25,7 @@ export const RequestBodySidecarBox = ({ content }: { content: Content }) => {
             copyable
             className="text-xs"
             code={JSON.stringify(
-              selected === "example"
-                ? generateSchemaExample(content[0].schema as SchemaObject)
-                : content[0].schema,
+              generateSchemaExample(content[0].schema as SchemaObject),
               null,
               2,
             )}