zudoku 0.32.0 → 0.32.2

package/src/lib/components/TopNavigation.tsx

@@ -7,6 +7,7 @@ import { ZudokuError } from "../util/invariant.js";
 import { joinPath } from "../util/joinPath.js";
 import { useCurrentNavigation, useZudoku } from "./context/ZudokuContext.js";
 import { traverseSidebar } from "./navigation/utils.js";
+import { Slotlet } from "./SlotletProvider.js";
 
 export const isHiddenItem =
   (isAuthenticated?: boolean) =>
@@ -30,15 +31,18 @@ export const TopNavigation = () => {
 
   return (
     <Suspense>
-      <nav className="hidden lg:block text-sm px-12 h-[--top-nav-height]">
-        <ul className="flex flex-row items-center gap-8">
-          {topNavigation.filter(isHiddenItem(isAuthenticated)).map((item) => (
-            <li key={item.id}>
-              <TopNavItem {...item} />
-            </li>
-          ))}
-        </ul>
-      </nav>
+      <div className=" items-center justify-between px-8 h-[--top-nav-height] hidden lg:flex text-sm">
+        <nav className="text-sm">
+          <ul className="flex flex-row items-center gap-8">
+            {topNavigation.filter(isHiddenItem(isAuthenticated)).map((item) => (
+              <li key={item.id}>
+                <TopNavItem {...item} />
+              </li>
+            ))}
+          </ul>
+        </nav>
+        <Slotlet name="top-navigation-side" />
+      </div>
     </Suspense>
   );
 };

package/src/lib/components/index.ts

@@ -1,5 +1,6 @@
 import { useMDXComponents as useMDXComponentsImport } from "@mdx-js/react";
 import { Helmet } from "@zudoku/react-helmet-async";
+import { useTheme as useThemeImport } from "next-themes";
 import { Link as LinkImport } from "react-router";
 import { useAuth as useAuthImport } from "../authentication/hook.js";
 import { RouteGuard as RouteGuardImport } from "../core/RouteGuard.js";
@@ -46,3 +47,4 @@ export const Spinner = /*@__PURE__*/ SpinnerImport;
 export const ClientOnly = /*@__PURE__*/ ClientOnlyImport;
 export const Button = /*@__PURE__*/ ButtonImport;
 export const Link = /*@__PURE__*/ LinkImport;
+export const useTheme = /*@__PURE__*/ useThemeImport;

package/src/lib/components/navigation/SidebarBadge.tsx

