radiant-docs 0.1.38 → 0.1.40

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "radiant-docs",
-  "version": "0.1.38",
+  "version": "0.1.40",
   "description": "CLI tool for previewing Radiant documentation locally",
   "type": "module",
   "bin": {

package/template/astro.config.mjs

@@ -239,7 +239,7 @@ function copyContentAssets() {
         if (file.includes("src/content/docs") && shouldCopyFile(file)) {
           const relativePath = path.relative(
             path.join(CWD, "src/content/docs"),
-            file
+            file,
           );
           const destPath = path.join(PUBLIC_DIR, relativePath);
           const destDir = path.dirname(destPath);
@@ -254,11 +254,40 @@ function copyContentAssets() {
   };
 }
 
-const configuredSite =
-  typeof process.env.DOCS_SITE_URL === "string" &&
-  process.env.DOCS_SITE_URL.trim().length > 0
-    ? process.env.DOCS_SITE_URL.trim()
-    : undefined;
+function normalizeBasePath(pathname) {
+  const normalized = pathname.replace(/\/{2,}/g, "/").replace(/\/+$/, "");
+  return normalized === "" ? "/" : normalized;
+}
+
+function resolveDocsSiteConfig() {
+  const rawSiteUrl =
+    typeof process.env.DOCS_SITE_URL === "string"
+      ? process.env.DOCS_SITE_URL.trim()
+      : "";
+
+  if (!rawSiteUrl) {
+    return {
+      site: undefined,
+      base: "/",
+    };
+  }
+
+  try {
+    const parsed = new URL(rawSiteUrl);
+    return {
+      site: parsed.origin,
+      base: normalizeBasePath(parsed.pathname),
+    };
+  } catch {
+    return {
+      site: rawSiteUrl,
+      base: "/",
+    };
+  }
+}
+
+const docsSiteConfig = resolveDocsSiteConfig();
+globalThis.__RADIANT_DOCS_BASE_PATH__ = docsSiteConfig.base;
 
 const configuredStaticAssetHost =
   typeof process.env.STATIC_ASSET_HOST === "string" &&
@@ -284,7 +313,9 @@ const configuredAssetsPrefix =
 
 // https://astro.build/config
 export default defineConfig({
-  site: configuredSite,
+  site: docsSiteConfig.site,
+  base: docsSiteConfig.base,
+  trailingSlash: "never",
   devToolbar: {
     enabled: false,
   },

package/template/package-lock.json

@@ -45,7 +45,7 @@
         "rehype-slug": "^6.0.0",
         "remark-gfm": "^4.0.1",
         "simple-git": "^3.30.0",
-        "tailwindcss": "^4.1.17",
+        "tailwindcss": "^4.2.2",
         "vaul": "^1.1.2",
         "yaml": "^2.8.2",
         "zod": "^3.25.76"
@@ -5048,6 +5048,12 @@
         "tailwindcss": "4.1.17"
       }
     },
+    "node_modules/@tailwindcss/node/node_modules/tailwindcss": {
+      "version": "4.1.17",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.17.tgz",
+      "integrity": "sha512-j9Ee2YjuQqYT9bbRTfTZht9W/ytp5H+jJpZKiYdP/bpnXARAuELt9ofP0lPnmHjbga7SNQIxdTAXCmtKVYjN+Q==",
+      "license": "MIT"
+    },
     "node_modules/@tailwindcss/oxide": {
       "version": "4.1.17",
       "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.1.17.tgz",
@@ -5302,6 +5308,12 @@
         "vite": "^5.2.0 || ^6 || ^7"
       }
     },
+    "node_modules/@tailwindcss/vite/node_modules/tailwindcss": {
+      "version": "4.1.17",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.17.tgz",
+      "integrity": "sha512-j9Ee2YjuQqYT9bbRTfTZht9W/ytp5H+jJpZKiYdP/bpnXARAuELt9ofP0lPnmHjbga7SNQIxdTAXCmtKVYjN+Q==",
+      "license": "MIT"
+    },
     "node_modules/@types/alpinejs": {
       "version": "3.13.11",
       "resolved": "https://registry.npmjs.org/@types/alpinejs/-/alpinejs-3.13.11.tgz",
@@ -12763,9 +12775,9 @@
       "license": "MIT"
     },
     "node_modules/tailwindcss": {
-      "version": "4.1.17",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.17.tgz",
-      "integrity": "sha512-j9Ee2YjuQqYT9bbRTfTZht9W/ytp5H+jJpZKiYdP/bpnXARAuELt9ofP0lPnmHjbga7SNQIxdTAXCmtKVYjN+Q==",
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.2.2.tgz",
+      "integrity": "sha512-KWBIxs1Xb6NoLdMVqhbhgwZf2PGBpPEiwOqgI4pFIYbNTfBXiKYyWoTsXgBQ9WFg/OlhnvHaY+AEpW7wSmFo2Q==",
       "license": "MIT"
     },
     "node_modules/tapable": {
@@ -14008,9 +14020,9 @@
       }
     },
     "node_modules/vite": {
-      "version": "6.4.1",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-6.4.1.tgz",
-      "integrity": "sha512-+Oxm7q9hDoLMyJOYfUYBuHQo+dkAloi33apOPP56pzj+vsdJDzr+j1NISE5pyaAuKL4A3UD34qd0lx5+kfKp2g==",
+      "version": "6.4.2",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-6.4.2.tgz",
+      "integrity": "sha512-2N/55r4JDJ4gdrCvGgINMy+HH3iRpNIz8K6SFwVsA+JbQScLiC+clmAxBgwiSPgcG9U15QmvqCGWzMbqda5zGQ==",
       "license": "MIT",
       "dependencies": {
         "esbuild": "^0.25.0",

package/template/package.json

@@ -49,7 +49,7 @@
     "rehype-slug": "^6.0.0",
     "remark-gfm": "^4.0.1",
     "simple-git": "^3.30.0",
-    "tailwindcss": "^4.1.17",
+    "tailwindcss": "^4.2.2",
     "vaul": "^1.1.2",
     "yaml": "^2.8.2",
     "zod": "^3.25.76"

package/template/scripts/generate-robots-txt.mjs

@@ -4,6 +4,24 @@ import path from "node:path";
 const CWD = process.cwd();
 const DIST_DIR = path.join(CWD, "dist");
 const ROBOTS_TXT_PATH = path.join(DIST_DIR, "robots.txt");
+const ASTRO_SITEMAP_INDEX_FILENAME = "sitemap-index.xml";
+const PUBLIC_SITEMAP_FILENAME = "sitemap.xml";
+
+function buildSitemapUrl() {
+  const configuredSiteUrl = process.env.DOCS_SITE_URL?.trim();
+  if (!configuredSiteUrl) {
+    return `/${PUBLIC_SITEMAP_FILENAME}`;
+  }
+
+  try {
+    const baseUrl = configuredSiteUrl.endsWith("/")
+      ? configuredSiteUrl
+      : `${configuredSiteUrl}/`;
+    return new URL(PUBLIC_SITEMAP_FILENAME, baseUrl).toString();
+  } catch {
+    return `/${PUBLIC_SITEMAP_FILENAME}`;
+  }
+}
 
 function main() {
   if (!fs.existsSync(DIST_DIR)) {
@@ -11,7 +29,17 @@ function main() {
     return;
   }
 
-  const robotsTxt = "User-agent: *\nAllow: /\nSitemap: /sitemap-index.xml\n";
+  const astroSitemapIndexPath = path.join(
+    DIST_DIR,
+    ASTRO_SITEMAP_INDEX_FILENAME,
+  );
+  const publicSitemapPath = path.join(DIST_DIR, PUBLIC_SITEMAP_FILENAME);
+  if (fs.existsSync(astroSitemapIndexPath)) {
+    fs.copyFileSync(astroSitemapIndexPath, publicSitemapPath);
+    console.log("✅ sitemap.xml alias generated.");
+  }
+
+  const robotsTxt = `User-agent: *\nAllow: /\nSitemap: ${buildSitemapUrl()}\n`;
   fs.writeFileSync(ROBOTS_TXT_PATH, robotsTxt, "utf8");
   console.log("✅ robots.txt generated.");
 }

package/template/scripts/stamp-image-versions.mjs

@@ -28,6 +28,23 @@ const CONFIGURED_PREFIX =
   process.env.R2_BUCKET_PREFIX.trim().length > 0
     ? process.env.R2_BUCKET_PREFIX.trim().replace(/^\/+|\/+$/g, "")
     : null;
+const CONFIGURED_BASE_PATH = (() => {
+  const raw =
+    typeof process.env.DOCS_SITE_URL === "string"
+      ? process.env.DOCS_SITE_URL.trim()
+      : "";
+  if (!raw) return null;
+
+  try {
+    const parsed = new URL(raw);
+    const normalized = parsed.pathname
+      .replace(/\/{2,}/g, "/")
+      .replace(/\/+$/, "");
+    return normalized && normalized !== "/" ? normalized : null;
+  } catch {
+    return null;
+  }
+})();
 const VERSIONED_EXTENSIONS = new Set([
   ".avif",
   ".gif",
@@ -100,20 +117,25 @@ function getHash(filePath) {
 
 function normalizePathForDistLookup(pathname) {
   const normalizedPathname = path.posix.normalize(pathname);
-  if (!CONFIGURED_PREFIX) {
-    return normalizedPathname;
+
+  const withoutStaticPrefix = stripPathPrefix(
+    normalizedPathname,
+    CONFIGURED_PREFIX ? `/${CONFIGURED_PREFIX}` : null,
+  );
+  return stripPathPrefix(withoutStaticPrefix, CONFIGURED_BASE_PATH);
+}
+
+function stripPathPrefix(pathname, prefix) {
+  if (!prefix) {
+    return pathname;
   }
 
-  const prefix = `/${CONFIGURED_PREFIX}`;
-  if (
-    normalizedPathname === prefix ||
-    normalizedPathname.startsWith(`${prefix}/`)
-  ) {
-    const stripped = normalizedPathname.slice(prefix.length);
+  if (pathname === prefix || pathname.startsWith(`${prefix}/`)) {
+    const stripped = pathname.slice(prefix.length);
     return stripped.startsWith("/") ? stripped : `/${stripped}`;
   }
 
-  return normalizedPathname;
+  return pathname;
 }
 
 function resolveLocalImagePath(urlValue, filePath) {
@@ -133,7 +155,10 @@ function resolveLocalImagePath(urlValue, filePath) {
 
   let parsed;
   try {
-    parsed = new URL(decoded, `https://radiant.invalid${htmlBasePathname(filePath)}`);
+    parsed = new URL(
+      decoded,
+      `https://radiant.invalid${htmlBasePathname(filePath)}`,
+    );
   } catch {
     return null;
   }
@@ -158,8 +183,9 @@ function resolveLocalImagePath(urlValue, filePath) {
     return null;
   }
 
-  const normalizedPathname = normalizePathForDistLookup(parsed.pathname)
-    .replace(/^\/+/, "");
+  const normalizedPathname = normalizePathForDistLookup(
+    parsed.pathname,
+  ).replace(/^\/+/, "");
   const absolutePath = path.resolve(DIST_DIR, normalizedPathname);
 
   if (
@@ -208,7 +234,8 @@ function stampSrcset(srcsetValue, filePath) {
     const whitespaceIndex = trimmed.search(/\s/);
     const urlPart =
       whitespaceIndex === -1 ? trimmed : trimmed.slice(0, whitespaceIndex);
-    const descriptor = whitespaceIndex === -1 ? "" : trimmed.slice(whitespaceIndex);
+    const descriptor =
+      whitespaceIndex === -1 ? "" : trimmed.slice(whitespaceIndex);
 
     const stamped = stampSingleUrl(urlPart, filePath);
     if (stamped.changed) changed = true;
@@ -237,20 +264,17 @@ function replaceAttribute(html, filePath, attribute) {
 
   let changed = false;
 
-  const nextHtml = html.replace(
-    pattern,
-    (fullMatch, prefix, value, suffix) => {
-      const stamped =
-        attribute === "srcset"
-          ? stampSrcset(value, filePath)
-          : stampSingleUrl(value, filePath);
+  const nextHtml = html.replace(pattern, (fullMatch, prefix, value, suffix) => {
+    const stamped =
+      attribute === "srcset"
+        ? stampSrcset(value, filePath)
+        : stampSingleUrl(value, filePath);
 
-      if (!stamped.changed) return fullMatch;
+    if (!stamped.changed) return fullMatch;
 
-      changed = true;
-      return `${prefix}${stamped.value}${suffix}`;
-    },
-  );
+    changed = true;
+    return `${prefix}${stamped.value}${suffix}`;
+  });
 
   return { html: nextHtml, changed };
 }
@@ -259,17 +283,13 @@ function hasIconRel(tagSource) {
   const relMatch = tagSource.match(/\brel\s*=\s*["']([^"']+)["']/i);
   if (!relMatch) return false;
 
-  const relTokens = relMatch[1]
-    .toLowerCase()
-    .split(/\s+/)
-    .filter(Boolean);
+  const relTokens = relMatch[1].toLowerCase().split(/\s+/).filter(Boolean);
 
   return relTokens.includes("icon") || relTokens.includes("apple-touch-icon");
 }
 
 function replaceIconLinkHref(html, filePath) {
-  const pattern =
-    /(<link\b[^>]*\bhref\s*=\s*["'])([^"']*)(["'][^>]*>)/gi;
+  const pattern = /(<link\b[^>]*\bhref\s*=\s*["'])([^"']*)(["'][^>]*>)/gi;
   let changed = false;
 
   const nextHtml = html.replace(pattern, (fullMatch, prefix, value, suffix) => {
@@ -297,7 +317,9 @@ function main() {
 
   const htmlFiles = findHtmlFiles(DIST_DIR).sort();
   if (htmlFiles.length === 0) {
-    console.warn("Skipping image version stamping: no HTML files found in dist.");
+    console.warn(
+      "Skipping image version stamping: no HTML files found in dist.",
+    );
     return;
   }
 
@@ -307,7 +329,11 @@ function main() {
     const sourceHtml = fs.readFileSync(htmlFile, "utf8");
     const srcResult = replaceAttribute(sourceHtml, htmlFile, "src");
     const srcSetResult = replaceAttribute(srcResult.html, htmlFile, "srcset");
-    const posterResult = replaceAttribute(srcSetResult.html, htmlFile, "poster");
+    const posterResult = replaceAttribute(
+      srcSetResult.html,
+      htmlFile,
+      "poster",
+    );
     const iconHrefResult = replaceIconLinkHref(posterResult.html, htmlFile);
     const fileChanged =
       srcResult.changed ||

package/template/src/components/Footer.astro

@@ -2,6 +2,7 @@
 import Icon from "./ui/Icon.astro";
 import { getConfig } from "../lib/validation";
 import LogoLink from "./LogoLink.astro";
+import { withBasePath } from "../lib/base-path";
 
 interface Props {
   askAiEnabled?: boolean;
@@ -66,7 +67,7 @@ const socialIcons: Record<string, string> = {
         <div class="flex flex-wrap justify-center gap-x-8 gap-y-3">
           {footer.links.map((link) => (
             <a
-              href={link.href}
+              href={withBasePath(link.href)}
               class="text-sm text-neutral-500 hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-neutral-100 transition-colors duration-300"
             >
               {link.text}

package/template/src/components/Header.astro

@@ -4,6 +4,7 @@ import { getConfig } from "../lib/validation";
 import Search from "./Search.astro";
 import LogoLink from "./LogoLink.astro";
 import sparkleIcon from "../assets/icons/sparkle.svg?url";
+import { withBasePath } from "../lib/base-path";
 
 interface Props {
   showAskAiTrigger?: boolean;
@@ -58,14 +59,15 @@ const config = await getConfig();
             showAskAiTrigger ? (
               <button
                 type="button"
-                class="hidden md:inline-flex items-center gap-2 h-8 rounded-lg [corner-shape:superellipse(1.2)] bg-linear-to-b from-neutral-900/85 dark:from-neutral-100 to-neutral-900 dark:to-neutral-200 px-3 text-[13px] font-[350] dark:font-medium text-white shadow-sm dark:bg-white dark:text-neutral-900 cursor-pointer"
+                class="hidden md:inline-flex items-center gap-2 h-8 rounded-lg [corner-shape:superellipse(1.2)] bg-linear-to-b from-[var(--color-theme-top)] to-[var(--color-theme-bottom)] px-3 text-[13px] font-[350] text-[var(--color-theme-foreground)] shadow-sm hover:opacity-95 cursor-pointer"
                 onclick="window.dispatchEvent(new CustomEvent('ask-ai:open'));"
               >
                 <img
                   src={sparkleIcon}
                   alt=""
                   aria-hidden="true"
-                  class="size-3 -ml-px invert dark:invert-0"
+                  class="size-3 -ml-px"
+                  style="filter: var(--color-theme-icon-filter);"
                 />
                 Ask AI
               </button>
@@ -92,7 +94,7 @@ const config = await getConfig();
                           ? "hidden 2xl:flex"
                           : "flex",
                       ]}
-                      href={l.href}
+                      href={withBasePath(l.href)}
                     >
                       {l.icon && (
                         <Icon
@@ -113,7 +115,7 @@ const config = await getConfig();
                     "h-[33px] items-center gap-1.5 px-[11px] text-[13px] bg-white/90 dark:bg-neutral-800/80 text-neutral-600/85 hover:text-neutral-600 dark:text-neutral-200/95 dark:hover:text-neutral-200 rounded-lg [corner-shape:superellipse(1.2)] border border-neutral-200 dark:border-neutral-700/40 shadow-xs transition-all whitespace-nowrap",
                     config.navbar.primary ? "hidden lg:flex" : "flex",
                   ]}
-                  href={config.navbar.secondary.href}
+                  href={withBasePath(config.navbar.secondary.href)}
                 >
                   {config.navbar.secondary.icon && (
                     <Icon
@@ -129,9 +131,9 @@ const config = await getConfig();
               {config.navbar.primary && (
                 <a
                   class:list={[
-                    "font-[350] dark:font-[450] h-8 flex items-center gap-2 px-3 text-[13px] rounded-lg [corner-shape:superellipse(1.2)] bg-linear-to-b from-neutral-900/85 to-neutral-900 dark:from-neutral-100 dark:to-neutral-200 text-white dark:text-neutral-950 duration-200 shadow-sm transition-all whitespace-nowrap",
+                    "font-[350] h-8 flex items-center gap-2 px-3 text-[13px] rounded-lg [corner-shape:superellipse(1.2)] bg-linear-to-b from-[var(--color-theme-top)] to-[var(--color-theme-bottom)] text-[var(--color-theme-foreground)] duration-200 shadow-sm transition-all whitespace-nowrap hover:opacity-95",
                   ]}
-                  href={config.navbar.primary.href}
+                  href={withBasePath(config.navbar.primary.href)}
                 >
                   {config.navbar.primary.icon && (
                     <Icon

package/template/src/components/LogoLink.astro

@@ -1,5 +1,6 @@
 ---
 import { getConfig, type LogoVariant } from "../lib/validation";
+import { withBasePath } from "../lib/base-path";
 import { resolveStaticAssetUrl } from "../lib/static-asset-url";
 
 const config = await getConfig();
@@ -53,7 +54,7 @@ const lightLogoUrl = lightLogo.logoUrl;
 const darkLogoUrl = darkLogo.logoUrl;
 
 // Get the href for the logo link (defaults to "/")
-const logoHref = config.logo?.href || "/";
+const logoHref = withBasePath(config.logo?.href || "/");
 const logoPillText =
   config.logo?.pill === false ? null : (config.logo?.pill ?? "Docs");
 

package/template/src/components/MdxPage.astro

@@ -14,14 +14,18 @@ import CodeBlock from "./user/CodeBlock.astro";
 import CodeGroup from "./user/CodeGroup.astro";
 import ComponentPreview from "./user/ComponentPreview.astro";
 import ComponentPreviewBlock from "./user/ComponentPreviewBlock.astro";
-import type { MdxRoute } from "../lib/routes";
+import type { MdxRoute, Route } from "../lib/routes";
+import PagePagination from "./PagePagination.astro";
 
 interface Props {
   entry: any;
   route: MdxRoute;
+  previousRoute?: Route;
+  nextRoute?: Route;
+  homePath?: string;
 }
 
-const { entry, route } = Astro.props;
+const { entry, route, previousRoute, nextRoute, homePath } = Astro.props;
 
 const components = {
   Accordion,
@@ -55,8 +59,15 @@ const tocHeadings = headings.filter(({ depth }) => depth === 2 || depth === 3);
       <h1 class="text-4xl font-semibold tracking-tight">{title}</h1>
     </header>
     <div class="flex w-full min-w-0 justify-between gap-x-12">
-      <div class="prose-rules min-w-0 flex-1">
-        <Content components={components} />
+      <div class="min-w-0 flex-1">
+        <div class="prose-rules">
+          <Content components={components} />
+        </div>
+        <PagePagination
+          previousRoute={previousRoute}
+          nextRoute={nextRoute}
+          homePath={homePath}
+        />
       </div>
       <aside class="hidden xl:block w-56 shrink-0">
         <TableOfContents headings={tocHeadings} />

package/template/src/components/PagePagination.astro

@@ -0,0 +1,61 @@
+---
+import type { Route } from "../lib/routes";
+import { prependBasePath } from "../lib/base-path";
+
+interface Props {
+  previousRoute?: Route;
+  nextRoute?: Route;
+  homePath?: string;
+}
+
+const { previousRoute, nextRoute, homePath } = Astro.props;
+
+function buildHref(route: Route): string {
+  if (route.type === "mdx" && homePath && route.filePath === homePath) {
+    return prependBasePath("/");
+  }
+
+  return prependBasePath(
+    route.slug.startsWith("/") ? route.slug : `/${route.slug}`,
+  );
+}
+---
+
+{
+  (previousRoute || nextRoute) && (
+    <nav class="w-full max-w-2xl pt-16 dark:border-neutral-800" aria-label="Page pagination">
+      <div class="grid gap-3 sm:grid-cols-2">
+        {previousRoute && (
+          <a
+            href={buildHref(previousRoute)}
+            class="group flex flex-col rounded-lg border border-neutral-200/90 bg-white/70 p-4 transition-colors hover:border-neutral-300 dark:border-neutral-800 dark:bg-neutral-900/40 dark:hover:border-neutral-700 shadow-xs"
+          >
+            <span class="block text-[10px] font-medium uppercase tracking-wide text-neutral-400 dark:text-neutral-400">
+              Previous
+            </span>
+            <div class="font-medium text-neutral-900 dark:text-neutral-100">
+              {previousRoute.title}
+            </div>
+          </a>
+        )}
+
+        {nextRoute && (
+          <a
+            href={buildHref(nextRoute)}
+            class:list={[
+              "group flex flex-col rounded-lg border border-neutral-200/90 bg-white/70 p-4 transition-colors hover:border-neutral-300/80 dark:border-neutral-800 dark:bg-neutral-900/40 dark:hover:border-neutral-700 shadow-xs",
+              !previousRoute && "sm:col-start-2",
+            ]}
+          >
+            <span class="block text-right text-[10px] font-medium uppercase tracking-wide text-neutral-400 dark:text-neutral-400">
+              Next
+            </span>
+            <div class="text-right font-medium text-neutral-900 dark:text-neutral-100">
+              {nextRoute.title}
+            </div>
+          </a>
+        )}
+      </div>
+    </nav>
+  )
+}

package/template/src/components/SidebarDropdown.astro

@@ -3,6 +3,7 @@ import Icon from "./ui/Icon.astro";
 import { getConfig, type NavMenu } from "../lib/validation";
 import SidebarMenu from "./SidebarMenu.astro";
 import { slugify } from "../lib/utils";
+import { prependBasePath, stripBasePath } from "../lib/base-path";
 import { getAllRoutes } from "../lib/routes";
 
 interface Props {
@@ -12,9 +13,9 @@ interface Props {
 
 const { menu, parentSlug = "" } = Astro.props;
 
-const pathname = Astro.url.pathname;
+const pathname = stripBasePath(Astro.url.pathname);
 const config = await getConfig();
-const routes = await getAllRoutes();
+const routes = (await getAllRoutes()).filter((route) => !route.hidden);
 
 let currentMenuIndex = menu.items.findIndex(
   (i) => slugify(i.label) === pathname.split("/")[1],
@@ -52,8 +53,8 @@ for (const route of routes) {
     seen.add(topLevel);
     const href =
       route.type === "mdx" && config.home && route.filePath === config.home
-        ? "/"
-        : `/${slug}`;
+        ? prependBasePath("/")
+        : prependBasePath(`/${slug}`);
     firstHrefOfMenuItems.push(href);
   }
 }
@@ -86,7 +87,10 @@ const currentPrefix = parentSlug
       }
       <div class="relative">
         <button
-          class="flex items-center w-full text-sm text-neutral-700 dark:text-neutral-200 bg-white dark:bg-neutral-700/30 border-t border-x border-neutral-200/70 dark:border-neutral-700/40 dark:border-b rounded-lg shadow-xs px-3 py-2 cursor-pointer"
+          class:list={[
+            "flex items-center w-full text-sm text-neutral-700 dark:text-neutral-200 bg-white dark:bg-neutral-700/30 border-t border-x border-neutral-200/70 dark:border-neutral-700/40 dark:border-b rounded-lg shadow-xs px-3 py-2 cursor-pointer",
+            menu.label ? "" : "border-b",
+          ]}
           x-on:click="open = true"
           aria-haspopup="menu"
           aria-expanded
@@ -131,7 +135,7 @@ const currentPrefix = parentSlug
                         ? "before:bg-neutral-200/50 dark:before:bg-neutral-700/50 text-neutral-900 dark:text-white"
                         : "hover:before:bg-neutral-100/70 dark:hover:before:bg-neutral-700/30",
                     ]}
-                    href={firstHrefOfMenuItems[index] ?? "/"}
+                    href={firstHrefOfMenuItems[index] ?? prependBasePath("/")}
                   >
                     {menu.items[index].icon && (
                       <Icon
@@ -160,8 +164,8 @@ const currentPrefix = parentSlug
     class:list={[
       "relative -mt-2 pt-2 overflow-y-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
       menu.label
-        ? "h-[calc(100vh-4px-64px-12px-70px-52px)]"
-        : "h-[calc(100vh-4px-64px-12px-38px-52px)]",
+        ? "h-[calc(100vh-4px-64px-12px-70px-51px+8px)]"
+        : "h-[calc(100vh-4px-64px-12px-38px-51px+8px)]",
     ]}
   >
     <SidebarMenu

package/template/src/components/SidebarGroup.astro

@@ -18,7 +18,7 @@ const groupSlug = slugify(item.group);
 const currentPrefix = parentSlug ? `${parentSlug}/${groupSlug}` : groupSlug;
 ---
 
-<li>
+<li class="my-8 first:my-0 last:my-0">
   <div class:list={["text-sm font-semibold mb-2 flex items-center gap-2 px-2"]}>
     {item.icon && <Icon name={item.icon} class="size-4 text-neutral-500" />}
     {item.group}

package/template/src/components/SidebarMenu.astro

@@ -22,7 +22,7 @@ let { navigation, parentSlug = "" } = Astro.props;
 
 {
   navigation.pages ? (
-    <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]">
+    <ul class="px-2 pt-4 pb-4">
       {navigation.pages.map((item) =>
         typeof item === "string" ? (
           <li>