reallysimpledocs 1.0.0-beta.4 → 1.0.0

package/src/runtime/components/CommandDialog.astro

@@ -1,7 +1,11 @@
 ---
+import config from "virtual:reallysimpledocs/config";
 import { renderCommandDialog } from "../lib/macros.js";
+import { routeFilePath } from "../lib/paths.js";
+import LoaderCircle from "lucide-static/icons/loader-circle.svg?raw";
+import lunrUrl from "lunr/lunr.min.js?url";
 
-const { indexUrl } = Astro.props;
+const { indexUrl = routeFilePath(config.routeBase, "search-index.json") } = Astro.props;
 ---
 
 <div data-search data-index-url={indexUrl}>
@@ -15,9 +19,8 @@ const { indexUrl } = Astro.props;
   />
 </div>
 
-<script>
-  import lunrUrl from "lunr/lunr.js?url";
-
+<script src={lunrUrl}></script>
+<script is:inline define:vars={{ loadingIcon: LoaderCircle }}>
   const root = document.querySelector("[data-search]");
   const indexUrl = root?.getAttribute("data-index-url");
   const dialog = document.getElementById("command-search");
@@ -26,7 +29,6 @@ const { indexUrl } = Astro.props;
   const menu = dialog?.querySelector('[role="menu"]');
   const state = {
     loadPromise: null,
-    lunrPromise: null,
     index: null,
     documents: [],
     bySlug: new Map(),
@@ -131,8 +133,8 @@ const { indexUrl } = Astro.props;
     return space > -1 ? space : end;
   }
 
