radiant-docs 0.1.7 → 0.1.8

package/template/src/components/Search.astro

@@ -207,8 +207,6 @@ import { Icon } from "astro-icon/components";
       close() {
         this.isOpen = false;
         document.body.style.overflow = "";
-        this.query = "";
-        this.results = [];
         this.selectedIndex = -1;
       },
 

package/template/src/components/SidebarDropdown.astro

@@ -1,6 +1,6 @@
 ---
-import { Icon } from "astro-icon/components";
-import type { NavMenu } from "../lib/validation";
+import Icon from "./ui/Icon.astro";
+import { getConfig, type NavMenu } from "../lib/validation";
 import SidebarMenu from "./SidebarMenu.astro";
 import { slugify } from "../lib/utils";
 import { getAllRoutes } from "../lib/routes";
@@ -13,13 +13,30 @@ interface Props {
 const { menu, parentSlug = "" } = Astro.props;
 
 const pathname = Astro.url.pathname;
+const config = await getConfig();
+const routes = await getAllRoutes();
 
 let currentMenuIndex = menu.items.findIndex(
-  (i) => slugify(i.label) === pathname.split("/")[1]
+  (i) => slugify(i.label) === pathname.split("/")[1],
 );
-currentMenuIndex = currentMenuIndex === -1 ? 0 : currentMenuIndex;
 
-const routes = await getAllRoutes();
+if (pathname === "/" && config.home) {
+  const homeRoute = routes.find(
+    (route) => route.type === "mdx" && route.filePath === config.home,
+  );
+
+  if (homeRoute) {
+    const homeTopLevelSegment = homeRoute.slug.split("/")[0];
+    const homeMenuIndex = menu.items.findIndex(
+      (item) => slugify(item.label) === homeTopLevelSegment,
+    );
+    if (homeMenuIndex !== -1) {
+      currentMenuIndex = homeMenuIndex;
+    }
+  }
+}
+
+currentMenuIndex = currentMenuIndex === -1 ? 0 : currentMenuIndex;
 
 let firstHrefOfMenuItems: string[] = [];
 
@@ -33,7 +50,11 @@ for (const route of routes) {
 
   if (!seen.has(topLevel)) {
     seen.add(topLevel);
-    firstHrefOfMenuItems.push(slug);
+    const href =
+      route.type === "mdx" && config.home && route.filePath === config.home
+        ? "/"
+        : `/${slug}`;
+    firstHrefOfMenuItems.push(href);
   }
 }
 
@@ -51,8 +72,7 @@ const currentPrefix = parentSlug
   <div
     class:list={[
       "mt-3 mx-2",
-      menu.label &&
-        "rounded-lg bg-neutral-100/80 px-0.5 pb-0.5 inset-shadow-xs inset-shadow-neutral-700/5 border border-neutral-200/60",
+      menu.label && "rounded-lg bg-neutral-100 p-[3px]",
     ]}
   >
     {
@@ -64,7 +84,7 @@ const currentPrefix = parentSlug
     }
     <div class="relative">
       <button
-        class="flex items-center w-full text-sm bg-white border border-neutral-200 rounded-lg shadow-xs px-3 py-2 cursor-pointer"
+        class="flex items-center w-full text-sm text-neutral-700 bg-white border-t border-x border-neutral-200/70 rounded-lg shadow-sm shadow-neutral-200 px-3 py-2 cursor-pointer"
         x-on:click="open = true"
         aria-haspopup="menu"
         aria-expanded
@@ -72,8 +92,8 @@ const currentPrefix = parentSlug
         {
           menu.items[currentMenuIndex].icon && (
             <Icon
-              class="mr-2 size-4"
-              name={`lucide:${menu.items[currentMenuIndex].icon}`}
+              class="mr-2 size-4 opacity-80"
+              name={menu.items[currentMenuIndex].icon}
             />
           )
         }
@@ -109,12 +129,12 @@ const currentPrefix = parentSlug
                       ? "before:bg-neutral-200/50 text-neutral-900"
                       : "hover:before:bg-neutral-100/70",
                   ]}
