reallysimpledocs 1.0.0-beta.5 → 1.0.0

package/src/css/custom.css

@@ -28,10 +28,15 @@
   > p a,
   > li a,
   > dl a,
-  > table td a,
-  > table th a {
+  > .table-container a,
+  [role="listitem"] > p > a,
+  [role="listitem"] > li > a {
     @apply underline underline-offset-2 decoration-muted-foreground/50 hover:decoration-foreground/50 transition-all;
   }
+  b,
+  strong {
+    @apply font-semibold;
+  }
   code:not(pre > code) {
     @apply relative rounded-md bg-muted px-[0.3rem] py-[0.2rem] font-mono text-[13px];
   }
@@ -76,10 +81,6 @@
       @apply mt-4 border-b-0 pb-0 pl-8 my-0;
     }
   }
-  b,
-  strong {
-    @apply font-semibold;
-  }
   > p,
   > blockquote,
   > ul,
@@ -94,29 +95,10 @@
   > *:last-child {
     @apply !mb-0;
   }
-  > table {
-    @apply w-full caption-bottom text-sm;
-    thead {
-      @apply [&_tr]:border-b;
-    }
-    tbody {
-      @apply [&_tr:last-child]:border-0;
-    }
-    tfoot {
-      @apply bg-muted/50 border-t font-medium [&>tr]:last:border-b-0;
-    }
-    tr {
-      @apply hover:bg-muted/50 border-b transition-colors;
-    }
-    th {
-      @apply text-foreground h-10 px-2 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px];
-    }
-    td {
-      @apply p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px];
-    }
-    caption {
-      @apply text-muted-foreground mt-4 text-sm;
-    }
+
+  > .table-container .table th,
+  > .table-container .table td {
+    @apply whitespace-normal;
   }
 }
 
@@ -184,20 +166,28 @@ html.dark .astro-code span {
   @apply text-amber-700 dark:text-amber-300;
 }
 
