reallysimpledocs 1.0.0-beta.3 → 1.0.0-beta.4

package/CHANGELOG.md

@@ -0,0 +1,35 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
+
+## [1.0.0-beta.4] - 2026-06-16
+
+### Added
+
+- Added MDX documentation components for callouts, code blocks, code groups, previews, tabs, steps, and cards.
+- Added automatic MDX component availability in docs pages, so common ReallySimpleDocs components do not need page-level imports.
+- Added custom `mdxComponents` registration for project-specific MDX components.
+- Added custom `markdownSerializers` registration so project-specific MDX components can control Markdown, search, and LLM export output.
+- Added Markdown export serializers for ReallySimpleDocs components so generated Markdown, search content, and `llms-full.txt` avoid raw MDX component noise.
+- Added customizable sidebar header, sidebar footer, and content header component overrides.
+- Added breadcrumb rendering from the docs navigation tree.
+- Added Lunr-powered command search with result previews and highlighted matches.
+- Added Basecoat style selection through the ReallySimpleDocs integration config.
+
+### Changed
+
+- Ported ReallySimpleDocs to an Astro integration with generated docs routes, assets, Markdown exports, search index, and Basecoat styling.
+- Updated docs content to use Markdown by default and MDX only for richer component examples.
+- Updated code examples to use inline component children instead of passing source code as props.
+- Changed empty table-of-contents behavior so the right panel is hidden instead of rendering an empty “On this page” section.
+- Changed breadcrumbs to render in the sticky content header for nested pages.
+- Updated the docs overview and component pages to explain component usage, Markdown output, and Basecoat interoperability.
+
+### Fixed
+
+- Fixed Shiki code block colors across light and dark mode.
+- Fixed copy-code button layout for regular code blocks and tabbed code blocks.
+- Fixed callout rendering in Markdown and MDX pages.
+- Fixed sidebar and header markup to follow Basecoat component patterns.

package/README.md

@@ -2,7 +2,9 @@
 
 A simple documentation system for Astro, built with **Basecoat** and **Tailwind CSS**.
 
-reallysimpledocs keeps docs portable: content lives in `docs/`, navigation lives in `docs/docs.json`, and the Astro integration owns the docs UI.
+ReallySimpleDocs gives you a shadcn/ui-compatible docs template without a React runtime. It uses Basecoat for the same design language and CSS-variable model, while staying close to plain Astro, Markdown, HTML, CSS, and a small amount of vanilla JavaScript.
+
+Docs stay portable: content lives in `docs/`, navigation lives in `docs/docs.json`, and the Astro integration owns the docs UI.
 
 ## Add to an Astro site
 
@@ -59,9 +61,9 @@ docs/
 Welcome to the docs.
 ```
 
-reallysimpledocs injects docs pages, Lunr search, per-page Markdown exports, `llms.txt`, and `llms-full.txt`.
+ReallySimpleDocs injects docs pages, Lunr search, per-page Markdown exports, `llms.txt`, and `llms-full.txt`.
 
-Use `.mdx` when a page needs reallysimpledocs components. Common reallysimpledocs components are available by default, so you do not need to import them in each page:
+Use `.mdx` when a page needs ReallySimpleDocs components. Common ReallySimpleDocs components are available by default, so you do not need to import them in each page:
 
 ```mdx
 # Button
@@ -71,7 +73,7 @@ Use `.mdx` when a page needs reallysimpledocs components. Common reallysimpledoc
 
 ## Use Basecoat on the rest of the site
 
-reallysimpledocs styles and scripts its generated docs pages. For custom Astro pages outside the docs route, use Basecoat directly in your own layout.
+ReallySimpleDocs styles and scripts its generated docs pages. For custom Astro pages outside the docs route, such as a landing page or app page, use Basecoat directly in your own layout.
 
 Install stays the same:
 
