radiant-docs 0.1.41 → 0.1.42

package/template/src/lib/validation.ts

@@ -110,6 +110,9 @@ const AVAILABLE_COMPONENTS = [
   "Step",
   "Accordion",
   "AccordionGroup",
+  "Card",
+  "Column",
+  "Columns",
   "Image",
   "CodeGroup",
   "ComponentPreview",
@@ -166,6 +169,7 @@ export type NavbarItem = {
   text: string;
   href: string;
   icon?: string | null;
+  color?: string | ThemeColorByMode;
 };
 export type HiddenPageRoute = {
   filePath: string;
@@ -211,9 +215,21 @@ export type ThemeColorByMode = {
   light?: string;
   dark?: string;
 };
+export type CardCoverTheme = {
+  colors?: string[];
+  colorSeed?: string;
+};
+export type CardButtonTheme = {
+  color?: string | ThemeColorByMode;
+};
+export type CardTheme = {
+  cover?: CardCoverTheme;
+  button?: CardButtonTheme;
+};
 export type DocsTheme = {
   baseColor?: BaseColorOption | BaseColorByMode;
   themeColor?: string | ThemeColorByMode;
+  card?: CardTheme;
 };
 export type AssistantIcon = {
   src?: string;
@@ -222,12 +238,18 @@ export type AssistantIcon = {
 export type AssistantButtonSize = "small" | "default";
 export type AssistantButtonConfig = {
   size?: AssistantButtonSize;
+  color?: string | ThemeColorByMode;
+};
+export type AssistantNavbarButtonConfig = {
+  enabled?: boolean;
+  text?: string;
+  color?: string | ThemeColorByMode;
 };
 export type AssistantConfig = {
   button?: AssistantButtonConfig;
+  navbarButton?: AssistantNavbarButtonConfig;
   heading?: string;
   questions?: string[];
-  themeColor?: string | ThemeColorByMode;
   icon?: AssistantIcon;
 };
 export type DocsConfig = {
@@ -340,6 +362,93 @@ function normalizeHexColor(
   return normalizedValue.toLowerCase();
 }
 
+function normalizeThemeColorConfig(
+  value: unknown,
+  currentPath: Path,
+  label: string,
+): string | ThemeColorByMode {
+  if (typeof value === "string") {
+    return normalizeHexColor(value, currentPath, label);
+  }
+
+  checkType(value, "object", currentPath, label);
+  if (typeof value !== "object" || value === null || Array.isArray(value)) {
+    throwConfigError(
+      `${label} must be a string or an object with light/dark values.`,
+      currentPath,
+    );
+  }
+
+  const colorByMode = value as Record<string, unknown>;
+  const allowedKeys = new Set(["light", "dark"]);
+  for (const key of Object.keys(colorByMode)) {
+    if (!allowedKeys.has(key)) {
+      throwConfigError(`${label} object only supports 'light' and 'dark'.`, [
+        ...currentPath,
+        key,
+      ]);
+    }
+  }
+
+  const light =
+    colorByMode.light !== undefined
+      ? normalizeHexColor(colorByMode.light, [...currentPath, "light"], label)
+      : undefined;
+  const dark =
+    colorByMode.dark !== undefined
+      ? normalizeHexColor(colorByMode.dark, [...currentPath, "dark"], label)
+      : undefined;
+
+  if (light === undefined && dark === undefined) {
+    throwConfigError(
+      `${label} object must include 'light', 'dark', or both.`,
+      currentPath,
+    );
+  }
+
+  return {
+    ...(light !== undefined ? { light } : {}),
+    ...(dark !== undefined ? { dark } : {}),
+  };
+}
+
+function normalizeHexColorArray(
+  value: unknown,
+  currentPath: Path,
+  label: string,
+): string[] {
+  checkType(value, "array", currentPath, label);
+  if (!Array.isArray(value)) {
+    throwConfigError(`${label} must be an array.`, currentPath);
+  }
+
+  if (value.length < 1 || value.length > 4) {
+    throwConfigError(`${label} must include 1 to 4 colors.`, currentPath);
+  }
+
+  return value.map((color, index) =>
+    normalizeHexColor(color, [...currentPath, index], `${label} ${index + 1}`),
+  );
+}
+
+function normalizeSeedValue(
+  value: unknown,
+  currentPath: Path,
+  label: string,
+): string {
+  checkType(value, "string", currentPath, label);
+  if (typeof value !== "string") {
+    throwConfigError(`${label} must be a string.`, currentPath);
+  }
+
+  const trimmedValue = value.trim();
+  if (trimmedValue.length === 0) {
+    throwConfigError(`${label} cannot be empty.`, currentPath);
+  }
+
+  return trimmedValue;
+}
+
 function validateFileExistence(filePath: string, currentPath: Path): void {
   // Assuming relative path from DOCS_DIR and .mdx extension
   const fullPath = path.join(DOCS_DIR, `${filePath}.mdx`);
@@ -1224,6 +1333,21 @@ function validateNavbarItem(
 
   // Optional property
   validateIcon(item.icon, [...currentPath, "icon"]);
+  if (item.color !== undefined) {
+    if (currentPath[0] !== "navbar" || currentPath[1] !== "primary") {
+      throwConfigError(
+        "Navbar item color is only supported on navbar.primary.",
+        [...currentPath, "color"],
+      );
+    }
+
+    item.color = normalizeThemeColorConfig(
+      item.color,
+      [...currentPath, "color"],
+      "Navbar primary color",
+    );
+  }
+
   return hiddenPageRoute;
 }
 
@@ -1594,6 +1718,116 @@ function validateTheme(theme: DocsConfig["theme"]): void {
     }
   }
 
+  if (theme.card !== undefined) {
+    checkType(theme.card, "object", ["theme", "card"], "Theme card");
+    if (
+      typeof theme.card !== "object" ||
+      theme.card === null ||
+      Array.isArray(theme.card)
+    ) {
+      throwConfigError("Theme card must be an object.", ["theme", "card"]);
+    }
+
+    const cardTheme = theme.card as CardTheme & Record<string, unknown>;
+    const allowedCardKeys = new Set(["cover", "button"]);
+    for (const key of Object.keys(cardTheme)) {
+      if (!allowedCardKeys.has(key)) {
+        throwConfigError(
+          "Theme card configuration only supports 'cover' and 'button'.",
+          ["theme", "card", key],
+        );
+      }
+    }
+
+    if (cardTheme.cover !== undefined) {
+      checkType(
+        cardTheme.cover,
+        "object",
+        ["theme", "card", "cover"],
+        "Theme card cover",
+      );
+      if (
+        typeof cardTheme.cover !== "object" ||
+        cardTheme.cover === null ||
+        Array.isArray(cardTheme.cover)
+      ) {
+        throwConfigError("Theme card cover must be an object.", [
+          "theme",
+          "card",
+          "cover",
+        ]);
+      }
+
+      const coverTheme = cardTheme.cover as CardCoverTheme &
+        Record<string, unknown>;
+      const allowedCoverKeys = new Set(["colors", "colorSeed"]);
+      for (const key of Object.keys(coverTheme)) {
+        if (!allowedCoverKeys.has(key)) {
+          throwConfigError(
+            "Theme card cover configuration only supports 'colors' and 'colorSeed'.",
+            ["theme", "card", "cover", key],
+          );
+        }
+      }
+
+      if (coverTheme.colors !== undefined) {
+        coverTheme.colors = normalizeHexColorArray(
+          coverTheme.colors,
+          ["theme", "card", "cover", "colors"],
+          "Theme card cover colors",
+        );
+      }
+
+      if (coverTheme.colorSeed !== undefined) {
+        coverTheme.colorSeed = normalizeSeedValue(
+          coverTheme.colorSeed,
+          ["theme", "card", "cover", "colorSeed"],
+          "Theme card cover color seed",
+        );
+      }
+    }
+
+    if (cardTheme.button !== undefined) {
+      checkType(
+        cardTheme.button,
+        "object",
+        ["theme", "card", "button"],
+        "Theme card button",
+      );
+      if (
+        typeof cardTheme.button !== "object" ||
+        cardTheme.button === null ||
+        Array.isArray(cardTheme.button)
+      ) {
+        throwConfigError("Theme card button must be an object.", [
+          "theme",
+          "card",
+          "button",
+        ]);
+      }
+
+      const buttonTheme = cardTheme.button as CardButtonTheme &
+        Record<string, unknown>;
+      const allowedButtonKeys = new Set(["color"]);
+      for (const key of Object.keys(buttonTheme)) {
+        if (!allowedButtonKeys.has(key)) {
+          throwConfigError(
+            "Theme card button configuration only supports 'color'.",
+            ["theme", "card", "button", key],
+          );
+        }
+      }
+
+      if (buttonTheme.color !== undefined) {
+        buttonTheme.color = normalizeThemeColorConfig(
+          buttonTheme.color,
+          ["theme", "card", "button", "color"],
+          "Theme card button color",
+        );
+      }
+    }
+  }
+
   if (theme.themeColor === undefined) {
     return;
   }
@@ -1677,15 +1911,15 @@ function validateAssistant(assistant: DocsConfig["assistant"]): void {
 
   const allowedAssistantKeys = new Set([
     "button",
+    "navbarButton",
     "heading",
     "questions",
-    "themeColor",
     "icon",
   ]);
   for (const key of Object.keys(assistant)) {
     if (!allowedAssistantKeys.has(key)) {
       throwConfigError(
-        "Assistant configuration only supports 'button', 'heading', 'questions', 'themeColor', and 'icon'.",
+        "Assistant configuration only supports 'button', 'navbarButton', 'heading', 'questions', and 'icon'.",
         ["assistant", key],
       );
     }
@@ -1709,11 +1943,11 @@ function validateAssistant(assistant: DocsConfig["assistant"]): void {
       ]);
     }
 
-    const allowedButtonKeys = new Set(["size"]);
+    const allowedButtonKeys = new Set(["size", "color"]);
     for (const key of Object.keys(assistant.button)) {
       if (!allowedButtonKeys.has(key)) {
         throwConfigError(
-          "Assistant button configuration only supports 'size'.",
+          "Assistant button configuration only supports 'size' and 'color'.",
           ["assistant", "button", key],
         );
       }
@@ -1743,6 +1977,92 @@ function validateAssistant(assistant: DocsConfig["assistant"]): void {
       }
       assistant.button.size = trimmedSize;
     }
+
+    if (assistant.button.color !== undefined) {
+      assistant.button.color = normalizeThemeColorConfig(
+        assistant.button.color,
+        ["assistant", "button", "color"],
+        "Assistant button color",
+      );
+    }
+  }
+
+  if (assistant.navbarButton !== undefined) {
+    checkType(
+      assistant.navbarButton,
+      "object",
+      ["assistant", "navbarButton"],
+      "Assistant navbar button configuration",
+    );
+    if (
+      typeof assistant.navbarButton !== "object" ||
+      assistant.navbarButton === null ||
+      Array.isArray(assistant.navbarButton)
+    ) {
+      throwConfigError(
+        "Assistant navbar button configuration must be an object.",
+        ["assistant", "navbarButton"],
+      );
+    }
+
+    const allowedNavbarButtonKeys = new Set(["enabled", "text", "color"]);
+    for (const key of Object.keys(assistant.navbarButton)) {
+      if (!allowedNavbarButtonKeys.has(key)) {
+        throwConfigError(
+          "Assistant navbar button configuration only supports 'enabled', 'text', and 'color'.",
+          ["assistant", "navbarButton", key],
+        );
+      }
+    }
+
+    if (assistant.navbarButton.enabled !== undefined) {
+      checkType(
+        assistant.navbarButton.enabled,
+        "boolean",
+        ["assistant", "navbarButton", "enabled"],
+        "Assistant navbar button enabled",
+      );
+      if (typeof assistant.navbarButton.enabled !== "boolean") {
+        throwConfigError(
+          "Assistant navbar button enabled must be a boolean.",
+          ["assistant", "navbarButton", "enabled"],
+        );
+      }
+    }
+
+    if (assistant.navbarButton.text !== undefined) {
+      checkType(
+        assistant.navbarButton.text,
+        "string",
+        ["assistant", "navbarButton", "text"],
+        "Assistant navbar button text",
+      );
+      if (typeof assistant.navbarButton.text !== "string") {
+        throwConfigError("Assistant navbar button text must be a string.", [
+          "assistant",
+          "navbarButton",
+          "text",
+        ]);
+      }
+
+      const trimmedText = assistant.navbarButton.text.trim();
+      if (trimmedText.length === 0) {
+        throwConfigError("Assistant navbar button text cannot be empty.", [
+          "assistant",
+          "navbarButton",
+          "text",
+        ]);
+      }
+      assistant.navbarButton.text = trimmedText;
+    }
+
+    if (assistant.navbarButton.color !== undefined) {
+      assistant.navbarButton.color = normalizeThemeColorConfig(
+        assistant.navbarButton.color,
+        ["assistant", "navbarButton", "color"],
+        "Assistant navbar button color",
+      );
+    }
   }
 
   if (assistant.heading !== undefined) {
@@ -1817,76 +2137,6 @@ function validateAssistant(assistant: DocsConfig["assistant"]): void {
     });
   }
 
-  if (assistant.themeColor !== undefined) {
-    if (typeof assistant.themeColor === "string") {
-      assistant.themeColor = normalizeHexColor(
-        assistant.themeColor,
-        ["assistant", "themeColor"],
-        "Assistant theme color",
-      );
-    } else {
-      checkType(
-        assistant.themeColor,
-        "object",
-        ["assistant", "themeColor"],
-        "Assistant theme color",
-      );
-      if (
-        typeof assistant.themeColor !== "object" ||
-        assistant.themeColor === null ||
-        Array.isArray(assistant.themeColor)
-      ) {
-        throwConfigError(
-          "Assistant theme color must be a string or an object with light/dark values.",
-          ["assistant", "themeColor"],
-        );
-      }
-
-      const assistantThemeColorByMode = assistant.themeColor as Record<
-        string,
-        unknown
-      >;
-      const allowedThemeColorKeys = new Set(["light", "dark"]);
-      for (const key of Object.keys(assistantThemeColorByMode)) {
-        if (!allowedThemeColorKeys.has(key)) {
-          throwConfigError(
-            "Assistant theme color object only supports 'light' and 'dark'.",
-            ["assistant", "themeColor", key],
-          );
-        }
-      }
-
-      const light =
-        assistantThemeColorByMode.light !== undefined
-          ? normalizeHexColor(
-              assistantThemeColorByMode.light,
-              ["assistant", "themeColor", "light"],
-              "Assistant theme color light",
-            )
-          : undefined;
-      const dark =
-        assistantThemeColorByMode.dark !== undefined
-          ? normalizeHexColor(
-              assistantThemeColorByMode.dark,
-              ["assistant", "themeColor", "dark"],
-              "Assistant theme color dark",
-            )
-          : undefined;
-
-      if (!light && !dark) {
-        throwConfigError(
-          "Assistant theme color object must include 'light', 'dark', or both.",
-          ["assistant", "themeColor"],
-        );
-      }
-
-      assistant.themeColor = {
-        ...(light !== undefined ? { light } : {}),
-        ...(dark !== undefined ? { dark } : {}),
-      };
-    }
-  }
-
   if (assistant.icon === undefined) return;
 
   checkType(

package/template/src/styles/global.css

@@ -111,7 +111,7 @@
 
 /* Prose styling */
 .prose-rules {
-  @apply *:max-w-2xl prose *:first:mt-0 *:last:mb-0 prose-h2:scroll-mt-28 prose-h3:scroll-mt-24 prose-headings:font-semibold;
+  @apply prose max-w-none *:my-6 *:first:mt-0 *:last:mb-0 prose-h2:mt-7 prose-h2:mb-2 prose-h2:scroll-mt-24 prose-h3:mb-2 prose-h3:scroll-mt-24 prose-headings:font-semibold prose-p:mt-0 prose-p:mb-4 prose-ol:mt-0 prose-ol:mb-5 prose-ul:mt-0 prose-ul:mb-5 prose-a:decoration-(--color-theme) prose-a:decoration-from-font prose-blockquote:border-(--color-theme)/30 dark:prose-blockquote:border-(--color-theme)/30;
   --tw-prose-body: var(--color-neutral-700);
   --tw-prose-headings: var(--color-neutral-900);
   --tw-prose-lead: var(--color-neutral-600);
@@ -134,7 +134,7 @@
   --tw-prose-pre-bg: var(--color-neutral-800);
   --tw-prose-th-borders: var(--color-neutral-300);
   --tw-prose-td-borders: var(--color-neutral-200);
-  --tw-prose-invert-body: var(--color-neutral-300);
+  --tw-prose-invert-body: var(--color-neutral-200);
   --tw-prose-invert-headings: white;
   --tw-prose-invert-lead: var(--color-neutral-400);
   --tw-prose-invert-links: white;
@@ -175,7 +175,54 @@
   --tw-prose-td-borders: var(--tw-prose-invert-td-borders);
 }
 
-.prose-rules :is(h2, h3, h4, h5, h6) {
+.rd-prose-block {
+  margin-block: 1.5rem;
+}
+
+.prose-rules > .rd-accordion:has(+ .rd-accordion) {
+  margin-block-end: 0 !important;
+  margin-bottom: 0 !important;
+}
+
+.prose-rules > .rd-accordion + .rd-accordion {
+  margin-block-start: 0 !important;
+  margin-top: 0 !important;
+}
+
+.prose-rules > .react-renderer,
+.prose-rules > [data-node-view-content-react],
+.prose-rules > [data-node-view-content-react] > .react-renderer {
+  margin-block: 0 !important;
+  max-width: none !important;
+}
+
+@layer base {
+  .prose-rules > .rd-prose-block:first-child,
+  .prose-rules > .react-renderer:first-child > .rd-prose-block,
+  .prose-rules > [data-node-view-content-react]:first-child > :first-child,
+  .prose-rules > [data-node-view-content-react] > .rd-prose-block:first-child,
+  .prose-rules
+    > [data-node-view-content-react]
+    > .react-renderer:first-child
+    > .rd-prose-block {
+    margin-block-start: 0 !important;
+    margin-top: 0 !important;
+  }
+
+  .prose-rules > .rd-prose-block:last-child,
+  .prose-rules > .react-renderer:last-child > .rd-prose-block,
+  .prose-rules > [data-node-view-content-react]:last-child > :last-child,
+  .prose-rules > [data-node-view-content-react] > .rd-prose-block:last-child,
+  .prose-rules
+    > [data-node-view-content-react]
+    > .react-renderer:last-child
+    > .rd-prose-block {
+    margin-block-end: 0 !important;
+    margin-bottom: 0 !important;
+  }
+}
+
+.prose-rules :is(h2, h3) {
   @apply relative;
   padding-left: 0.375rem;
   margin-left: -0.375rem;
@@ -197,8 +244,38 @@
   @apply opacity-100;
 }
 
+.prose-rules
+  :is(h2, h3, h4, h5, h6)
+  > .heading-anchor[data-copy-state="copied"] {
+  @apply opacity-100 bg-green-500/5 text-green-700/80 dark:bg-green-900/20 dark:text-green-600/80;
+}
+
+.prose-rules .heading-anchor-icons {
+  @apply grid size-3.5 place-items-center;
+}
+
 .prose-rules .heading-anchor-icon {
-  @apply h-3.5 w-3.5;
+  @apply col-start-1 row-start-1 h-3.5 w-3.5 origin-center transition-all duration-250 ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none;
+}
+
+.prose-rules .heading-anchor-link-icon {
+  @apply scale-100 rotate-0 opacity-100;
+}
+
+.prose-rules .heading-anchor-check-icon {
+  @apply scale-50 rotate-6 opacity-0;
+}
+
+.prose-rules
+  .heading-anchor[data-copy-state="copied"]
+  .heading-anchor-link-icon {
+  @apply scale-50 -rotate-6 opacity-0;
+}
+
+.prose-rules
+  .heading-anchor[data-copy-state="copied"]
+  .heading-anchor-check-icon {
+  @apply scale-110 rotate-0 opacity-100;
 }
 
 @media (max-width: 1023px) {