blume 2.1.3 → 2.2.1

package/src/components/layout/PageActions.astro

@@ -1,6 +1,12 @@
 ---
 import { EN_UI } from "../../core/i18n-ui.ts";
 import type { UIStrings } from "../../core/i18n-ui.ts";
+import {
+  isBuiltInMcpClient,
+  mcpClients,
+  mcpMenuRows,
+} from "../../core/mcp-clients.ts";
+import type { McpMenuEntry } from "../../core/mcp-clients.ts";
 import { NEW_TAB_ATTRS } from "../../core/new-tab.ts";
 import { openInChatProviders } from "../../core/open-in-chat.ts";
 import type { OpenInChatProvider } from "../../core/open-in-chat.ts";
@@ -18,6 +24,11 @@ interface Props {
   mcpUrl?: string | null;
   /** Display name of the MCP server (defaults to the site title). */
   mcpName?: string | null;
+  /**
+   * "Connect to MCP" clients to list after "Copy server URL", in order, with
+   * custom labels resolved; omitting the prop lists every built-in client.
+   */
+  mcpMenu?: readonly McpMenuEntry[];
   /**
    * "Open in chat" providers to list, in order; an empty list hides the
    * action, and omitting the prop shows every provider.
@@ -40,6 +51,7 @@ const {
   exportEpub,
   mcpUrl,
   mcpName,
+  mcpMenu,
   openInChat,
   strings,
   divider = true,
@@ -89,6 +101,10 @@ const providers = (openInChat ?? openInChatProviders).map((key) => ({
 // keep that separator only while a configured list preserves v0 first.
 const chatSeparator = providers.length > 1 && providers[0]?.key === "v0";
 
+// `agents.mcp.clients` picks and orders the clients after "Copy server URL",
+// with a rule between the commands to copy and the install links.
+const mcpRows = mcpMenuRows(mcpMenu ?? mcpClients);
+
 // The block renders once, for the right rail. Below `xl` the script moves it
 // into the mobile "On this page" dropdown, and the global styles below the
 // markup restyle it there from that container.
@@ -230,29 +246,57 @@ const panelClass =
               {a.copyServerUrl}
             </span>
           </button>
-          <button class={menuRowClass} data-mcp-copy-claude type="button">
-            <span set:html={LOGOS.claude} />
-            <span class="flex-1" data-mcp-claude-label>
-              {a.copyClaudeCode}
-            </span>
-          </button>
-          <button class={menuRowClass} data-mcp-copy-codex type="button">
-            <span set:html={LOGOS.codex} />
-            <span class="flex-1" data-mcp-codex-label>
-              {a.copyCodex}
-            </span>
-          </button>
-          <hr class="my-1 border-border border-t" />
-          <a class={menuRowClass} data-mcp-cursor rel="noreferrer">
-            <span set:html={LOGOS.cursor} />
-            <span class="flex-1">{a.addToCursor}</span>
-            <Icon name="external-link" size={13} />
-          </a>
-          <a class={menuRowClass} data-mcp-vscode rel="noreferrer">
-            <Icon name="code" size={16} />
-            <span class="flex-1">{a.addToVscode}</span>
-            <Icon name="external-link" size={13} />
-          </a>
+          {mcpRows.map(({ client, rule }) => (
+            <>
+              {rule && <hr class="my-1 border-border border-t" />}
+              {client === "claude-code" && (
+                <button
+                  class={menuRowClass}
+                  data-mcp-copy-claude
+                  type="button"
+                >
+                  <span set:html={LOGOS.claude} />
+                  <span class="flex-1" data-mcp-claude-label>
+                    {a.copyClaudeCode}
+                  </span>
+                </button>
+              )}
+              {client === "codex" && (
+                <button class={menuRowClass} data-mcp-copy-codex type="button">
+                  <span set:html={LOGOS.codex} />
+                  <span class="flex-1" data-mcp-codex-label>
+                    {a.copyCodex}
+                  </span>
+                </button>
+              )}
+              {client === "cursor" && (
+                <a class={menuRowClass} data-mcp-cursor rel="noreferrer">
+                  <span set:html={LOGOS.cursor} />
+                  <span class="flex-1">{a.addToCursor}</span>
+                  <Icon name="external-link" size={13} />
+                </a>
+              )}
+              {client === "vscode" && (
+                <a class={menuRowClass} data-mcp-vscode rel="noreferrer">
+                  <Icon name="code" size={16} />
+                  <span class="flex-1">{a.addToVscode}</span>
+                  <Icon name="external-link" size={13} />
+                </a>
+              )}
+              {!isBuiltInMcpClient(client) && (
+                <button
+                  class={menuRowClass}
+                  data-mcp-copy-command={client.command}
+                  type="button"
+                >
+                  <Icon name={client.icon ?? "terminal"} size={16} />
+                  <span class="flex-1" data-mcp-command-label>
+                    {client.label}
+                  </span>
+                </button>
+              )}
+            </>
+          ))}
         </div>
       </details>
     )
@@ -299,6 +343,7 @@ const panelClass =
 </style>
 
 <script>
+  import { mcpClientCommand } from "../../core/mcp-clients.ts";
   import { copyDeferredText, copyText, flashLabel } from "../copy-feedback.ts";
   import { installDropdownDismiss } from "../dropdown-dismiss.ts";
   import { mountBase } from "../islands/base-path.ts";
@@ -572,6 +617,19 @@ hr { border: 0; border-top: 1px solid #ddd; margin: 2em 0; }`;
             root.querySelector("[data-mcp-codex-label]")
           )
         );
+      for (const button of root.querySelectorAll<HTMLElement>(
+        "[data-mcp-copy-command]"
+      )) {
+        button.addEventListener("click", () =>
+          copy(
+            mcpClientCommand(button.dataset.mcpCopyCommand ?? "", {
+              name: id,
+              url: mcpUrl,
+            }),
+            button.querySelector("[data-mcp-command-label]")
+          )
+        );
+      }
     }
 
     const label = root.querySelector("[data-blume-copy-label]");

package/src/components/layout/RootLayout.astro

@@ -9,6 +9,8 @@ import type { UIStrings } from "../../core/i18n-ui.ts";
 import { resolveDateFormatOptions } from "../../core/date-format.ts";
 import type { ResolvedDateFormat } from "../../core/schema.ts";
 import type { OpenInChatProvider } from "../../core/open-in-chat.ts";
+import { mcpMenuEntries } from "../../core/mcp-clients.ts";
+import type { McpClientEntry } from "../../core/mcp-clients.ts";
 import type {
   BlumeBanner,
   BlumeClientData,
@@ -114,7 +116,15 @@ interface Props {
   banner?: BlumeBanner | null;
   analytics?: BlumeDataConfig["analytics"] | null;
   navigation: Navigation;
-  mcp?: { name: string; route: string } | null;
+  /**
+   * The hosted MCP server. `clients` lists the "Connect to MCP" menu's
+   * clients in order, and defaults to every built-in one.
+   */
+  mcp?: {
+    clients?: readonly McpClientEntry[];
+    name: string;
+    route: string;
+  } | null;
   page: { title: string; description?: string; route: string };
   headings: Heading[];
   imageZoom?: boolean;
@@ -471,6 +481,11 @@ const markdownMirror = isBare
 // Needs a configured site to be useful, so the menu is hidden without one.
 const mcpUrl =
   mcp && siteUrl ? new URL(withMountedBase(mcp.route), siteUrl).href : null;
+// Custom clients' labels resolve to the page's locale. Without a list,
+// PageActions shows every built-in client.
+const mcpMenu = mcp?.clients
+  ? mcpMenuEntries(mcp.clients, locale, data.config.i18n?.defaultLocale)
+  : undefined;
 
 // Scope the sidebar (and the breadcrumbs/pagination derived from it) to the
 // active tab's section, so a multi-section site drills each tab into its own
@@ -910,14 +925,16 @@ const localeRedirect = localeTargets
           <slot />
         </article>
         {
-          !isApiOperation && showChrome && (
+          showChrome && (
             <div
               class:list={[
                 // Aligned with the content column, not centered under the
-                // prose measure: a rail page's, a wide page's, or a center
-                // page's wider one.
-                apiRail && "xl:pe-[30.5rem]",
-                (apiRail || modeLayout.width === "full") && "[&>*]:max-w-none",
+                // prose measure: an API page's (beside its example or
+                // request column), a wide page's, or a center page's wider
+                // one.
+                isApiLayout && "xl:pe-[30.5rem]",
+                (isApiLayout || modeLayout.width === "full") &&
+                  "[&>*]:max-w-none",
                 modeLayout.width === "center" && "[&>*]:max-w-[54rem]",
               ]}
               data-blume-page-end
@@ -966,6 +983,7 @@ const localeRedirect = localeTargets
               editUrl={editUrl}
               exportEpub={exportEpub}
               exportPdf={exportPdf}
+              mcpMenu={mcpMenu}
               mcpName={mcp?.name}
               mcpUrl={mcpUrl}
               openInChat={openInChat}
@@ -1005,6 +1023,8 @@ const localeRedirect = localeTargets
     ></button>
     <script>
       import type { Zoom } from "medium-zoom";
+      import { copyableCode } from "../code-copy.ts";
+      import { languageLabel } from "../code-language.ts";
       import { copyText, createCopyFlash } from "../copy-feedback.ts";
       import { syncDrawerInert } from "./drawer-inert.ts";
       import { chromeIcons as icons } from "../../theme/chrome-icons.ts";
@@ -1081,27 +1101,6 @@ const localeRedirect = localeTargets
         return panel.matches("pre") ? panel : panel.querySelector("pre");
       };
 
-      const languageLabels: Record<string, string> = {
-        astro: "Astro",
-        bash: "Bash",
-        css: "CSS",
-        html: "HTML",
-        js: "JavaScript",
-        json: "JSON",
-        jsx: "JSX",
-        md: "Markdown",
-        mdx: "MDX",
-        plaintext: "Text",
-        sh: "Shell",
-        shell: "Shell",
-        ts: "TypeScript",
-        tsx: "TSX",
-        txt: "Text",
-        yaml: "YAML",
-        yml: "YAML",
-        zsh: "Zsh",
-      };
-
       // Per-page setup, run on the initial load and again after every
       // client-router swap (which replaces the body with server-rendered
       // markup that has none of this applied). Everything in here binds to
@@ -1176,7 +1175,14 @@ const localeRedirect = localeTargets
           };
           const flash = createCopyFlash(setChecked, copiedLabel);
           button.addEventListener("click", async () => {
-            if (await copyText(codeText(readPre()))) {
+            // A terminal session copies its commands alone (see
+            // code-copy.ts), keyed off the fence's own language id.
+            const pre = readPre();
+            const language =
+              pre instanceof HTMLElement
+                ? (pre.dataset.blumeLanguage ?? pre.dataset.language)
+                : undefined;
+            if (await copyText(copyableCode(codeText(pre), language))) {
               flash();
             }
           });
@@ -1277,10 +1283,7 @@ const localeRedirect = localeTargets
             if (pre instanceof HTMLElement) {
               pre.dataset.blumeLanguage = language;
             }
-            pre.setAttribute(
-              "data-language",
-              languageLabels[language.toLowerCase()] ?? language
-            );
+            pre.setAttribute("data-language", languageLabel(language));
           }
           pre.classList.add("group", "relative");
           // The code element is the scroll container (see the theme entry), but

package/src/components/layout/SiteFooter.astro

@@ -1,8 +1,8 @@
 ---
 // The site footer, below the content on every page: one row, as tall as the
-// header, with `footer.links` on one side and the social profile icons on the
-// other. The site's repository (`github`, unless `navigation.repo` hides it)
-// is the first icon; the footer is the only place it's linked. With `consent` configured the links end with the
+// header, with `footer.links` on one side, the social profile icons on the
+// other, and `footer.copyright` centered between them. The site's repository
+// (`github`, unless `navigation.repo` hides it) is the first icon; the footer is the only place it's linked. With `consent` configured the links end with the
 // Cookie settings link, which reopens the reader's consent choices. Renders
 // nothing when there's none of these; a `components.ts` `Footer` replaces it.
 import data from "blume:data";
@@ -12,6 +12,7 @@ import type { Navigation } from "../../core/types.ts";
 import { EN_UI } from "../../core/i18n-ui.ts";
 import type { UIStrings } from "../../core/i18n-ui.ts";
 import { routeSetFor } from "../../core/locale-links.ts";
+import { resolveLocalizable } from "../../core/localizable.ts";
 import { newTabAttrs } from "../../core/new-tab.ts";
 import Icon from "../Icon.astro";
 import { withBase } from "../islands/base-path.ts";
@@ -21,8 +22,9 @@ import { footerSocialLinks } from "./footer-socials.ts";
 interface Props {
   footer?: BlumeDataConfig["footer"];
   /**
-   * Active locale of the page: labels written as per-locale maps show its
-   * entry, and internal links move into it (see `footer-links.ts`).
+   * Active locale of the page: the copyright and labels written as
+   * per-locale maps show its entry, and internal links move into it (see
+   * `footer-links.ts`).
    */
   locale?: string;
   /** The page's navigation: its `repoUrl` is the repository link. */
@@ -40,6 +42,14 @@ const socials = footerSocialLinks(
     ? { href: repoUrl, label: { ...EN_UI.nav, ...ui?.nav }.githubRepository }
     : null
 );
+const copyright =
+  footer?.copyright === undefined
+    ? null
+    : resolveLocalizable(
+        footer.copyright,
+        locale,
+        data.config.i18n?.defaultLocale
+      );
 const links = footerLinks(footer?.links ?? [], {
   basePath: data.config.basePath,
   i18n: data.config.i18n,
@@ -58,9 +68,17 @@ const hasLinks = links.length > 0 || consentSettings !== null;
 ---
 
 {
-  (hasLinks || socials.length > 0) && (
+  (copyright !== null || hasLinks || socials.length > 0) && (
     <footer class="border-border border-t px-4 md:px-6" data-blume-footer>
-      <div class="flex min-h-16 flex-wrap items-center justify-between gap-x-6 gap-y-3 py-3">
+      {/* With a copyright, three columns from `md`, the outer two sharing
+          what it leaves so it sits at the true center; without one, the
+          links keep the row's full width. Narrower, the row wraps. */}
+      <div
+        class:list={[
+          "flex min-h-16 flex-wrap items-center gap-x-6 gap-y-3 py-3",
+          copyright !== null && "md:grid md:grid-cols-[1fr_auto_1fr]",
+        ]}
+      >
         {hasLinks && (
           <ul class="flex flex-wrap items-center gap-x-5 gap-y-2 text-sm">
             {links.map((link) => (
@@ -87,10 +105,15 @@ const hasLinks = links.length > 0 || consentSettings !== null;
             )}
           </ul>
         )}
+        {copyright !== null && (
+          <p class="text-muted-foreground text-sm md:col-start-2">
+            {copyright}
+          </p>
+        )}
         {/* Pulled out by the buttons' padding, so the glyphs line up with the
             footer's edge, and pushed to the far side even with no links. */}
         {socials.length > 0 && (
-          <ul class="-me-[9px] -my-[9px] ms-auto flex flex-wrap items-center gap-1">
+          <ul class="-me-[9px] -my-[9px] ms-auto flex flex-wrap items-center gap-1 md:col-start-3">
             {socials.map((social) => (
               <li>
                 <a

package/src/components/layout/nav-utils.ts

@@ -273,6 +273,20 @@ export const getPagination = (flat: FlatPage[], route: string) => {
 /** A group node in the sidebar tree. */
 export type NavGroup = Extract<NavNode, { kind: "group" }>;
 
+/**
+ * Whether a `group`-mode disclosure renders open: it holds the current page,
+ * its meta forces it open (`collapsed: false`), or it is the only row at the
+ * top of the sidebar, where starting closed would leave a sidebar of one row
+ * to click before any link shows (a wrapper folder around every page). An
+ * explicit `collapsed: true` keeps that lone group closed.
+ */
+export const groupStartsOpen = (
+  group: NavGroup,
+  active: boolean,
+  lone: boolean
+): boolean =>
+  active || group.collapsed === false || (lone && group.collapsed !== true);
+
 /**
  * The group whose own page `route` is, when that page lists the group's
  * pages: its `directory` (inherited when the group sets none) is `card` or

package/src/components/layout/search/pagefind.ts

@@ -32,7 +32,8 @@ interface PagefindEntry {
 
 // Pagefind names each page after its built file (`quickstart/index.html`), so
 // its URLs end in a slash. Blume serves pages without one (`trailingSlash:
-// "never"`): hosts redirect the slashed URL, and `blume preview` 404s it.
+// "never"`): Vercel, `blume dev`, and `blume preview` redirect the slashed
+// URL, so linking it costs a hop.
 const TRAILING_SLASH = /(?<=.)\/(?=[#?]|$)/u;
 
 /**

package/src/components/openapi/Operation.astro

@@ -159,6 +159,7 @@ const model =
         parameters: params,
         path: ref.path,
         requestBody,
+        responses,
         schemas,
         security,
         // An operation's own `servers` override its path item's, which
@@ -268,6 +269,7 @@ const callbackParts = (entry: CallbackEntry) => ({
           <ParametersTable parameters={params} schemas={schemas} />
           {requestBody && (
             <RequestBody
+              components={components}
               direction={bodyDirection}
               expandAll={spec.expandSchemas}
               requestBody={requestBody}
@@ -321,9 +323,11 @@ const callbackParts = (entry: CallbackEntry) => ({
                       />
                       {parts.requestBody && (
                         <RequestBody
+                          components={components}
                           direction="response"
                           expandAll={spec.expandSchemas}
                           level={4}
+                          name={`callback-${entry.key}`}
                           requestBody={parts.requestBody}
                           schemas={schemas}
                         />

package/src/components/openapi/PanelTabs.astro

@@ -28,16 +28,22 @@ interface Props {
   copy?: boolean;
   /** Render tab labels in a monospace face (status codes). */
   mono?: boolean;
+  /**
+   * Names this tab set in its element ids, for a heading that repeats on
+   * the page (a callback's request body examples). Defaults to the heading.
+   */
+  name?: string;
 }
 
-const { heading, panels, copy = false, mono = false } = Astro.props;
+const { heading, panels, copy = false, mono = false, name = heading } =
+  Astro.props;
 
 // A stable per-instance id prefix so tab/tabpanel pairs can reference each
 // other without colliding across the multiple PanelTabs on one page (the
-// heading is unique per rail group; panel keys are unique within a group).
+// name is unique per tab set; panel keys are unique within a set).
 const NON_ID = /[^a-z0-9]+/gu;
 const idFor = (kind: "tab" | "panel", key: string): string =>
-  ["panel-tabs", heading, kind, key]
+  ["panel-tabs", name, kind, key]
     .map((part) => part.toLowerCase().replace(NON_ID, "-"))
     .join("-");
 

package/src/components/openapi/RequestBody.astro

@@ -1,22 +1,31 @@
 ---
+import data from "blume:data";
+
+import { highlightCode } from "../../markdown/index.ts";
 import Description from "./Description.astro";
-import type { SchemaLike } from "./helpers.ts";
+import { preferredMedia } from "./example-panels.ts";
+import {
+  type ComponentsLike,
+  type MediaLike,
+  namedExamples,
+  type SchemaLike,
+  toJson,
+} from "./helpers.ts";
+import PanelTabs from "./PanelTabs.astro";
 import type { SchemaDirection } from "./schema-tree.ts";
 import SchemaTable from "./SchemaTable.astro";
 
-interface MediaTypeLike {
-  schema?: SchemaLike;
-}
-
 interface RequestBodyLike {
   description?: string;
   required?: boolean;
-  content?: Record<string, MediaTypeLike>;
+  content?: Record<string, MediaLike>;
 }
 
 interface Props {
   requestBody: RequestBodyLike;
   schemas: Record<string, SchemaLike>;
+  /** The document's `components`, which `$ref`'d examples resolve against. */
+  components?: ComponentsLike;
   expandAll?: boolean;
   /** The heading's level: 2 on an operation, deeper inside a callback. */
   level?: number;
@@ -25,20 +34,38 @@ interface Props {
    * callback, which the API sends, reads like a response instead.
    */
   direction?: SchemaDirection;
+  /** Names the body's example tabs in their element ids (one per callback). */
+  name?: string;
 }
 
 const {
   requestBody,
   schemas,
+  components,
   expandAll = false,
   level = 2,
   direction = "request",
+  name = "request-body",
 } = Astro.props;
 
-const entries = Object.entries(requestBody.content ?? {});
-const chosen = entries.find(([type]) => type.includes("json")) ?? entries[0];
+const chosen = preferredMedia(requestBody.content);
 const contentType = chosen?.[0] ?? "application/json";
 const schema = chosen?.[1]?.schema ?? {};
+
+// A body whose `examples` map names two or more shows each, under its name:
+// the code samples and Try it start from the first one only.
+const examplePanels = await Promise.all(
+  (chosen ? namedExamples(chosen[1], schemas, direction, components) : []).map(
+    async (example) => ({
+      html: await highlightCode(toJson(example.value), "json", {
+        icons: false,
+        themes: data.config.codeThemes,
+      }),
+      key: example.key,
+      label: example.label,
+    })
+  )
+);
 ---
 
 <section class:list={[level > 2 ? "mt-5" : "mt-8"]}>
@@ -72,4 +99,11 @@ const schema = chosen?.[1]?.schema ?? {};
       schemas={schemas}
     />
   </div>
+  {
+    examplePanels.length > 0 && (
+      <div class="not-prose mt-4">
+        <PanelTabs copy heading="Examples" name={`${name}-examples`} panels={examplePanels} />
+      </div>
+    )
+  }
 </section>

package/src/components/openapi/RequestPanel.astro

@@ -4,27 +4,21 @@ import data from "blume:data";
 import { highlightCode } from "../../markdown/index.ts";
 import {
   type ComponentsLike,
-  responseExample,
+  type MediaLike,
   type SchemaLike,
-  type SpecValue,
   toJson,
 } from "./helpers.ts";
 import type { CustomCodeSample } from "./code-samples.ts";
+import {
+  type ExamplePanel,
+  payloadPanels as payloadExamples,
+  type ResponseLike,
+  responsePanels as responseExamples,
+} from "./example-panels.ts";
 import { languageSamplePanels } from "./sample-panels.ts";
 import PanelTabs from "./PanelTabs.astro";
 import type { RequestSample, SampleLanguage } from "./snippets.ts";
 
-interface MediaTypeLike {
-  schema?: SchemaLike;
-  example?: SpecValue;
-  examples?: SpecValue;
-}
-
-interface ResponseLike {
-  description?: string;
-  content?: Record<string, MediaTypeLike>;
-}
-
 interface Props {
   /** The document's `components`, which `$ref`'d examples resolve against. */
   components?: ComponentsLike;
@@ -34,7 +28,7 @@ interface Props {
    * A webhook's body: the rail shows it as a "Payload" example per media
    * type in place of client code, since the API sends the request.
    */
-  payload?: Record<string, MediaTypeLike>;
+  payload?: Record<string, MediaLike>;
   sample?: RequestSample;
   languages?: SampleLanguage[];
   responses: Record<string, ResponseLike>;
@@ -51,18 +45,26 @@ const {
   schemas,
 } = Astro.props;
 
-/** A media type's example, highlighted, or null when it has none. */
-const highlightExample = async (media: MediaTypeLike, type: string) => {
-  const example = responseExample(media, schemas, components);
-  if (example === undefined || example === null) {
-    return null;
-  }
-  const json = type.includes("json");
-  return highlightCode(
-    json || typeof example !== "string" ? toJson(example) : example,
-    json ? "json" : "text",
-    { icons: false, themes: data.config.codeThemes }
-  );
+/**
+ * One example tab, highlighted. A payload that isn't JSON shows a string
+ * example as written; a response example always reads as JSON.
+ */
+const highlightPanel = async (panel: ExamplePanel, asText: boolean) => {
+  const { value } = panel;
+  const text = asText && typeof value === "string";
+  return {
+    html:
+      value === undefined || value === null
+        ? null
+        : await highlightCode(
+            text ? value : toJson(value),
+            text ? "text" : "json",
+            { icons: false, themes: data.config.codeThemes }
+          ),
+    key: panel.key,
+    label: panel.label,
+    text: panel.text,
+  };
 };
 
 // Hand-written samples carry no `lang` key, so the playground leaves them
@@ -78,12 +80,9 @@ const customPanels = await Promise.all(
   }))
 );
 const payloadPanels = await Promise.all(
-  Object.entries(payload ?? {}).map(async ([type, media]) => ({
-    html: await highlightExample(media, type),
-    key: type,
-    label: type,
-    text: "No example payload.",
-  }))
+  payloadExamples(payload, schemas, components).map((panel) =>
+    highlightPanel(panel, !panel.type.includes("json"))
+  )
 );
 const requestPanels = [
   ...customPanels,
@@ -91,28 +90,10 @@ const requestPanels = [
     ? await languageSamplePanels(languages, sample, data.config.codeThemes)
     : []),
 ];
-
 const responsePanels = await Promise.all(
-  Object.entries(responses).map(async ([status, response]) => {
-    const media =
-      Object.entries(response.content ?? {}).find(([type]) =>
-        type.includes("json")
-      )?.[1] ?? Object.values(response.content ?? {})[0];
-    const example = media ? responseExample(media, schemas, components) : undefined;
-    const html =
-      example === undefined || example === null
-        ? null
-        : await highlightCode(toJson(example), "json", {
-            icons: false,
-            themes: data.config.codeThemes,
-          });
-    return {
-      html,
-      key: status,
-      label: status,
-      text: response.description || "No example response.",
-    };
-  })
+  responseExamples(responses, schemas, components).map((panel) =>
+    highlightPanel(panel, false)
+  )
 );
 ---