reallysimpledocs 1.0.0-beta.3 → 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,12 +25,11 @@
   > h1:first-child {
     @apply hidden;
   }
-  p > a,
-  li > a,
-  dt > a,
-  dd > a,
-  td > a,
-  th > a {
+  > p a,
+  > li a,
+  > dl a,
+  > table td a,
+  > table th a {
     @apply underline underline-offset-2 decoration-muted-foreground/50 hover:decoration-foreground/50 transition-all;
   }
   code:not(pre > code) {
@@ -41,19 +42,19 @@
     @apply block min-w-full w-max px-4 py-3 text-[13px];
   }
   pre:has(> code) {
-    @apply max-w-full overflow-x-auto;
+    @apply scrollbar 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 +64,7 @@
       }
     }
   }
-  dl {
+  > dl {
     @apply border-b pb-3 my-6;
     dt {
       @apply border-t pt-3 mt-3 first:mt-0;
@@ -80,11 +81,11 @@
     @apply font-semibold;
   }
   > p,
-  blockquote,
-  ul,
-  ol,
-  dl,
-  pre {
+  > blockquote,
+  > ul,
+  > ol,
+  > dl,
+  > pre {
     @apply my-6;
   }
   > *:first-child {
@@ -93,7 +94,7 @@
   > *:last-child {
     @apply !mb-0;
   }
-  table {
+  > table {
     @apply w-full caption-bottom text-sm;
     thead {
       @apply [&_tr]:border-b;
@@ -122,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);
 }
 
@@ -141,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 lunr from "lunr";
-
+<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");
@@ -130,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];
@@ -148,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();
@@ -190,16 +204,17 @@ 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();
   }
 
   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)

package/src/runtime/components/DefaultContentHeader.astro

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