radiant-docs 0.1.68 → 0.1.70

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

@@ -62,6 +62,9 @@ const isInitiallyExpanded = shouldShowAllCode || totalLineCount <= visibleLines;
 <div
   class="rd-prose-block rd-component-preview isolate flex w-full max-w-full min-w-0 flex-col"
   data-rd-component-preview-root="true"
+  data-rd-preview-visible-lines={String(visibleLines)}
+  data-rd-preview-total-line-count={String(totalLineCount)}
+  data-rd-preview-show-all-code={shouldShowAllCode ? "true" : "false"}
 >
   <div
     class="relative z-10 w-full max-w-full min-w-0 rounded-t-xl border-[0.5px] border-b-0 border-(--rd-code-tab-edge-border) bg-(--rd-code-surface) p-2"
@@ -215,27 +218,29 @@ const isInitiallyExpanded = shouldShowAllCode || totalLineCount <= visibleLines;
   }
 </style>
 
-<script
-  is:inline
-  data-astro-rerun
-  define:vars={{
-    visibleLines,
-    totalLineCount,
-    shouldShowAllCode,
-  }}
->
-  (() => {
-    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;
-    }
+<script>
+  const previewRootSelector = '[data-rd-component-preview-root="true"]';
+  const previewControlsKey = "__rdComponentPreviewControls";
+
+  const parsePositiveInteger = (value, fallback) => {
+    const parsed = Number.parseInt(value ?? "", 10);
+    return Number.isFinite(parsed) && parsed > 0 ? parsed : fallback;
+  };
+
+  const syncExpandedHeight = (root) => {
+    const codeWrapper = root.querySelector(".rd-component-preview__code");
+    if (!(codeWrapper instanceof HTMLElement)) return;
+
+    const scrollArea = codeWrapper.querySelector("[data-rd-code-scroll-area]");
+    if (!(scrollArea instanceof HTMLElement)) return;
+
+    codeWrapper.style.setProperty(
+      "--rd-preview-expanded-height",
+      `${scrollArea.scrollHeight}px`,
+    );
+  };
+
+  const initComponentPreview = (root) => {
     if (!(root instanceof HTMLElement)) return;
 
     const codeWrapper = root.querySelector(".rd-component-preview__code");
@@ -252,30 +257,66 @@ const isInitiallyExpanded = shouldShowAllCode || totalLineCount <= visibleLines;
       return;
     }
 
-    const syncExpandedHeight = () => {
-      codeWrapper.style.setProperty(
-        "--rd-preview-expanded-height",
-        `${scrollArea.scrollHeight}px`,
-      );
-    };
+    syncExpandedHeight(root);
+
+    if (root.dataset.rdComponentPreviewInitialized === "true") return;
+    root.dataset.rdComponentPreviewInitialized = "true";
 
-    syncExpandedHeight();
+    const visibleLines = parsePositiveInteger(
+      root.dataset.rdPreviewVisibleLines,
+      5,
+    );
+    const totalLineCount = parsePositiveInteger(
+      root.dataset.rdPreviewTotalLineCount,
+      visibleLines,
+    );
+    const shouldShowAllCode = root.dataset.rdPreviewShowAllCode === "true";
 
     if (shouldShowAllCode || totalLineCount <= visibleLines) {
       codeWrapper.dataset.rdPreviewExpanded = "true";
-      window.addEventListener("resize", syncExpandedHeight, { passive: true });
       return;
     }
 
     const setExpanded = () => {
-      syncExpandedHeight();
+      syncExpandedHeight(root);
       codeWrapper.dataset.rdPreviewExpanded = "true";
     };
 
     expandButton.addEventListener("click", () => {
       setExpanded();
     });
+  };
+
+  const initComponentPreviews = () => {
+    document.querySelectorAll(previewRootSelector).forEach((root) => {
+      initComponentPreview(root);
+    });
+  };
+
+  const schedulePreviewHeightSync = () => {
+    if (window[previewControlsKey]?.resizeFrameId) return;
+
+    window[previewControlsKey].resizeFrameId = window.requestAnimationFrame(
+      () => {
+        window[previewControlsKey].resizeFrameId = 0;
+        document.querySelectorAll(previewRootSelector).forEach((root) => {
+          if (root instanceof HTMLElement) syncExpandedHeight(root);
+        });
+      },
+    );
+  };
+
+  window[previewControlsKey] = window[previewControlsKey] || {};
+  window[previewControlsKey].init = initComponentPreviews;
+
+  if (!window[previewControlsKey].installed) {
+    window[previewControlsKey].installed = true;
+    window[previewControlsKey].resizeFrameId = 0;
+    window.addEventListener("resize", schedulePreviewHeightSync, {
+      passive: true,
+    });
+    document.addEventListener("astro:page-load", initComponentPreviews);
+  }
 
-    window.addEventListener("resize", syncExpandedHeight, { passive: true });
-  })();
+  initComponentPreviews();
 </script>

