zudoku 0.0.0-f62edde → 0.0.0-f687ed1

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

@@ -6,15 +6,14 @@ import { type PropsWithChildren, useEffect } from "react";
 import { Button } from "zudoku/ui/Button.js";
 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 { Typography } from "../../components/Typography.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 { type MarkdownPluginDefaultOptions, type MDXImport } from "./index.js";
 
 declare global {
@@ -54,10 +53,11 @@ export const MdxPage = ({
   const categoryTitle = useCurrentItem()?.categoryLabel;
 
   const title = frontmatter.title;
+  const description = frontmatter.description ?? excerpt;
   const category = frontmatter.category ?? categoryTitle;
   const hideToc = frontmatter.toc === false || defaultOptions?.toc === false;
   const pageTitle =
-    tableOfContents.find((item) => item.depth === 1)?.value ?? title;
+    title ?? tableOfContents.find((item) => item.depth === 1)?.value;
   const hidePager =
     frontmatter.disable_pager ??
     frontmatter.disablePager ??
@@ -111,14 +111,9 @@ export const MdxPage = ({
     >
       <Helmet>
         <title>{pageTitle}</title>
-        {excerpt && <meta name="description" content={excerpt} />}
+        {description && <meta name="description" content={description} />}
       </Helmet>
-      <div
-        className={cn(
-          ProseClasses,
-          "max-w-full xl:w-full xl:max-w-3xl flex-1 shrink pt-(--padding-content-top)",
-        )}
-      >
+      <Typography className="max-w-full xl:w-full xl:max-w-3xl flex-1 shrink pt-(--padding-content-top)">
         {(category || title) && (
           <header>
             {category && <CategoryHeading>{category}</CategoryHeading>}
@@ -182,8 +177,8 @@ export const MdxPage = ({
             />
           </>
         )}
-      </div>
-      <div className="hidden xl:block">
+      </Typography>
+      <div className="hidden xl:block" data-pagefind-ignore="all">
         {showToc && <Toc entries={tocEntries} />}
       </div>
     </div>

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

@@ -17,10 +17,9 @@ import {
 } from "zudoku/ui/Select.js";
 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 { Pagination } from "../../components/Pagination.js";
 import { useApiIdentities } from "../../components/context/ZudokuContext.js";
-import { cn } from "../../util/cn.js";
 import { Endpoint } from "./Endpoint.js";
 import { OperationListItem } from "./OperationListItem.js";
 import { useCreateQuery } from "./client/useCreateQuery.js";
@@ -221,6 +220,8 @@ export const OperationList = ({
       : undefined,
   };
 
+  const helmetTitle = [schema.tag.name, title].filter(Boolean).join(" - ");
+
   return (
     <div
       className="pt-(--padding-content-top)"
@@ -228,7 +229,7 @@ export const OperationList = ({
       data-pagefind-meta="section:openapi"
     >
       <Helmet>
-        <title>{[schema.tag.name, title].filter(Boolean).join(" - ")}</title>
+        {helmetTitle && <title>{helmetTitle}</title>}
         {metaDescription && (
           <meta name="description" content={metaDescription} />
         )}
@@ -244,7 +245,7 @@ export const OperationList = ({
                 registerNavigationAnchor
                 className="mb-0"
               >
-                {schema.tag.name ?? "Other endpoints"}
+                {schema.tag.name ?? "Documentation"}
                 {showVersions && (
                   <span className="text-xl text-muted-foreground ms-1.5">
                     {" "}
@@ -291,14 +292,9 @@ export const OperationList = ({
           </div>
           {schema.description && (
             <CollapsibleContent className="CollapsibleContent">
-              <div
-                className={cn(
-                  ProseClasses,
-                  "pt-4 max-w-full prose-img:max-w-prose",
-                )}
-              >
+              <div className="mt-4 max-w-full border rounded-sm bg-muted/25">
                 <Markdown
-                  className="border rounded-sm bg-muted/25 border-border px-2.5 md:px-4"
+                  className="max-w-full prose-img:max-w-prose border-border p-3 lg:p-5"
                   content={schema.description}
                 />
               </div>
@@ -306,14 +302,10 @@ export const OperationList = ({
           )}
         </Collapsible>
         {tagDescription && (
-          <div
-            className={cn(
-              ProseClasses,
-              "my-4 max-w-full prose-img:max-w-prose",
-            )}
-          >
-            <Markdown content={tagDescription} />
-          </div>
+          <Markdown
+            className="my-4 max-w-full prose-img:max-w-prose"
+            content={tagDescription}
+          />
         )}
       </div>
       <hr />

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

@@ -2,7 +2,7 @@ import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
 import { useState } from "react";
 import { Badge } from "zudoku/ui/Badge.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 { groupBy } from "../../util/groupBy.js";
 import { renderIf } from "../../util/renderIf.js";
@@ -82,7 +82,7 @@ export const OperationListItem = ({
         >
           {operation.description && (
             <Markdown
-              className={`${ProseClasses} max-w-full prose-img:max-w-prose`}
+              className="max-w-full prose-img:max-w-prose"
               content={operation.description}
             />
           )}

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

@@ -72,6 +72,12 @@ export const ParameterListItem = ({
       {parameter.description && (
         <Markdown
           content={parameter.description}
+          className="text-sm prose prose-p:my-1 prose-code:whitespace-pre-line"
+        />
+      )}
+      {paramSchema.description && (
+        <Markdown
+          content={paramSchema.description}
           className="text-sm prose-p:my-1 prose-code:whitespace-pre-line"
         />
       )}

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

@@ -14,9 +14,8 @@ import {
 } from "zudoku/ui/Collapsible.js";
 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 { Toc } from "../../components/navigation/Toc.js";
-import { cn } from "../../util/cn.js";
 import { useCreateQuery } from "./client/useCreateQuery.js";
 import { useOasConfig } from "./context.js";
 import { graphql } from "./graphql/gql.js";
@@ -110,14 +109,9 @@ export function SchemaList() {
           </div>
           {data.schema.description && (
             <CollapsibleContent className="CollapsibleContent">
-              <div
-                className={cn(
-                  ProseClasses,
-                  "pt-4 max-w-full prose-img:max-w-prose",
-                )}
-              >
+              <div className="mt-4 max-w-full border rounded-sm bg-muted/25">
                 <Markdown
-                  className="border rounded-sm bg-muted/25 border-border px-2.5 md:px-4"
+                  className="max-w-full prose-img:max-w-prose border-border p-3 lg:p-5"
                   content={data.schema.description}
                 />
               </div>

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

@@ -173,7 +173,7 @@ export const Sidecar = ({
                   embedded
                   language={selectedLang}
                   noBackground
-                  className="[--scrollbar-color:gray] rounded-none text-xs max-h-[500px] p-2"
+                  className="[--scrollbar-color:gray] rounded-none text-xs max-h-[500px]"
                   code={code!}
                 />
               </CollapsibleCode>

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

@@ -101,9 +101,10 @@ export const SidecarExamples = ({
         ) : (
           <CollapsibleCode>
             <SyntaxHighlight
+              embedded
               language={language}
               noBackground
-              className="[--scrollbar-color:gray] rounded-none text-xs max-h-[500px] p-2"
+              className="[--scrollbar-color:gray] rounded-none text-xs max-h-[500px]"
               code={formattedExample}
             />
           </CollapsibleCode>

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

@@ -166,7 +166,7 @@ export const openApiPlugin = (config: OasPluginConfig): ZudokuPlugin => {
         if (untaggedOperations) {
           categories.push(
             createNavigationCategory({
-              label: "Other endpoints",
+              label: categories.length === 0 ? "Endpoints" : "Other endpoints",
               path: joinUrl(basePath, versionParam, UNTAGGED_PATH),
               operations: untaggedOperations,
               collapsed: !config.options?.expandAllTags,

package/src/lib/plugins/openapi/playground/BodyPanel.tsx

@@ -1,45 +1,54 @@
+import { FileInput } from "lucide-react";
 import { useFormContext } from "react-hook-form";
+import { Collapsible, CollapsibleContent } from "zudoku/ui/Collapsible.js";
 import { Textarea } from "zudoku/ui/Textarea.js";
 import { cn } from "../../../util/cn.js";
 import { type Content } from "../SidecarExamples.js";
+import {
+  CollapsibleHeader,
+  CollapsibleHeaderTrigger,
+} from "./CollapsibleHeader.js";
 import ExamplesDropdown from "./ExamplesDropdown.js";
 import { type PlaygroundForm } from "./Playground.js";
 
-export const BodyPanel = ({ examples }: { examples?: Content }) => {
+export const BodyPanel = ({ content }: { content?: Content }) => {
   const { register, setValue, watch } = useFormContext<PlaygroundForm>();
-
+  const examples = (content ?? []).flatMap((e) => e.examples);
   const headers = watch("headers");
-
   return (
-    <div className="flex flex-col gap-2 ">
-      <div className="flex justify-between gap-2">
-        <span className="font-semibold">Body</span>
-        <div className="flex flex-col gap-2">
-          {examples && examples.length > 0 && (
-            <ExamplesDropdown
-              examples={examples}
-              onSelect={(example, mediaType) => {
-                setValue("body", JSON.stringify(example.value, null, 2));
-                setValue("headers", [
-                  ...headers.filter((h) => h.name !== "Content-Type"),
-                  {
-                    name: "Content-Type",
-                    value: mediaType,
-                    active: true,
-                  },
-                ]);
-              }}
-            />
-          )}
-        </div>
-      </div>
-      <Textarea
-        {...register("body")}
-        className={cn(
-          "border w-full rounded-lg bg-muted/40 p-2 h-64 font-mono text-[13px]",
+    <Collapsible defaultOpen>
+      <CollapsibleHeaderTrigger>
+        <FileInput size={16} />
+        <CollapsibleHeader>Body</CollapsibleHeader>
+        {content && examples.length > 0 ? (
+          <ExamplesDropdown
+            examples={content}
+            onSelect={(example, mediaType) => {
+              setValue("body", JSON.stringify(example.value, null, 2));
+              setValue("headers", [
+                ...headers.filter((h) => h.name !== "Content-Type"),
+                {
+                  name: "Content-Type",
+                  value: mediaType,
+                  active: true,
+                },
+              ]);
+            }}
+          />
+        ) : (
+          <div />
         )}
-      />
-    </div>
+      </CollapsibleHeaderTrigger>
+      <CollapsibleContent className="flex flex-col gap-2 ">
+        <Textarea
+          {...register("body")}
+          className={cn(
+            "w-full p-2 h-64 font-mono md:text-xs border-none rounded-none focus-visible:ring-0",
+          )}
+          placeholder="Your body here..."
+        />
+      </CollapsibleContent>
+    </Collapsible>
   );
 };
 

package/src/lib/plugins/openapi/playground/CollapsibleHeader.tsx

@@ -0,0 +1,47 @@
+import { ChevronUpIcon } from "lucide-react";
+import { CollapsibleTrigger } from "zudoku/ui/Collapsible.js";
+import { cn } from "../../../util/cn.js";
+
+export const CollapsibleHeaderTrigger = ({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) => {
+  return (
+    <div
+      className={cn(
+        "grid grid-cols-[max-content_1fr_min-content_max-content] items-center gap-4 group bg-muted w-full h-10 ps-4 pe-2 border-b",
+        className,
+      )}
+    >
+      {children}
+      <CollapsibleTrigger
+        className={cn(
+          "flex items-center gap-4 group bg-muted w-full p-2 hover:bg-accent hover:brightness-95 rounded-md",
+          className,
+        )}
+      >
+        <ChevronUpIcon
+          className="group-data-[state=open]:rotate-180 transition-transform flex-shrink-0"
+          size={16}
+        />
+      </CollapsibleTrigger>
+    </div>
+  );
+};
+
+export const CollapsibleHeader = ({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) => {
+  return (
+    <span className={cn("font-semibold w-full text-start", className)}>
+      {children}
+    </span>
+  );
+};

package/src/lib/plugins/openapi/playground/ExamplesDropdown.tsx

@@ -1,4 +1,4 @@
-import { ChevronDownIcon } from "lucide-react";
+import { PlusCircleIcon } from "lucide-react";
 import { Button } from "zudoku/ui/Button.js";
 import {
   DropdownMenu,
@@ -21,8 +21,12 @@ const ExamplesDropdown = ({
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button variant="ghost" size="sm">
-          Use Example <ChevronDownIcon className="w-4 h-4" />
+        <Button
+          variant="ghost"
+          size="sm"
+          className="hover:bg-accent hover:brightness-95"
+        >
+          Use Example <PlusCircleIcon size={16} className="ml-2" />
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent className="max-w-72">