reallysimpledocs 1.0.0-beta.4 → 1.0.0

package/src/astro/preview-source.js

@@ -0,0 +1,150 @@
+import { toMarkdown } from "mdast-util-to-markdown";
+import { mdxToMarkdown } from "mdast-util-mdx";
+import { parseCodeMeta } from "../runtime/lib/code-meta.js";
+
+export function remarkPreviewSource({ docsDir } = {}) {
+  const normalizedDocsDir = docsDir ? normalizePath(docsDir).replace(/\/$/, "") : "";
+
+  return (tree, file) => {
+    if (normalizedDocsDir && !isDocsFile(file?.path, normalizedDocsDir)) return;
+
+    visit(tree, (node, parent, index) => {
+      if (node?.type === "code") return codeToMdx(node, parent, index);
+      if (node?.type !== "mdxJsxFlowElement") return null;
+      if (node.name === "Preview") {
+        addPreviewSource(node, file);
+        unwrapPreviewMarkdown(node);
+      }
+      if (node.name === "Tabs") addTabsMetadata(node);
+      return null;
+    });
+  };
+}
+
+function isDocsFile(filePath, docsDir) {
+  const normalized = normalizePath(filePath || "");
+  return normalized === docsDir || normalized.startsWith(`${docsDir}/`);
+}
+
+function normalizePath(value) {
+  return String(value || "").replaceAll("\\", "/");
+}
+
+function addPreviewSource(node, file) {
+  node.attributes ||= [];
+  if (hasAttr(node, "code")) return;
+
+  const source = formatPreviewSource(getPreviewSource(node, file) ?? toMarkdown({ type: "root", children: node.children || [] }, { extensions: [mdxToMarkdown()] }));
+  node.attributes.push({ type: "mdxJsxAttribute", name: "code", value: source });
+}
+
+function getPreviewSource(node, file) {
+  const value = String(file?.value || "");
+  const start = node?.position?.start?.offset;
+  const end = node?.position?.end?.offset;
+  if (!Number.isInteger(start) || !Number.isInteger(end) || end <= start) return null;
+
+  const raw = value.slice(start, end);
+  const openEnd = raw.indexOf(">");
+  const closeStart = raw.lastIndexOf("</Preview>");
+  if (openEnd === -1 || closeStart === -1 || closeStart <= openEnd) return null;
+
+  return raw.slice(openEnd + 1, closeStart);
+}
+
+function formatPreviewSource(source) {
+  return String(source || "").trim();
+}
+
+function codeToMdx(node, parent, index) {
+  if (!parent || !Number.isInteger(index)) return null;
+  const title = parseCodeMeta(node.meta).title;
+  if (!title) return null;
+
+  return {
+    type: "mdxJsxFlowElement",
+    name: "Code",
+    attributes: [
+      { type: "mdxJsxAttribute", name: "lang", value: node.lang || "text" },
+      { type: "mdxJsxAttribute", name: "title", value: title },
+      { type: "mdxJsxAttribute", name: "code", value: String(node.value || "") },
+    ],
+    children: [],
+  };
+}
+
+function unwrapPreviewMarkdown(node) {
+  if (!Array.isArray(node?.children)) return;
+
+  const preserveDirectParagraphs =
+    (node.type === "mdxJsxFlowElement" || node.type === "mdxJsxTextElement") && node.name === "Step";
+  if (!preserveDirectParagraphs) {
+    node.children = node.children.flatMap((child) => (child?.type === "paragraph" ? child.children || [] : [child]));
+  }
+  for (const child of node.children) {
+    if (child?.type === "mdxJsxFlowElement" || child?.type === "mdxJsxTextElement") unwrapPreviewMarkdown(child);
+  }
+}
+
+function addTabsMetadata(node) {
+  node.attributes ||= [];
+  if (hasAttr(node, "tabs")) return;
+
+  const tabNodes = (node.children || []).filter((child) => child?.type === "mdxJsxFlowElement" && child.name === "Tab");
+  if (!tabNodes.length) return;
+
+  const seen = new Map();
+  const tabs = tabNodes.map((tab, index) => {
+    tab.attributes ||= [];
+    const title = getAttr(tab, "title") || `Tab ${index + 1}`;
+    const value = uniqueValue(slugify(title) || `tab-${index + 1}`, seen);
+    if (!hasAttr(tab, "slot")) {
+      tab.attributes.push({ type: "mdxJsxAttribute", name: "slot", value });
+    }
+    return {
+      label: title,
+      slot: value,
+    };
+  });
+
+  node.attributes.push({
+    type: "mdxJsxAttribute",
+    name: "tabs",
+    value: JSON.stringify(tabs),
+  });
+}
+
+function visit(node, visitor, parent = null, index = -1) {
+  const replacement = visitor(node, parent, index);
+  if (replacement && parent && Number.isInteger(index)) {
+    parent.children[index] = replacement;
+    node = replacement;
+  }
+  if (!Array.isArray(node?.children)) return;
+  for (let childIndex = 0; childIndex < node.children.length; childIndex += 1) {
+    visit(node.children[childIndex], visitor, node, childIndex);
+  }
+}
+
+function getAttr(node, name) {
+  const attr = (node.attributes || []).find((item) => item.type === "mdxJsxAttribute" && item.name === name);
+  return typeof attr?.value === "string" ? attr.value : "";
+}
+
+function hasAttr(node, name) {
+  return (node.attributes || []).some((item) => item.type === "mdxJsxAttribute" && item.name === name);
+}
+
+function slugify(value) {
+  return String(value || "")
+    .trim()
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-+|-+$/g, "");
+}
+
+function uniqueValue(value, seen) {
+  const count = seen.get(value) || 0;
+  seen.set(value, count + 1);
+  return count ? `${value}-${count + 1}` : value;
+}