-                  href={`/${firstHrefOfMenuItems[index]}`}
+                  href={firstHrefOfMenuItems[index] ?? "/"}
                 >
                   {menu.items[index].icon && (
                     <Icon
-                      class="mr-2 size-4"
-                      name={`lucide:${menu.items[index].icon}`}
+                      class="mr-2 size-4 opacity-75"
+                      name={menu.items[index].icon}
                     />
                   )}
                   {label}

package/template/src/components/SidebarGroup.astro

@@ -4,7 +4,7 @@ import SidebarLink from "./SidebarLink.astro";
 import SidebarSubgroup from "./SidebarSubgroup.astro";
 import { slugify } from "../lib/utils";
 import Tag from "./ui/Tag.astro";
-import { Icon } from "astro-icon/components";
+import Icon from "./ui/Icon.astro";
 
 interface Props {
   item: NavGroup;
@@ -19,11 +19,7 @@ const currentPrefix = parentSlug ? `${parentSlug}/${groupSlug}` : groupSlug;
 
 <li>
   <div class:list={["text-sm font-semibold mb-2 flex items-center gap-2 px-2"]}>
-    {
-      item.icon && (
-        <Icon name={`lucide:${item.icon}`} class="size-4 text-neutral-500" />
-      )
-    }
+    {item.icon && <Icon name={item.icon} class="size-4 text-neutral-500" />}
     {item.group}
     {item.tag && <Tag>{item.tag}</Tag>}
   </div>
@@ -39,6 +35,7 @@ const currentPrefix = parentSlug ? `${parentSlug}/${groupSlug}` : groupSlug;
               path={child.page}
               icon={child.icon}
               tag={child.tag}
+              title={child.title}
               groupSlug={currentPrefix}
             />
           ) : (

package/template/src/components/SidebarLink.astro

@@ -1,19 +1,28 @@
 ---
-import { deriveTitleFromEntryId, slugify } from "../lib/utils";
-import { Icon } from "astro-icon/components";
+import { buildMdxPageHref, deriveTitleFromEntryId } from "../lib/utils";
+import Icon from "./ui/Icon.astro";
 import Tag from "./ui/Tag.astro";
 import { getCollection } from "astro:content";
+import { getConfig } from "../lib/validation";
 
 interface Props {
   path: string;
   groupSlug?: string;
-  icon?: string;
+  icon?: string | null;
   tag?: string;
+  title?: string;
 }
 
-const { path: filePath, groupSlug = "", icon, tag } = Astro.props;
+const {
+  path: filePath,
+  groupSlug = "",
+  icon,
+  tag,
+  title: configTitle,
+} = Astro.props;
 
 const docs = await getCollection("docs");
+const config = await getConfig();
 
 // Find the entry matching this path
 const entry = docs.find((doc: any) => {
@@ -25,13 +34,14 @@ if (!entry) {
   throw new Error("Entry not found");
 }
 
-// Generate a nice label from the filename (e.g. "writing-content/page" -> "Page")
-const filename = filePath ? filePath.split("/").pop() || filePath : "";
-const text = entry.data.title || deriveTitleFromEntryId(entry.id);
+// Use title from docs.json config if provided, otherwise derive from entry id
+const text = configTitle || deriveTitleFromEntryId(entry.id);
 
-const pageSlug = slugify(filename);
-// If groupSlug exists, join it. Otherwise just use pageSlug (though practically groupSlug should exist from hierarchy)
-const href = groupSlug ? `/${groupSlug}/${pageSlug}` : `/${pageSlug}`;
+const href = buildMdxPageHref({
+  filePath,
+  groupSlug,
+  homePath: config.home,
+});
 
 // Normalize paths for comparison (remove trailing slashes)
 const currentPath = Astro.url.pathname.replace(/\/$/, "");
@@ -42,14 +52,14 @@ const isActive = currentPath === targetPath;
 <a
   href={href}
   class:list={[
-    "block px-2 py-[7px] text-sm relative z-0 font-[450] before:-z-10 before:absolute before:inset-x-0 before:inset-y-px before:rounded-md before:duration-150",
+    "block px-2 py-[7px] text-sm relative z-0 before:-z-10 before:absolute before:inset-x-0 before:inset-y-px before:rounded-md before:duration-150",
     isActive
       ? "before:bg-neutral-200/50 dark:before:bg-neutral-800 text-neutral-900 dark:text-neutral-200"
       : "text-neutral-600 dark:text-neutral-400 hover:before:bg-neutral-100/70 dark:hover:before:bg-neutral-800/50 hover:text-neutral-900 dark:hover:text-neutral-300",
   ]}
 >
   <div class="flex items-center gap-2">
-    {icon && <Icon name={`lucide:${icon}`} class="size-4 opacity-75" />}
+    {icon && <Icon name={icon} class="size-4 opacity-75" />}
     {text}
     {tag && <Tag>{tag}</Tag>}
   </div>

package/template/src/components/SidebarMenu.astro

@@ -2,6 +2,7 @@
 import type { NavGroup, NavigationItem, NavPage } from "../lib/validation";
 import SidebarOpenApi from "./sidebar/SidebarOpenApi.astro";
 import SidebarDropdown from "./SidebarDropdown.astro";
+import SidebarSegmented from "./SidebarSegmented.astro";
 import SidebarGroup from "./SidebarGroup.astro";
 import SidebarLink from "./SidebarLink.astro";
 
@@ -15,31 +16,33 @@ let { navigation, parentSlug = "" } = Astro.props;
 
 {
   navigation.pages ? (
-    <ul class="px-2 pt-4 pb-3">
-      {navigation.pages.map((item) => (
-        <li>
-          {typeof item === "string" ? (
-            <SidebarLink path={item} />
-          ) : (
+    <ul class="px-2 pt-4 pb-3 [&>:nth-child(n+2)]:mt-6 [&>:nth-child(n+2)]:pt-[25px] [&>:nth-child(n+2)]:relative [&>:nth-child(n+2)]:before:absolute [&>:nth-child(n+2)]:before:top-0 [&>:nth-child(n+2)]:before:inset-x-0 [&>:nth-child(n+2)]:before:h-px [&>:nth-child(n+2)]:before:bg-linear-[90deg,transparent,var(--color-neutral-200)_20%,var(--color-neutral-200)_80%,transparent] dark:[&>:nth-child(n+2)]:before:bg-linear-[90deg,transparent,var(--color-neutral-700)_20%,var(--color-neutral-700)_80%,transparent]">
+      {navigation.pages.map((item) =>
+        typeof item === "string" ? (
+          <li>
+            <SidebarLink path={item} groupSlug={parentSlug} />
+          </li>
+        ) : "group" in item ? (
+          <SidebarGroup item={item as NavGroup} parentSlug={parentSlug} />
+        ) : (
+          <li>
             <SidebarLink
               path={(item as NavPage).page}
               icon={(item as NavPage).icon}
               tag={(item as NavPage).tag}
+              title={(item as NavPage).title}
+              groupSlug={parentSlug}
             />
-          )}
-        </li>
-      ))}
-    </ul>
-  ) : navigation.groups ? (
-    <ul class="px-2 pt-4 pb-3 [&>:nth-child(n+2)]:mt-5 [&>:nth-child(n+2)]:pt-[25px] [&>:nth-child(n+2)]:relative [&>:nth-child(n+2)]:before:absolute [&>:nth-child(n+2)]:before:top-0 [&>:nth-child(n+2)]:before:inset-x-0 [&>:nth-child(n+2)]:before:h-px [&>:nth-child(n+2)]:before:bg-linear-[90deg,transparent,var(--color-neutral-200)_20%,var(--color-neutral-200)_80%,transparent] dark:[&>:nth-child(n+2)]:before:bg-linear-[90deg,transparent,var(--color-neutral-700)_20%,var(--color-neutral-700)_80%,transparent]">
-      {navigation.groups.map((item) => (
-        <SidebarGroup item={item as NavGroup} parentSlug={parentSlug} />
-      ))}
+          </li>
+        ),
+      )}
     </ul>
   ) : navigation.menu ? (
     !navigation.menu.type || navigation.menu.type === "dropdown" ? (
       <SidebarDropdown menu={navigation.menu} parentSlug={parentSlug} />
-    ) : navigation.menu.type === "collapsible" ? null : null
+    ) : navigation.menu.type === "segmented" ? (
+      <SidebarSegmented menu={navigation.menu} parentSlug={parentSlug} />
+    ) : null
   ) : navigation.openapi ? (
     <SidebarOpenApi openapi={navigation.openapi} parentSlug={parentSlug} />
   ) : null

package/template/src/components/SidebarSegmented.astro

@@ -0,0 +1,99 @@
+---
+import Icon from "./ui/Icon.astro";
+import { getConfig, type NavMenu } from "../lib/validation";
+import SidebarMenu from "./SidebarMenu.astro";
+import { slugify } from "../lib/utils";
+import { getAllRoutes } from "../lib/routes";
+
+interface Props {
+  menu: NavMenu;
+  parentSlug?: string;
+}
+
+const { menu, parentSlug = "" } = Astro.props;
+
+const pathname = Astro.url.pathname;
+const config = await getConfig();
+const routes = await getAllRoutes();
+
+let currentMenuIndex = menu.items.findIndex(
+  (i) => slugify(i.label) === pathname.split("/")[1],
+);
+
+if (pathname === "/" && config.home) {
+  const homeRoute = routes.find(
+    (route) => route.type === "mdx" && route.filePath === config.home,
+  );
+
+  if (homeRoute) {
+    const homeTopLevelSegment = homeRoute.slug.split("/")[0];
+    const homeMenuIndex = menu.items.findIndex(
+      (item) => slugify(item.label) === homeTopLevelSegment,
+    );
+    if (homeMenuIndex !== -1) {
+      currentMenuIndex = homeMenuIndex;
+    }
+  }
+}
+
+currentMenuIndex = currentMenuIndex === -1 ? 0 : currentMenuIndex;
+
+let firstHrefOfMenuItems: string[] = [];
+
+const seen = new Set();
+
+for (const route of routes) {
+  const slug = route.slug;
+
+  const parts = slug.split("/");
+  const topLevel = parts[0];
+
+  if (!seen.has(topLevel)) {
+    seen.add(topLevel);
+    const href =
+      route.type === "mdx" && config.home && route.filePath === config.home
+        ? "/"
+        : `/${slug}`;
+    firstHrefOfMenuItems.push(href);
+  }
+}
+
+const selectedMenuItem = menu.items[currentMenuIndex];
+const menuItemSlug = slugify(selectedMenuItem.label);
+const currentPrefix = parentSlug
+  ? `${parentSlug}/${menuItemSlug}`
+  : menuItemSlug;
+---
+
+<div class="mt-3 mx-2">
+  {
+    menu.label && (
+      <label class="font-semibold text-xs px-2 pb-1 block">{menu.label}</label>
+    )
+  }
+  <ul class="rounded-lg bg-neutral-100 p-[3px]">
+    {
+      menu.items.map((item, index) => (
+        <li>
+          <a
+            class="flex items-center px-3 py-1.5 cursor-pointer text-sm rounded-md border-x border-t"
+            class:list={[
+              index === currentMenuIndex
+                ? "bg-white border-neutral-200/70 shadow-sm shadow-neutral-200 text-neutral-900"
+                : "text-neutral-600 border-transparent",
+            ]}
+            href={firstHrefOfMenuItems[index] ?? "/"}
+          >
+            {item.icon && <Icon class="mr-2 size-4" name={item.icon} />}
+            {item.label}
+          </a>
+        </li>
+      ))
+    }
+  </ul>
+</div>
+
+<SidebarMenu
+  navigation={menu.items[currentMenuIndex].submenu}
+  parentSlug={currentPrefix}
+/>

package/template/src/components/SidebarSubgroup.astro

@@ -1,9 +1,9 @@
 ---
-import type { NavGroup } from "../lib/validation";
+import { getConfig, type NavGroup } from "../lib/validation";
 import SidebarLink from "./SidebarLink.astro";
-import { slugify } from "../lib/utils";
+import { buildMdxPageHref, slugify } from "../lib/utils";
 import Tag from "./ui/Tag.astro";
-import { Icon } from "astro-icon/components";
+import Icon from "./ui/Icon.astro";
 
 interface Props {
   item: NavGroup;
@@ -14,6 +14,7 @@ const { item, parentSlug } = Astro.props;
 
 const groupSlug = slugify(item.group);
 const currentPrefix = `${parentSlug}/${groupSlug}`;
+const config = await getConfig();
 
 const groupId = `group-${currentPrefix}`;
 const listId = `list-${groupId}`;
@@ -24,9 +25,11 @@ const containsActivePage = item.pages.some((child) => {
     typeof child === "string" ? child : "pages" in child ? null : child.page;
 
   if (pagePath) {
-    const filename = pagePath.split("/").pop() || pagePath;
-    const pageSlug = slugify(filename);
-    const href = `/${currentPrefix}/${pageSlug}`;
+    const href = buildMdxPageHref({
+      filePath: pagePath,
+      groupSlug: currentPrefix,
+      homePath: config.home,
+    });
 
     // Normalize paths for comparison (remove trailing slashes)
     const normalizedCurrent = Astro.url.pathname.replace(/\/$/, "");
@@ -52,15 +55,11 @@ const containsActivePage = item.pages.some((child) => {
     type="button"
     @click="expanded = !expanded"
     class:list={[
-      "flex items-center justify-between gap-2 w-full px-2 py-[7px] text-sm font-[450] text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-neutral-300 cursor-pointer relative z-0 before:-z-10 before:absolute before:inset-x-0 before:inset-y-px before:rounded-md before:transition-colors hover:before:bg-neutral-100/70 dark:hover:before:bg-neutral-800/50",
+      "flex items-center justify-between gap-2 w-full px-2 py-[7px] text-sm text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-neutral-300 cursor-pointer relative z-0 before:-z-10 before:absolute before:inset-x-0 before:inset-y-px before:rounded-md before:transition-colors hover:before:bg-neutral-100/70 dark:hover:before:bg-neutral-800/50",
     ]}
   >
     <div class="flex items-center gap-2">
-      {
-        item.icon && (
-          <Icon name={`lucide:${item.icon}`} class="size-4 opacity-75" />
-        )
-      }
+      {item.icon && <Icon name={item.icon} class="size-4 opacity-75" />}
       {item.group}
       {item.tag && <Tag>{item.tag}</Tag>}
     </div>
@@ -98,6 +97,7 @@ const containsActivePage = item.pages.some((child) => {
               path={child.page}
               icon={child.icon}
               tag={child.tag}
+              title={child.title}
               groupSlug={currentPrefix}
             />
           ) : null}

package/template/src/components/ThemeSwitcher.astro

@@ -4,13 +4,30 @@ import { Icon } from "astro-icon/components";
 
 <div
   x-data="{
+        forcedTheme: (() => {
+            const mode = new URLSearchParams(window.location.search).get('mode');
+            return mode === 'light' || mode === 'dark' ? mode : null;
+        })(),
         theme: localStorage.getItem('theme') || 'system',
         init() {
+            if (this.forcedTheme) {
+                this.theme = this.forcedTheme;
+            }
+
+            this.updateDOM();
+
             // 1. Initial positioning
             this.$nextTick(() => this.updateMarker());
 
             // Watch for changes to the 'theme' state
             this.$watch('theme', val => {
+                if (this.forcedTheme) {
+                    this.theme = this.forcedTheme;
+                    this.updateDOM();
+                    this.$nextTick(() => this.updateMarker());
+                    return;
+                }
+
                 localStorage.setItem('theme', val);
                 this.updateDOM();
                 this.$nextTick(() => this.updateMarker())
@@ -27,10 +44,12 @@ import { Icon } from "astro-icon/components";
         },
         updateDOM() {
             document.documentElement.classList.add('is-switching-theme')
-            const isDark = this.theme === 'dark' || 
-              (this.theme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches);
+            const activeTheme = this.forcedTheme || this.theme;
+            const isDark = activeTheme === 'dark' || 
+              (activeTheme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches);
 
             document.documentElement.classList.toggle('dark', isDark);
+            document.documentElement.dataset.theme = isDark ? 'dark' : 'light';
             setTimeout(() => {
               document.documentElement.classList.remove('is-switching-theme');
             }, 200);
@@ -38,7 +57,8 @@ import { Icon } from "astro-icon/components";
         markerStyle: { left: null, width: null },
         updateMarker() {
             // Use the theme name as the ref key
-            const el = this.$refs[this.theme];
+            const markerTheme = this.forcedTheme || this.theme;
+            const el = this.$refs[markerTheme];
             if (el) {
                 this.markerStyle = {
                     left: el.offsetLeft + 'px',
@@ -47,10 +67,10 @@ import { Icon } from "astro-icon/components";
             }
         }
     }"
-  class="relative flex gap-[3px] p-0.5 bg-neutral-100 dark:bg-neutral-800 rounded-full w-fit inset-shadow-sm text-neutral-500"
+  class="relative flex gap-[3px] p-px bg-neutral-100 dark:bg-neutral-800 rounded-full w-fit inset-shadow-sm inset-shadow-neutral-100/80 text-neutral-500"
 >
   <div
-    class="anchor-pill absolute top-[3px] bottom-[3px] bg-white dark:bg-neutral-700 rounded-full shadow-sm ease-out z-0 flex items-center justify-center animate-[scaleIn_0.5s_ease-out]"
+    class="anchor-pill absolute top-px bottom-px bg-white dark:bg-neutral-700 rounded-full shadow-xs border-[0.5px] border-neutral-200/80 ease-out z-0 flex items-center justify-center animate-[scaleIn_0.5s_ease-out]"
     style="left: 3px;"
     :style="markerStyle.width ? `left: ${markerStyle.left}; width: ${markerStyle.width}` : ''"
   >
@@ -59,6 +79,7 @@ import { Icon } from "astro-icon/components";
     x-ref="light"
     @click="theme = 'light'"
     :class="theme === 'light' ? 'text-neutral-800' : 'text-neutral-500'"
+    :disabled="Boolean(forcedTheme)"
     class="p-[5px] rounded-full text-sm font-medium transition-all cursor-pointer z-10"
   >
     <Icon name="lucide:sun-medium" class="size-[13px]" />
@@ -68,6 +89,7 @@ import { Icon } from "astro-icon/components";
     x-ref="dark"
     @click="theme = 'dark'"
     :class="theme === 'dark' ? 'text-neutral-300' : 'text-neutral-500'"
+    :disabled="Boolean(forcedTheme)"
     class="p-[5px] rounded-full text-sm font-medium transition-all cursor-pointer z-10"
   >
     <Icon name="lucide:moon" class="size-[13px]" />
@@ -77,8 +99,9 @@ import { Icon } from "astro-icon/components";
     x-ref="system"
     @click="theme = 'system'"
     :class="theme === 'system' ? 'text-neutral-800 dark:text-neutral-300' : 'text-neutral-500'"
-    class="p-[5px] rounded-full text-sm font-medium transition-all cursor-pointer z-10"
+    :disabled="Boolean(forcedTheme)"
+    class="p-[6px] rounded-full text-sm font-medium transition-all cursor-pointer z-10"
   >
-    <Icon name="lucide:monitor" class="size-[13px]" />
+    <Icon name="lucide:monitor" class="size-[12px]" />
   </button>
 </div>

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

@@ -12,23 +12,20 @@ const { route, serverUrl } = Astro.props;
 ---
 
 <div
-  class="min-w-0 flex items-center gap-[3px] p-[2px] bg-neutral-100/80 inset-shadow-xs rounded-[14px] border border-neutral-200"
+  class="min-w-0 flex-1 flex items-center p-1 border bg-white rounded-xl shadow-xs overflow-hidden"
 >
-  <div
-    class="min-w-0 flex-1 flex items-center p-[3px] border border-neutral-200 bg-white rounded-xl shadow-xs overflow-hidden"
+  <span
+    class:list={[
+      "shrink-0 inline-block px-1.5 ml-1 text-sm font-semibold rounded-md uppercase border",
+      methodColors[route.openApiMethod.toLowerCase()] || methodColors.get,
+    ]}
   >
-    <span
-      class:list={[
-        "shrink-0 inline-block px-1.5 ml-1 text-sm font-semibold rounded-md uppercase border",
-        methodColors[route.openApiMethod.toLowerCase()] || methodColors.get,
-      ]}
-    >
-      {route.openApiMethod}
-    </span>
-    <code
-      class="group flex-1 mx-2 h-[30px] flex items-center text-[13px] text-neutral-600 min-w-0 relative cursor-pointer"
-      @click="copyPath()"
-      x-data=`{
+    {route.openApiMethod}
+  </span>
+  <code
+    class="group flex-1 mx-2 h-[30px] flex items-center text-[13px] text-neutral-600 min-w-0 relative cursor-pointer"
+    @click="copyPath()"
+    x-data=`{
                 copied: false,
                 path: '${serverUrl ? serverUrl + route.openApiPath : route.openApiPath}',
                 async copyPath() {
@@ -43,26 +40,25 @@ const { route, serverUrl } = Astro.props;
                   }
                 }
               }`
+  >
+    <span class="truncate min-w-0 flex-1">
+      {route.openApiPath}
+    </span>
+    <div
+      class="absolute right-0 top-1/2 -translate-y-1/2 flex items-center gap-1 text-[12px] px-1.5 py-px bg-white border border-neutral-200 rounded-md duration-200 opacity-0 scale-75 group-hover:scale-100 group-hover:opacity-100 group-hover:duration-200 group-hover:ease-out group-hover:delay-75"
     >
-      <span class="truncate min-w-0 flex-1">
-        {route.openApiPath}
-      </span>
-      <div
-        class="absolute right-0 top-1/2 -translate-y-1/2 flex items-center gap-1 text-[12px] px-1.5 py-px bg-white border border-neutral-200 rounded-md duration-200 opacity-0 scale-75 group-hover:scale-100 group-hover:opacity-100 group-hover:duration-200 group-hover:ease-out group-hover:delay-75"
-      >
-        <Icon
-          name="lucide:copy"
-          class="**:stroke-[2.4]"
-          x-bind:class="copied ? 'scale-0 opacity-0 delay-0 duration-100':'duration-150 delay-75'"
-        />
-        <Icon
-          name="lucide:check"
-          class="absolute text-green-700 duration-150 **:stroke-3"
-          x-bind:class="copied ? 'scale-100 opacity-100 delay-75':'scale-0 opacity-0'"
-        />
-        Copy
-      </div>
-    </code>
-    <slot />
-  </div>
+      <Icon
+        name="lucide:copy"
+        class="**:stroke-[2.4]"
+        x-bind:class="copied ? 'scale-0 opacity-0 delay-0 duration-100':'duration-150 delay-75'"
+      />
+      <Icon
+        name="lucide:check"
+        class="absolute text-green-700 duration-150 **:stroke-3"
+        x-bind:class="copied ? 'scale-100 opacity-100 delay-75':'scale-0 opacity-0'"
+      />
+      Copy
+    </div>
+  </code>
+  <slot />
 </div>