radiant-docs 0.1.58 → 0.1.60

package/template/src/components/Sidebar.astro

@@ -24,7 +24,7 @@ const config: DocsConfig = await getConfig();
       askAiEnabled ? "justify-start" : "justify-end",
     ]}
   >
-    <span class="text-neutral-400 text-xs font-light">Theme</span>
+    <span class="text-neutral-400 text-xs font-normal">Theme</span>
     <ThemeSwitcher />
   </div>
 </aside>

package/template/src/components/SidebarGroup.astro

@@ -18,7 +18,7 @@ const groupSlug = slugify(item.group);
 const currentPrefix = parentSlug ? `${parentSlug}/${groupSlug}` : groupSlug;
 ---
 
-<li class="my-8 first:my-0 last:my-0">
+<li class="my-8 first:mt-0 last:mb-0">
   <div class:list={["text-sm font-semibold mb-2 flex items-center gap-2 px-2"]}>
     {item.icon && <Icon name={item.icon} class="size-4 text-neutral-500" />}
     {item.group}

package/template/src/components/ThemeSwitcher.astro

@@ -4,15 +4,15 @@ import { Icon } from "astro-icon/components";
 
 <div
   x-data="{
-        forcedTheme: (() => {
+        initialTheme: (() => {
             const mode = new URLSearchParams(window.location.search).get('mode');
             return mode === 'light' || mode === 'dark' ? mode : null;
         })(),
         theme: localStorage.getItem('theme') || 'system',
         themeSwitchFrameId: null,
         init() {
-            if (this.forcedTheme) {
-                this.theme = this.forcedTheme;
+            if (this.initialTheme) {
+                this.theme = this.initialTheme;
             }
 
             this.updateDOM();
@@ -22,13 +22,6 @@ import { Icon } from "astro-icon/components";
 
             // Watch for changes to the 'theme' state
             this.$watch('theme', val => {
-                if (this.forcedTheme) {
-                    this.theme = this.forcedTheme;
-                    this.updateDOM();
-                    this.$nextTick(() => this.updateMarker());
-                    return;
-                }
-
                 localStorage.setItem('theme', val);
                 this.updateDOM();
                 this.$nextTick(() => this.updateMarker())
@@ -46,7 +39,7 @@ import { Icon } from "astro-icon/components";
         updateDOM() {
             const root = document.documentElement;
             root.classList.add('is-switching-theme');
-            const activeTheme = this.forcedTheme || this.theme;
+            const activeTheme = this.theme;
             const isDark = activeTheme === 'dark' || 
               (activeTheme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches);
 
@@ -64,7 +57,7 @@ import { Icon } from "astro-icon/components";
         markerStyle: { left: null, width: null },
         updateMarker() {
             // Use the theme name as the ref key
-            const markerTheme = this.forcedTheme || this.theme;
+            const markerTheme = this.theme;
             const el = this.$refs[markerTheme];
             if (el) {
                 this.markerStyle = {
@@ -86,7 +79,6 @@ import { Icon } from "astro-icon/components";
     x-ref="light"
     @click="theme = 'light'"
     :class="theme === 'light' ? 'text-neutral-800' : 'text-neutral-500'"
-    :disabled="Boolean(forcedTheme)"
     class="p-[5px] rounded-full text-sm font-medium transition-all cursor-pointer z-10"
   >
     <Icon name="lucide:sun-medium" class="size-[13px]" />
@@ -96,7 +88,6 @@ import { Icon } from "astro-icon/components";
     x-ref="dark"
     @click="theme = 'dark'"
     :class="theme === 'dark' ? 'text-neutral-300' : 'text-neutral-500'"
-    :disabled="Boolean(forcedTheme)"
     class="p-[5px] rounded-full text-sm font-medium transition-all cursor-pointer z-10"
   >
     <Icon name="lucide:moon" class="size-[13px]" />
@@ -106,7 +97,6 @@ import { Icon } from "astro-icon/components";
     x-ref="system"
     @click="theme = 'system'"
     :class="theme === 'system' ? 'text-neutral-800 dark:text-neutral-300' : 'text-neutral-500'"
-    :disabled="Boolean(forcedTheme)"
     class="p-[6px] rounded-full text-sm font-medium transition-all cursor-pointer z-10"
   >
     <Icon name="lucide:monitor" class="size-[12px]" />

package/template/src/components/chat/AssistantEmbedPanel.tsx

@@ -2054,7 +2054,7 @@ export default function AssistantEmbedPanel({
                   }
                 />
                 <p
-                  className="assistant-empty-state-item mt-3 text-3xl font-[450] leading-9 text-neutral-900 dark:text-neutral-50"
+                  className="assistant-empty-state-item mt-3 text-3xl font-medium leading-9 text-neutral-900 dark:text-neutral-50"
                   style={
                     {
                       "--assistant-empty-state-delay": "300ms",

package/template/src/components/chat/AssistantEmbedPanelPage.astro

@@ -1,14 +1,15 @@
 ---
 import "../../styles/global.css";
-import "../../styles/google-sans-flex.css";
-import "../../styles/geist-mono.css";
 import AssistantEmbedPanel from "./AssistantEmbedPanel";
 import { getAssistantPanelRuntimeConfig } from "../../lib/assistant-panel-config";
+import { getDocsFontCss, getDocsFontPreloads } from "../../lib/font-css";
 import { getDocsThemeCss } from "../../lib/theme-css";
 import { getConfig } from "../../lib/validation";
 
 const config = await getConfig();
 const themeCss = getDocsThemeCss(config.theme);
+const fontCss = getDocsFontCss(config.theme);
+const fontPreloads = getDocsFontPreloads(config.theme);
 const assistantConfig = getAssistantPanelRuntimeConfig(config);
 ---
 
@@ -19,6 +20,18 @@ const assistantConfig = getAssistantPanelRuntimeConfig(config);
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="robots" content="noindex" />
     <style is:inline is:global set:html={themeCss}></style>
+    <style is:inline is:global set:html={fontCss}></style>
+    {
+      fontPreloads.map((font) => (
+        <link
+          rel="preload"
+          href={font.href}
+          as="font"
+          type={font.type}
+          crossorigin
+        />
+      ))
+    }
     <script is:inline>
       (() => {
         const applyTheme = (theme) => {

package/template/src/components/endpoint/PlaygroundButton.astro

@@ -38,7 +38,7 @@ import { Icon } from "astro-icon/components";
 >
   <button
     x-on:click="open = true"
-    class="font-[350] dark:font-[450] flex h-8 items-center gap-2 rounded-lg [corner-shape:superellipse(1.2)] bg-linear-to-b from-neutral-900/85 to-neutral-900 dark:from-neutral-100 dark:to-neutral-200 px-3 text-[13px] text-white dark:text-neutral-950 shadow-sm transition-all duration-200 whitespace-nowrap cursor-pointer"
+    class="flex h-8 items-center gap-2 rounded-lg [corner-shape:superellipse(1.2)] bg-linear-to-b from-neutral-900/85 to-neutral-900 dark:from-neutral-100 dark:to-neutral-200 px-3 text-[13px] font-normal text-white dark:font-medium dark:text-neutral-950 shadow-sm transition-all duration-200 whitespace-nowrap cursor-pointer"
   >
     <Icon class="-ml-px size-3.5" name="lucide:square-mouse-pointer" />
     Try it

package/template/src/components/endpoint/PlaygroundField.astro

@@ -1,6 +1,6 @@
 ---
 import { Icon } from "astro-icon/components";
-import type { Field as FieldType } from "../OpenApiPage.astro";
+import type { OpenApiField as FieldType } from "../../lib/openapi/operation-doc";
 import Field from "../ui/Field.astro";
 
 interface Props {

package/template/src/components/endpoint/PlaygroundForm.astro

@@ -5,15 +5,18 @@ import type { OpenApiRoute } from "../../lib/routes";
 import { getConfig } from "../../lib/validation";
 import { renderMarkdown } from "../../lib/utils";
 import {
-  headers,
-  type RequestFields,
-  type RequestSectionVariantData,
-} from "../OpenApiPage.astro";
+  OPENAPI_REQUEST_SECTION_LABELS,
+  type OpenApiRequestFields,
+  type OpenApiRequestSectionVariantData,
+} from "../../lib/openapi/operation-doc";
 import Accordion from "../user/Accordion.astro";
 import PlaygroundBar from "./PlaygroundBar.astro";
 import ResponseDisplay from "./ResponseDisplay.astro";
 import PlaygroundField from "./PlaygroundField.astro";
 
+type RequestFields = OpenApiRequestFields;
+type RequestSectionVariantData = OpenApiRequestSectionVariantData;
+
 interface Props {
   route: OpenApiRoute;
   serverUrl?: string;
@@ -33,6 +36,7 @@ const {
   bodyDescription = "",
   bodyDefaultKind,
 } = Astro.props;
+const headers: Record<string, string> = OPENAPI_REQUEST_SECTION_LABELS;
 const config = await getConfig();
 const configuredProxyUrl =
   typeof import.meta.env.PUBLIC_PROXY_URL === "string"
@@ -541,7 +545,7 @@ const sectionVariantFieldNames = Object.fromEntries(
       <button
         @click="sendRequest($event)"
         :disabled="loading"
-        class="font-[350] dark:font-[450] relative flex h-8 items-center gap-2 rounded-lg [corner-shape:superellipse(1.2)] bg-linear-to-b from-neutral-900/85 to-neutral-900 dark:from-neutral-100 dark:to-neutral-200 px-3 text-[13px] text-white dark:text-neutral-950 shadow-sm transition-all duration-200 whitespace-nowrap cursor-pointer disabled:opacity-70 disabled:cursor-not-allowed"
+        class="relative flex h-8 items-center gap-2 rounded-lg [corner-shape:superellipse(1.2)] bg-linear-to-b from-neutral-900/85 to-neutral-900 dark:from-neutral-100 dark:to-neutral-200 px-3 text-[13px] font-normal text-white dark:font-medium dark:text-neutral-950 shadow-sm transition-all duration-200 whitespace-nowrap cursor-pointer disabled:opacity-70 disabled:cursor-not-allowed"
       >
       <span class="flex items-center gap-2">
           <Icon

package/template/src/components/endpoint/ResponseFields.astro

@@ -744,7 +744,7 @@ Object.entries(responses)
 ---
 
 <div>
-  <h4 class="text-xl font-semibold mt-10">Responses</h4>
+  <h4 class="rd-document-heading text-xl font-semibold mt-10">Responses</h4>
   {
     responseFields.map((response) => (
       <div class="mt-6">
@@ -756,9 +756,9 @@ Object.entries(responses)
                 getStatusCodeDotClass(response.statusCode),
               ]}
             />
-            <h5 class="text-lg font-medium leading-none">
+            <span class="text-lg font-medium leading-none">
               {response.statusCode}
-            </h5>
+            </span>
           </div>
           {response.description && (
             <span class="mt-1 text-sm text-neutral-500 dark:text-neutral-400">

package/template/src/components/ui/Field.astro

@@ -77,23 +77,23 @@ if (hasMinLength && hasMaxLength) {
 
 <div class="space-y-3">
   <div class="flex flex-wrap items-center gap-x-2 gap-y-px">
-    <h5 class="font-medium leading-4">
+    <span class="font-medium leading-4">
       {name}
-    </h5>
+    </span>
     <code
       class="text-[10px] font-medium text-neutral-500 border border-neutral-200/80 bg-neutral-50 px-1 rounded-sm dark:text-neutral-300 dark:border-neutral-700/70 dark:bg-neutral-900/70"
       >{type}</code
     >
     {
       required && (
-        <div class="text-red-700/70 bg-red-50 border border-red-700/10 rounded-full px-1.5 text-[10px] font-mono leading-none py-0.5 pb-0.5 font-[450] h-fit dark:text-red-300 dark:bg-red-950/40 dark:border-red-900/40">
+        <div class="text-red-700/70 bg-red-50 border border-red-700/10 rounded-full px-1.5 text-[10px] font-mono font-medium leading-none py-0.5 pb-0.5 h-fit dark:text-red-300 dark:bg-red-950/40 dark:border-red-900/40">
           required
         </div>
       )
     }
     {
       optional && (
-        <div class="text-blue-700/70 bg-blue-50 border border-blue-700/10 rounded-full px-1.5 font-mono text-[10px] leading-none py-0.5 pb-0.5 font-[450] h-fit dark:text-blue-300 dark:bg-blue-950/40 dark:border-blue-900/40">
+        <div class="text-blue-700/70 bg-blue-50 border border-blue-700/10 rounded-full px-1.5 font-mono text-[10px] font-medium leading-none py-0.5 pb-0.5 h-fit dark:text-blue-300 dark:bg-blue-950/40 dark:border-blue-900/40">
           optional
         </div>
       )

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

@@ -100,13 +100,13 @@ const hasTitle = typeof resolvedTitle === "string" && resolvedTitle.length > 0;
               class="shrink-0 border border-white"
             />
           ) : null}
-          <h6
+          <div
             class:list={[
               "font-semibold text-sm text-neutral-900 dark:text-neutral-100",
             ]}
           >
             {resolvedTitle}
-          </h6>
+          </div>
         </div>
         <div class="prose-rules prose-sm! max-w-none! *:max-w-none! text-neutral-700 dark:text-neutral-300">
           <slot />

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

@@ -239,7 +239,7 @@ const CardGradient = hasCover
           )
         }
         <div class="ml-1 self-center min-w-0 flex-1">
-          <h4
+          <div
             class="not-prose m-0 flex min-w-0 items-center text-base font-semibold text-neutral-900 dark:text-neutral-100"
           >
             {
@@ -267,7 +267,7 @@ const CardGradient = hasCover
                 </>
               )
             }
-          </h4>
+          </div>
           {
             descriptionHtml && (
               <div

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

@@ -21,7 +21,9 @@ const { title } = Astro.props;
       "step-number before:leading-none before:size-7 before:bg-neutral-900/6 dark:before:bg-neutral-50/6 before:rounded-full before:text-neutral-700 dark:before:text-neutral-100 before:flex before:items-center before:justify-center before:text-[13px] before:font-medium before:absolute before:left-0 before:top-0",
     ]}
   >
-    <h3 class="text-lg font-semibold text-neutral-900 dark:text-neutral-100">
+    <h3
+      class="rd-document-heading text-lg font-semibold text-neutral-900 dark:text-neutral-100"
+    >
       {title}
     </h3>
   </div>

package/template/src/layouts/Layout.astro

@@ -1,11 +1,5 @@
 ---
 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";
@@ -14,8 +8,10 @@ import AssistantDocsWidget from "../components/chat/AssistantDocsWidget.astro";
 import { ClientRouter } from "astro:transitions";
 import { prependBasePath, stripBasePath } from "../lib/base-path";
 import { getFaviconConfig } from "../lib/favicon";
+import { getDocsFontCss, getDocsFontPreloads } from "../lib/font-css";
 import { resolveStaticAssetUrl } from "../lib/static-asset-url";
 import { getDocsThemeCss } from "../lib/theme-css";
+import { resolvePageDescription } from "../lib/page-description";
 
 interface Props {
   pageTitle?: string;
@@ -41,15 +37,14 @@ const { pageTitle, pageDescription } = Astro.props as Props;
 const config = await getConfig();
 const favicon = getFaviconConfig();
 const neutralPaletteCss = getDocsThemeCss(config.theme);
+const fontCss = getDocsFontCss(config.theme);
+const fontPreloads = getDocsFontPreloads(config.theme);
 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 resolvedMetaDescription = resolvePageDescription({
+  pageTitle: resolvedPageTitle,
+  pageDescription,
+  docsTitle: config.title,
+});
 const documentTitle = resolvedPageTitle
   ? `${resolvedPageTitle} | ${config.title}`
   : `${config.title} Docs`;
@@ -77,6 +72,7 @@ const askAiEnabled = isDev || orgTier >= 3;
 <html lang="en">
   <head>
     <style is:inline is:global set:html={neutralPaletteCss}></style>
+    <style is:inline is:global set:html={fontCss}></style>
     <ClientRouter />
     <script is:inline>
       const applyTheme = () => {
@@ -196,34 +192,17 @@ const askAiEnabled = isDev || orgTier >= 3;
         }
       })();
     </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
-    />
+    {
+      fontPreloads.map((font) => (
+        <link
+          rel="preload"
+          href={font.href}
+          as="font"
+          type={font.type}
+          crossorigin
+        />
+      ))
+    }
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width" />
     <link
@@ -259,18 +238,15 @@ const askAiEnabled = isDev || orgTier >= 3;
     <!-- Edges -->
     <div
       class="fixed top-1 inset-x-1 h-16 -z-10 bg-background-dark"
-      data-vaul-scale-chrome
     >
       <div class="bg-background w-full h-full rounded-t-2xl"></div>
     </div>
     <div
       class="fixed top-[63px] z-30 w-[5px] right-0 bottom-0 bg-background-dark border-l border-l-border"
-      data-vaul-scale-chrome
     >
     </div>
     <div
       class="fixed top-[63px] z-30 w-[5px] left-0 bottom-0 bg-background-dark border-r border-r-border"
-      data-vaul-scale-chrome
     >
     </div>
 
@@ -298,7 +274,6 @@ const askAiEnabled = isDev || orgTier >= 3;
     <!-- Main Content -->
     <div
       class="mx-1 mt-1 px-4 sm:px-6 lg:pl-[calc(288px+32px)] pt-16 lg:pr-8 bg-background"
-      data-vaul-scale-chrome
     >
       <main class="mx-auto pt-16 pb-16 min-h-[calc(100vh-64px)]">
         <slot />