@@ -101,7 +103,7 @@ import "basecoat-css/all.min";
 <slot />
 ```
 
-Use the same Basecoat `style` in your reallysimpledocs config and your site stylesheet if you want the docs and custom pages to match.
+Use the same Basecoat `style` in your ReallySimpleDocs config and your site stylesheet if you want the docs and custom pages to match.
 
 ## Local development (this repo)
 
@@ -114,13 +116,13 @@ npm run dev
 
 Go to [ReallySimpleDocs.com](https://reallysimpledocs.com).
 
-## Support the project 
+## Support the project
 
-- [Contribute code](/CONTRIBUTING.md)
+- [Contribute code](https://github.com/hunvreus/reallysimpledocs/blob/main/CONTRIBUTING.md)
 - [Report issues](https://github.com/hunvreus/reallysimpledocs/issues)
 - [Sponsor me](https://github.com/sponsors/hunvreus)
 - [Star the project on GitHub](https://github.com/hunvreus/reallysimpledocs)
 
 ## License
 
-[MIT](/LICENSE.md)
+[MIT](https://github.com/hunvreus/reallysimpledocs/blob/main/LICENSE.md)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "reallysimpledocs",
-  "version": "1.0.0-beta.3",
+  "version": "1.0.0-beta.4",
   "type": "module",
   "exports": {
     ".": "./src/index.js",
@@ -10,6 +10,7 @@
   "files": [
     "src",
     "README.md",
+    "CHANGELOG.md",
     "LICENSE.md"
   ],
   "scripts": {
@@ -20,6 +21,7 @@
     "check": "npm run build && npm pack --dry-run && npm run smoke:consumer"
   },
   "dependencies": {
+    "@astrojs/markdown-remark": "^7.2.0",
     "@astrojs/mdx": "^6.0.3",
     "@tailwindcss/vite": "4.1.17",
     "astro": "^6.4.6",
@@ -27,7 +29,13 @@
     "lucide-static": "^0.552.0",
     "lunr": "^2.3.9",
     "marked": "^16.4.1",
-    "shiki": "^4.1.0"
+    "mdast-util-gfm": "^3.1.0",
+    "mdast-util-to-markdown": "^2.1.2",
+    "remark-gfm": "^4.0.1",
+    "remark-mdx": "^3.1.1",
+    "remark-parse": "^11.0.0",
+    "shiki": "^4.1.0",
+    "unified": "^11.0.5"
   },
   "peerDependencies": {
     "basecoat-css": "^1.0.0-beta.2",

package/src/astro/index.js

@@ -1,8 +1,10 @@
 import { fileURLToPath } from "node:url";
 import fs from "node:fs";
 import path from "node:path";
+import { unified as astroMarkdown } from "@astrojs/markdown-remark";
 import mdx from "@astrojs/mdx";
 import tailwindcss from "@tailwindcss/vite";
+import { previewSourceRemarkPlugin } from "../runtime/lib/preview-source-plugin.js";
 
 const basecoatStyles = new Set(["vega", "nova", "maia", "lyra", "mira", "luma", "sera", "rhea"]);
 
@@ -26,6 +28,8 @@ const normalizeArray = (value) => (Array.isArray(value) ? value : value ? [value
 
 const normalizeImportPath = (filePath) => filePath.replaceAll(path.sep, "/");
 
+const normalizeRecord = (value) => (value && typeof value === "object" && !Array.isArray(value) ? value : {});
+
 const isInsideDir = (dir, file) => {
   const relative = path.relative(dir, file);
   return relative && !relative.startsWith("..") && !path.isAbsolute(relative);
@@ -59,6 +63,18 @@ function collectMdxModules(docsDir) {
   return modules;
 }
 
+function componentModuleSource(modules) {
+  const entries = Object.entries(modules);
+  const imports = entries
+    .map(([name, moduleId], index) => `import component${index} from ${JSON.stringify(moduleId)};`)
+    .join("\n");
+  return `${imports}
+export default {
+${entries.map(([name], index) => `  ${JSON.stringify(name)}: component${index},`).join("\n")}
+};
+`;
+}
+
 export default function reallySimpleDocs(options = {}) {
   const style = options.style || "vega";
   if (!basecoatStyles.has(style)) {
@@ -72,6 +88,8 @@ export default function reallySimpleDocs(options = {}) {
     style,
     customCss: normalizeArray(options.customCss),
     components: options.components || {},
+    mdxComponents: normalizeRecord(options.mdxComponents),
+    markdownSerializers: normalizeRecord(options.markdownSerializers),
     routeBase: options.routeBase ?? "/docs",
     assetsBase: options.assetsBase || "/assets",
   };
@@ -84,17 +102,35 @@ export default function reallySimpleDocs(options = {}) {
         const generatedDir = path.join(root, ".astro", "reallysimpledocs");
         const generatedStyles = path.join(generatedDir, "styles.css");
         const docsDir = path.resolve(root, normalizedOptions.docsDir);
+        const resolveUserId = (id) => (id?.startsWith(".") ? path.resolve(root, id) : id);
+        const markdownSerializers = Object.fromEntries(
+          Object.entries(normalizedOptions.markdownSerializers).map(([name, moduleId]) => [
+            name,
+            normalizeImportPath(resolveUserId(moduleId)),
+          ]),
+        );
+        const mdxComponents = Object.fromEntries(
+          Object.entries(normalizedOptions.mdxComponents).map(([name, moduleId]) => [
+            name,
+            normalizeImportPath(resolveUserId(moduleId)),
+          ]),
+        );
         const virtualConfig = {
           ...normalizedOptions,
           root,
           docsDir,
           siteFile: normalizedOptions.siteFile ? path.resolve(root, normalizedOptions.siteFile) : null,
+          mdxComponents,
+          markdownSerializers,
           routeBase: normalizeRouteBase(normalizedOptions.routeBase),
         };
-        const resolveUserId = (id) => (id?.startsWith(".") ? path.resolve(root, id) : id);
         const components = {
+          ContentHeader:
+            normalizedOptions.components.ContentHeader || runtimePath("components/DefaultContentHeader.astro"),
           SidebarHeader:
             normalizedOptions.components.SidebarHeader || runtimePath("components/DefaultSidebarHeader.astro"),
+          SidebarFooter:
+            normalizedOptions.components.SidebarFooter || runtimePath("components/DefaultSidebarFooter.astro"),
         };
         fs.mkdirSync(generatedDir, { recursive: true });
         fs.writeFileSync(
@@ -142,6 +178,9 @@ export default function reallySimpleDocs(options = {}) {
             }),
           ],
           markdown: {
+            processor: astroMarkdown({
+              remarkPlugins: [previewSourceRemarkPlugin],
+            }),
             shikiConfig,
           },
           vite: {
@@ -170,10 +209,17 @@ export default function reallySimpleDocs(options = {}) {
                 resolveId(id) {
                   if (id === "virtual:reallysimpledocs/config") return "\0virtual:reallysimpledocs/config";
                   if (id === "virtual:reallysimpledocs/mdx-pages") return "\0virtual:reallysimpledocs/mdx-pages";
+                  if (id === "virtual:reallysimpledocs/mdx-components") return "\0virtual:reallysimpledocs/mdx-components";
                   if (id === "virtual:reallysimpledocs/styles.css") return generatedStyles;
                   if (id === "virtual:reallysimpledocs/components/SidebarHeader") {
                     return "\0virtual:reallysimpledocs/components/SidebarHeader";
                   }
+                  if (id === "virtual:reallysimpledocs/components/SidebarFooter") {
+                    return "\0virtual:reallysimpledocs/components/SidebarFooter";
+                  }
+                  if (id === "virtual:reallysimpledocs/components/ContentHeader") {
+                    return "\0virtual:reallysimpledocs/components/ContentHeader";
+                  }
                   return null;
                 },
                 load(id) {
@@ -195,9 +241,18 @@ export async function getMdxPage(slug) {
 }
 `;
                   }
