radiant-docs 0.1.7 → 0.1.9

package/template/src/components/user/ComponentPreviewBlock.astro

@@ -0,0 +1,181 @@
+---
+import CodeBlock from "./CodeBlock.astro";
+
+interface Props {
+  language?: string;
+  raw?: string;
+  filename?: string;
+  showFilename?: boolean | string;
+  showLineNumbers?: boolean | string;
+  hideLanguageIcon?: boolean | string;
+  highlightedLines?: string;
+  collapsedLines?: string;
+  previewVisibleLines?: number | string;
+}
+
+const {
+  language = "jsx",
+  raw = "",
+  filename = "",
+  showFilename = false,
+  showLineNumbers = false,
+  hideLanguageIcon = false,
+  highlightedLines = "",
+  collapsedLines = "",
+  previewVisibleLines = 5,
+} = Astro.props as Props;
+
+function parsePositiveInteger(
+  value: number | string | undefined,
+  fallback: number,
+): number {
+  if (typeof value === "number" && Number.isFinite(value) && value > 0) {
+    return Math.floor(value);
+  }
+  if (typeof value === "string") {
+    const parsed = Number.parseInt(value, 10);
+    if (Number.isFinite(parsed) && parsed > 0) {
+      return parsed;
+    }
+  }
+  return fallback;
+}
+
+const visibleLines = parsePositiveInteger(previewVisibleLines, 5);
+const totalLineCount = Math.max(1, raw.split("\n").length);
+---
+
+<div
+  class="rd-component-preview my-6 flex w-full max-w-full min-w-0 flex-col"
+  data-rd-component-preview-root="true"
+>
+  <div
+    class="w-full max-w-full min-w-0 overflow-x-auto rounded-t-xl border border-b-0 border-neutral-200 bg-white p-4 xs:p-6 sm:p-12 shadow-xs [&>:first-child]:mt-0! [&>:last-child]:mb-0!"
+  >
+    <slot />
+  </div>
+  <div
+    class="rd-component-preview__code not-prose relative"
+    data-rd-preview-expanded="false"
+    style={{ "--rd-preview-visible-lines": String(visibleLines) }}
+  >
+    <CodeBlock
+      language={language}
+      raw={raw}
+      filename={filename}
+      showFilename={showFilename}
+      showLineNumbers={showLineNumbers}
+      hideLanguageIcon={hideLanguageIcon}
+      highlightedLines={highlightedLines}
+      collapsedLines={collapsedLines}
+    />
+    <div
+      class="rd-component-preview__overlay pointer-events-none absolute inset-x-px inset-y-px hidden items-end justify-center rounded-b-xl bg-linear-to-t from-neutral-50/90 to-neutral-50/30 pb-4"
+      data-rd-preview-overlay
+      aria-hidden="true"
+    >
+      <button
+        type="button"
+        class="pointer-events-auto inline-flex h-8 items-center justify-center rounded-md border border-neutral-200 bg-white px-3 text-sm font-medium text-neutral-700 shadow-md shadow-neutral-200 transition-colors duration-150 hover:bg-neutral-50 cursor-pointer"
+        data-rd-preview-expand
+      >
+        View code
+      </button>
+    </div>
+  </div>
+</div>
+
+<style>
+  .rd-component-preview :global(.group\/prose-code) {
+    margin-top: 0 !important;
+    margin-bottom: 0 !important;
+  }
+
+  .rd-component-preview :global(.group\/prose-code > div) {
+    background-color: var(--color-neutral-50) !important;
+    border-top-left-radius: 0 !important;
+    border-top-right-radius: 0 !important;
+  }
+
+  .rd-component-preview :global(.group\/prose-code pre),
+  .rd-component-preview :global(.group\/prose-code code) {
+    background-color: var(--color-neutral-50) !important;
+  }
+
+  .rd-component-preview__code[data-rd-preview-expanded="false"]
+    .rd-component-preview__overlay {
+    display: flex;
+  }
+
+  .rd-component-preview__code :global([data-rd-code-scroll-area]) {
+    overflow-y: hidden;
+    transition: max-height 280ms cubic-bezier(0.22, 1, 0.36, 1);
+  }
+
+  .rd-component-preview__code[data-rd-preview-expanded="false"]
+    :global([data-rd-code-scroll-area]) {
+    max-height: calc(var(--rd-preview-visible-lines, 5) * 1.5rem + 1.25rem);
+  }
+
+  .rd-component-preview__code[data-rd-preview-expanded="true"]
+    :global([data-rd-code-scroll-area]) {
+    max-height: var(--rd-preview-expanded-height, 200rem);
+  }
+</style>
+
+<script is:inline define:vars={{ visibleLines, totalLineCount }}>
+  (() => {
+    const script = document.currentScript;
+    if (!(script instanceof HTMLScriptElement)) return;
+
+    let root = script.previousElementSibling;
+    while (
+      root &&
+      (!(root instanceof HTMLElement) ||
+        !root.hasAttribute("data-rd-component-preview-root"))
+    ) {
+      root = root.previousElementSibling;
+    }
+    if (!(root instanceof HTMLElement)) return;
+
+    const codeWrapper = root.querySelector(".rd-component-preview__code");
+    if (!(codeWrapper instanceof HTMLElement)) return;
+
+    const overlay = codeWrapper.querySelector("[data-rd-preview-overlay]");
+    const expandButton = codeWrapper.querySelector("[data-rd-preview-expand]");
+    const scrollArea = codeWrapper.querySelector("[data-rd-code-scroll-area]");
+    if (
+      !(overlay instanceof HTMLElement) ||
+      !(expandButton instanceof HTMLButtonElement) ||
+      !(scrollArea instanceof HTMLElement)
+    ) {
+      return;
+    }
+
+    const syncExpandedHeight = () => {
+      codeWrapper.style.setProperty(
+        "--rd-preview-expanded-height",
+        `${scrollArea.scrollHeight}px`,
+      );
+    };
+
+    syncExpandedHeight();
+
+    if (totalLineCount <= visibleLines) {
+      codeWrapper.dataset.rdPreviewExpanded = "true";
+      window.addEventListener("resize", syncExpandedHeight, { passive: true });
+      return;
+    }
+
+    const setExpanded = () => {
+      syncExpandedHeight();
+      codeWrapper.dataset.rdPreviewExpanded = "true";
+    };
+
+    expandButton.addEventListener("click", () => {
+      setExpanded();
+    });
+
+    window.addEventListener("resize", syncExpandedHeight, { passive: true });
+  })();
+</script>