package/src/astro/rehype-basecoat-tables.js

@@ -0,0 +1,62 @@
+import rehypeParse from "rehype-parse";
+import rehypeStringify from "rehype-stringify";
+import { unified } from "unified";
+
+const containerClass = ["table-container", "scrollbar", "my-6"];
+const tableClass = ["table"];
+
+export function rehypeBasecoatTables() {
+  return (tree) => {
+    transformTables(tree);
+  };
+}
+
+export async function transformBasecoatTablesHtml(html) {
+  const file = await unified()
+    .use(rehypeParse, { fragment: true })
+    .use(rehypeBasecoatTables)
+    .use(rehypeStringify)
+    .process(html);
+  return String(file);
+}
+
+function transformTables(parent) {
+  if (!Array.isArray(parent?.children)) return;
+
+  for (let index = 0; index < parent.children.length; index += 1) {
+    const child = parent.children[index];
+    if (isElement(child, "table")) {
+      addClass(child, tableClass);
+      if (isTableContainer(parent)) continue;
+      parent.children[index] = {
+        type: "element",
+        tagName: "div",
+        properties: { className: [...containerClass] },
+        children: [child],
+      };
+      continue;
+    }
+    transformTables(child);
+  }
+}
+
+function isElement(node, tagName) {
+  return node?.type === "element" && node.tagName === tagName;
+}
+
+function isTableContainer(node) {
+  return isElement(node, "div") && classList(node).includes("table-container");
+}
+
+function addClass(node, classes) {
+  const merged = new Set([...classList(node), ...classes]);
+  node.properties ||= {};
+  node.properties.className = [...merged];
+}
+
+function classList(node) {
+  const value = node?.properties?.className;
+  if (Array.isArray(value)) return value.map(String);
+  if (typeof value === "string") return value.split(/\s+/).filter(Boolean);
+  return [];
+}

package/src/components/index.js

@@ -10,4 +10,5 @@ export { default as CodeGroup } from "../runtime/components/mdx/CodeGroup.astro"
 export { default as Preview } from "../runtime/components/mdx/Preview.astro";
 export { default as Step } from "../runtime/components/mdx/Step.astro";
 export { default as Steps } from "../runtime/components/mdx/Steps.astro";
+export { default as Tab } from "../runtime/components/mdx/Tab.astro";
 export { default as Tabs } from "../runtime/components/mdx/Tabs.astro";

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,29 @@
   > h1:first-child {
     @apply hidden;
   }
-  > p > a,
-  > blockquote a,
-  > :is(ol, ul) a,
+  > p a,
+  > li a,
   > dl a,
-  > table 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;
   }
-  > 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) {
+  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];
   }
-  > 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,18 +81,6 @@
       @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 {
-    @apply font-semibold;
-  }
   > p,
   > blockquote,
   > ul,
@@ -104,36 +95,21 @@
   > *: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;
   }
 }
 
 .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 +128,185 @@ 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'] {
-  @apply flex-col items-start gap-1;
+[data-search] .command a[role="menuitem"] > span {
+  @apply text-muted-foreground line-clamp-2 w-full text-sm font-normal leading-5;
 }
 
-[data-search] .command a[role='menuitem'] > strong {
+.command mark {
+  @apply bg-search-highlight/50 text-foreground dark:bg-search-highlight/25;
+}
+
+.docs-card {
+  @apply block w-full rounded-lg border bg-card p-3 text-card-foreground no-underline;
+}
+
+.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-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-frame > header::-webkit-scrollbar,
+.tabs-frame > header::-webkit-scrollbar {
+  display: none;
+}
+
+.code-block {
+  @apply relative my-6 w-full max-w-full overflow-hidden rounded-lg;
+}
+
+.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 [&_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-frame > .code-block,
+.tabs-frame > [data-code-panel] .code-block {
+  @apply my-0 min-w-0 rounded-none rounded-b-[inherit];
+}
+
+.tabs-frame {
+  @apply overflow-visible;
+}
+
+.code-frame {
+  @apply overflow-hidden;
+}
+
+.tabs-frame > [role="tabpanel"] {
+  @apply rounded-b-[inherit];
+}
+
+.tabs-frame > [data-preview-panel] {
+  @apply flex min-h-64 items-center justify-center p-6 bg-muted/50 dark:bg-muted/25;
+}
+
+.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-3;
+}
+
+.steps > section > h3 + * {
+  @apply mt-2;
+}
+
+.steps > section > :where(.code-frame, .code-block, .tabs-frame) {
+  @apply my-3;
+}
+
+.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,
+.prose > .tabs-frame {
+  @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,9 @@
+.code-frame,
+.code-block,
+.tabs-frame {
+  @apply rounded-2xl;
+}
+
+.code-frame > header {
+  @apply h-[40px];
+}

package/src/css/styles/lyra.css

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

package/src/css/styles/maia.css

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

package/src/css/styles/mira.css

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

package/src/css/styles/nova.css

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

package/src/css/styles/rhea.css

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

package/src/css/styles/sera.css

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

package/src/css/styles/vega.css

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

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;
@@ -22,33 +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>
-    <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>
     <meta charset="utf-8" />
     <meta http-equiv="Content-Language" content="en" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -72,12 +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} />}
-    <script>
-      import "basecoat-css/all.min";
-      import "../scripts/copy-code.js";
-    </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}
+    />
   </head>
-  <body>
+  <body {...bodyAttrs}>
     <slot />
   </body>
 </html>