@@ -8,6 +8,7 @@ export const ColorMap = {
   purple: "bg-purple-400 dark:bg-purple-600",
   indigo: "bg-indigo-400 dark:bg-indigo-600",
   gray: "bg-gray-400 dark:bg-gray-600",
+  outline: "border border-border rounded-md text-foreground",
 };
 
 export const ColorMapInvert = {
@@ -18,6 +19,7 @@ export const ColorMapInvert = {
   purple: "text-purple-400 dark:text-purple-600",
   indigo: "text-indigo-400 dark:text-indigo-600",
   gray: "text-gray-400 dark:text-gray-600",
+  outline: "",
 };
 
 export const SidebarBadge = ({
@@ -34,7 +36,8 @@ export const SidebarBadge = ({
   return (
     <span
       className={cn(
-        "mt-0.5 flex items-center duration-200 transition-opacity text-center uppercase font-mono text-[0.65rem] font-bold rounded text-background dark:text-zinc-50 h-4 px-1",
+        "flex items-center duration-200 transition-opacity text-center uppercase text-[0.65rem] font-bold rounded text-background dark:text-zinc-50 h-full",
+        color === "outline" ? "px-3" : "mt-0.5 px-1",
         invert ? ColorMapInvert[color] : ColorMap[color],
         className,
       )}

package/src/lib/components/navigation/SidebarItem.tsx

@@ -51,6 +51,7 @@ export const SidebarItem = ({
           className={({ isActive }) => navigationListItem({ isActive })}
           to={joinPath(item.id)}
           onClick={onRequestClose}
+          end
         >
           {item.icon && <item.icon size={16} className="align-[-0.125em]" />}
           {item.badge ? (

package/src/lib/components/navigation/SidebarWrapper.tsx

@@ -12,7 +12,7 @@ export const SidebarWrapper = forwardRef<
     // maybe this could be simplified by adjusting the layout
     data-navigation={String(pushMainContent)}
     className={cn(
-      "scrollbar peer hidden lg:flex flex-col fixed text-sm overflow-y-auto shrink-0 border-r pr-10",
+      "scrollbar peer hidden lg:flex flex-col fixed text-sm overflow-y-auto shrink-0 border-r pr-6",
       "-mx-[--padding-nav-item] pb-20 pt-[--padding-content-top]",
       "w-[--side-nav-width] h-[calc(100%-var(--header-height))] scroll-pt-2 gap-2",
       !pushMainContent && "border-r-0",

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

@@ -59,6 +59,7 @@ export type SchemaImports = Record<
 >;
 
 const builder = new SchemaBuilder<{
+  DefaultFieldNullability: false;
   Scalars: {
     JSON: any;
     JSONObject: any;
@@ -72,7 +73,9 @@ const builder = new SchemaBuilder<{
     currentTag?: string;
     slugify: CountableSlugify;
   };
-}>({});
+}>({
+  defaultFieldNullability: false,
+});
 
 type GraphQLOperationObject = OperationObject & {
   path: string;

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

@@ -1,23 +1,20 @@
-import slugify from "@sindresorhus/slugify";
 import { useSuspenseQuery } from "@tanstack/react-query";
-import { useSearchParams } from "react-router";
+import { useMatch } from "react-router";
 import { Head, 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");
   const auth = useAuthState();
+  const match = useMatch({ path: "/catalog/:category" });
+  const activeCategory = match?.params.category;
 
   const catalogItems = useSuspenseQuery({
     queryFn: () => filterCatalogItems(items, { auth }),
@@ -29,93 +26,33 @@ export const Catalog = ({
       <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;
+      <div className="grid gap-4">
+        <Heading level={2}>{label}</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;
@@ -45,20 +52,58 @@ export const apiCatalogPlugin = ({
   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}
               items={items}
               filterCatalogItems={filterCatalogItems}
-              categories={categories ?? []}
+              categories={categories}
             />
           ),
-        },
-      ];
-    },
+        })),
+      ),
   };
 };

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

@@ -99,7 +99,7 @@ export const MdxPage = ({
       <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/openapi/Sidecar.tsx

@@ -4,8 +4,8 @@ import { useMemo, useState, useTransition } from "react";
 import { useSearchParams } from "react-router";
 import { useSelectedServer } from "../../authentication/state.js";
 import { PathRenderer } from "../../components/PathRenderer.js";
-import { SyntaxHighlight } from "../../components/SyntaxHighlight.js";
 import type { SchemaObject } from "../../oas/parser/index.js";
+import { SyntaxHighlight } from "../../ui/SyntaxHighlight.js";
 import { cn } from "../../util/cn.js";
 import { useOnScreen } from "../../util/useOnScreen.js";
 import { useCreateQuery } from "./client/useCreateQuery.js";

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

@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useState } from "react";
-import { SyntaxHighlight } from "../../components/SyntaxHighlight.js";
 import { SchemaObject } from "../../oas/parser/index.js";
+import { SyntaxHighlight } from "../../ui/SyntaxHighlight.js";
 import { CollapsibleCode } from "./CollapsibleCode.js";
 import type { OperationListItemResult } from "./OperationList.js";
 import * as SidecarBox from "./SidecarBox.js";
@@ -97,7 +97,6 @@ export const SidecarExamples = ({
             <SyntaxHighlight
               language={language}
               noBackground
-              copyable
               className="[--scrollbar-color:gray] text-xs max-h-[500px] p-2"
               code={formattedExample}
             />

package/src/lib/plugins/openapi/graphql/gql.ts

@@ -12,7 +12,15 @@ import * as types from "./graphql.js";
  * Therefore it is highly recommended to use the babel or swc plugin for production.
  * Learn more about it here: https://the-guild.dev/graphql/codegen/plugins/presets/preset-client#reducing-bundle-size
  */
-const documents = {
+type Documents = {
+  "\n  query ServersQuery($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      url\n      servers {\n        url\n      }\n    }\n  }\n": typeof types.ServersQueryDocument;
+  "\n  fragment OperationsFragment on OperationItem {\n    slug\n    summary\n    method\n    description\n    operationId\n    contentTypes\n    path\n    parameters {\n      name\n      in\n      description\n      required\n      schema\n      style\n      examples {\n        name\n        description\n        externalValue\n        value\n        summary\n      }\n    }\n    requestBody {\n      content {\n        mediaType\n        encoding {\n          name\n        }\n        examples {\n          name\n          description\n          externalValue\n          value\n          summary\n        }\n        schema\n      }\n      description\n      required\n    }\n    responses {\n      statusCode\n      links\n      description\n      content {\n        examples {\n          name\n          description\n          externalValue\n          value\n          summary\n        }\n        mediaType\n        encoding {\n          name\n        }\n        schema\n      }\n    }\n  }\n": typeof types.OperationsFragmentFragmentDoc;
+  "\n  query AllOperations(\n    $input: JSON!\n    $type: SchemaType!\n    $tag: String\n    $untagged: Boolean\n  ) {\n    schema(input: $input, type: $type) {\n      servers {\n        url\n      }\n      description\n      summary\n      title\n      url\n      version\n      tags(name: $tag) {\n        name\n        description\n      }\n      operations(tag: $tag, untagged: $untagged) {\n        slug\n        ...OperationsFragment\n      }\n    }\n  }\n": typeof types.AllOperationsDocument;
+  "\n  query getServerQuery($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      url\n      servers {\n        url\n      }\n    }\n  }\n": typeof types.GetServerQueryDocument;
+  "\n  query GetCategories($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      url\n      tags {\n        name\n      }\n    }\n  }\n": typeof types.GetCategoriesDocument;
+  "\n  query GetOperations($input: JSON!, $type: SchemaType!, $tag: String) {\n    schema(input: $input, type: $type) {\n      operations(tag: $tag) {\n        slug\n        deprecated\n        method\n        summary\n        operationId\n        path\n        tags {\n          name\n        }\n      }\n      untagged: operations(untagged: true) {\n        slug\n        deprecated\n        method\n        summary\n        operationId\n        path\n      }\n    }\n  }\n": typeof types.GetOperationsDocument;
+};
+const documents: Documents = {
   "\n  query ServersQuery($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      url\n      servers {\n        url\n      }\n    }\n  }\n":
     types.ServersQueryDocument,
   "\n  fragment OperationsFragment on OperationItem {\n    slug\n    summary\n    method\n    description\n    operationId\n    contentTypes\n    path\n    parameters {\n      name\n      in\n      description\n      required\n      schema\n      style\n      examples {\n        name\n        description\n        externalValue\n        value\n        summary\n      }\n    }\n    requestBody {\n      content {\n        mediaType\n        encoding {\n          name\n        }\n        examples {\n          name\n          description\n          externalValue\n          value\n          summary\n        }\n        schema\n      }\n      description\n      required\n    }\n    responses {\n      statusCode\n      links\n      description\n      content {\n        examples {\n          name\n          description\n          externalValue\n          value\n          summary\n        }\n        mediaType\n        encoding {\n          name\n        }\n        schema\n      }\n    }\n  }\n":

package/src/lib/plugins/openapi/playground/result-panel/ResponseTab.tsx

@@ -13,8 +13,8 @@ import {
   SelectTrigger,
   SelectValue,
 } from "zudoku/ui/Select.js";
-import { SyntaxHighlight } from "../../../../components/SyntaxHighlight.js";
 import { Card } from "../../../../ui/Card.js";
+import { SyntaxHighlight } from "../../../../ui/SyntaxHighlight.js";
 import { convertToTypes } from "./convertToTypes.js";
 
 const statusCodeMap: Record<number, string> = {

package/src/lib/{components → ui}/SyntaxHighlight.tsx

@@ -31,17 +31,20 @@ void import("prismjs/components/prism-typescript.min.js");
 
 import { useTheme } from "next-themes";
 import { useState } from "react";
+import { ClientOnly } from "../components/ClientOnly.js";
 import { cn } from "../util/cn.js";
-import { ClientOnly } from "./ClientOnly.js";
 
-type SyntaxHighlightProps = {
+export type SyntaxHighlightProps = {
   className?: string;
   noBackground?: boolean;
   wrapLines?: boolean;
-  copyable?: boolean;
   showLanguageIndicator?: boolean;
   language?: string;
   title?: string;
+  children?: string;
+  code?: string;
+  showCopy?: "hover" | "always" | "never";
+  showCopyText?: boolean;
 } & Omit<HighlightProps, "children" | "language">;
 
 const remapLang = {
@@ -49,15 +52,19 @@ const remapLang = {
 } as Record<string, string>;
 
 export const SyntaxHighlight = ({
-  copyable = true,
   language = "plain",
+  showCopy = "hover",
+  showCopyText,
   title,
+  children,
   ...props
 }: SyntaxHighlightProps) => {
   const { resolvedTheme } = useTheme();
   const [isCopied, setIsCopied] = useState(false);
 
-  if (!props.code) {
+  const code = children ?? props.code;
+
+  if (!code) {
     return null;
   }
 
@@ -86,7 +93,7 @@ export const SyntaxHighlight = ({
               title && "pt-10",
             )}
           >
-            {props.code}
+            {code}
           </pre>
           {props.showLanguageIndicator && (
             <span className="absolute top-1.5 right-3 text-[11px] font-mono text-muted-foreground transition group-hover:opacity-0">
@@ -100,6 +107,7 @@ export const SyntaxHighlight = ({
         theme={highlightTheme}
         language={remapLang[language] ?? language}
         {...props}
+        code={code}
       >
         {({ className, style, tokens, getLineProps, getTokenProps }) => (
           <div className="relative group">
@@ -134,12 +142,18 @@ export const SyntaxHighlight = ({
                 {language}
               </span>
             )}
-            {copyable && (
+            {showCopy !== "never" && (
               <button
                 type="button"
                 aria-label="Copy code"
                 title="Copy code"
-                className="absolute top-2 right-2 p-2 opacity-0 group-hover:opacity-100 group-hover:bg-zinc-100 group-hover:dark:bg-zinc-700 hover:outline hover:outline-border/75 dark:hover:outline-border rounded-md text-sm text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-400 transition"
+                className={cn(
+                  "absolute top-2 right-2 p-2  hover:outline hover:outline-border/75 dark:hover:outline-border rounded-md text-sm text-muted-foreground transition",
+                  showCopy === "hover"
+                    ? "opacity-0 group-hover:opacity-100 group-hover:bg-zinc-100 group-hover:dark:bg-zinc-700"
+                    : "bg-zinc-100 dark:bg-zinc-700",
+                  showCopyText && "flex gap-2 items-center font-medium",
+                )}
                 disabled={isCopied}
                 onClick={() => {
                   setIsCopied(true);
@@ -161,6 +175,7 @@ export const SyntaxHighlight = ({
                 ) : (
                   <CopyIcon size={16} />
                 )}
+                {showCopyText && "Copy"}
               </button>
             )}
           </div>

package/src/lib/ui/util.tsx

@@ -0,0 +1,3 @@
+import { cn as cnUtil } from "../util/cn.js";
+
+export const cn = cnUtil;

package/src/lib/util/MdxComponents.tsx

@@ -2,8 +2,8 @@ import { MDXComponents } from "mdx/types.js";
 import { Link } from "react-router";
 import { Heading } from "../components/Heading.js";
 import { InlineCode } from "../components/InlineCode.js";
-import { SyntaxHighlight } from "../components/SyntaxHighlight.js";
 import { Callout } from "../ui/Callout.js";
+import { SyntaxHighlight } from "../ui/SyntaxHighlight.js";
 
 export type MdxComponentsType = Readonly<MDXComponents> | null | undefined;
 

package/dist/lib/components/SyntaxHighlight.d.ts

@@ -1,12 +0,0 @@
-import { type HighlightProps } from "prism-react-renderer";
-type SyntaxHighlightProps = {
-    className?: string;
-    noBackground?: boolean;
-    wrapLines?: boolean;
-    copyable?: boolean;
-    showLanguageIndicator?: boolean;
-    language?: string;
-    title?: string;
-} & Omit<HighlightProps, "children" | "language">;
-export declare const SyntaxHighlight: ({ copyable, language, title, ...props }: SyntaxHighlightProps) => import("react/jsx-runtime").JSX.Element | null;
-export {};

package/dist/lib/components/SyntaxHighlight.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"SyntaxHighlight.js","sourceRoot":"","sources":["../../../src/lib/components/SyntaxHighlight.tsx"],"names":[],"mappings":"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"}