package/template/src/components/user/Image.astro

@@ -0,0 +1,132 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { validateProps } from "../../lib/component-error";
+
+interface Props extends HTMLAttributes<"img"> {
+  src: string;
+}
+
+const { title, ...attrs } = Astro.props;
+
+validateProps(
+  "Image",
+  Astro.props as Record<string, any>,
+  {
+    src: { required: true, type: "string" },
+    alt: { type: "string" },
+    title: { type: "string" },
+  },
+  Astro.url.pathname,
+);
+---
+
+<figure
+  class="p-1.5 pb-2 my-8 group border border-neutral-200/80 dark:border-neutral-800 shadow-xs bg-neutral-50 dark:bg-neutral-900 rounded-2xl"
+  x-data="{ 
+    open: false, 
+    showZoomed: false,
+    style: 'visibility: hidden;',
+    fullShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
+    noShadow: '0 0 0 rgba(0, 0, 0, 0)',
+    async zoom() {
+      // 1. Lock scroll and measure
+      document.body.style.overflow = 'hidden';
+      const rect = this.$refs.img.getBoundingClientRect();
+      
+      // 2. Prepare the zoomed image (hidden but in DOM)
+      this.style = 'opacity: 0; transition: none;';
+      this.open = true;
+      this.showZoomed = false;
+      
+      await this.$nextTick();
+      const zoomed = this.$refs.zoomedImg;
+      const zRect = zoomed.getBoundingClientRect();
+      
+      // 3. Calculate positioning
+      const scale = rect.width / zRect.width;
+      const tx = (rect.left + rect.width/2) - (zRect.left + zRect.width/2);
+      const ty = (rect.top + rect.height/2) - (zRect.top + zRect.height/2);
+      
+      // 4. Snap to initial position (still invisible)
+      this.style = `transform: translate(${tx}px, ${ty}px) scale(${scale}); box-shadow: ${this.noShadow}; opacity: 0; transition: none;`;
+      
+      // 5. Triple-frame buffer to ensure paint completion
+      requestAnimationFrame(() => {
+        // Reveal zoomed image exactly over the thumbnail
+        this.style = `transform: translate(${tx}px, ${ty}px) scale(${scale}); box-shadow: ${this.noShadow}; opacity: 1; transition: none;`;
+        
+        requestAnimationFrame(() => {
+          // Now start the animation and hide the thumbnail simultaneously
+          this.showZoomed = true;
+          this.style = `transform: translate(0,0) scale(1); box-shadow: ${this.fullShadow}; opacity: 1; transition: transform 450ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 450ms cubic-bezier(0.4, 0, 0.2, 1);`;
+        });
+      });
+    },
+    close() {
+      document.body.style.overflow = 'auto';
+      const rect = this.$refs.img.getBoundingClientRect();
+      const zRect = this.$refs.zoomedImg.getBoundingClientRect();
+      
+      const scale = rect.width / zRect.width;
+      const tx = (rect.left + rect.width/2) - (zRect.left + zRect.width/2);
+      const ty = (rect.top + rect.height/2) - (zRect.top + zRect.height/2);
+      
+      this.style = `transform: translate(${tx}px, ${ty}px) scale(${scale}); box-shadow: ${this.noShadow}; opacity: 1; transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 400ms cubic-bezier(0.4, 0, 0.2, 1);`;
+      this.showZoomed = false;
+      
+      setTimeout(() => {
+        this.open = false;
+        this.style = 'opacity: 0;';
+      }, 400);
+    }
+  }"
+>
+  <div
+    class="overflow-hidden rounded-xl border border-neutral-200/50 dark:border-neutral-800/50 bg-neutral-100 dark:bg-black/20"
+  >
+    <img
+      {...attrs}
+      x-ref="img"
+      title={title}
+      class="w-full h-auto my-0! block cursor-zoom-in transition-opacity"
+      :class="showZoomed ? 'opacity-0 duration-0' : 'opacity-100 duration-300'"
+      @click="zoom()"
+    />
+  </div>
+  {
+    title && (
+      <figcaption class="mt-2 text-center text-sm text-neutral-500 dark:text-neutral-400 font-medium whitespace-pre-line leading-relaxed px-2">
+        {title}
+      </figcaption>
+    )
+  }
+
+  <template x-teleport="body">
+    <div
+      x-show="open"
+      class="fixed bottom-0 top-1 inset-x-1 rounded-t-2xl z-20 flex items-center justify-center pt-20 pb-4 px-4 md:pt-28 md:pb-12 md:px-12 overflow-hidden"
+      @keydown.escape.window="close()"
+      style="display: none;"
+    >
+      <div
+        x-show="showZoomed"
+        x-transition:enter="transition ease-out duration-300"
+        x-transition:enter-start="opacity-0"
+        x-transition:enter-end="opacity-100"
+        x-transition:leave="transition ease-in duration-400"
+        x-transition:leave-start="opacity-100"
+        x-transition:leave-end="opacity-0"
+        class="absolute inset-0 bg-white/90 dark:bg-black/90 backdrop-blur-xl cursor-zoom-out"
+        @click="close()"
+      >
+      </div>
+
+      <img
+        {...attrs}
+        x-ref="zoomedImg"
+        class="relative z-10 max-w-full max-h-full object-contain rounded-2xl shadow-none will-change-transform pointer-events-none"
+        :style="style"
+      />
+    </div>
+  </template>
+</figure>

