reallysimpledocs 1.0.0-beta.4 → 1.0.0-beta.5

package/src/css/custom.css

@@ -1,3 +1,5 @@
+@source "../runtime/**/*.{astro,js,ts}";
+
 @theme {
   --color-search-highlight: oklch(90.5% 0.182 98.111);
 }
@@ -23,28 +25,24 @@
   > h1:first-child {
     @apply hidden;
   }
-  > p > a,
-  > blockquote a,
-  > :is(ol, ul) a,
+  > p a,
+  > li a,
   > dl a,
-  > table a {
+  > table td a,
+  > table th a {
     @apply underline underline-offset-2 decoration-muted-foreground/50 hover:decoration-foreground/50 transition-all;
   }
-  > 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) {
+  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) {
-    @apply max-w-full overflow-x-auto;
+  pre:has(> code) {
+    @apply scrollbar max-w-full overflow-x-auto;
   }
   > blockquote {
     @apply border-l-4 border-border pl-4;
@@ -78,16 +76,8 @@
       @apply mt-4 border-b-0 pb-0 pl-8 my-0;
     }
   }
-  > p b,
-  > p strong,
-  > blockquote b,
-  > blockquote strong,
-  > :is(ol, ul) b,
-  > :is(ol, ul) strong,
-  > dl b,
-  > dl strong,
-  > table b,
-  > table strong {
+  b,
+  strong {
     @apply font-semibold;
   }
   > p,
@@ -133,7 +123,11 @@
 .shiki,
 .astro-code {
   @apply bg-muted/50;
-  background-color: color-mix(in oklab, var(--color-muted) 50%, transparent) !important;
+  background-color: color-mix(
+    in oklab,
+    var(--color-muted) 50%,
+    transparent
+  ) !important;
   color: var(--shiki-light);
 }
 
@@ -152,22 +146,247 @@ html.dark .astro-code span {
   color: var(--shiki-dark);
 }
 
-#command-search > .command {
-  @apply sm:max-w-2xl;
+[data-search] .command a[role="menuitem"] {
+  @apply h-auto min-h-0 flex-col items-start gap-1 overflow-visible whitespace-normal py-2;
+}
+
+[data-search] .command a[role="menuitem"] > strong {
+  @apply w-full font-medium leading-5;
+}
+
+[data-search] .command a[role="menuitem"] > span {
+  @apply text-muted-foreground line-clamp-2 w-full text-sm font-normal leading-5;
+}
+
+.command mark {
+  @apply bg-search-highlight/50 text-foreground dark:bg-search-highlight/25;
 }
 
-[data-search] .command a[role='menuitem'] {
-  @apply flex-col items-start gap-1;
+.docs-card {
+  @apply block w-full rounded-lg border bg-card p-3 text-card-foreground no-underline;
 }
 
-[data-search] .command a[role='menuitem'] > strong {
+.docs-card > h3 {
   @apply font-medium;
 }
 
-[data-search] .command a[role='menuitem'] > span {
-  @apply text-muted-foreground line-clamp-2 text-xs font-normal leading-snug;
+.docs-card > p {
+  @apply mt-1 text-sm text-muted-foreground;
 }
 
-.command mark {
-  @apply bg-search-highlight/50 text-foreground rounded-sm px-0.5 dark:bg-search-highlight/25;
+.docs-card-link {
+  @apply transition-colors hover:bg-accent focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50;
+}
+
+.alert[data-variant="warning"] > svg,
+.alert[data-variant="warning"] > h3,
+.alert[data-variant="warning"] > section {
+  @apply text-amber-700 dark:text-amber-300;
+}
+
+.code-block {
+  @apply relative my-6 w-full max-w-full overflow-hidden rounded-lg;
+}
+
+.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-block > header > :first-child,
+.code-group > header > :first-child,
+.preview > header > :first-child {
+  @apply mr-auto;
+}
+
+.code-block > pre {
+  @apply scrollbar my-0 max-w-full overflow-x-auto rounded-none border-0;
+}
+
+.code-block > pre > code {
+  @apply block min-w-full w-max px-4 py-3 text-[13px];
+}
+
+.code-block > .shiki {
+  @apply my-0 rounded-none border-0;
+}
+
+.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;
+}
+
+.code-group > header > .tabs {
+  @apply my-0 min-w-0 max-w-full gap-0;
+}
+
+.code-group > header > .tabs > nav {
+  @apply h-full justify-start rounded-none bg-transparent p-0;
+}
+
+.code-group > [role="tabpanel"] {
+  @apply border-t-0;
+}
+
+.code-group .code-block {
+  @apply my-0 min-w-0 rounded-none;
+}
+
+.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;
+}
+
+.steps {
+  @apply mb-12 mt-6 md:ml-4 md:border-l md:pl-8;
+  counter-reset: step;
+}
+
+.steps > section {
+  counter-increment: step;
+}
+
+.steps > section + section {
+  @apply mt-6;
+}
+
+.steps > section > h3 {
+  @apply relative mt-12 scroll-m-28 text-lg font-medium tracking-tight;
+}
+
+.steps > section + section > h3 {
+  @apply mt-0;
+}
+
+.steps > section:first-child > h3 {
+  @apply mt-0;
+}
+
+.steps > section > h3::before {
+  @apply mr-4 inline-flex size-7 items-center justify-center rounded-full bg-muted text-sm font-medium text-muted-foreground;
+  content: counter(step);
+}
+
+@media (width >= 48rem) {
+  .steps > section > h3::before {
+    position: absolute;
+    left: 0;
+    top: 0;
+    margin-right: 0;
+    transform: translateX(-2.875rem);
+  }
+}
+
+.steps > section > * + * {
+  @apply mt-6;
+}
+
+.steps > section > h3 + * {
+  @apply mt-4;
+}
+
+.steps > section > * {
+  @apply leading-relaxed;
+}
+
+.steps > section > *:first-child {
+  @apply mt-0;
+}
+
+.steps > section > *:last-child {
+  @apply mb-0;
+}
+
+.prose > .alert,
+.prose > .docs-card,
+.prose > .grid,
+.prose > .tabs {
+  @apply my-6;
+}
+
+.command [role="menu"][data-loading]::before {
+  content: none;
+}
+
+.command [role="menu"] > [data-rsd-command-loading] {
+  @apply flex min-h-16 items-center justify-center gap-2 py-6 text-center text-sm text-muted-foreground;
+
+  svg {
+    @apply size-4 animate-spin;
+  }
 }

package/src/css/styles/luma.css

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

package/src/css/styles/lyra.css

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

package/src/css/styles/maia.css

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

package/src/css/styles/mira.css

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

package/src/css/styles/nova.css

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

package/src/css/styles/rhea.css

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

package/src/css/styles/sera.css

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

package/src/css/styles/vega.css

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

package/src/runtime/components/BaseLayout.astro

@@ -1,6 +1,7 @@
 ---
-import "virtual:reallysimpledocs/styles.css";
 import config from "virtual:reallysimpledocs/config";
+import Head from "virtual:reallysimpledocs/components/Head";
+import DefaultHead from "./DefaultHead.astro";
 import { getSite } from "../lib/site.js";
 
 const { title, description, pagePath = "/" } = Astro.props;
@@ -27,28 +28,24 @@ const absoluteAssetUrl = (value) => {
 <!doctype html>
 <html lang="en">
   <head>
-    <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 (_) {}
-
-        const apply = (dark) => {
-          document.documentElement.classList.toggle("dark", dark);
-          try {
-            localStorage.setItem("themeMode", dark ? "dark" : "light");
-          } catch (_) {}
-        };
-
-        document.addEventListener("basecoat:theme", (event) => {
-          const mode = event.detail?.mode;
-          apply(mode === "dark" ? true : mode === "light" ? false : !document.documentElement.classList.contains("dark"));
-        });
-      })();
-    </script>
+    <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" />
@@ -72,10 +69,6 @@ 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} />}
-    <script>
-      import "basecoat-css/all.min";
-      import "../scripts/copy-code.js";
-    </script>
   </head>
   <body>
     <slot />

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,37 +204,22 @@ 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;
-  }
-
   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((data) => {
           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

@@ -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>