-  function snippetFromBody(body, ranges) {
-    const text = String(body || "");
+  function snippetFromText(value, ranges) {
+    const text = String(value || "");
     if (!text || !ranges.length) return "";
 
     const first = ranges[0];
@@ -149,25 +151,36 @@ const { indexUrl } = Astro.props;
 
   function resultView(result, query) {
     const doc = result.doc || result;
+    const displayTitle = doc.breadcrumb || doc.title;
     if (!query.trim()) {
       return {
         path: doc.path,
-        title: escapeHtml(doc.title),
+        title: escapeHtml(displayTitle),
         snippet: "",
       };
     }
 
-    const titleRanges = refineRanges(doc.title, rangesFromMatch(result.match, "title"), query);
+    let titleRanges = rangesFromMatch(result.match, "breadcrumb");
+    if (!titleRanges.length) {
+      const titleOffset = String(displayTitle).lastIndexOf(doc.title);
+      titleRanges = rangesFromMatch(result.match, "title").map(([start, end]) => [
+        titleOffset > -1 ? titleOffset + start : start,
+        titleOffset > -1 ? titleOffset + end : end,
+      ]);
+    }
+    titleRanges = refineRanges(displayTitle, titleRanges, query);
     const bodyRanges = refineRanges(doc.body, rangesFromMatch(result.match, "body"), query);
+    const codeRanges = refineRanges(doc.code, rangesFromMatch(result.match, "code"), query);
     return {
       path: doc.path,
-      title: highlightRanges(doc.title, titleRanges),
-      snippet: snippetFromBody(doc.body, bodyRanges),
+      title: highlightRanges(displayTitle, titleRanges),
+      snippet: snippetFromText(doc.body, bodyRanges) || snippetFromText(doc.code, codeRanges),
     };
   }
 
   function renderItems(items, label, query = "") {
     if (!menu) return;
+    delete menu.dataset.loading;
     if (!items.length) {
       menu.innerHTML = "";
       refreshCommand();
@@ -191,41 +204,41 @@ const { indexUrl } = Astro.props;
 
   function renderLoading() {
     if (!menu) return;
-    menu.innerHTML = `<div role="group" aria-labelledby="command-search-loading-heading">
-      <span role="heading" id="command-search-loading-heading">Search</span>
-      <div role="menuitem" aria-disabled="true" data-force><span>Loading...</span></div>
+    menu.dataset.loading = "true";
+    menu.innerHTML = `<div role="status" aria-live="polite" data-rsd-command-loading>
+      <span aria-hidden="true">${loadingIcon}</span>
+      <span>Loading...</span>
     </div>`;
     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;
+  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 (!indexUrl) throw new Error("Missing ReallySimpleDocs search index URL.");
     if (!state.loadPromise) {
       renderLoading();
       state.loadPromise = fetch(indexUrl)
-        .then((response) => response.json())
-        .then(async (data) => {
-          const lunr = await loadLunr();
+        .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;
@@ -255,10 +268,14 @@ const { indexUrl } = Astro.props;
   }
 
   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/DefaultContentHeader.astro

@@ -1,19 +1,2 @@
 ---
-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/DefaultHead.astro

@@ -0,0 +1,110 @@
+---
+import Copy from "lucide-static/icons/copy.svg?raw";
+import Check from "lucide-static/icons/check.svg?raw";
+import basecoatJsUrl from "basecoat-css/all.min?url";
+---
+
+<script is:inline>
+  (() => {
+    try {
+      const stored = localStorage.getItem("themeMode");
+      if (
+        stored
+          ? stored === "dark"
+          : matchMedia("(prefers-color-scheme: dark)").matches
+      ) {
+        document.documentElement.classList.add("dark");
+      }
+    } catch (_) {}
+  })();
+</script>
+<script src={basecoatJsUrl}></script>
+<script is:inline define:vars={{ copyIcon: Copy, checkIcon: Check }}>
+  const copyText = async (text) => {
+    if (window.isSecureContext && navigator.clipboard?.writeText) {
+      return navigator.clipboard.writeText(text);
+    }
+
+    const textarea = document.createElement("textarea");
+    textarea.value = text;
+    textarea.setAttribute("readonly", "");
+    textarea.style.position = "fixed";
+    textarea.style.top = "-9999px";
+    textarea.style.left = "-9999px";
+    document.body.appendChild(textarea);
+    textarea.select();
+    const ok = document.execCommand("copy");
+    textarea.remove();
+    if (!ok) throw new Error("Copy failed");
+  };
+
+  const initCopyCode = (codeBlock) => {
+    if (codeBlock.dataset.copyCodeInitialized) return;
+    const codeEl = codeBlock.querySelector(":scope > code");
+    if (!codeEl) return;
+
+    let 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);
+    }
+
+    const target = frame;
+    if (target.querySelector(":scope > button[aria-label='Copy code']")) {
+      codeBlock.dataset.copyCodeInitialized = "true";
+      return;
+    }
+
+    const button = document.createElement("button");
+    button.type = "button";
+    button.setAttribute("aria-label", "Copy code");
+    button.innerHTML = copyIcon;
+
+    button.addEventListener("click", async () => {
+      const text = (codeEl.textContent || "").replace(/\n$/, "");
+      if (!text) return;
+
+      try {
+        await copyText(text);
+        button.innerHTML = checkIcon;
+      } catch (error) {
+        console.error("[copy] Failed to copy:", error);
+        button.textContent = "Failed";
+      }
+      window.setTimeout(() => {
+        button.innerHTML = copyIcon;
+      }, 1200);
+    });
+
+    target.appendChild(button);
+    codeBlock.dataset.copyCodeInitialized = "true";
+  };
+
+  const initCopyButtons = (root = document) => {
+    root
+      .querySelectorAll("pre:has(> code):not([data-copy-code-initialized])")
+      .forEach(initCopyCode);
+  };
+
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", () => initCopyButtons(), {
+      once: true,
+    });
+  } else {
+    initCopyButtons();
+  }
+
+  new MutationObserver((mutations) => {
+    for (const mutation of mutations) {
+      mutation.addedNodes.forEach((node) => {
+        if (node.nodeType !== Node.ELEMENT_NODE) return;
+        if (node.matches?.("pre:has(> code)")) initCopyCode(node);
+        initCopyButtons(node);
+      });
+    }
+  }).observe(document.documentElement, { childList: true, subtree: true });
+</script>

package/src/runtime/components/DefaultHeadContent.astro

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

package/src/runtime/components/DefaultSidebarHeader.astro

@@ -9,7 +9,7 @@ const logo = site.logo?.svg
     : "";
 ---
 
-<a href="/" class="btn-ghost h-12 w-full justify-start p-2">
+<a href="/" class="btn h-12 w-full justify-start p-2" data-variant="ghost" data-size="lg">
   {
     logo && (
       <div class="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">