package/template/src/components/user/Steps.astro

@@ -1,9 +1,7 @@
 ---
 interface Props {}
-
-const stepsId = `steps-${Math.random().toString(36).substring(2, 9)}`;
 ---
 
-<div class="my-6 space-y-1.5" id={stepsId}>
+<div class="my-6 space-y-1.5">
   <slot />
 </div>

package/template/src/components/user/Tabs.astro

@@ -1,5 +1,5 @@
 ---
-import { Icon } from 'astro-icon/components';
+import Icon from '../ui/Icon.astro';
 
 const html = await Astro.slots.render("default");
 
@@ -92,7 +92,7 @@ class="my-5">
         'text-neutral-500 hover:text-neutral-600': activeTab !== ${index}
       }`}
       >
-        {icons[index] && <Icon name={`lucide:${icons[index]}`} class="size-4 shrink-0" />}
+        {icons[index] && <Icon name={icons[index]} class="size-4 shrink-0" />}
         {label}
       </button>
     </li>

package/template/src/content.config.ts

@@ -6,6 +6,7 @@ const docs = defineCollection({
   // Load Markdown and MDX files from src/content/docs
   // This pattern excludes non-content files like docs.json and images
   loader: glob({ pattern: "**/*.{md,mdx}", base: "./src/content/docs" }),
+  schema: docsSchema,
 });
 
 export const collections = { docs };

package/template/src/layouts/Layout.astro

@@ -1,10 +1,56 @@
 ---
 import "../styles/global.css";
+import "../styles/google-sans-flex.css";
+import "../styles/geist-mono.css";
+import googleSansLatinWoff2 from "../assets/fonts/google-sans-flex/latin.woff2?url";
+import googleSansLatinExtWoff2 from "../assets/fonts/google-sans-flex/latin-ext.woff2?url";
+import geistMonoLatinWoff2 from "../assets/fonts/geist-mono/latin.woff2?url";
+import geistMonoLatinExtWoff2 from "../assets/fonts/geist-mono/latin-ext.woff2?url";
 import Sidebar from "../components/Sidebar.astro";
 import { getConfig } from "../lib/validation";
 import Header from "../components/Header.astro";
+import Footer from "../components/Footer.astro";
 
+interface Props {
+  pageTitle?: string;
+  pageDescription?: string;
+}
+
+function normalizeRoutePath(routePath: string): string {
+  if (!routePath || routePath === "/") return "/";
+  if (!routePath.startsWith("/")) routePath = `/${routePath}`;
+  return routePath.endsWith("/") ? routePath : `${routePath}/`;
+}
+
+function routePathToOgImagePath(routePath: string): string {
+  const normalizedRoutePath = normalizeRoutePath(routePath);
+  if (normalizedRoutePath === "/") {
+    return "/_og/images/index.png";
+  }
+
+  return `/_og/images/${normalizedRoutePath.slice(1, -1)}.png`;
+}
+
+const { pageTitle, pageDescription } = Astro.props as Props;
 const config = await getConfig();
+const resolvedPageTitle = pageTitle?.trim();
+const resolvedPageDescription =
+  typeof pageDescription === "string" && pageDescription.trim().length > 0
+    ? pageDescription.trim()
+    : undefined;
+const fallbackDescription = resolvedPageTitle
+  ? `Learn about ${resolvedPageTitle} in the ${config.title} documentation.`
+  : `${config.title} documentation.`;
+const resolvedMetaDescription = resolvedPageDescription ?? fallbackDescription;
+const documentTitle = resolvedPageTitle
+  ? `${resolvedPageTitle} | ${config.title}`
+  : `${config.title} Docs`;
+const canonicalUrl = new URL(Astro.url.pathname, Astro.site ?? Astro.url).toString();
+const ogImageUrl = new URL(
+  routePathToOgImagePath(Astro.url.pathname),
+  Astro.site ?? Astro.url,
+);
+const ogImageHref = ogImageUrl.toString();
 ---
 
 <!doctype html>
@@ -12,30 +58,82 @@ const config = await getConfig();
   <head>
     <script is:inline>
       const applyTheme = () => {
+        const modeParam = new URLSearchParams(window.location.search).get(
+          "mode",
+        );
+        const forcedTheme =
+          modeParam === "light" || modeParam === "dark" ? modeParam : null;
         const localStorageTheme = localStorage.getItem("theme");
         const systemTheme = window.matchMedia("(prefers-color-scheme: dark)")
           .matches
           ? "dark"
           : "light";
-        const resolvedTheme =
-          localStorageTheme === "system" || !localStorageTheme
+        const resolvedTheme = forcedTheme
+          ? forcedTheme
+          : localStorageTheme === "system" || !localStorageTheme
             ? systemTheme
             : localStorageTheme;
 
         document.documentElement.classList.toggle(
           "dark",
-          resolvedTheme === "dark"
+          resolvedTheme === "dark",
         );
+        document.documentElement.dataset.theme = resolvedTheme;
       };
 
       // Run on initial load
       applyTheme();
     </script>
+    <link
+      rel="preload"
+      href={googleSansLatinWoff2}
+      as="font"
+      type="font/woff2"
+      crossorigin
+    />
+    <link
+      rel="preload"
+      href={googleSansLatinExtWoff2}
+      as="font"
+      type="font/woff2"
+      crossorigin
+    />
+    <link
+      rel="preload"
+      href={geistMonoLatinWoff2}
+      as="font"
+      type="font/woff2"
+      crossorigin
+    />
+    <link
+      rel="preload"
+      href={geistMonoLatinExtWoff2}
+      as="font"
+      type="font/woff2"
+      crossorigin
+    />
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="generator" content={Astro.generator} />
-    <title>{config.title} Docs</title>
+    <link rel="canonical" href={canonicalUrl} />
+    <meta property="og:url" content={canonicalUrl} />
+    <meta property="og:type" content="website" />
+    <meta property="og:site_name" content={config.title} />
+    <title>{documentTitle}</title>
+    <meta property="og:title" content={documentTitle} />
+    <meta property="og:image" content={ogImageHref} />
+    <meta property="og:image:type" content="image/png" />
+    <meta property="og:image:width" content="1200" />
+    <meta property="og:image:height" content="630" />
+    <meta property="og:image:alt" content={documentTitle} />
+    <meta name="twitter:title" content={documentTitle} />
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:image" content={ogImageHref} />
+    <meta name="twitter:image:alt" content={documentTitle} />
+    <meta name="description" content={resolvedMetaDescription} />
+    <meta property="og:description" content={resolvedMetaDescription} />
+    <meta name="twitter:description" content={resolvedMetaDescription} />
   </head>
   <body
     class="bg-background text-neutral-900 dark:text-white"
@@ -50,11 +148,11 @@ const config = await getConfig();
     </div>
     <div class="fixed top-0 inset-x-0 h-1 bg-background-dark z-50"></div>
     <div
-      class="fixed top-[63px] -z-10 w-[5px] right-0 bottom-0 bg-background-dark border-l border-l-border"
+      class="fixed top-[63px] z-30 w-[5px] right-0 bottom-0 bg-background-dark border-l border-l-border"
     >
     </div>
     <div
-      class="fixed top-[63px] -z-10 w-[5px] left-0 bottom-0 bg-background-dark border-r border-r-border"
+      class="fixed top-[63px] z-30 w-[5px] left-0 bottom-0 bg-background-dark border-r border-r-border"
     >
     </div>
     <div
@@ -83,10 +181,13 @@ const config = await getConfig();
     </div>
 
     <!-- Main Content -->
-    <div class="px-5 sm:px-7 lg:pl-[calc(288px+24px)] pt-16 lg:pr-7">
-      <main class="max-w-2xl xl:max-w-5xl mx-auto pt-16 pb-16">
+    <div class="px-5 sm:px-7 lg:pl-[calc(288px+36px)] pt-17 lg:pr-9">
+      <main
+        class="max-w-2xl xl:max-w-5xl mx-auto pt-16 pb-16 min-h-[calc(100vh-64px)]"
+      >
         <slot />
       </main>
+      <Footer />
     </div>
   </body>
 </html>