package/template/src/layouts/Layout.astro

@@ -17,6 +17,7 @@ import { resolvePageDescription } from "../lib/page-description";
 interface Props {
   pageTitle?: string;
   pageDescription?: string;
+  hasMarkdownAlternate?: boolean;
 }
 
 type TabsPresentation = "topbar" | "sidebar";
@@ -36,7 +37,13 @@ function routePathToOgImagePath(routePath: string): string {
   return `/_og/images/${normalizedRoutePath.slice(1, -1)}.png`;
 }
 
-const { pageTitle, pageDescription } = Astro.props as Props;
+function routePathToMarkdownPath(routePath: string): string {
+  const normalizedRoutePath = routePath.replace(/^\/+/, "").replace(/\/+$/, "");
+  return normalizedRoutePath ? `/${normalizedRoutePath}.md` : "/index.md";
+}
+
+const { pageTitle, pageDescription, hasMarkdownAlternate = false } =
+  Astro.props as Props;
 const config = await getConfig();
 const favicon = getFaviconConfig();
 const neutralPaletteCss = getDocsThemeCss(config.theme);
@@ -56,6 +63,12 @@ const canonicalUrl = new URL(
   prependBasePath(routePathname),
   Astro.site ?? Astro.url,
 ).toString();
+const markdownUrl = hasMarkdownAlternate
+  ? new URL(
+      prependBasePath(routePathToMarkdownPath(routePathname)),
+      Astro.site ?? Astro.url,
+    ).toString()
+  : undefined;
 const ogImageUrl = new URL(
   resolveStaticAssetUrl(routePathToOgImagePath(routePathname)),
   Astro.site ?? Astro.url,
@@ -77,6 +90,7 @@ const hasNavigationTabs =
 const tabsPresentation = navigationTabs?.presentation ?? "topbar";
 const hasTopbarNavigationTabs =
   hasNavigationTabs && tabsPresentation === "topbar";
+const hasPagePagination = Astro.slots.has("page-pagination");
 ---
 
 <!doctype html>
@@ -288,6 +302,16 @@ const hasTopbarNavigationTabs =
     />
     <meta name="generator" content={Astro.generator} />
     <link rel="canonical" href={canonicalUrl} />
+    {
+      markdownUrl && (
+        <link
+          rel="alternate"
+          type="text/markdown"
+          href={markdownUrl}
+          title="Markdown version"
+        />
+      )
+    }
     <meta property="og:url" content={canonicalUrl} />
     <meta property="og:type" content="website" />
     <meta property="og:site_name" content={config.title} />
@@ -350,10 +374,14 @@ const hasTopbarNavigationTabs =
     <div
       x-show="open"
       x-cloak
+      id="mobile-navigation"
       class="rd-mobile-menu bg-background fixed lg:hidden z-50 overflow-y-auto overscroll-contain [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
       x-transition.opacity
     >
-      <Sidebar askAiEnabled={askAiEnabled} />
+      <Sidebar
+        askAiEnabled={askAiEnabled}
+        showMobileNavbarActions={true}
+      />
     </div>
 
     <!-- Main Content -->
@@ -363,9 +391,23 @@ const hasTopbarNavigationTabs =
         hasTopbarNavigationTabs && "lg:pt-[108px]",
       ]}
     >
-      <main class="mx-auto pt-16 pb-20 min-h-[calc(100vh-64px)]">
+      <main
+        class:list={[
+          "mx-auto min-h-[calc(100dvh-64px)] pt-16",
+          hasTopbarNavigationTabs &&
+            "lg:min-h-[calc(100dvh-108px)]",
+          hasPagePagination ? "pb-16" : "pb-20",
+        ]}
+      >
         <slot />
       </main>
+      {
+        hasPagePagination ? (
+          <div class="pb-20">
+            <slot name="page-pagination" />
+          </div>
+        ) : null
+      }
       <Footer askAiEnabled={askAiEnabled} />
     </div>
     {askAiEnabled ? <AssistantDocsWidget /> : null}

package/template/src/lib/assistant-embed-script.ts

@@ -7,10 +7,7 @@ import {
 } from "./assistant-chrome";
 import { getDocsBasePath, withBasePath } from "./base-path";
 import { getFaviconConfig } from "./favicon";
