radiant-docs 0.1.7 → 0.1.9

package/template/src/components/LogoLink.astro

@@ -0,0 +1,103 @@
+---
+import { getConfig, type LogoVariant } from "../lib/validation";
+
+const config = await getConfig();
+
+function getLogoUrl(logoPath: string | undefined): string | null {
+  if (!logoPath) return null;
+
+  // Normalize path: remove leading slash if present
+  const normalizedPath = logoPath.startsWith("/")
+    ? logoPath.slice(1)
+    : logoPath;
+
+  // Return public URL - Vite plugin ensures file exists in public
+  return `/${normalizedPath}`;
+}
+
+function resolveLogoVariant(
+  variant: LogoVariant | undefined,
+  defaults: { top: number; bottom: number },
+): { logoUrl: string | null; paddingTop: number; paddingBottom: number } {
+  if (!variant) {
+    return {
+      logoUrl: null,
+      paddingTop: defaults.top,
+      paddingBottom: defaults.bottom,
+    };
+  }
+
+  if (typeof variant === "string") {
+    return {
+      logoUrl: getLogoUrl(variant),
+      paddingTop: defaults.top,
+      paddingBottom: defaults.bottom,
+    };
+  }
+
+  return {
+    logoUrl: getLogoUrl(variant.image),
+    paddingTop: variant.padding?.top ?? defaults.top,
+    paddingBottom: variant.padding?.bottom ?? defaults.bottom,
+  };
+}
+
+// Load light and dark logos
+const lightLogo = resolveLogoVariant(config.logo?.light, {
+  top: 10,
+  bottom: 10,
+});
+const darkLogo = resolveLogoVariant(config.logo?.dark, { top: 10, bottom: 10 });
+const lightLogoUrl = lightLogo.logoUrl;
+const darkLogoUrl = darkLogo.logoUrl;
+
+// Get the href for the logo link (defaults to "/")
+const logoHref = config.logo?.href || "/";
+const logoPillText =
+  config.logo?.pill === false ? null : (config.logo?.pill ?? "Docs");
+
+const lightLogoContainerStyle = `padding-top: ${lightLogo.paddingTop}px; padding-bottom: ${lightLogo.paddingBottom}px;`;
+const darkLogoContainerStyle = `padding-top: ${darkLogo.paddingTop}px; padding-bottom: ${darkLogo.paddingBottom}px;`;
+---
+
+<a
+  href={logoHref}
+  class="h-full flex items-center justify-center gap-2 lg:gap-3 text-xl font-bold text-neutral-800 dark:text-neutral-100 overflow-hidden"
+>
+  {
+    lightLogoUrl || darkLogoUrl ? (
+      <>
+        {/* Light mode: show light logo if available, otherwise show title */}
+        {lightLogoUrl ? (
+          <div class="h-full dark:hidden" style={lightLogoContainerStyle}>
+            <img src={lightLogoUrl} class="h-full object-contain" alt="Logo" />
+          </div>
+        ) : (
+          <span class="dark:hidden">{config.title}</span>
+        )}
+
+        {/* Dark mode: show dark logo if available, otherwise show title */}
+        {darkLogoUrl ? (
+          <div class="h-full hidden dark:block" style={darkLogoContainerStyle}>
+            <img src={darkLogoUrl} class="h-full object-contain" alt="Logo" />
+          </div>
+        ) : (
+          <span class="hidden dark:block">{config.title}</span>
+        )}
+      </>
+    ) : (
+      config.title
+    )
+  }
+  {
+    logoPillText && (
+      <span
+        class:list={[
+          "text-[10px] text-neutral-500 font-semibold bg-neutral-100 dark:bg-neutral-800 px-2 py-px rounded-full border border-neutral-200 dark:border-neutral-700/70 shadow-xs",
+        ]}
+      >
+        {logoPillText}
+      </span>
+    )
+  }
+</a>

package/template/src/components/MdxPage.astro

@@ -6,39 +6,56 @@ import Tabs from "./user/Tabs.astro";
 import Tab from "./user/Tab.astro";
 import Steps from "./user/Steps.astro";
 import Step from "./user/Step.astro";
-import Accordian from "./user/Accordian.astro";
-import AccordianGroup from "./user/AccordianGroup.astro";
+import Accordion from "./user/Accordion.astro";
+import AccordionGroup from "./user/AccordionGroup.astro";
 import TableOfContents from "./TableOfContents.astro";
-import { deriveTitleFromEntryId } from "../lib/utils";
+import Image from "./user/Image.astro";
+import CodeBlock from "./user/CodeBlock.astro";
+import CodeGroup from "./user/CodeGroup.astro";
+import ComponentPreview from "./user/ComponentPreview.astro";
+import ComponentPreviewBlock from "./user/ComponentPreviewBlock.astro";
+import type { MdxRoute } from "../lib/routes";
+
 interface Props {
   entry: any;
+  route: MdxRoute;
 }
 
