reallysimpledocs 1.0.0-beta.2 → 1.0.0-beta.3

package/README.md

@@ -2,7 +2,7 @@
 
 A simple documentation system for Astro, built with **Basecoat** and **Tailwind CSS**.
 
-RSD keeps docs portable: content lives in `docs/`, navigation lives in `docs/docs.json`, and the Astro integration owns the docs UI.
+reallysimpledocs keeps docs portable: content lives in `docs/`, navigation lives in `docs/docs.json`, and the Astro integration owns the docs UI.
 
 ## Add to an Astro site
 
@@ -59,21 +59,19 @@ docs/
 Welcome to the docs.
 ```
 
-RSD injects docs pages, Lunr search, per-page Markdown exports, `llms.txt`, and `llms-full.txt`.
+reallysimpledocs injects docs pages, Lunr search, per-page Markdown exports, `llms.txt`, and `llms-full.txt`.
 
-Use `.md` for normal pages and `.mdx` when a page needs Astro components:
+Use `.mdx` when a page needs reallysimpledocs components. Common reallysimpledocs components are available by default, so you do not need to import them in each page:
 
 ```mdx
-import { Callout, Preview } from "reallysimpledocs/components";
-
 # Button
 
-<Callout type="tip">MDX is optional. Plain Markdown stays the default.</Callout>
+<Callout title="MDX works">MDX is optional. Plain Markdown stays the default.</Callout>
 ```
 
 ## Use Basecoat on the rest of the site
 
-RSD styles and scripts its generated docs pages. For custom Astro pages outside the docs route, use Basecoat directly in your own layout.
+reallysimpledocs styles and scripts its generated docs pages. For custom Astro pages outside the docs route, use Basecoat directly in your own layout.
 
 Install stays the same:
 
@@ -103,7 +101,7 @@ import "basecoat-css/all.min";
 <slot />
 ```
 