-import {
-  getDocsBaseColorShade,
-  getThemeForegroundColor,
-} from "./theme-css";
+import { getDocsBaseColorShade, getThemeForegroundColor } from "./theme-css";
 import { type DocsConfig, type ThemeColorByMode } from "./validation";
 
 type AssistantColorByMode = {
@@ -141,7 +138,9 @@ function getAssistantButtonColor(
     config.assistant?.button?.color,
     mode,
   );
-  return configuredAssistantColor ?? getDefaultAssistantButtonColor(config, mode);
+  return (
+    configuredAssistantColor ?? getDefaultAssistantButtonColor(config, mode)
+  );
 }
 
 export function getAssistantLauncherIconConfig(
@@ -905,6 +904,7 @@ export function renderAssistantEmbedScript(config: DocsConfig): string {
     }
 
     updatePanelLayout();
+    postPanelPageContextMessage();
 
     try {
       panelFrame.contentWindow.postMessage(
@@ -916,6 +916,28 @@ export function renderAssistantEmbedScript(config: DocsConfig): string {
     }
   }
 
+  function postPanelPageContextMessage(requestId) {
+    if (!panelFrame || !panelFrame.contentWindow) {
+      return;
+    }
+
+    var message = {
+      type: "assistant-embed:set-page-context",
+      hostname: window.location.hostname || null,
+      pagePath: window.location.pathname || "/",
+    };
+
+    if (typeof requestId === "string" && requestId.length > 0) {
+      message.requestId = requestId;
+    }
+
+    try {
+      panelFrame.contentWindow.postMessage(message, getPanelTargetOrigin());
+    } catch {
+      // Ignore cross-window messaging failures.
+    }
+  }
+
   function getPanelTargetOrigin() {
     if (!panelFrame || !panelFrame.src) {
       return "*";
@@ -1154,6 +1176,7 @@ export function renderAssistantEmbedScript(config: DocsConfig): string {
     frame.addEventListener("load", function () {
       postPanelThemeMessage();
       postPanelLayoutMessage();
+      postPanelPageContextMessage();
       if (isOpen) {
         notifyPanelOpened();
       }
@@ -1293,6 +1316,11 @@ export function renderAssistantEmbedScript(config: DocsConfig): string {
 
     if (event.data.type === "assistant-embed:get-panel-layout") {
       postPanelLayoutMessage();
+      return;
+    }
+
+    if (event.data.type === "assistant-embed:get-page-context") {
+      postPanelPageContextMessage(event.data.requestId);
     }
   });
 

package/template/src/lib/assistant-panel-config.ts

@@ -4,7 +4,7 @@ import {
 } from "./assistant-chrome";
 import { withBasePath } from "./base-path";
 import { getAssistantLauncherIconConfig } from "./assistant-embed-script";
-import type { AssistantShikiRuntimeConfig } from "./assistant-shiki-client";
+import type { AssistantShikiRuntimeConfig } from "@radiant-docs/assistant-shiki";
 import { getClientShikiRuntimeConfig } from "./client-shiki-config";
 import type { DocsConfig } from "./validation";
 

package/template/src/lib/client-shiki-config.ts

@@ -1,6 +1,8 @@
-import type { AssistantShikiRuntimeConfig } from "./assistant-shiki-client";
+import {
+  createAssistantShikiRuntimeConfig,
+  type AssistantShikiRuntimeConfig,
+} from "@radiant-docs/assistant-shiki";
 import type { DocsConfig } from "./validation";
-import shikiPlatformAssets from "../generated/shiki-platform-assets.json";
 import {
   DEFAULT_SHIKI_DARK_THEME,
   DEFAULT_SHIKI_LIGHT_THEME,
@@ -20,10 +22,6 @@ function normalizeStaticAssetHost(value: unknown): string {
     : `https://${normalizedHost}`;
 }
 
-function joinUrl(baseUrl: string, path: string): string {
-  return `${baseUrl.replace(/\/+$/, "")}/${path.replace(/^\/+/, "")}`;
-}
-
 function getConfiguredCodeSyntaxThemes(
   config: DocsConfig,
 ): ClientShikiRuntimeConfig["syntaxThemes"] {
@@ -53,11 +51,8 @@ export function getClientShikiRuntimeConfig(
     return undefined;
   }
 
-  return {
-    assetBaseUrl: joinUrl(
-      staticAssetHost,
-      `${shikiPlatformAssets.prefix}/${shikiPlatformAssets.assetVersion}`,
-    ),
+  return createAssistantShikiRuntimeConfig({
+    assetHost: staticAssetHost,
     syntaxThemes: getConfiguredCodeSyntaxThemes(config),
-  };
+  });
 }

package/template/src/generated/shiki-platform-assets.json

@@ -1,24 +0,0 @@
-{
-  "assetVersion": "shiki-4.2.0-c0d7e21cea71",
-  "counts": {
-    "languages": 347,
-    "themes": 66
-  },
-  "manifest": {
-    "bytes": 172635,
-    "module": "manifest.json",
-    "sha256": "1840b6f21a79266d9bf3a74d5e6973d407fb06b96d71decd5542ca37eebf182d"
-  },
-  "packageVersions": {
-    "@shikijs/core": "4.2.0",
-    "@shikijs/engine-javascript": "4.2.0",
-    "@shikijs/langs": "4.2.0",
-    "@shikijs/themes": "4.2.0",
-    "shiki": "4.2.0"
-  },
-  "prefix": "_platform/shiki",
-  "runtime": {
-    "engine": "javascript-regexp",
-    "module": "runtime.mjs"
-  }
-}