-const { entry } = Astro.props;
+const { entry, route } = Astro.props;
 
 const components = {
-  Accordian,
-  AccordianGroup,
+  Accordion,
+  AccordionGroup,
   Callout,
   Tabs,
   Tab,
   Steps,
   Step,
+  img: Image,
+  Image,
+  CodeBlockInternal: CodeBlock,
+  CodeGroup,
+  ComponentPreview,
+  ComponentPreviewBlock,
 };
 
 const { Content, headings } = await render(entry);
-const title = entry.data.title || deriveTitleFromEntryId(entry.filePath);
+const title = route.title;
+const description =
+  typeof entry?.data?.description === "string"
+    ? entry.data.description.trim()
+    : undefined;
 
 const tocHeadings = headings.filter(({ depth }) => depth === 2 || depth === 3);
 ---
 
-<Layout>
+<Layout pageTitle={title} pageDescription={description}>
   <article>
     <header class="mb-6">
-      <h1 class="text-3xl font-semibold">{title}</h1>
+      <h1 class="text-4xl font-semibold tracking-tight">{title}</h1>
     </header>
-    <div class="flex justify-between w-full">
-      <div class="prose-rules">
+    <div class="flex w-full min-w-0 justify-between gap-x-12">
+      <div class="prose-rules min-w-0 flex-1">
         <Content components={components} />
       </div>
       <aside class="hidden xl:block w-56 shrink-0">
@@ -46,4 +63,102 @@ const tocHeadings = headings.filter(({ depth }) => depth === 2 || depth === 3);
       </aside>
     </div>
   </article>
+  <script is:inline>
+    function fallbackCopy(text) {
+      const textarea = document.createElement("textarea");
+      textarea.value = text;
+      textarea.setAttribute("readonly", "");
+      textarea.style.position = "fixed";
+      textarea.style.opacity = "0";
+      document.body.appendChild(textarea);
+      textarea.select();
+      const copied = document.execCommand("copy");
+      document.body.removeChild(textarea);
+      return copied;
+    }
+
+    async function copyToClipboard(text) {
+      try {
+        if (navigator.clipboard?.writeText) {
+          await navigator.clipboard.writeText(text);
+          return true;
+        }
+      } catch {
+        // Fallback below when clipboard API is unavailable or blocked.
+      }
+
+      return fallbackCopy(text);
+    }
+
+    async function copyHeadingUrlFromHash(hash) {
+      const url = `${window.location.origin}${window.location.pathname}${hash}`;
+      const copied = await copyToClipboard(url);
+      if (!copied) return false;
+
+      if (window.history?.replaceState) {
+        window.history.replaceState(null, "", hash);
+      } else {
+        window.location.hash = hash;
+      }
+
+      return true;
+    }
+
+    function initHeadingLinkCopy() {
+      const anchors = document.querySelectorAll(
+        ".prose-rules a.heading-anchor[href^='#']",
+      );
+
+      anchors.forEach((anchor) => {
+        if (anchor.dataset.copyBound === "true") return;
+        anchor.dataset.copyBound = "true";
+
+        anchor.addEventListener("click", async (event) => {
+          event.preventDefault();
+          const isPointerClick = event.detail > 0;
+
+          const hash = anchor.getAttribute("href");
+          if (!hash) {
+            if (isPointerClick) anchor.blur();
+            return;
+          }
+
+          const copied = await copyHeadingUrlFromHash(hash);
+          if (!copied) {
+            if (isPointerClick) anchor.blur();
+            return;
+          }
+
+          if (isPointerClick) anchor.blur();
+        });
+      });
+
+      const headings = document.querySelectorAll(
+        ".prose-rules :is(h2, h3, h4, h5, h6)[id]",
+      );
+
+      headings.forEach((heading) => {
+        if (heading.dataset.copyBound === "true") return;
+        heading.dataset.copyBound = "true";
+
+        heading.addEventListener("click", async (event) => {
+          if (!(event.target instanceof Element)) return;
+          if (event.target.closest("a.heading-anchor")) return;
+          if (event.target.closest("a")) return;
+
+          const id = heading.getAttribute("id");
+          if (!id) return;
+
+          await copyHeadingUrlFromHash(`#${id}`);
+        });
+      });
+    }
+
+    initHeadingLinkCopy();
+
+    if (!window.__mdxHeadingCopyListenerBound) {
+      document.addEventListener("astro:after-swap", initHeadingLinkCopy);
+      window.__mdxHeadingCopyListenerBound = true;
+    }
+  </script>
 </Layout>