radiant-docs 0.1.7 → 0.1.8

package/template/src/components/endpoint/RequestSnippets.astro

@@ -1,16 +1,19 @@
 ---
-import { Code } from "astro-expressive-code/components";
 import { Icon } from "astro-icon/components";
-import { methodColors } from "../../lib/utils";
-import { readFileSync } from "node:fs";
-import { fileURLToPath } from "node:url";
-import { resolve, dirname } from "node:path";
 import oasToSnippet from "@readme/oas-to-snippet";
 import type { Language } from "@readme/oas-to-snippet/languages";
 import type { DataForHAR, HttpMethods, MediaTypeObject } from "oas/types";
 import * as Sampler from "openapi-sampler";
 import type { JSONSchema7 } from "json-schema";
 import type Oas from "oas";
+import { methodColors } from "../../lib/utils";
+import CodeTabEdge from "../ui/CodeTabEdge.astro";
+import {
+  buildDefaultCodeFileName,
+  getCodeLineTokens,
+  getLanguageIconSvg,
+  normalizeCodeLanguageValue,
+} from "../../lib/code/code-block";
 
 interface Props {
   api: Oas;
@@ -22,16 +25,12 @@ const { method, path, api } = Astro.props;
 
 const operation = api.operation(path, method as HttpMethods);
 
-// Identify and build the Auth object
 const auth: Record<string, string | number | { user?: string; pass?: string }> =
   {};
 const securityByType = operation.prepareSecurity();
 Object.values(securityByType).forEach((schemes) => {
-  // schemes is an array of security scheme objects
   (schemes as any[]).forEach((scheme) => {
     const schemeName = scheme._key || scheme.name;
-
-    // Keep the original conditionals - they're correct!
     if (scheme?.type === "http" && scheme?.scheme === "bearer") {
       auth[schemeName] = "<BEARER_TOKEN>";
     } else if (scheme?.type === "apiKey") {
@@ -42,37 +41,30 @@ Object.values(securityByType).forEach((schemes) => {
   });
 });
 
-// 1. Initialize the values object
 const values: DataForHAR = {
   path: {},
   query: {},
   body: undefined,
 };
 
-// 2. Process Parameters (Path and Query)
 const parameters = operation.getParameters();
 parameters.forEach((param) => {
   const name = param.name;
-
-  // Get example if it exists
   const example =
     param.example ||
     (param.schema as any)?.example ||
     (param.schema as any)?.default;
 
   if (param.in === "path") {
-    // Per your request: Maintain curly braces for path
     values.path![name] = `{${name}}`;
   } else if (param.in === "query") {
-    // Precedence: Example -> Placeholder
     values.query![name] = example ? String(example) : `<${name.toUpperCase()}>`;
   }
 });
 
-// Process Request Body
 if (operation.hasRequestBody()) {
   const requestBody = operation.getRequestBody(
-    "application/json"
+    "application/json",
   ) as MediaTypeObject;
   const schema = requestBody?.schema;
 
@@ -81,61 +73,53 @@ if (operation.hasRequestBody()) {
   }
 }
 
-let snippets: {
+const generatedSnippets: Array<{
   code: string | false;
   highlightMode: string | false;
   install: string | false;
-}[] = [];
+  label?: string;
+}> = [];
 
-const languages = [
-  ["go", "native"],
-  ["shell", "curl"],
-  ["javascript", "fetch"],
-  ["python", "requests"],
+const snippetTargets: Array<{
+  lang: string;
+  target: string;
+  label: string;
+}> = [
+  { lang: "shell", target: "curl", label: "cURL" },
+  { lang: "javascript", target: "fetch", label: "JavaScript" },
+  { lang: "python", target: "requests", label: "Python" },
+  { lang: "go", target: "native", label: "Go" },
+  { lang: "java", target: "okhttp", label: "Java" },
+  { lang: "php", target: "guzzle", label: "PHP" },
 ];
 
-languages.forEach(([lang, target]) => {
+snippetTargets.forEach(({ lang, target, label }) => {
   try {
-    // Generate the snippet
-    // formData and auth can be empty objects for generic examples
-    const res = oasToSnippet(api, operation, values, auth, [
+    const result = oasToSnippet(api, operation, values, auth, [
       lang,
       target,
     ] as Language);
 
-    if (res && res.code) {
-      res.code = res.code
+    if (result && result.code) {
+      result.code = result.code
         .replace(/%7B/g, "{")
         .replace(/%7D/g, "}")
         .replace(/%3C/g, "<")
         .replace(/%3E/g, ">");
+
+      result.code = result.code
+        .replace(/\r\n?/g, "\n")
+        .replace(/^[ \t]*\n/gm, "")
+        .trimEnd();
     }
 
-    snippets.push(res);
-  } catch (err) {
-    const errorMessage = err instanceof Error ? err.message : String(err);
-    console.error(`Failed to generate ${lang} snippet:`, errorMessage);
+    generatedSnippets.push({ ...result, label });
+  } catch (error) {
+    const message = error instanceof Error ? error.message : String(error);
+    console.error(`Failed to generate ${lang}/${target} snippet:`, message);
   }
 });
 
-// Resolve the path to node_modules
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = dirname(__filename);
-const iconsPath = resolve(
-  __dirname,
-  "../../../node_modules/@xt0rted/expressive-code-file-icons/dist/icons"
-);
-
-// Helper function to read SVG file
-function getIconSvg(iconName: string): string {
-  try {
-    return readFileSync(resolve(iconsPath, `${iconName}.svg`), "utf-8");
-  } catch {
-    return "";
-  }
-}
-
-// Map language to display label
 const displayLabelMap: Record<string, string> = {
   shell: "cURL",
   javascript: "JavaScript",
@@ -143,166 +127,331 @@ const displayLabelMap: Record<string, string> = {
   go: "Go",
 };
 
-// Map language to icon filename
-const iconFilenameMap: Record<string, string> = {
-  shell: "file_type_shell",
-  javascript: "file_type_js_official",
-  python: "file_type_python",
-  go: "file_type_go",
-};
+const CURL_ICON_SVG = `<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" class="size-3.5 shrink-0 self-center rounded-[4px]" xmlns="http://www.w3.org/2000/svg"><path d="M432 32H80a64.07 64.07 0 0 0-64 64v320a64.07 64.07 0 0 0 64 64h352a64.07 64.07 0 0 0 64-64V96a64.07 64.07 0 0 0-64-64zM96 256a16 16 0 0 1-10-28.49L150.39 176 86 124.49a16 16 0 1 1 20-25l80 64a16 16 0 0 1 0 25l-80 64A16 16 0 0 1 96 256zm160 0h-64a16 16 0 0 1 0-32h64a16 16 0 0 1 0 32z"></path></svg>`;
 
-// Create icon map with SVG content
-const iconMap: Record<string, string> = {};
-for (const [lang, iconName] of Object.entries(iconFilenameMap)) {
-  iconMap[lang] = getIconSvg(iconName);
-}
+function buildTokenStyle(token: {
+  color?: string;
+  bgColor?: string;
+  fontStyle?: number;
+  htmlStyle?: Record<string, string>;
+}): string | undefined {
+  const styleSegments: string[] = [];
 
-// Prepare snippets with display labels
-const snippetsWithIcons = snippets.map((snippet) => {
-  if (!snippet.highlightMode) {
-    return { ...snippet, iconSvg: null, displayLabel: snippet.highlightMode };
+  if (token.color) styleSegments.push(`color:${token.color}`);
+  if (token.bgColor) styleSegments.push(`background-color:${token.bgColor}`);
+
+  const fontStyle = typeof token.fontStyle === "number" ? token.fontStyle : 0;
+  if ((fontStyle & 1) === 1) styleSegments.push("font-style:italic");
+  if ((fontStyle & 2) === 2) styleSegments.push("font-weight:600");
+  if ((fontStyle & 4) === 4) styleSegments.push("text-decoration:underline");
+
+  if (token.htmlStyle && typeof token.htmlStyle === "object") {
+    for (const [property, value] of Object.entries(token.htmlStyle)) {
+      styleSegments.push(`${property}:${value}`);
+    }
   }
-  const iconSvg = iconMap[snippet.highlightMode.toLowerCase()] || null;
-  const displayLabel =
-    displayLabelMap[snippet.highlightMode.toLowerCase()] ||
-    snippet.highlightMode;
-  return { ...snippet, iconSvg, displayLabel };
-});
+
+  if (!styleSegments.length) return undefined;
+  return styleSegments.join(";");
+}
+
+function escapeHtml(value: string): string {
+  return value
+    .replaceAll("&", "&amp;")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;");
+}
+
+function escapeAttribute(value: string): string {
+  return escapeHtml(value).replaceAll('"', "&quot;");
+}
+
+async function renderCodeLinesHtml(
+  code: string,
+  language: string,
+): Promise<string> {
+  const normalizedCode = code.replace(/\r\n?/g, "\n");
+  const { lines: tokenLines } = await getCodeLineTokens({
+    code: normalizedCode,
+    language,
+  });
+
+  const rawLines = normalizedCode.split("\n");
+  const normalizedRawLines = rawLines.length > 0 ? rawLines : [""];
+  const lineCount = Math.max(1, normalizedRawLines.length, tokenLines.length);
+  const normalizedTokenLines = Array.from({ length: lineCount }, (_, index) => {
+    return tokenLines[index] ?? [];
+  });
+
+  return normalizedTokenLines
+    .map((lineTokens, lineIndex) => {
+      const fallbackLineContent = normalizedRawLines[lineIndex] ?? "";
+      const tokenHtml =
+        lineTokens.length > 0
+          ? lineTokens
+              .map((token) => {
+                const tokenStyle = buildTokenStyle(token);
+                const tokenStyleAttribute = tokenStyle
+                  ? ` style="${escapeAttribute(tokenStyle)}"`
+                  : "";
+                return `<span${tokenStyleAttribute}>${escapeHtml(token.content)}</span>`;
+              })
+              .join("")
+          : fallbackLineContent.length > 0
+            ? escapeHtml(fallbackLineContent)
+            : "&nbsp;";
+
+      return `<span class="flex min-w-full"><span class="flex-1 whitespace-pre pr-4 pl-4">${tokenHtml}</span></span>`;
+    })
+    .join("");
+}
+
+const requestSnippetItems = await Promise.all(
+  generatedSnippets
+    .filter(
+      (
+        snippet,
+      ): snippet is {
+        code: string;
+        highlightMode: string;
+        install: string | false;
+      } => {
+        return (
+          typeof snippet.code === "string" &&
+          typeof snippet.highlightMode === "string"
+        );
+      },
+    )
+    .map(async (snippet) => {
+      const normalizedLanguage = normalizeCodeLanguageValue(
+        snippet.highlightMode,
+      );
+      const displayLabel =
+        snippet.label ??
+        displayLabelMap[normalizedLanguage] ??
+        snippet.highlightMode;
+      const iconSvg =
+        displayLabel === "cURL"
+          ? CURL_ICON_SVG
+          : await getLanguageIconSvg({
+              language: normalizedLanguage,
+              fileName: buildDefaultCodeFileName(normalizedLanguage),
+              className: "size-3.5 shrink-0 self-center rounded-[4px]",
+            });
+
+      return {
+        label: displayLabel,
+        code: snippet.code,
+        iconSvg,
+        renderedCodeLinesHtml: await renderCodeLinesHtml(
+          snippet.code,
+          normalizedLanguage,
+        ),
+      };
+    }),
+);
+
+if (requestSnippetItems.length === 0) {
+  const fallbackLanguage = "plaintext";
+  const fallbackCode = "Unable to generate request snippets.";
+  requestSnippetItems.push({
+    label: "Plaintext",
+    code: fallbackCode,
+    iconSvg: await getLanguageIconSvg({
+      language: fallbackLanguage,
+      fileName: buildDefaultCodeFileName(fallbackLanguage),
+      className: "size-3.5 shrink-0 self-center rounded-[4px]",
+    }),
+    renderedCodeLinesHtml: await renderCodeLinesHtml(
+      fallbackCode,
+      fallbackLanguage,
+    ),
+  });
+}
+
+const clientSnippets = requestSnippetItems.map((snippet) => ({
+  label: snippet.label,
+  code: snippet.code,
+  iconSvg: snippet.iconSvg,
+}));
+const snippetsData = JSON.stringify(clientSnippets).replaceAll("`", "\\`");
+const firstSnippet = requestSnippetItems[0];
+const hasMultipleRequests = requestSnippetItems.length > 1;
 ---
 
 <div
   x-data={`{
-    snippets: ${JSON.stringify(snippetsWithIcons)},
+    snippets: ${snippetsData},
     selected: 0,
+    hasMultiple: ${hasMultipleRequests ? "true" : "false"},
+    copied: false,
+    pillLeft: 0,
+    pillWidth: 0,
+    pillVisible: false,
+    tabSyncHandler: null,
+    copyTimeoutId: null,
+    init() {
+      if (!this.hasMultiple) return;
+      const sync = () => this.syncPill();
+      this.tabSyncHandler = sync;
+      this.$nextTick(() => {
+        this.syncPill();
+        this.$refs.tabList?.addEventListener("scroll", sync, {
+          passive: true,
+        });
+        window.addEventListener("resize", sync);
+      });
+    },
+    syncPill() {
+      if (!this.hasMultiple) return;
+      const tabs = this.$refs.tabList;
+      if (!tabs) return;
+      const activeTab = tabs.querySelector(
+        '[data-rd-snippet-tab="' + this.selected + '"]',
+      );
+      if (!activeTab) {
+        this.pillVisible = false;
+        return;
+      }
+      const tabsRect = tabs.getBoundingClientRect();
+      const activeRect = activeTab.getBoundingClientRect();
+      this.pillLeft = activeRect.left - tabsRect.left + tabs.scrollLeft;
+      this.pillWidth = activeRect.width;
+      this.pillVisible = true;
+    },
     select(index) {
       this.selected = index;
-      this.$refs.button?.focus();
-      this.close();
+      this.$nextTick(() => {
+        this.syncPill();
+        window.dispatchEvent(new CustomEvent("rd:snippet-content-change"));
+      });
     },
-    close(focusAfter) {
-      if (!this.open) return;
-      this.open = false;
-      focusAfter?.focus();
+    async copySelected() {
+      const snippet = this.snippets[this.selected];
+      if (!snippet) return;
+      if (!navigator?.clipboard?.writeText) {
+        this.copied = false;
+        return;
+      }
+      try {
+        await navigator.clipboard.writeText(snippet.code ?? "");
+        this.copied = true;
+        if (this.copyTimeoutId) window.clearTimeout(this.copyTimeoutId);
+        this.copyTimeoutId = window.setTimeout(() => {
+          this.copied = false;
+          this.copyTimeoutId = null;
+        }, 1200);
+      } catch {
+        this.copied = false;
+      }
     }
   }`}
-  class="request-code-snippets bg-neutral-100 rounded-[14px] border border-neutral-200 p-[3px] inset-shadow-xs"
+  class="request-code-snippets h-full min-h-0 w-full min-w-0"
 >
-  <div class="flex justify-between items-center">
-    <div class="font-medium ml-2 text-neutral-700 text-sm truncate">
-      <span
-        class:list={[
-          "text-xs uppercase font-semibold px-1.5 border py-px rounded-md mr-1.5",
-          methodColors[method],
-        ]}>{method}</span
-      >{path}
-    </div>
+  <div class="group/prose-code not-prose relative h-full min-h-0 w-full max-w-full min-w-0">
     <div
-      x-data="{
-    open: false,
-    toggle() {
-        if (this.open) {
-            return this.close()
-        }
-
-        this.$refs.button.focus()
+      class="flex h-full min-h-0 w-full max-w-full min-w-0 flex-col overflow-hidden rounded-xl border border-neutral-200 bg-white shadow-xs"
+    >
+      <div
+        class="flex items-center justify-between gap-2 border-b border-neutral-200 bg-neutral-50 rounded-t-xl inset-shadow-sm inset-shadow-neutral-100/80"
+      >
+        {
+          hasMultipleRequests ? (
+            <div class="min-w-0 flex-1 overflow-hidden rounded-t-xl">
+              <div
+                x-ref="tabList"
+                class="relative flex min-w-0 items-end gap-1 overflow-x-auto pl-1 pr-8 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+              >
+                <div
+                  aria-hidden="true"
+                  class="pointer-events-none absolute top-1/2 z-0 h-[28px] -translate-y-1/2 rounded-lg border-[0.5px] border-neutral-200 bg-white shadow-xs transition-[left,width,opacity] duration-200 ease-out"
+                  x-bind:class="pillVisible ? 'opacity-100' : 'opacity-0'"
+                  x-bind:style="'left:' + pillLeft + 'px;width:' + pillWidth + 'px;'"
+                />
 
-        this.open = true
-    },
-    close(focusAfter) {
-        if (! this.open) return
+                <template
+                  x-for="(snippet, index) in snippets"
+                  :key="snippet.label + index"
+                >
+                  <button
+                    type="button"
+                    x-bind:data-rd-snippet-tab="index"
+                    x-on:click="select(index)"
+                    class="relative z-10 inline-flex h-9 items-center gap-2 border-0 bg-transparent px-3 py-1.5 text-xs font-medium transition-colors duration-150 focus:outline-none focus-visible:outline-none cursor-pointer"
+                    x-bind:class="selected === index ? 'text-neutral-900' : 'text-neutral-600'"
+                  >
+                    <span
+                      x-show="snippet.iconSvg"
+                      x-html="snippet.iconSvg"
+                      class="pointer-events-none inline-flex size-3.5 shrink-0 items-center rounded-[4px] transition-opacity duration-150"
+                      x-bind:class="selected === index ? 'opacity-100' : 'opacity-70'"></span>
+                    <span class="whitespace-pre leading-none" x-text="snippet.label"></span>
+                  </button>
+                </template>
+              </div>
+            </div>
+          ) : (
+            <div class="min-w-0 flex-1">
+              <div class="relative h-9 w-fit max-w-full rounded-tl-xl bg-white">
+                <div class="absolute inset-x-0 -bottom-px h-px bg-white"></div>
+                <CodeTabEdge
+                  className="pointer-events-none absolute -top-px left-full z-10 h-[calc(100%+2px)]"
+                />
 
-        this.open = false
+                <div class="relative z-20 inline-flex h-9 max-w-full items-center gap-2 pl-5 pr-3 py-1.5 text-xs font-medium text-neutral-700">
+                  <span
+                    class="size-3.5 shrink-0 self-center rounded-[4px]"
+                    set:html={firstSnippet.iconSvg}
+                  />
+                  <span class="truncate leading-none">{firstSnippet.label}</span>
+                </div>
+              </div>
+            </div>
+          )
+        }
 
-        focusAfter && focusAfter.focus()
-    }
-}"
-      x-on:keydown.escape.prevent.stop="close($refs.button)"
-      x-on:focusin.window="! $refs.panel.contains($event.target) && close()"
-      x-id="['dropdown-button']"
-      class="shrink-0 relative max-w-36 w-full"
-    >
-      <button
-        x-ref="button"
-        x-on:click="toggle()"
-        :aria-expanded="open"
-        :aria-controls="$id('dropdown-button')"
-        type="button"
-        class="flex items-center px-3 pt-2 pb-1.5 relative border-x border-t border-neutral-200/70 rounded-t-xl w-full text-sm font-medium bg-white shadow-[-1px_0px_2px_0px_rgba(0,0,0,0.01)]. shadow-sm cursor-pointer after:absolute after:-bottom-[1.5px] after:inset-x-0 after:z-10 after:h-[3px] after:bg-white"
-      >
-        <span class="flex items-center gap-2">
-          <span
-            x-show="snippets[selected].iconSvg"
-            x-html="snippets[selected].iconSvg"
-            class="size-4 [&>svg]:w-full [&>svg]:h-full rounded overflow-hidden"
-            set:html={snippetsWithIcons[0]?.iconSvg || ""}
-          />
-          <span
-            x-text="snippets[selected].displayLabel"
-            set:html={snippetsWithIcons[0]?.displayLabel || ""}
+        <div class="relative h-9 w-5 shrink-0 rounded-tr-xl bg-white">
+          <div class="absolute inset-x-0 -bottom-px h-px bg-white"></div>
+          <CodeTabEdge
+            className="pointer-events-none absolute -top-px right-full z-10 h-[calc(100%+2px)] rotate-y-180"
           />
-        </span>
-        <Icon name="lucide:chevrons-up-down" class="ml-auto" />
-      </button>
-      <!-- Panel -->
-      <ul
-        x-ref="panel"
-        x-show="open"
-        x-transition.origin.top.left
-        x-on:click.outside="close($refs.button)"
-        :id="$id('dropdown-button')"
-        x-cloak
-        role="menu"
-        class="absolute top-full right-2 min-w-48 rounded-lg shadow-xl mt-2 z-10 origin-top-right bg-white py-0.5 outline-none border border-neutral-200"
-      >
-        <template x-for="(snippet, index) in snippets" :key="index">
-          <li role="menuitem">
-            <button
-              x-on:click="select(index)"
-              type="button"
-              class="w-full text-left px-3 py-2 text-sm text-neutral-700 rounded-md transition-colors flex items-center gap-2 relative before:absolute before:inset-x-1 before:inset-y-0.5 before:-z-10 before:rounded-md before:duration-150 cursor-pointer"
-              x-bind:class="index === selected ? 'before:bg-neutral-200/50 text-neutral-900' : 'hover:before:bg-neutral-100/70'"
-            >
-              <span
-                x-show="snippet.iconSvg"
-                x-html="snippet.iconSvg"
-                class="size-4 [&>svg]:w-full [&>svg]:h-full rounded overflow-hidden"
-              ></span>
-              <span x-text="snippet.displayLabel"></span>
-            </button>
-          </li>
-        </template>
-      </ul>
+          <button
+            x-on:click="copySelected()"
+            type="button"
+            class="absolute right-2 top-1/2 z-20 inline-flex size-7 -translate-y-1/2 appearance-none items-center justify-center rounded-md border-0 bg-transparent text-neutral-500/80 shadow-none outline-none ring-0 transition-colors duration-150 hover:bg-neutral-50 hover:text-neutral-600 focus:outline-none focus-visible:outline-none focus:ring-0 focus-visible:ring-0 cursor-pointer"
+            aria-label="Copy code"
+          >
+            <Icon
+              name="lucide:copy"
+              class="size-3.5 origin-center transition-all duration-250 ease-[cubic-bezier(0.22,1,0.36,1)] will-change-transform motion-reduce:transition-none"
+              x-bind:class="copied ? 'scale-50 opacity-0 -rotate-6' : 'scale-100 opacity-100 rotate-0'"
+              aria-hidden="true"
+            />
+            <Icon
+              name="lucide:check"
+              class="absolute size-3.5 stroke-3 origin-center text-green-700/80 transition-all duration-250 ease-[cubic-bezier(0.22,1,0.36,1)] will-change-transform motion-reduce:transition-none"
+              x-bind:class="copied ? 'scale-110 opacity-100 rotate-0' : 'scale-25 opacity-0 rotate-6'"
+              aria-hidden="true"
+            />
+          </button>
+        </div>
+      </div>
+
+      <div class="relative min-h-0 min-w-0 flex-1 overflow-hidden rounded-b-xl">
+        <div class="relative h-full overflow-auto [scrollbar-width:thin] [scrollbar-color:var(--color-neutral-300)_transparent] [&::-webkit-scrollbar]:h-1.5 [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-neutral-300/70 hover:[&::-webkit-scrollbar-thumb]:bg-neutral-300/90">
+          <div class="pointer-events-none sticky top-0 z-10 -mb-4 h-4 w-full bg-linear-to-b from-white to-transparent"></div>
+          {
+            requestSnippetItems.map((snippet, index) => (
+              <pre
+                class="relative m-0 min-w-full bg-white p-0 text-[13px] leading-6"
+                x-show={`selected === ${index}`}
+                {...(index !== 0 ? { "x-cloak": true } : {})}
+                data-snippet-index={index}
+              ><code class="block min-w-full py-2.5 font-mono text-neutral-800"><Fragment set:html={snippet.renderedCodeLinesHtml} /></code></pre>
+            ))
+          }
+        </div>
+      </div>
     </div>
   </div>
-  {
-    snippets.map((snippet, index) => (
-      <div
-        {...(index !== 0 ? { "x-cloak": true } : {})}
-        x-show={`selected === ${index}`}
-        data-snippet-index={index}
-      >
-        {snippet.code && snippet.highlightMode && (
-          <Code
-            code={snippet.code as string}
-            lang={snippet.highlightMode as string}
-            frame="code"
-          />
-        )}
-      </div>
-    ))
-  }
 </div>
-
-<style>
-  @reference "../../styles/global.css";
-  :global(.request-code-snippets .expressive-code .frame) {
-    @apply shadow-sm;
-  }
-  :global(.request-code-snippets .expressive-code pre) {
-    @apply rounded-xl! rounded-tr-none! border-neutral-200/70!;
-  }
-
-  :global(.request-code-snippets .expressive-code pre code) {
-    @apply max-h-64 overflow-y-auto;
-  }
-</style>