-.code-block {
-  @apply relative my-6 w-full max-w-full overflow-hidden rounded-lg;
+.code-frame,
+.tabs-frame {
+  @apply relative my-6 w-full max-w-full rounded-lg;
+}
+
+.code-frame > header {
+  @apply flex h-10 items-center gap-2 overflow-x-auto rounded-t-[inherit] border-b bg-muted px-3 text-sm font-medium dark:bg-muted/50;
+  scrollbar-width: none;
+}
+
+.tabs-frame > header {
+  @apply flex items-center gap-2 overflow-x-auto rounded-t-[inherit] border-b bg-muted px-3 py-0.5 text-sm font-medium dark:bg-muted/50;
+  scrollbar-width: none;
 }
 
-.code-block > header,
-.code-group > header,
-.preview > header {
-  @apply flex h-10 items-center gap-2 border-b border-border bg-muted/50 px-3 text-sm font-medium;
+.code-frame > header::-webkit-scrollbar,
+.tabs-frame > header::-webkit-scrollbar {
+  display: none;
 }
 
-.code-block > header > :first-child,
-.code-group > header > :first-child,
-.preview > header > :first-child {
-  @apply mr-auto;
+.code-block {
+  @apply relative my-6 w-full max-w-full overflow-hidden rounded-lg;
 }
 
 .code-block > pre {
@@ -213,103 +203,28 @@ html.dark .astro-code span {
 }
 
 .code-block > button {
-  @apply absolute right-2.5 top-2.5 z-10;
-}
-
-.code-block button,
-.code-group button[aria-label="Copy code"],
-.preview button[aria-label="Copy code"] {
-  @apply flex size-6 shrink-0 items-center justify-center rounded-md text-muted-foreground outline-none hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [&_svg]:size-4;
-}
-
-.code-block > button {
-  @apply bg-background/80 shadow-xs backdrop-blur-sm hover:bg-accent/80 dark:bg-background/60 dark:hover:bg-accent/70;
-}
-
-.code-block > header > button,
-.code-group > header > button,
-.preview > header > button {
-  @apply ml-auto;
-}
-
-.code-group {
-  @apply relative my-6 w-full max-w-full overflow-hidden rounded-lg;
+  @apply absolute right-2.5 top-2.5 z-10 [&_svg]:size-4 flex size-6 shrink-0 items-center justify-center rounded-md text-muted-foreground outline-none bg-muted/50 dark:bg-muted/25 backdrop-blur-sm hover:text-foreground transition-colors;
 }
 
-.code-group > header > .tabs {
-  @apply my-0 min-w-0 max-w-full gap-0;
+.code-frame > .code-block,
+.tabs-frame > [data-code-panel] .code-block {
+  @apply my-0 min-w-0 rounded-none rounded-b-[inherit];
 }
 
-.code-group > header > .tabs > nav {
-  @apply h-full justify-start rounded-none bg-transparent p-0;
+.tabs-frame {
+  @apply overflow-visible;
 }
 
-.code-group > [role="tabpanel"] {
-  @apply border-t-0;
+.code-frame {
+  @apply overflow-hidden;
 }
 
-.code-group .code-block {
-  @apply my-0 min-w-0 rounded-none;
+.tabs-frame > [role="tabpanel"] {
+  @apply rounded-b-[inherit];
 }
 
-.code-group .code-block > header {
-  @apply hidden;
-}
-
-.preview {
-  @apply relative my-6 max-w-full overflow-visible rounded-lg;
-}
-
-.preview::before {
-  @apply pointer-events-none absolute inset-0 z-10 border border-border;
-  border-radius: inherit;
-  content: "";
-}
-
-.preview > header > .tabs {
-  @apply my-0 min-w-0 max-w-full gap-0;
-}
-
-.preview > header {
-  @apply relative z-0 rounded-t-[inherit];
-}
-
-.preview > header > .tabs > nav {
-  @apply h-full justify-start rounded-none bg-transparent p-0;
-}
-
-.preview > [role="tabpanel"] {
-  @apply border-t-0;
-}
-
-.preview > [data-code-panel] {
-  @apply overflow-hidden rounded-b-[inherit];
-}
-
-.preview > [data-code-panel] .code-block {
-  @apply my-0 min-w-0 rounded-none;
-}
-
-.preview > header > button[aria-label="Copy code"] {
-  display: none;
-}
-
-.preview:has(> [data-code-panel]:not([hidden]))
-  > header
-  > button[aria-label="Copy code"] {
-  display: flex;
-}
-
-.preview > [data-preview-panel] {
-  @apply flex min-h-64 items-center justify-center p-6;
-}
-
-.preview > [data-preview-panel] :where(ul, ol) {
-  @apply m-0;
-}
-
-.preview > [data-preview-panel] :where(li) {
-  @apply mt-0;
+.tabs-frame > [data-preview-panel] {
+  @apply flex min-h-64 items-center justify-center p-6 bg-muted/50 dark:bg-muted/25;
 }
 
 .steps {
@@ -353,11 +268,15 @@ html.dark .astro-code span {
 }
 
 .steps > section > * + * {
-  @apply mt-6;
+  @apply mt-3;
 }
 
 .steps > section > h3 + * {
-  @apply mt-4;
+  @apply mt-2;
+}
+
+.steps > section > :where(.code-frame, .code-block, .tabs-frame) {
+  @apply my-3;
 }
 
 .steps > section > * {
@@ -375,7 +294,8 @@ html.dark .astro-code span {
 .prose > .alert,
 .prose > .docs-card,
 .prose > .grid,
-.prose > .tabs {
+.prose > .tabs,
+.prose > .tabs-frame {
   @apply my-6;
 }
 

package/src/css/styles/luma.css

@@ -1,11 +1,9 @@
+.code-frame,
 .code-block,
-.code-group,
-.preview {
+.tabs-frame {
   @apply rounded-2xl;
 }
 
-.code-block > header,
-.code-group > header,
-.preview > header {
-  @apply h-[38px];
+.code-frame > header {
+  @apply h-[40px];
 }

package/src/css/styles/lyra.css

@@ -1,11 +1,9 @@
+.code-frame,
 .code-block,
-.code-group,
-.preview {
+.tabs-frame {
   @apply rounded-none;
 }
 
-.code-block > header,
-.code-group > header,
-.preview > header {
-  @apply h-[30px];
+.code-frame > header {
+  @apply h-[32px];
 }

package/src/css/styles/maia.css

@@ -1,11 +1,9 @@
+.code-frame,
 .code-block,
-.code-group,
-.preview {
+.tabs-frame {
   @apply rounded-lg;
 }
 
-.code-block > header,
-.code-group > header,
-.preview > header {
-  @apply h-[38px];
+.code-frame > header {
+  @apply h-[40px];
 }

package/src/css/styles/mira.css

@@ -1,11 +1,9 @@
+.code-frame,
 .code-block,
-.code-group,
-.preview {
+.tabs-frame {
   @apply rounded-lg;
 }
 
-.code-block > header,
-.code-group > header,
-.preview > header {
-  @apply h-[30px];
+.code-frame > header {
+  @apply h-[32px];
 }

package/src/css/styles/nova.css

@@ -1,11 +1,9 @@
+.code-frame,
 .code-block,
-.code-group,
-.preview {
+.tabs-frame {
   @apply rounded-lg;
 }
 
-.code-block > header,
-.code-group > header,
-.preview > header {
-  @apply h-[34px];
+.code-frame > header {
+  @apply h-[36px];
 }

package/src/css/styles/rhea.css

@@ -1,11 +1,9 @@
+.code-frame,
 .code-block,
-.code-group,
-.preview {
+.tabs-frame {
   @apply rounded-2xl;
 }
 
-.code-block > header,
-.code-group > header,
-.preview > header {
-  @apply h-[34px];
+.code-frame > header {
+  @apply h-[36px];
 }

package/src/css/styles/sera.css

@@ -1,11 +1,9 @@
+.code-frame,
 .code-block,
-.code-group,
-.preview {
+.tabs-frame {
   @apply rounded-none;
 }
 
-.code-block > header,
-.code-group > header,
-.preview > header {
-  @apply h-[38px];
+.code-frame > header {
+  @apply h-[40px];
 }

package/src/css/styles/vega.css

@@ -1,11 +1,9 @@
+.code-frame,
 .code-block,
-.code-group,
-.preview {
+.tabs-frame {
   @apply rounded-lg;
 }
 
-.code-block > header,
-.code-group > header,
-.preview > header {
-  @apply h-[38px];
+.code-frame > header {
+  @apply h-[40px];
 }

package/src/runtime/components/BaseLayout.astro

@@ -23,29 +23,12 @@ const absoluteAssetUrl = (value) => {
   const path = assetPath(value);
   return path.startsWith("http") ? path : `${siteUrl}${path}`;
 };
+const bodyAttrs = config.bodyAttrs || {};
 ---
 
 <!doctype html>
 <html lang="en">
   <head>
-    <DefaultHead
-      config={config}
-      site={site}
-      title={title}
-      description={metaDescription}
-      pagePath={pagePath}
-      metaTitle={metaTitle}
-      absoluteUrl={absoluteUrl}
-    />
-    <Head
-      config={config}
-      site={site}
-      title={title}
-      description={metaDescription}
-      pagePath={pagePath}
-      metaTitle={metaTitle}
-      absoluteUrl={absoluteUrl}
-    />
     <meta charset="utf-8" />
     <meta http-equiv="Content-Language" content="en" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -69,8 +52,26 @@ const absoluteAssetUrl = (value) => {
     <meta name="twitter:description" content={metaDescription} />
     {socialImage && <meta name="twitter:image" content={absoluteAssetUrl(socialImage)} />}
     {site.author?.x && <meta name="twitter:creator" content={site.author.x} />}
+    <DefaultHead
+      config={config}
+      site={site}
+      title={title}
+      description={metaDescription}
+      pagePath={pagePath}
+      metaTitle={metaTitle}
+      absoluteUrl={absoluteUrl}
+    />
+    <Head
+      config={config}
+      site={site}
+      title={title}
+      description={metaDescription}
+      pagePath={pagePath}
+      metaTitle={metaTitle}
+      absoluteUrl={absoluteUrl}
+    />
   </head>
-  <body>
+  <body {...bodyAttrs}>
     <slot />
   </body>
 </html>

package/src/runtime/components/CommandDialog.astro

@@ -212,18 +212,33 @@ const { indexUrl = routeFilePath(config.routeBase, "search-index.json") } = Astr
     refreshCommand();
   }
 
+  function renderEmpty() {
+    if (!menu) return;
+    delete menu.dataset.loading;
+    menu.innerHTML = "";
+    refreshCommand();
+  }
+
   async function loadIndex() {
     if (state.index) return state;
     if (!indexUrl) throw new Error("Missing ReallySimpleDocs search index URL.");
     if (!state.loadPromise) {
       renderLoading();
       state.loadPromise = fetch(indexUrl)
-        .then((response) => response.json())
+        .then((response) => {
+          if (!response.ok) throw new Error(`Failed to load search index: ${response.status}`);
+          return response.json();
+        })
         .then((data) => {
           state.documents = data.documents || [];
           state.bySlug = new Map(state.documents.map((doc) => [doc.slug, doc]));
           state.index = lunr.Index.load(data.index);
           return state;
+        })
+        .catch((error) => {
+          state.loadPromise = null;
+          renderEmpty();
+          throw error;
         });
     }
     return state.loadPromise;
@@ -253,10 +268,14 @@ const { indexUrl = routeFilePath(config.routeBase, "search-index.json") } = Astr
   }
 
   async function refreshResults() {
-    await loadIndex();
-    const query = input?.value || "";
-    const results = search(query).slice(0, MAX_RESULTS);
-    renderItems(results, query.trim() ? "Results" : "Docs", query);
+    try {
+      await loadIndex();
+      const query = input?.value || "";
+      const results = search(query).slice(0, MAX_RESULTS);
+      renderItems(results, query.trim() ? "Results" : "Docs", query);
+    } catch (error) {
+      console.error("[search] Failed to load index:", error);
+    }
   }
 
   window.rsdOpenCommandSearch = async () => {

package/src/runtime/components/DefaultHead.astro

@@ -8,7 +8,11 @@ import basecoatJsUrl from "basecoat-css/all.min?url";
   (() => {
     try {
       const stored = localStorage.getItem("themeMode");
-      if (stored ? stored === "dark" : matchMedia("(prefers-color-scheme: dark)").matches) {
+      if (
+        stored
+          ? stored === "dark"
+          : matchMedia("(prefers-color-scheme: dark)").matches
+      ) {
         document.documentElement.classList.add("dark");
       }
     } catch (_) {}
@@ -34,37 +38,22 @@ import basecoatJsUrl from "basecoat-css/all.min?url";
     if (!ok) throw new Error("Copy failed");
   };
 
-  const activePanelCode = (root) => root.querySelector(':scope > [role="tabpanel"]:not([hidden]) code');
-
   const initCopyCode = (codeBlock) => {
     if (codeBlock.dataset.copyCodeInitialized) return;
     const codeEl = codeBlock.querySelector(":scope > code");
     if (!codeEl) return;
 
-    let target = null;
-    let frame = codeBlock.closest(".code-group");
-    let getCode = frame ? () => activePanelCode(frame) || codeEl : () => codeEl;
-    if (frame) target = frame.querySelector(":scope > header");
-
-    const preview = codeBlock.closest(".preview");
-    const previewCodePanel = preview?.querySelector(":scope > [data-code-panel]");
-    if (!frame && previewCodePanel?.contains(codeBlock)) {
-      frame = preview;
-      target = frame.querySelector(":scope > header");
-      getCode = () => codeEl;
-    }
-
+    let frame = codeBlock.parentElement?.classList.contains("code-block")
+      ? codeBlock.parentElement
+      : null;
     if (!frame) {
-      frame = codeBlock.parentElement?.classList.contains("code-block") ? codeBlock.parentElement : null;
-      if (!frame) {
-        frame = document.createElement("div");
-        frame.className = "code-block";
-        codeBlock.parentNode.insertBefore(frame, codeBlock);
-        frame.appendChild(codeBlock);
-      }
+      frame = document.createElement("div");
+      frame.className = "code-block";
+      codeBlock.parentNode.insertBefore(frame, codeBlock);
+      frame.appendChild(codeBlock);
     }
 
-    target ||= frame.querySelector(":scope > header") || frame;
+    const target = frame;
     if (target.querySelector(":scope > button[aria-label='Copy code']")) {
       codeBlock.dataset.copyCodeInitialized = "true";
       return;
@@ -72,14 +61,11 @@ import basecoatJsUrl from "basecoat-css/all.min?url";
 
     const button = document.createElement("button");
     button.type = "button";
-    button.className = "btn";
-    button.dataset.variant = "ghost";
-    button.dataset.size = "icon-xs";
     button.setAttribute("aria-label", "Copy code");
     button.innerHTML = copyIcon;
 
     button.addEventListener("click", async () => {
-      const text = (getCode()?.textContent || "").replace(/\n$/, "");
+      const text = (codeEl.textContent || "").replace(/\n$/, "");
       if (!text) return;
 
       try {
@@ -99,11 +85,15 @@ import basecoatJsUrl from "basecoat-css/all.min?url";
   };
 
   const initCopyButtons = (root = document) => {
-    root.querySelectorAll("pre:has(> code):not([data-copy-code-initialized])").forEach(initCopyCode);
+    root
+      .querySelectorAll("pre:has(> code):not([data-copy-code-initialized])")
+      .forEach(initCopyCode);
   };
 
   if (document.readyState === "loading") {
-    document.addEventListener("DOMContentLoaded", () => initCopyButtons(), { once: true });
+    document.addEventListener("DOMContentLoaded", () => initCopyButtons(), {
+      once: true,
+    });
   } else {
     initCopyButtons();
   }

package/src/runtime/components/DocsLayout.astro

@@ -4,7 +4,6 @@ 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 PanelLeft from "lucide-static/icons/panel-left.svg?raw";
 import Search from "lucide-static/icons/search.svg?raw";
 import ClaudeLogo from "../../icons/logos/claude.svg?raw";
@@ -100,21 +99,6 @@ const actionItems = [
 
         <ContentHeader site={site} page={page} />
         <ThemeToggle />
-
-        <div class="sm:hidden">
-          <button
-            type="button"
-            class="btn peer group"
-            data-variant="ghost"
-            data-size="icon-sm"
-            aria-label="Toggle sidebar"
-            aria-expanded="false"
-            aria-controls="sidebar"
-            onclick="document.getElementById('sidebar')?.toggle()"
-          >
-            <Fragment set:html={Menu} />
-          </button>
-        </div>
       </div>
     </header>
 

package/src/runtime/components/ThemeToggle.astro

@@ -3,7 +3,7 @@ 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">
+<nav class="flex items-center gap-2">
   <button
     type="button"
     aria-label="Toggle dark mode"

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

@@ -1,25 +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);
 
 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 class:list={["code-block", className]} data-code-title={title || undefined}>
-  {title && <header><span>{title}</span></header>}
-  <Fragment set:html={html} />
-</div>
+{
+  title ? (
+    <div class:list={["code-frame", className]} data-code-title={title}>
+      <header>
+        <span>{title}</span>
+      </header>
+      <div class="code-block">
+        <Fragment set:html={html} />
+      </div>
+    </div>
+  ) : (
+    <div class:list={["code-block", className]}>
+      <Fragment set:html={html} />
+    </div>
+  )
+}