reallysimpledocs 1.0.0-beta.4 → 1.0.0

package/src/runtime/components/DocsLayout.astro

@@ -6,47 +6,26 @@ import Check from "lucide-static/icons/check.svg?raw";
 import Copy from "lucide-static/icons/copy.svg?raw";
 import PanelLeft from "lucide-static/icons/panel-left.svg?raw";
 import Search from "lucide-static/icons/search.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";
 import OpenAILogo from "../../icons/logos/openai.svg?raw";
 import BaseLayout from "./BaseLayout.astro";
 import CommandDialog from "./CommandDialog.astro";
+import ContentHeader from "virtual:reallysimpledocs/components/ContentHeader";
 import DropdownMenu from "./DropdownMenu.astro";
 import Sidebar from "./Sidebar.astro";
-import { buildMenus, getBreadcrumbs, getNavigation } from "../lib/docs.js";
+import ThemeToggle from "./ThemeToggle.astro";
+import { buildMenus, 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.`;
@@ -83,11 +62,13 @@ const actionItems = [
 ---
 
 <BaseLayout title={page.title} description={site.description} pagePath={page.path}>
-  <CommandDialog indexUrl={searchIndexUrl} />
+  <CommandDialog />
   <Sidebar menu={sidebar} />
 
   <main id="content">
-    <header class="bg-background sticky inset-x-0 top-0 isolate z-10 flex shrink-0 items-center gap-2 border-b">
+    <header
+      class="sticky inset-x-0 top-0 isolate z-30 flex shrink-0 items-center gap-2 border-b bg-background"
+    >
       <div class="flex h-14 w-full items-center justify-between gap-2 px-4">
         <button
           type="button"
@@ -96,79 +77,28 @@ const actionItems = [
           data-tooltip="Toggle sidebar"
           data-side="bottom"
           data-align="start"
-          class="btn-sm-icon-ghost"
+          class="btn"
+          data-variant="ghost"
+          data-size="icon-sm"
         >
           <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="btn-sm-icon-ghost ml-auto sm:hidden"
-          aria-label="Search"
-          data-tooltip="Search"
-          data-side="bottom"
+        <div
+          class="input-group h-8 w-full min-w-0 max-w-72 cursor-text sm:ml-auto"
+          role="button"
+          tabindex="0"
+          aria-label="Search docs"
           onclick="window.rsdOpenCommandSearch ? window.rsdOpenCommandSearch() : document.getElementById('command-search')?.showModal()"
+          onkeydown="if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); window.rsdOpenCommandSearch ? window.rsdOpenCommandSearch() : document.getElementById('command-search')?.showModal(); }"
         >
-          <Fragment set:html={searchIcon} />
-        </button>
-
-        <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>
+          <input type="text" placeholder="Search..." readonly tabindex="-1" aria-hidden="true" />
+          <span data-align="start" aria-hidden="true"><Fragment set:html={searchIcon} /></span>
+          <span data-align="end" aria-hidden="true"><kbd class="kbd">⌘K</kbd></span>
+        </div>
 
-        <ContentHeader site={site} page={page} navigation={navigation} config={config} />
+        <ContentHeader site={site} page={page} />
+        <ThemeToggle />
       </div>
     </header>
 
@@ -176,19 +106,20 @@ const actionItems = [
       <article class="min-w-0 flex-1 wrap-break-word">
         <div class="mx-auto w-full max-w-2xl flex-1 space-y-10">
           <header class="space-y-2">
-            <div class="flex items-start gap-x-2">
+            <div class="flex flex-col-reverse items-start gap-3 sm:flex-row sm:gap-x-2">
               <h1 class="mr-auto text-3xl font-semibold tracking-tight sm:text-4xl">{page.title}</h1>
-              <div class="mt-1 flex items-center gap-x-2">
+              <div class="flex w-full items-center justify-end gap-x-2 sm:mt-1 sm:w-auto">
                 <div role="group" class="button-group">
                   <button
                     type="button"
-                    class="btn-sm-secondary"
+                    class="btn"
+                    data-variant="secondary"
+                    data-size="sm"
                     data-md-url={page.markdownPath}
                     onclick="copyPageMarkdown(this)"
                   >
-                    <span data-copy-icon><Fragment set:html={Copy} /></span>
-                    <span data-check-icon class="hidden"><Fragment set:html={Check} /></span>
-                    <span>Copy page</span>
+                    <Fragment set:html={Copy} />
+                    Copy page
                   </button>
                   <hr role="separator" />
                   <DropdownMenu items={actionItems} />
@@ -196,7 +127,7 @@ const actionItems = [
                 <div role="group" class="button-group">
                   {
                     navigation.prev && (
-                      <a href={navigation.prev.path} class="btn-sm-icon-secondary">
+                      <a href={navigation.prev.path} class="btn" data-variant="secondary" data-size="icon-sm">
                         <span class="sr-only">{navigation.prev.title}</span>
                         <Fragment set:html={ArrowLeft} />
                       </a>
@@ -205,7 +136,7 @@ const actionItems = [
                   {navigation.prev && navigation.next && <hr role="separator" />}
                   {
                     navigation.next && (
-                      <a href={navigation.next.path} class="btn-sm-icon-secondary">
+                      <a href={navigation.next.path} class="btn" data-variant="secondary" data-size="icon-sm">
                         <span class="sr-only">{navigation.next.title}</span>
                         <Fragment set:html={ArrowRight} />
                       </a>
@@ -221,7 +152,7 @@ const actionItems = [
           <footer class="mt-12 flex items-center">
             {
               navigation.prev && (
-                <a href={navigation.prev.path} class="btn-sm-secondary mr-auto">
+                <a href={navigation.prev.path} class="btn mr-auto" data-variant="secondary" data-size="sm">
                   <Fragment set:html={ArrowLeft} />
                   {navigation.prev.title}
                 </a>
@@ -229,7 +160,7 @@ const actionItems = [
             }
             {
               navigation.next && (
-                <a href={navigation.next.path} class="btn-sm-secondary ml-auto">
+                <a href={navigation.next.path} class="btn ml-auto" data-variant="secondary" data-size="sm">
                   {navigation.next.title}
                   <Fragment set:html={ArrowRight} />
                 </a>
@@ -238,51 +169,48 @@ const actionItems = [
           </footer>
         </div>
       </article>
-      {
-        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>
-        )
-      }
+      <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[aria-current='location']]: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>
     </div>
   </main>
 
-  <script is:inline>
-    async function copyPageMarkdown(button) {
+  <script is:inline define:vars={{ checkIcon: Check }}>
+    window.copyPageMarkdown = async function copyPageMarkdown(button) {
       const markdownUrl = button?.dataset?.mdUrl;
       if (!markdownUrl) return;
-      const copyIcon = button.querySelector("[data-copy-icon]");
-      const checkIcon = button.querySelector("[data-check-icon]");
+      const icon = button.querySelector("svg");
+      const originalIcon = icon?.outerHTML || "";
 
       try {
         const response = await fetch(markdownUrl, { credentials: "same-origin", cache: "no-store" });
         if (!response.ok) throw new Error("Failed to fetch markdown");
         const markdown = await response.text();
         await writeToClipboard(markdown);
-        if (copyIcon && checkIcon) {
-          copyIcon.classList.add("hidden");
-          checkIcon.classList.remove("hidden");
+        if (icon && checkIcon) {
+          icon.outerHTML = checkIcon;
           window.setTimeout(() => {
-            copyIcon.classList.remove("hidden");
-            checkIcon.classList.add("hidden");
+            const currentIcon = button.querySelector("svg");
+            if (currentIcon && originalIcon) currentIcon.outerHTML = originalIcon;
           }, 1200);
         }
       } catch (_) {
         window.open(new URL(markdownUrl, window.location.href).toString(), "_blank", "noopener");
       }
-    }
+    };
 
     async function writeToClipboard(text) {
       if (navigator.clipboard?.writeText && window.isSecureContext) {
@@ -305,55 +233,60 @@ const actionItems = [
 
     function initDocsToc() {
       const toc = document.querySelector("[data-docs-toc]");
-      if (!toc) return;
-
-      const links = Array.from(toc.querySelectorAll("[data-toc-link]"));
-      const linkById = new Map();
-      for (const link of links) {
-        const id = decodeURIComponent(link.hash.slice(1));
-        if (id) linkById.set(id, link);
-      }
+      const links = Array.from(toc?.querySelectorAll("[data-toc-link]") || []);
+      if (!links.length) return;
 
-      const headings = Array.from(linkById.keys())
-        .map((id) => document.getElementById(id))
+      const entries = links
+        .map((link) => {
+          const id = decodeURIComponent(link.hash.slice(1));
+          const heading = id ? document.getElementById(id) : null;
+          return heading ? { id, heading, link } : null;
+        })
         .filter(Boolean);
-      if (!headings.length) return;
+      if (!entries.length) return;
 
-      const setActive = (id) => {
-        for (const link of links) {
-          const active = decodeURIComponent(link.hash.slice(1)) === id;
-          link.dataset.active = active ? "true" : "false";
-          if (active) link.setAttribute("aria-current", "location");
-          else link.removeAttribute("aria-current");
+      const activate = (id) => {
+        for (const entry of entries) {
+          const active = entry.id === id;
+          entry.link.toggleAttribute("data-active", active);
+          if (active) entry.link.setAttribute("aria-current", "location");
+          else entry.link.removeAttribute("aria-current");
         }
       };
 
-      const currentHeading = () => {
-        const offset = 160;
-        let current = headings[0];
-        for (const heading of headings) {
-          if (heading.getBoundingClientRect().top <= offset) current = heading;
+      const activeFromScroll = () => {
+        const marker = Math.min(window.innerHeight * 0.35, 220);
+        let current = entries[0];
+
+        for (const entry of entries) {
+          if (entry.heading.getBoundingClientRect().top <= marker) current = entry;
           else break;
         }
-        return current;
-      };
 
-      const updateActive = () => setActive(currentHeading().id);
-      updateActive();
+        activate(current.id);
+      };
 
-      let queued = false;
-      const queueUpdate = () => {
-        if (queued) return;
-        queued = true;
-        window.requestAnimationFrame(() => {
-          queued = false;
-          updateActive();
+      let frame = 0;
+      const queueActiveUpdate = () => {
+        if (frame) return;
+        frame = window.requestAnimationFrame(() => {
+          frame = 0;
+          activeFromScroll();
         });
       };
 
-      window.addEventListener("scroll", queueUpdate, { passive: true });
-      window.addEventListener("resize", queueUpdate);
-      window.addEventListener("hashchange", () => window.setTimeout(updateActive, 0));
+      if ("IntersectionObserver" in window) {
+        const observer = new IntersectionObserver(queueActiveUpdate, {
+          rootMargin: "-20% 0px -65% 0px",
+          threshold: [0, 1],
+        });
+        for (const entry of entries) observer.observe(entry.heading);
+      }
+
+      activeFromScroll();
+      window.addEventListener("scroll", queueActiveUpdate, { passive: true });
+      window.addEventListener("resize", queueActiveUpdate);
+      window.addEventListener("hashchange", () => window.setTimeout(activeFromScroll, 0));
     }
 
     initDocsToc();

package/src/runtime/components/DropdownMenu.astro

@@ -16,7 +16,7 @@ const { items } = Astro.props;
         rel: item.rel,
       },
     })),
-    triggerAttrs: { class: "btn-sm-icon-secondary" },
+    triggerAttrs: { class: "btn", "data-variant": "secondary", "data-size": "icon-sm" },
     popoverAttrs: { "data-align": "end" },
   })}
 />

package/src/runtime/components/ThemeToggle.astro

@@ -0,0 +1,21 @@
+---
+import Moon from "lucide-static/icons/moon.svg?raw";
+import Sun from "lucide-static/icons/sun.svg?raw";
+---
+
+<nav class="flex items-center gap-2">
+  <button
+    type="button"
+    aria-label="Toggle dark mode"
+    data-tooltip="Toggle dark mode"
+    data-side="bottom"
+    data-align="end"
+    onclick="window.basecoat?.theme.toggle()"
+    class="btn"
+    data-variant="ghost"
+    data-size="icon-sm"
+  >
+    <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/mdx/Callout.astro

@@ -2,22 +2,9 @@
 import * as lucideIcons from "lucide-static";
 import { addSvgClass } from "../../lib/html.js";
 
-const { type, title = "Note", icon: iconName, action, class: className = "" } = Astro.props;
+const { type, title = "Note", icon: iconName, class: className = "" } = Astro.props;
 const normalizedType = String(type || "").toLowerCase();
 const calloutType = normalizedType === "warning" || normalizedType === "destructive" ? normalizedType : "";
-const destructive = calloutType === "destructive";
-const actionLabel = action?.label;
-const actionClass = action?.class || "btn-sm-secondary";
-const actionAttrs = action
-  ? {
-      ...action.attrs,
-      href: action.href,
-      target: action.target,
-      rel: action.rel,
-      onclick: action.onclick,
-      class: actionClass,
-    }
-  : {};
 
 function resolveNamedIcon(name) {
   if (!name || typeof name !== "string") return "";
@@ -36,29 +23,12 @@ function resolveNamedIcon(name) {
 const iconSource = typeof iconName === "string" ? resolveNamedIcon(iconName) : "";
 const icon = addSvgClass(iconSource, "size-4");
 const heading = title;
-const variantClass =
-  calloutType === "warning"
-    ? "[&>svg]:text-amber-700 [&>h3]:text-amber-700 [&>section]:text-amber-700 dark:[&>svg]:text-amber-300 dark:[&>h3]:text-amber-300 dark:[&>section]:text-amber-300"
-    : destructive
-      ? "[&>svg]:text-destructive [&>h3]:text-destructive [&>section]:text-destructive"
-      : "";
 ---
 
-<div class:list={[destructive ? "alert-destructive" : "alert", "my-6", variantClass, className]}>
+<div class:list={["alert", className]} data-variant={calloutType || undefined}>
   {icon && <Fragment set:html={icon} />}
   <h3>{heading}</h3>
   <section>
     <slot />
   </section>
-  {
-    actionLabel && (
-      <footer>
-        {action?.href ? (
-          <a {...actionAttrs}>{actionLabel}</a>
-        ) : (
-          <button type="button" {...actionAttrs}>{actionLabel}</button>
-        )}
-      </footer>
-    )
-  }
 </div>

package/src/runtime/components/mdx/Card.astro

@@ -1,14 +1,9 @@
 ---
 const { title, description, href, class: className = "" } = Astro.props;
 const Tag = href ? "a" : "article";
-const classes = [
-  "my-6 block w-full rounded-lg border bg-card p-3 text-card-foreground no-underline",
-  href && "transition-colors hover:bg-accent/50 focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50",
-  className,
-];
 ---
 
-<Tag href={href} class:list={classes}>
-  {title && <h3 class="font-medium">{title}</h3>}
-  {description && <p class="mt-1 text-sm text-muted-foreground">{description}</p>}
+<Tag href={href} class:list={["docs-card", href && "docs-card-link", className]}>
+  {title && <h3>{title}</h3>}
+  {description && <p>{description}</p>}
 </Tag>

package/src/runtime/components/mdx/CardGrid.astro

@@ -2,6 +2,6 @@
 const { class: className = "" } = Astro.props;
 ---
 
-<div class:list={["my-6 grid w-full gap-4 sm:grid-cols-2 [&>*]:my-0", className]}>
+<div class:list={["grid w-full gap-4 sm:grid-cols-2", className]}>
   <slot />
 </div>

package/src/runtime/components/mdx/Code.astro

@@ -1,39 +1,33 @@
 ---
 import { highlightCode } from "../../lib/highlight.js";
+import { decodeHtml } from "../../lib/html.js";
 
-const { lang = "text", title, class: className = "" } = Astro.props;
+const { lang = "text", title, code, class: className = "" } = Astro.props;
 const slotHtml = Astro.slots.has("default") ? await Astro.slots.render("default") : "";
-const rawCode = decodeSlotText(slotHtml);
+const rawCode = typeof code === "string" ? code.trim() : decodeSlotText(slotHtml);
 const html = await highlightCode(rawCode, lang);
-const classes = [
-  "relative my-6 w-full max-w-full overflow-hidden rounded-lg",
-  className,
-];
 
 function decodeSlotText(value) {
-  return String(value || "")
+  const text = String(value || "")
     .replace(/^<p>/, "")
-    .replace(/<\/p>$/, "")
-    .replace(/&lt;/g, "<")
-    .replace(/&gt;/g, ">")
-    .replace(/&amp;/g, "&")
-    .replace(/&quot;/g, '"')
-    .replace(/&#39;/g, "'")
-    .trim();
+    .replace(/<\/p>$/, "");
+  return decodeHtml(text).trim();
 }
 ---
 
-<div
-  data-code-block
-  data-code-title={title || undefined}
-  class:list={classes}
->
-  {
-    title && (
-      <header class="flex h-10 items-center gap-2 border-b border-border/50 bg-muted/50 px-3 text-sm font-medium">
-        <span class="mr-auto">{title}</span>
+{
+  title ? (
+    <div class:list={["code-frame", className]} data-code-title={title}>
+      <header>
+        <span>{title}</span>
       </header>
-    )
-  }
-  <Fragment set:html={html} />
-</div>
+      <div class="code-block">
+        <Fragment set:html={html} />
+      </div>
+    </div>
+  ) : (
+    <div class:list={["code-block", className]}>
+      <Fragment set:html={html} />
+    </div>
+  )
+}