-Use the same Basecoat `style` in your RSD config and your site stylesheet if you want the docs and custom pages to match.
+Use the same Basecoat `style` in your reallysimpledocs config and your site stylesheet if you want the docs and custom pages to match.
 
 ## Local development (this repo)
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "reallysimpledocs",
-  "version": "1.0.0-beta.2",
+  "version": "1.0.0-beta.3",
   "type": "module",
   "exports": {
     ".": "./src/index.js",

package/src/astro/index.js

@@ -26,6 +26,19 @@ const normalizeArray = (value) => (Array.isArray(value) ? value : value ? [value
 
 const normalizeImportPath = (filePath) => filePath.replaceAll(path.sep, "/");
 
+const isInsideDir = (dir, file) => {
+  const relative = path.relative(dir, file);
+  return relative && !relative.startsWith("..") && !path.isAbsolute(relative);
+};
+
+const shikiConfig = {
+  themes: {
+    light: "github-light",
+    dark: "github-dark",
+  },
+  defaultColor: false,
+};
+
 function collectMdxModules(docsDir) {
   if (!fs.existsSync(docsDir)) return {};
   const modules = {};
@@ -78,7 +91,6 @@ export default function reallySimpleDocs(options = {}) {
           siteFile: normalizedOptions.siteFile ? path.resolve(root, normalizedOptions.siteFile) : null,
           routeBase: normalizeRouteBase(normalizedOptions.routeBase),
         };
-        const mdxModules = collectMdxModules(docsDir);
         const resolveUserId = (id) => (id?.startsWith(".") ? path.resolve(root, id) : id);
         const components = {
           SidebarHeader:
@@ -123,7 +135,15 @@ export default function reallySimpleDocs(options = {}) {
         });
 
         updateConfig({
-          integrations: [mdx()],
+          integrations: [
+            mdx({
+              syntaxHighlight: "shiki",
+              shikiConfig,
+            }),
+          ],
+          markdown: {
+            shikiConfig,
+          },
           vite: {
             build: {
               cssMinify: false,
@@ -132,6 +152,21 @@ export default function reallySimpleDocs(options = {}) {
               tailwindcss(),
               {
                 name: "reallysimpledocs-virtual-modules",
+                configureServer(server) {
+                  const invalidateMdxPages = () => {
+                    const module = server.moduleGraph.getModuleById("\0virtual:reallysimpledocs/mdx-pages");
+                    if (module) server.moduleGraph.invalidateModule(module);
+                    server.ws.send({ type: "full-reload" });
+                  };
+
+                  server.watcher.add(path.join(docsDir, "**/*.mdx"));
+                  server.watcher.on("add", (file) => {
+                    if (file.endsWith(".mdx") && isInsideDir(docsDir, file)) invalidateMdxPages();
+                  });
+                  server.watcher.on("unlink", (file) => {
+                    if (file.endsWith(".mdx") && isInsideDir(docsDir, file)) invalidateMdxPages();
+                  });
+                },
                 resolveId(id) {
                   if (id === "virtual:reallysimpledocs/config") return "\0virtual:reallysimpledocs/config";
                   if (id === "virtual:reallysimpledocs/mdx-pages") return "\0virtual:reallysimpledocs/mdx-pages";
@@ -144,6 +179,7 @@ export default function reallySimpleDocs(options = {}) {
                 load(id) {
                   if (id === "\0virtual:reallysimpledocs/config") return `export default ${JSON.stringify(virtualConfig)};`;
                   if (id === "\0virtual:reallysimpledocs/mdx-pages") {
+                    const mdxModules = collectMdxModules(docsDir);
                     const imports = Object.entries(mdxModules)
                       .map(([slug, filePath], index) => `import * as mdx${index} from ${JSON.stringify(filePath)};`)
                       .join("\n");

package/src/components/index.js

@@ -2,13 +2,11 @@ export { default as DocsLayout } from "../runtime/components/DocsLayout.astro";
 export { default as CommandDialog } from "../runtime/components/CommandDialog.astro";
 export { default as DropdownMenu } from "../runtime/components/DropdownMenu.astro";
 export { default as Sidebar } from "../runtime/components/Sidebar.astro";
-export { default as Badge } from "../runtime/components/mdx/Badge.astro";
 export { default as Callout } from "../runtime/components/mdx/Callout.astro";
 export { default as Card } from "../runtime/components/mdx/Card.astro";
 export { default as CardGrid } from "../runtime/components/mdx/CardGrid.astro";
 export { default as Code } from "../runtime/components/mdx/Code.astro";
 export { default as CodeGroup } from "../runtime/components/mdx/CodeGroup.astro";
-export { default as LinkButton } from "../runtime/components/mdx/LinkButton.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";

package/src/css/custom.css

@@ -119,20 +119,25 @@
   }
 }
 
-.shiki {
-  @apply bg-muted dark:bg-muted/50;
+.shiki,
+.astro-code {
+  @apply bg-muted/50;
+  background-color: color-mix(in oklab, var(--color-muted) 50%, transparent) !important;
   color: var(--shiki-light);
 }
 
-.shiki span {
+.shiki span,
+.astro-code span {
   color: var(--shiki-light);
 }
 
-html.dark .shiki {
+html.dark .shiki,
+html.dark .astro-code {
   color: var(--shiki-dark);
 }
 
-html.dark .shiki span {
+html.dark .shiki span,
+html.dark .astro-code span {
   color: var(--shiki-dark);
 }
 
@@ -155,179 +160,3 @@ html.dark .shiki span {
 .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-muted/50 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;
-}
-
-.alert-destructive[data-variant='danger'] > svg,
-.alert-destructive[data-variant='danger'] > h3,
-.alert-destructive[data-variant='danger'] > section {
-  @apply text-destructive;
-}
-
-.code-block {
-  @apply relative my-6 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/50 bg-muted px-3 text-sm font-medium dark:bg-muted/50;
-}
-
-.code-block > header > :first-child,
-.code-group > header > :first-child,
-.preview > header > :first-child {
-  @apply mr-auto;
-}
-
-.code-block > pre {
-  @apply 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;
-}
-
-.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:bg-accent hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 dark:hover:bg-accent/50 [&_svg]:size-4;
-}
-
-.code-block > header > button,
-.code-group > header > button,
-.preview > header > button {
-  @apply ml-auto;
-}
-
-.code-group {
-  @apply relative my-6 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-hidden rounded-lg border border-border/50 bg-muted dark:bg-muted/50;
-}
-
-.preview > header > .tabs {
-  @apply my-0 min-w-0 max-w-full gap-0;
-}
-
-.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] .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] > div {
-  @apply flex min-h-64 w-full items-center justify-center bg-muted p-6 dark:bg-muted/50;
-}
-
-.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 > h3 {
-  @apply relative mt-12 scroll-m-28 text-lg font-medium tracking-tight;
-}
-
-.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 > .alert-destructive,
-.prose > .card,
-.prose > .grid,
-.prose > .tabs {
-  @apply my-6;
-}

package/src/runtime/components/CommandDialog.astro

@@ -199,7 +199,7 @@ const { indexUrl } = Astro.props;
 
   async function loadIndex() {
     if (state.index) return state;
-    if (!indexUrl) throw new Error("Missing RSD 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/mdx/Callout.astro

@@ -1,29 +1,11 @@
 ---
-import CircleAlert from "lucide-static/icons/circle-alert.svg?raw";
-import Info from "lucide-static/icons/info.svg?raw";
-import Lightbulb from "lucide-static/icons/lightbulb.svg?raw";
-import TriangleAlert from "lucide-static/icons/triangle-alert.svg?raw";
 import * as lucideIcons from "lucide-static";
 import { addSvgClass } from "../../lib/html.js";
 
-const { type, variant, title, icon: showIcon = true, class: className = "" } = Astro.props;
-const normalizedType = String(variant || type || "note").toLowerCase();
-const calloutType = normalizedType === "note" ? "info" : normalizedType;
-const destructive = calloutType === "danger";
-const labels = {
-  note: "Note",
-  info: "Info",
-  tip: "Tip",
-  warning: "Warning",
-  danger: "Danger",
-};
-const icons = {
-  note: Info,
-  info: Info,
-  tip: Lightbulb,
-  warning: TriangleAlert,
-  danger: CircleAlert,
-};
+const { type, title = "Note", icon: iconName, class: className = "" } = Astro.props;
+const normalizedType = String(type || "").toLowerCase();
+const calloutType = normalizedType === "warning" || normalizedType === "danger" ? normalizedType : "";
+const danger = calloutType === "danger";
 
 function resolveNamedIcon(name) {
   if (!name || typeof name !== "string") return "";
@@ -39,13 +21,18 @@ function resolveNamedIcon(name) {
   return lucideIcons[pascalName] || "";
 }
 
-const iconSource =
-  showIcon === false ? "" : typeof showIcon === "string" ? resolveNamedIcon(showIcon) : icons[normalizedType] || Info;
+const iconSource = typeof iconName === "string" ? resolveNamedIcon(iconName) : "";
 const icon = addSvgClass(iconSource, "size-4");
-const heading = title || labels[normalizedType] || labels.note;
+const heading = title;
+const variantClass =
+  calloutType === "warning"
+    ? "[&>svg]:text-amber-700 [&>h3]:text-amber-700 [&>section]:text-amber-700 dark:[&>svg]:text-amber-300 dark:[&>h3]:text-amber-300 dark:[&>section]:text-amber-300"
+    : danger
+      ? "[&>svg]:text-destructive [&>h3]:text-destructive [&>section]:text-destructive"
+      : "";
 ---
 
-<div class:list={[destructive ? "alert-destructive" : "alert", className]} data-variant={calloutType}>
+<div class:list={[danger ? "alert-destructive" : "alert", "my-6", variantClass, className]}>
   {icon && <Fragment set:html={icon} />}
   <h3>{heading}</h3>
   <section>

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

@@ -1,13 +1,14 @@
 ---
 const { title, description, href, class: className = "" } = Astro.props;
 const Tag = href ? "a" : "article";
+const classes = [
+  "my-6 block w-full rounded-lg border bg-card p-3 text-card-foreground no-underline",
+  href && "transition-colors hover:bg-accent/50 focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50",
+  className,
+];
 ---
 
-<Tag href={href} class:list={["card w-full no-underline", href && "docs-card-link", className]}>
-  {(title || description) && (
-    <header>
-      {title && <h3>{title}</h3>}
-      {description && <p>{description}</p>}
-    </header>
-  )}
+<Tag href={href} class:list={classes}>
+  {title && <h3 class="font-medium">{title}</h3>}
+  {description && <p class="mt-1 text-sm text-muted-foreground">{description}</p>}
 </Tag>

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

@@ -2,6 +2,6 @@
 const { class: className = "" } = Astro.props;
 ---
 
-<div class:list={["grid w-full gap-4 sm:grid-cols-2", className]}>
+<div class:list={["my-6 grid w-full gap-4 sm:grid-cols-2 [&>*]:my-0", className]}>
   <slot />
 </div>

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

@@ -1,19 +1,39 @@
 ---
-import { codeToHtml } from "shiki";
+import { highlightCode } from "../../lib/highlight.js";
 
-const { code = "", lang = "text", title, class: className = "" } = Astro.props;
-const highlightLang = String(lang || "text").toLowerCase() === "mdx" ? "tsx" : String(lang || "text");
-const html = await codeToHtml(String(code || ""), {
-  lang: highlightLang,
-  themes: {
-    light: "github-light",
-    dark: "github-dark",
-  },
-  defaultColor: false,
-});
+const { lang = "text", title, class: className = "" } = Astro.props;
+const slotHtml = Astro.slots.has("default") ? await Astro.slots.render("default") : "";
+const rawCode = decodeSlotText(slotHtml);
+const html = await highlightCode(rawCode, lang);
+const classes = [
+  "relative my-6 w-full max-w-full overflow-hidden rounded-lg",
+  className,
+];
+
+function decodeSlotText(value) {
+  return String(value || "")
+    .replace(/^<p>/, "")
+    .replace(/<\/p>$/, "")
+    .replace(/&lt;/g, "<")
+    .replace(/&gt;/g, ">")
+    .replace(/&amp;/g, "&")
+    .replace(/&quot;/g, '"')
+    .replace(/&#39;/g, "'")
+    .trim();
+}
 ---
 
-<div class:list={["code-block", className]}>
-  {title && <header><span>{title}</span></header>}
+<div
+  data-code-block
+  data-code-title={title || undefined}
+  class:list={classes}
+>
+  {
+    title && (
+      <header class="flex h-10 items-center gap-2 border-b border-border/50 bg-muted/50 px-3 text-sm font-medium">
+        <span class="mr-auto">{title}</span>
+      </header>
+    )
+  }
   <Fragment set:html={html} />
 </div>

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

@@ -1,21 +1,45 @@
 ---
-import Code from "./Code.astro";
-
-const { tabs = [], defaultTab, class: className = "" } = Astro.props;
+const { defaultTab, class: className = "" } = Astro.props;
 const id = `code-group-${Math.random().toString(36).slice(2)}`;
-const normalizedTabs = tabs.map((tab, index) => ({
-  ...tab,
-  value: tab.value || tab.label || String(index),
-  lang: tab.lang || "text",
-  code: tab.code || "",
-}));
+const slotHtml = Astro.slots.has("default") ? await Astro.slots.render("default") : "";
+const normalizedTabs = parseCodeTabs(slotHtml);
 const defaultValue = defaultTab || normalizedTabs[0]?.value;
+const classes = [
+  "relative my-6 w-full max-w-full overflow-hidden rounded-lg [&>[role=tabpanel]]:border-t-0 [&_[data-code-block]]:my-0 [&_[data-code-block]]:min-w-0 [&_[data-code-block]]:rounded-none [&_[data-code-block]>header]:hidden",
+  className,
+];
+
+function parseCodeTabs(html) {
+  const blocks = [];
+  const pattern =
+    /<div\b(?=[^>]*\bdata-code-block\b)(?=[^>]*\bdata-code-title="([^"]*)")[^>]*>([\s\S]*?)<\/div>/g;
+  let match;
+  while ((match = pattern.exec(html))) {
+    const label = decodeHtml(match[1]).trim();
+    if (!label) continue;
+    blocks.push({
+      label,
+      value: label,
+      html: match[0],
+    });
+  }
+  return blocks;
+}
+
+function decodeHtml(value) {
+  return String(value || "")
+    .replace(/&lt;/g, "<")
+    .replace(/&gt;/g, ">")
+    .replace(/&amp;/g, "&")
+    .replace(/&quot;/g, '"')
+    .replace(/&#39;/g, "'");
+}
 ---
 
-<div class:list={["code-group", className]}>
-  <header>
-    <div class="tabs">
-      <nav role="tablist" aria-orientation="horizontal" data-variant="line">
+<div class:list={classes} data-code-group>
+  <header class="flex h-10 items-center gap-2 border-b border-border/50 bg-muted/50 px-3 text-sm font-medium">
+    <div class="tabs my-0 min-w-0 max-w-full gap-0">
+      <nav class="h-full justify-start rounded-none bg-transparent p-0" role="tablist" aria-orientation="horizontal" data-variant="line">
         {
           normalizedTabs.map((tab, index) => {
             const selected = tab.value === defaultValue;
@@ -48,7 +72,7 @@ const defaultValue = defaultTab || normalizedTabs[0]?.value;
           aria-selected={selected ? "true" : "false"}
           hidden={!selected}
         >
-          <Code code={tab.code} lang={tab.lang} />
+          <Fragment set:html={tab.html} />
         </div>
       );
     })

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

@@ -1,14 +1,18 @@
 ---
-import Code from "./Code.astro";
+import { highlightCode } from "../../lib/highlight.js";
 
 const { code = "", lang = "html", title = "Preview", class: className = "" } = Astro.props;
 const id = `preview-${Math.random().toString(36).slice(2)}`;
+const html = await highlightCode(code, lang);
 ---
 
-<section class="preview">
-  <header>
-    <div class="tabs">
-      <nav role="tablist" aria-orientation="horizontal" data-variant="line">
+<section
+  class="relative my-6 max-w-full overflow-hidden rounded-lg border [&>[role=tabpanel]]:border-t-0 [&>[data-code-panel]_[data-code-block]]:my-0 [&>[data-code-panel]_[data-code-block]]:min-w-0 [&>[data-code-panel]_[data-code-block]]:rounded-none [&>[data-preview-panel]>div]:flex [&>[data-preview-panel]>div]:min-h-64 [&>[data-preview-panel]>div]:w-full [&>[data-preview-panel]>div]:items-center [&>[data-preview-panel]>div]:justify-center [&>[data-preview-panel]>div]:p-6"
+  data-preview
+>
+  <header class="flex h-10 items-center gap-2 border-b border-border/50 bg-muted/50 px-3 text-sm font-medium">
+    <div class="tabs my-0 min-w-0 max-w-full gap-0">
+      <nav class="h-full justify-start rounded-none bg-transparent p-0" role="tablist" aria-orientation="horizontal" data-variant="line">
         <button
           type="button"
           role="tab"
@@ -53,6 +57,11 @@ const id = `preview-${Math.random().toString(36).slice(2)}`;
     aria-selected="false"
     hidden
   >
-    <Code code={code} lang={lang} />
+    <div
+      class="relative my-6 w-full max-w-full overflow-hidden rounded-lg"
+      data-code-block
+    >
+      <Fragment set:html={html} />
+    </div>
   </section>
 </section>

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

@@ -1,7 +1,11 @@
 ---
 const { class: className = "" } = Astro.props;
+const classes = [
+  "mb-12 mt-6 [counter-reset:step] md:ml-4 md:border-l md:pl-8 [&>section]:mb-10 [&>section]:[counter-increment:step] [&>section:last-child]:mb-0 [&>section>*+*]:mt-6 [&>section>*]:leading-relaxed [&>section>*:first-child]:mt-0 [&>section>*:last-child]:mb-0 [&>section>h3+*]:mt-4 [&>section>h3]:relative [&>section>h3]:scroll-m-28 [&>section>h3]:text-lg [&>section>h3]:font-medium [&>section>h3]:tracking-tight [&>section>h3]:before:mr-4 [&>section>h3]:before:inline-flex [&>section>h3]:before:size-7 [&>section>h3]:before:items-center [&>section>h3]:before:justify-center [&>section>h3]:before:rounded-full [&>section>h3]:before:bg-muted [&>section>h3]:before:text-sm [&>section>h3]:before:font-medium [&>section>h3]:before:text-muted-foreground [&>section>h3]:before:content-[counter(step)] md:[&>section>h3]:before:absolute md:[&>section>h3]:before:left-0 md:[&>section>h3]:before:top-0 md:[&>section>h3]:before:mr-0 md:[&>section>h3]:before:-translate-x-[2.875rem]",
+  className,
+];
 ---
 
-<div role="list" class:list={["steps", className]}>
+<div role="list" class:list={classes}>
   <slot />
 </div>

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

@@ -9,7 +9,7 @@ const normalizedTabs = tabs.map((tab, index) => ({
 const defaultValue = defaultTab || normalizedTabs.find((tab) => !tab.disabled)?.value || normalizedTabs[0]?.value;
 ---
 
-<div class:list={["tabs", className]}>
+<div class:list={["tabs my-6", className]}>
   <nav role="tablist" aria-orientation={orientation} data-variant={variant}>
     {
       normalizedTabs.map((tab, index) => {

package/src/runtime/lib/docs.js

@@ -2,8 +2,8 @@ import fs from "node:fs";
 import path from "node:path";
 import { marked } from "marked";
 import GithubSlugger from "github-slugger";
-import { codeToHtml } from "shiki";
 import * as lucideIcons from "lucide-static";
+import { highlightCode as renderHighlightedCode } from "./highlight.js";
 import { markdownPath, routePath } from "./paths.js";
 
 export function getManifest(config) {
@@ -117,7 +117,7 @@ export async function renderDoc(config, page) {
   };
 
   const tokens = marked.lexer(content);
-  await highlightCode(tokens);
+  await highlightMarkdownCode(tokens);
   const html = marked.parser(tokens, { renderer });
   return { page, html, headings };
 }
@@ -164,7 +164,9 @@ export function resolveIcon(icon) {
         .join("")
     : trimmed.charAt(0).toUpperCase() + trimmed.slice(1);
   const iconClass = trimmed.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
-  return lucideIcons[pascalName]?.replace('class="lucide', `class="lucide lucide-${iconClass}`) || "";
+  const svg = lucideIcons[pascalName] || "";
+  if (!svg || svg.includes(`lucide-${iconClass}`)) return svg;
+  return svg.replace('class="lucide', `class="lucide lucide-${iconClass}`);
 }
 
 export function buildMenus(config, currentSlug) {
@@ -282,11 +284,11 @@ function normalizeDocSource(source) {
   const firstHeading = withoutFrontmatter.search(/^#\s+/m);
   if (firstHeading > 0) return withoutFrontmatter.slice(firstHeading).trimStart();
   return withoutFrontmatter
-    .replace(/^(\s*(?:import|export)\s+[^\n]*\n)+/m, "")
+    .replace(/^(?:[ \t]*(?:import|export)\s+[^\n]*\n)+/, "")
     .trimStart();
 }
 
-async function highlightCode(tokens) {
+async function highlightMarkdownCode(tokens) {
   for (const token of tokens) {
     if (token.type === "code") {
       const html = await highlightToken(token);
@@ -300,33 +302,24 @@ async function highlightCode(tokens) {
     }
 
     for (const childTokens of nestedTokenLists(token)) {
-      await highlightCode(childTokens);
+      await highlightMarkdownCode(childTokens);
     }
   }
 }
 
 async function highlightToken(token) {
+  const lang = normalizeLanguage(token.lang);
   try {
-    return await codeToHtml(token.text, {
-      lang: normalizeLanguage(token.lang),
-      themes: {
-        light: "github-light",
-        dark: "github-dark",
-      },
-      defaultColor: false,
-    });
+    return wrapCodeBlock(await renderHighlightedCode(token.text, lang));
   } catch {
-    return codeToHtml(token.text, {
-      lang: "text",
-      themes: {
-        light: "github-light",
-        dark: "github-dark",
-      },
-      defaultColor: false,
-    });
+    return wrapCodeBlock(await renderHighlightedCode(token.text, "text"));
   }
 }
 
+function wrapCodeBlock(html) {
+  return `<div class="relative my-6 w-full max-w-full overflow-hidden rounded-lg" data-code-block>${html}</div>`;
+}
+
 function normalizeLanguage(lang) {
   const value = lang?.trim().split(/\s+/)[0].toLowerCase() || "text";
   if (value === "njk") return "html";

package/src/runtime/lib/highlight.js

@@ -0,0 +1,27 @@
+import { codeToHtml } from "shiki";
+
+export async function highlightCode(code, lang = "text") {
+  const value = String(code || "");
+  const language = String(lang || "text").toLowerCase() === "mdx" ? "tsx" : String(lang || "text");
+  const html = await codeToHtml(value, {
+    lang: language,
+    themes: {
+      light: "github-light",
+      dark: "github-dark",
+    },
+    defaultColor: false,
+  });
+  return addCodeLayoutClasses(html);
+}
+
+function addCodeLayoutClasses(html) {
+  return String(html)
+    .replace(
+      /<pre class="/,
+      '<pre class="!my-0 max-w-full overflow-x-auto !rounded-none !border-0 ',
+    )
+    .replace(
+      /<code>/,
+      '<code class="block min-w-full w-max px-4 py-3 text-[13px]">',
+    );
+}

package/src/runtime/pages/doc.astro

@@ -1,6 +1,7 @@
 ---
 import config from "virtual:reallysimpledocs/config";
 import { getMdxPage } from "virtual:reallysimpledocs/mdx-pages";
+import * as RsdComponents from "../../components/index.js";
 import DocsLayout from "../components/DocsLayout.astro";
 import { getDocHeadings, getPages, renderDoc } from "../lib/docs.js";
 import { routeSlug } from "../lib/paths.js";
@@ -20,5 +21,5 @@ const doc = isMdx ? { page, headings: getDocHeadings(config, page), html: "" } :
 ---
 
 <DocsLayout page={page} headings={doc.headings}>
-  {MdxContent ? <MdxContent /> : <Fragment set:html={doc.html} />}
+  {MdxContent ? <MdxContent components={RsdComponents} /> : <Fragment set:html={doc.html} />}
 </DocsLayout>

package/src/runtime/scripts/copy-code.js

@@ -20,17 +20,25 @@ const copyText = async (text) => {
 };
 
 const activePanelCode = (root) => root.querySelector(':scope > [role="tabpanel"]:not([hidden]) code');
+const codeFrameClass = "relative my-6 w-full max-w-full overflow-hidden rounded-lg";
+const codePreClasses = ["!my-0", "max-w-full", "overflow-x-auto", "!rounded-none", "!border-0"];
+const codeContentClasses = ["block", "min-w-full", "w-max", "px-4", "py-3", "text-[13px]"];
+const copyButtonClass =
+  "flex size-6 shrink-0 items-center justify-center rounded-md text-muted-foreground outline-none hover:bg-accent hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 dark:hover:bg-accent/50 [&_svg]:size-4";
 
 const initCopyCode = (codeBlock) => {
   const codeEl = codeBlock.querySelector(":scope > code");
   if (!codeEl) return;
 
+  codeBlock.classList.add(...codePreClasses);
+  codeEl.classList.add(...codeContentClasses);
+
   let target = null;
-  let frame = codeBlock.closest(".code-group");
+  let frame = codeBlock.closest("[data-code-group]");
   let getCode = frame ? () => activePanelCode(frame) || codeEl : () => codeEl;
   if (frame) target = frame.querySelector(":scope > header");
 
-  const preview = codeBlock.closest(".preview");
+  const preview = codeBlock.closest("[data-preview]");
   const previewCodePanel = preview?.querySelector(":scope > [data-code-panel]");
   if (!frame && previewCodePanel?.contains(codeBlock)) {
     frame = preview;
@@ -39,10 +47,11 @@ const initCopyCode = (codeBlock) => {
   }
 
   if (!frame) {
-    frame = codeBlock.parentElement?.classList.contains("code-block") ? codeBlock.parentElement : null;
+    frame = codeBlock.parentElement?.hasAttribute("data-code-block") ? codeBlock.parentElement : null;
     if (!frame) {
       frame = document.createElement("div");
-      frame.className = "code-block";
+      frame.dataset.codeBlock = "";
+      frame.className = codeFrameClass;
       codeBlock.parentNode.insertBefore(frame, codeBlock);
       frame.appendChild(codeBlock);
     }
@@ -58,6 +67,11 @@ const initCopyCode = (codeBlock) => {
   const button = document.createElement("button");
   button.type = "button";
   button.setAttribute("aria-label", "Copy code");
+  button.className = `${copyButtonClass} ${
+    target === frame
+      ? "absolute right-2.5 top-2.5 bg-muted/50 shadow-sm backdrop-blur-sm"
+      : "ml-auto"
+  }`;
   button.innerHTML = Copy;
 
   button.addEventListener("click", async () => {
@@ -79,6 +93,16 @@ const initCopyCode = (codeBlock) => {
   });
 
   target.appendChild(button);
+  if (previewCodePanel?.contains(codeBlock)) {
+    const syncPreviewCopyButton = () => {
+      button.hidden = previewCodePanel.hidden;
+    };
+    syncPreviewCopyButton();
+    new MutationObserver(syncPreviewCopyButton).observe(previewCodePanel, {
+      attributes: true,
+      attributeFilter: ["hidden"],
+    });
+  }
   codeBlock.dataset.copyCodeInitialized = true;
 };
 

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

@@ -1,15 +0,0 @@
----
-const { variant = "secondary", class: className = "" } = Astro.props;
-const variants = {
-  primary: "badge-primary",
-  secondary: "badge-secondary",
-  destructive: "badge-destructive",
-  outline: "badge-outline",
-  ghost: "badge-ghost",
-  link: "badge-link",
-};
----
-
-<span class:list={[variants[variant] || "badge-secondary", className]}>
-  <slot />
-</span>

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

@@ -1,14 +0,0 @@
----
-const { href, variant = "default", class: className = "", target, rel } = Astro.props;
-const variants = {
-  default: "btn",
-  secondary: "btn-secondary",
-  outline: "btn-outline",
-  ghost: "btn-ghost",
-  link: "btn-link",
-};
----
-
-<a href={href} target={target} rel={rel} class:list={[variants[variant] || "btn", className]}>
-  <slot />
-</a>