+                  if (id === "\0virtual:reallysimpledocs/mdx-components") {
+                    return componentModuleSource(mdxComponents);
+                  }
                   if (id === "\0virtual:reallysimpledocs/components/SidebarHeader") {
                     return `export { default } from ${JSON.stringify(resolveUserId(components.SidebarHeader))};`;
                   }
+                  if (id === "\0virtual:reallysimpledocs/components/SidebarFooter") {
+                    return `export { default } from ${JSON.stringify(resolveUserId(components.SidebarFooter))};`;
+                  }
+                  if (id === "\0virtual:reallysimpledocs/components/ContentHeader") {
+                    return `export { default } from ${JSON.stringify(resolveUserId(components.ContentHeader))};`;
+                  }
                   return null;
                 },
               },

package/src/css/custom.css

@@ -23,37 +23,40 @@
   > h1:first-child {
     @apply hidden;
   }
-  p > a,
-  li > a,
-  dt > a,
-  dd > a,
-  td > a,
-  th > a {
+  > p > a,
+  > blockquote a,
+  > :is(ol, ul) a,
+  > dl a,
+  > table a {
     @apply underline underline-offset-2 decoration-muted-foreground/50 hover:decoration-foreground/50 transition-all;
   }
-  code:not(pre > code) {
+  > p code:not(pre > code),
+  > blockquote code:not(pre > code),
+  > :is(ol, ul) code:not(pre > code),
+  > dl code:not(pre > code),
+  > table code:not(pre > code) {
     @apply relative rounded-md bg-muted px-[0.3rem] py-[0.2rem] font-mono text-[13px];
   }
-  pre {
+  > pre {
     @apply rounded-lg;
   }
-  pre > code {
+  > pre > code {
     @apply block min-w-full w-max px-4 py-3 text-[13px];
   }
-  pre:has(> code) {
+  > pre:has(> code) {
     @apply max-w-full overflow-x-auto;
   }
-  blockquote {
+  > blockquote {
     @apply border-l-4 border-border pl-4;
   }
-  ol {
+  > ol {
     @apply list-decimal ml-6;
   }
-  ul {
+  > ul {
     @apply list-disc ml-6;
   }
-  ol,
-  ul {
+  > ol,
+  > ul {
     li {
       @apply mt-2;
 
@@ -63,7 +66,7 @@
       }
     }
   }
-  dl {
+  > dl {
     @apply border-b pb-3 my-6;
     dt {
       @apply border-t pt-3 mt-3 first:mt-0;
@@ -75,16 +78,24 @@
       @apply mt-4 border-b-0 pb-0 pl-8 my-0;
     }
   }
-  b,
-  strong {
+  > p b,
+  > p strong,
+  > blockquote b,
+  > blockquote strong,
+  > :is(ol, ul) b,
+  > :is(ol, ul) strong,
+  > dl b,
+  > dl strong,
+  > table b,
+  > table strong {
     @apply font-semibold;
   }
   > p,
-  blockquote,
-  ul,
-  ol,
-  dl,
-  pre {
+  > blockquote,
+  > ul,
+  > ol,
+  > dl,
+  > pre {
     @apply my-6;
   }
   > *:first-child {
@@ -93,7 +104,7 @@
   > *:last-child {
     @apply !mb-0;
   }
-  table {
+  > table {
     @apply w-full caption-bottom text-sm;
     thead {
       @apply [&_tr]:border-b;

package/src/runtime/components/CommandDialog.astro

@@ -16,7 +16,7 @@ const { indexUrl } = Astro.props;
 </div>
 
 <script>
-  import lunr from "lunr";
+  import lunrUrl from "lunr/lunr.js?url";
 
   const root = document.querySelector("[data-search]");
   const indexUrl = root?.getAttribute("data-index-url");
@@ -26,6 +26,7 @@ const { indexUrl } = Astro.props;
   const menu = dialog?.querySelector('[role="menu"]');
   const state = {
     loadPromise: null,
+    lunrPromise: null,
     index: null,
     documents: [],
     bySlug: new Map(),
@@ -197,6 +198,21 @@ const { indexUrl } = Astro.props;
     refreshCommand();
   }
 
+  function loadLunr() {
+    if (window.lunr) return Promise.resolve(window.lunr);
+    if (!state.lunrPromise) {
+      state.lunrPromise = new Promise((resolve, reject) => {
+        const script = document.createElement("script");
+        script.src = lunrUrl;
+        script.async = true;
+        script.onload = () => (window.lunr ? resolve(window.lunr) : reject(new Error("Failed to load lunr.")));
+        script.onerror = () => reject(new Error("Failed to load lunr."));
+        document.head.appendChild(script);
+      });
+    }
+    return state.lunrPromise;
+  }
+
   async function loadIndex() {
     if (state.index) return state;
     if (!indexUrl) throw new Error("Missing reallysimpledocs search index URL.");
@@ -204,7 +220,8 @@ const { indexUrl } = Astro.props;
       renderLoading();
       state.loadPromise = fetch(indexUrl)
         .then((response) => response.json())
-        .then((data) => {
+        .then(async (data) => {
+          const lunr = await loadLunr();
           state.documents = data.documents || [];
           state.bySlug = new Map(state.documents.map((doc) => [doc.slug, doc]));
           state.index = lunr.Index.load(data.index);

package/src/runtime/components/DefaultContentHeader.astro

@@ -0,0 +1,19 @@
+---
+import Moon from "lucide-static/icons/moon.svg?raw";
+import Sun from "lucide-static/icons/sun.svg?raw";
+---
+
+<nav class="hidden items-center gap-2 sm:flex">
+  <button
+    type="button"
+    aria-label="Toggle dark mode"
+    data-tooltip="Toggle dark mode"
+    data-side="bottom"
+    data-align="end"
+    onclick="document.dispatchEvent(new CustomEvent('basecoat:theme'))"
+    class="btn-sm-icon-ghost"
+  >
+    <span class="hidden dark:block"><Fragment set:html={Sun} /></span>
+    <span class="block dark:hidden"><Fragment set:html={Moon} /></span>
+  </button>
+</nav>

package/src/runtime/components/DefaultSidebarFooter.astro

@@ -0,0 +1,2 @@
+---
+---

package/src/runtime/components/DocsLayout.astro

@@ -4,12 +4,11 @@ import ArrowLeft from "lucide-static/icons/arrow-left.svg?raw";
 import ArrowRight from "lucide-static/icons/arrow-right.svg?raw";
 import Check from "lucide-static/icons/check.svg?raw";
 import Copy from "lucide-static/icons/copy.svg?raw";
-import Menu from "lucide-static/icons/menu.svg?raw";
-import Moon from "lucide-static/icons/moon.svg?raw";
 import PanelLeft from "lucide-static/icons/panel-left.svg?raw";
 import Search from "lucide-static/icons/search.svg?raw";
-import Sun from "lucide-static/icons/sun.svg?raw";
-import X from "lucide-static/icons/x.svg?raw";
+import ChevronRight from "lucide-static/icons/chevron-right.svg?raw";
+import Ellipsis from "lucide-static/icons/ellipsis.svg?raw";
+import ContentHeader from "virtual:reallysimpledocs/components/ContentHeader";
 import ClaudeLogo from "../../icons/logos/claude.svg?raw";
 import CursorLogo from "../../icons/logos/cursor.svg?raw";
 import MarkdownLogo from "../../icons/logos/markdown.svg?raw";
@@ -18,18 +17,36 @@ import BaseLayout from "./BaseLayout.astro";
 import CommandDialog from "./CommandDialog.astro";
 import DropdownMenu from "./DropdownMenu.astro";
 import Sidebar from "./Sidebar.astro";
-import { buildMenus, getNavigation } from "../lib/docs.js";
+import { buildMenus, getBreadcrumbs, getNavigation } from "../lib/docs.js";
 import { addSvgClass } from "../lib/html.js";
+import { renderDropdownMenu } from "../lib/macros.js";
 import { routeFilePath } from "../lib/paths.js";
 import { getSite } from "../lib/site.js";
 
 const { page, headings } = Astro.props;
 const site = getSite(config);
 const navigation = getNavigation(config, page);
+const breadcrumbs = getBreadcrumbs(config, page);
 const { sidebar } = buildMenus(config, page.slug);
+const hasToc = headings.length > 0;
 const searchIndexUrl = routeFilePath(config.routeBase, "search-index.json");
+const chevronRightIcon = addSvgClass(ChevronRight, "size-3.5");
+const ellipsisIcon = addSvgClass(Ellipsis, "size-4");
 const panelLeftIcon = addSvgClass(PanelLeft, "size-4");
 const searchIcon = addSvgClass(Search, "size-4");
+const breadcrumbItems =
+  breadcrumbs.length < 2
+    ? []
+    : breadcrumbs.length > 3
+    ? [
+        breadcrumbs[0],
+        {
+          type: "dropdown",
+          items: breadcrumbs.slice(1, -1),
+        },
+        breadcrumbs.at(-1),
+      ]
+    : breadcrumbs;
 const siteUrl = Astro.site?.toString().replace(/\/$/, "") || site.url || "";
 const pageUrl = `${siteUrl}${page.path}`;
 const llmPrompt = `Read from ${pageUrl} so I can ask questions about it.`;
@@ -84,74 +101,74 @@ const actionItems = [
           <Fragment set:html={panelLeftIcon} />
         </button>
 
+        {
+          breadcrumbItems.length > 0 && (
+            <nav class="hidden min-w-0 overflow-visible md:block" aria-label="Breadcrumb">
+              <ol class="flex min-w-0 items-center gap-1.5 overflow-visible text-sm text-muted-foreground">
+                {breadcrumbItems.map((crumb, index) => {
+                  const current = index === breadcrumbItems.length - 1;
+                  return (
+                    <>
+                      {index > 0 && (
+                        <li class="shrink-0" aria-hidden="true">
+                          <Fragment set:html={chevronRightIcon} />
+                        </li>
+                      )}
+                      <li class="inline-flex min-w-0 items-center gap-1.5 overflow-visible">
+                        {crumb.type === "dropdown" ? (
+                          <Fragment
+                            set:html={renderDropdownMenu({
+                              id: `breadcrumb-${page.slug.replace(/[^a-z0-9_-]/gi, "-")}`,
+                              trigger: ellipsisIcon,
+                              items: crumb.items.map((item) => ({
+                                label: item.label,
+                                url: item.url,
+                              })),
+                              triggerAttrs: {
+                                class: "flex size-4 items-center justify-center hover:text-foreground cursor-pointer",
+                                "aria-label": "Show breadcrumb pages",
+                              },
+                              popoverAttrs: { "data-align": "start" },
+                            })}
+                          />
+                        ) : current || !crumb.url ? (
+                          <span class="truncate font-medium text-foreground">{crumb.label}</span>
+                        ) : (
+                          <a href={crumb.url} class="truncate transition-colors hover:text-foreground">
+                            {crumb.label}
+                          </a>
+                        )}
+                      </li>
+                    </>
+                  );
+                })}
+              </ol>
+            </nav>
+          )
+        }
+
         <button
           type="button"
-          class="relative flex h-8 w-full min-w-0 max-w-72 cursor-text items-center gap-x-2 rounded-md border border-input bg-background px-3 py-1 text-base text-muted-foreground outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 dark:bg-input/30 sm:ml-auto md:text-sm"
+          class="btn-sm-icon-ghost ml-auto sm:hidden"
+          aria-label="Search"
+          data-tooltip="Search"
+          data-side="bottom"
           onclick="window.rsdOpenCommandSearch ? window.rsdOpenCommandSearch() : document.getElementById('command-search')?.showModal()"
         >
           <Fragment set:html={searchIcon} />
-          Search the docs...
-          <kbd class="kbd ml-auto -mr-1.5">⌘K</kbd>
         </button>
 
-        <nav class="hidden items-center gap-2 sm:flex">
-          {
-            (site.links || []).map((link) => (
-              <a
-                class={link.attrs?.class || "btn-sm-outline"}
-                href={link.url}
-                aria-label={link.label}
-                data-tooltip={link.label}
-                data-side="bottom"
-                target={link.attrs?.target}
-                rel={link.attrs?.rel}
-              >
-                {link.icon && <Fragment set:html={link.icon} />}
-                {!link.iconOnly && link.label}
-              </a>
-            ))
-          }
-          <button
-            type="button"
-            aria-label="Toggle dark mode"
-            data-tooltip="Toggle dark mode"
-            data-side="bottom"
-            data-align="end"
-            onclick="document.dispatchEvent(new CustomEvent('basecoat:theme'))"
-            class="btn-sm-icon-outline"
-          >
-            <span class="hidden dark:block"><Fragment set:html={Sun} /></span>
-            <span class="block dark:hidden"><Fragment set:html={Moon} /></span>
-          </button>
-        </nav>
+        <button
+          type="button"
+          class="relative hidden h-8 w-full min-w-0 max-w-72 cursor-text items-center gap-x-2 rounded-md border border-input bg-background px-3 py-1 text-base text-muted-foreground outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 dark:bg-input/30 sm:ml-auto sm:flex md:text-sm"
+          onclick="window.rsdOpenCommandSearch ? window.rsdOpenCommandSearch() : document.getElementById('command-search')?.showModal()"
+        >
+          <Fragment set:html={searchIcon} />
+          Search...
+          <kbd class="kbd ml-auto -mr-1.5">⌘K</kbd>
+        </button>
 
-        <div class="sm:hidden">
-          <button
-            type="button"
-            class="btn-sm-icon-ghost peer group"
-            aria-label="Toggle menu"
-            aria-expanded="false"
-            aria-controls="mobile-menu"
-            onclick="this.setAttribute('aria-expanded', this.getAttribute('aria-expanded') === 'true' ? 'false' : 'true')"
-          >
-            <span class="group-aria-expanded:hidden"><Fragment set:html={Menu} /></span>
-            <span class="hidden group-aria-expanded:block"><Fragment set:html={X} /></span>
-          </button>
-          <nav
-            id="mobile-menu"
-            class="fixed inset-0 top-14 z-50 flex invisible -translate-y-16 scale-95 flex-col gap-2 bg-background p-4 opacity-0 transition-all pointer-events-none peer-aria-expanded:visible peer-aria-expanded:translate-y-0 peer-aria-expanded:scale-100 peer-aria-expanded:opacity-100 peer-aria-expanded:pointer-events-auto"
-            data-mobile-menu
-          >
-            {
-              (site.links || []).map((link) => (
-                <a class="btn-lg-ghost justify-between" href={link.url} target={link.attrs?.target} rel={link.attrs?.rel}>
-                  <span>{link.label}</span>
-                  {link.icon && <Fragment set:html={link.icon} />}
-                </a>
-              ))
-            }
-          </nav>
-        </div>
+        <ContentHeader site={site} page={page} navigation={navigation} config={config} />
       </div>
     </header>
 
@@ -221,22 +238,24 @@ const actionItems = [
           </footer>
         </div>
       </article>
-      <aside class="hidden w-56 xl:block">
-        <div class="docs-toc sticky top-20 space-y-2 text-sm [&_a]:text-muted-foreground [&_a]:hover:text-foreground [&_a[data-active='true']]:text-foreground [&_ol]:space-y-2 [&_ol_ol]:mt-2 [&_ol_ol]:pl-3" data-docs-toc>
-          <h2 class="flex items-center gap-1 font-medium">
-            On this page
-          </h2>
-          <ol>
-            {
-              headings.map((heading) => (
-                <li class={heading.depth === 3 ? "pl-3" : ""}>
-                  <a href={`#${heading.id}`} data-toc-link>{heading.text}</a>
-                </li>
-              ))
-            }
-          </ol>
-        </div>
-      </aside>
+      {
+        hasToc && (
+          <aside class="hidden w-56 xl:block">
+            <div class="docs-toc sticky top-20 space-y-2 text-sm [&_a]:text-muted-foreground [&_a]:hover:text-foreground [&_a[data-active='true']]:text-foreground [&_ol]:space-y-2 [&_ol_ol]:mt-2 [&_ol_ol]:pl-3" data-docs-toc>
+              <h2 class="flex items-center gap-1 font-medium text-muted-foreground">On this page</h2>
+              <ol>
+                {headings.map((heading) => (
+                  <li class={heading.depth === 3 ? "pl-3" : ""}>
+                    <a href={`#${heading.id}`} data-toc-link>
+                      {heading.text}
+                    </a>
+                  </li>
+                ))}
+              </ol>
+            </div>
+          </aside>
+        )
+      }
     </div>
   </main>