radiant-docs 0.1.56 → 0.1.58

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

@@ -2,10 +2,6 @@
 import { withBasePath } from "../../lib/base-path";
 import { getConfig, type ThemeColorByMode } from "../../lib/validation";
 import Icon from "../ui/Icon.astro";
-import {
-  validateNoUnknownProps,
-  validateProps,
-} from "../../lib/component-error";
 import {
   getDocsBaseColorShade,
   getThemeForegroundColor,
@@ -35,194 +31,41 @@ interface Props {
 }
 
 const cardProps = Astro.props as Record<string, unknown>;
+const { title, href, icon, cover, button } = cardProps as Props;
 
-validateNoUnknownProps(
-  "Card",
-  cardProps,
-  ["title", "href", "icon", "cover", "button"],
-  Astro.url.pathname,
-);
-
-validateProps(
-  "Card",
-  cardProps,
-  {
-    title: { required: true, type: "string" },
-    href: { type: "string" },
-    icon: { type: "string" },
-    cover: { type: "object" },
-    button: { type: "object" },
-  },
-  Astro.url.pathname,
-);
-
-const rawCover = cardProps.cover;
-const rawButton = cardProps.button;
-if (rawCover !== undefined && (rawCover === null || Array.isArray(rawCover))) {
-  throw new Error(
-    `[USER_ERROR]: <Card>: Invalid prop "cover": expected object (in ${Astro.url.pathname})`,
-  );
-}
-if (
-  rawButton !== undefined &&
-  (rawButton === null || Array.isArray(rawButton))
-) {
-  throw new Error(
-    `[USER_ERROR]: <Card>: Invalid prop "button": expected object (in ${Astro.url.pathname})`,
-  );
-}
-
-const coverProps =
-  rawCover && typeof rawCover === "object"
-    ? (rawCover as Record<string, unknown>)
-    : undefined;
-const buttonProps =
-  rawButton && typeof rawButton === "object"
-    ? (rawButton as Record<string, unknown>)
-    : undefined;
-
-if (coverProps) {
-  validateNoUnknownProps(
-    "Card.cover",
-    coverProps,
-    ["icon", "text", "glass", "colors", "patternSeed", "colorSeed"],
-    Astro.url.pathname,
-  );
-  validateProps(
-    "Card.cover",
-    coverProps,
-    {
-      icon: { type: "string" },
-      text: { type: "string" },
-      glass: { type: "boolean" },
-      colors: { type: "array" },
-      patternSeed: { type: "string" },
-      colorSeed: { type: "string" },
-    },
-    Astro.url.pathname,
-  );
-}
-
-if (buttonProps) {
-  validateNoUnknownProps(
-    "Card.button",
-    buttonProps,
-    ["text", "href", "color"],
-    Astro.url.pathname,
-  );
-  validateProps(
-    "Card.button",
-    buttonProps,
-    {
-      text: { required: true, type: "string" },
-      href: { required: true, type: "string" },
-      color: { type: ["string", "object"] },
-    },
-    Astro.url.pathname,
-  );
-}
-
-function normalizeHexColor(value: unknown, propPath: string): string {
-  if (typeof value !== "string") {
-    throw new Error(
-      `[USER_ERROR]: <Card>: Invalid prop "${propPath}": expected string (in ${Astro.url.pathname})`,
-    );
-  }
-
+function normalizeHexColor(value: string): string {
   const trimmedValue = value.trim();
   const normalizedValue = trimmedValue.startsWith("#")
     ? trimmedValue
     : `#${trimmedValue}`;
-  if (
-    !/^#(?:[A-Fa-f0-9]{3}|[A-Fa-f0-9]{4}|[A-Fa-f0-9]{6}|[A-Fa-f0-9]{8})$/.test(
-      normalizedValue,
-    )
-  ) {
-    throw new Error(
-      `[USER_ERROR]: <Card>: Invalid prop "${propPath}": expected a hex color like "#3b82f6" (in ${Astro.url.pathname})`,
-    );
-  }
 
   return normalizedValue.toLowerCase();
 }
 
 function normalizeColorArray(
-  value: unknown,
-  propPath: string,
+  value: string[] | undefined,
 ): string[] | undefined {
   if (value === undefined) return undefined;
-  if (!Array.isArray(value)) {
-    throw new Error(
-      `[USER_ERROR]: <Card>: Invalid prop "${propPath}": expected array (in ${Astro.url.pathname})`,
-    );
-  }
-  if (value.length < 1 || value.length > 4) {
-    throw new Error(
-      `[USER_ERROR]: <Card>: Invalid prop "${propPath}": expected 1 to 4 colors (in ${Astro.url.pathname})`,
-    );
-  }
-
-  return value.map((color, index) =>
-    normalizeHexColor(color, `${propPath}.${index}`),
-  );
+  return value.map((color) => normalizeHexColor(color));
 }
 
-function normalizeSeed(value: unknown, propPath: string): string | undefined {
+function normalizeSeed(value: string | undefined): string | undefined {
   if (value === undefined) return undefined;
-  if (typeof value !== "string") {
-    throw new Error(
-      `[USER_ERROR]: <Card>: Invalid prop "${propPath}": expected string (in ${Astro.url.pathname})`,
-    );
-  }
-
-  const trimmedValue = value.trim();
-  if (trimmedValue.length === 0) {
-    throw new Error(
-      `[USER_ERROR]: <Card>: Invalid prop "${propPath}": expected a non-empty string (in ${Astro.url.pathname})`,
-    );
-  }
-
-  return trimmedValue;
+  return value.trim();
 }
 
 function normalizeThemeColorConfig(
-  value: unknown,
-  propPath: string,
+  value: string | ThemeColorByMode | undefined,
 ): string | ThemeColorByMode | undefined {
   if (value === undefined) return undefined;
   if (typeof value === "string") {
-    return normalizeHexColor(value, propPath);
-  }
-
-  if (typeof value !== "object" || value === null || Array.isArray(value)) {
-    throw new Error(
-      `[USER_ERROR]: <Card>: Invalid prop "${propPath}": expected a hex color string or an object with light/dark values (in ${Astro.url.pathname})`,
-    );
-  }
-
-  const colorByMode = value as Record<string, unknown>;
-  for (const key of Object.keys(colorByMode)) {
-    if (key !== "light" && key !== "dark") {
-      throw new Error(
-        `[USER_ERROR]: <Card>: Invalid prop "${propPath}.${key}": only "light" and "dark" are supported (in ${Astro.url.pathname})`,
-      );
-    }
+    return normalizeHexColor(value);
   }
 
   const light =
-    colorByMode.light !== undefined
-      ? normalizeHexColor(colorByMode.light, `${propPath}.light`)
-      : undefined;
+    value.light !== undefined ? normalizeHexColor(value.light) : undefined;
   const dark =
-    colorByMode.dark !== undefined
-      ? normalizeHexColor(colorByMode.dark, `${propPath}.dark`)
-      : undefined;
-
-  if (light === undefined && dark === undefined) {
-    throw new Error(
-      `[USER_ERROR]: <Card>: Invalid prop "${propPath}": expected at least one of "light" or "dark" (in ${Astro.url.pathname})`,
-    );
-  }
+    value.dark !== undefined ? normalizeHexColor(value.dark) : undefined;
 
   return {
     ...(light !== undefined ? { light } : {}),
@@ -230,23 +73,6 @@ function normalizeThemeColorConfig(
   };
 }
 
-function normalizeRequiredString(value: unknown, propPath: string): string {
-  if (typeof value !== "string") {
-    throw new Error(
-      `[USER_ERROR]: <Card>: Invalid prop "${propPath}": expected string (in ${Astro.url.pathname})`,
-    );
-  }
-
-  const trimmedValue = value.trim();
-  if (trimmedValue.length === 0) {
-    throw new Error(
-      `[USER_ERROR]: <Card>: Invalid prop "${propPath}": expected a non-empty string (in ${Astro.url.pathname})`,
-    );
-  }
-
-  return trimmedValue;
-}
-
 function getConfiguredColorForMode(
   value: string | ThemeColorByMode | undefined,
   mode: "light" | "dark",
@@ -255,7 +81,14 @@ function getConfiguredColorForMode(
   return value?.[mode];
 }
 
-const { title, href, icon, cover } = cardProps as Props;
+function getExternalLinkAttrs(
+  value: string | undefined,
+): { target: "_blank"; rel: "noopener noreferrer" } | Record<string, never> {
+  return value?.startsWith("http://") || value?.startsWith("https://")
+    ? { target: "_blank", rel: "noopener noreferrer" }
+    : {};
+}
+
 const resolvedTitle = title.trim();
 const resolvedHref =
   typeof href === "string" && href.trim().length > 0
@@ -265,27 +98,16 @@ const contentIcon = icon?.trim();
 const coverIcon = cover?.icon?.trim();
 const coverText = cover?.text?.trim();
 const hasCover = Boolean(coverIcon || coverText);
-const cardButton = buttonProps
+const cardButton = button
   ? {
-      text: normalizeRequiredString(buttonProps.text, "button.text"),
-      href: withBasePath(
-        normalizeRequiredString(buttonProps.href, "button.href"),
-      ),
-      color: normalizeThemeColorConfig(buttonProps.color, "button.color"),
+      text: button.text.trim(),
+      href: withBasePath(button.href.trim()),
+      color: normalizeThemeColorConfig(button.color),
     }
   : undefined;
-const explicitCoverColors = normalizeColorArray(
-  coverProps?.colors,
-  "cover.colors",
-);
-const explicitPatternSeed = normalizeSeed(
-  coverProps?.patternSeed,
-  "cover.patternSeed",
-);
-const explicitColorSeed = normalizeSeed(
-  coverProps?.colorSeed,
-  "cover.colorSeed",
-);
+const explicitCoverColors = normalizeColorArray(cover?.colors);
+const explicitPatternSeed = normalizeSeed(cover?.patternSeed);
+const explicitColorSeed = normalizeSeed(cover?.colorSeed);
 const config =
   cardButton || (hasCover && (!explicitCoverColors || !explicitColorSeed))
     ? await getConfig()
@@ -360,7 +182,10 @@ const descriptionHtml = Astro.slots.has("default")
   : "";
 const rootIsLink = Boolean(resolvedHref && !cardButton);
 const Element = rootIsLink ? "a" : "article";
-const rootAttrs = rootIsLink ? { href: resolvedHref } : {};
+const rootAttrs =
+  rootIsLink && resolvedHref
+    ? { href: resolvedHref, ...getExternalLinkAttrs(resolvedHref) }
+    : {};
 const CardGradient = hasCover
   ? (await import("./CardGradient.astro")).default
   : undefined;
@@ -421,6 +246,7 @@ const CardGradient = hasCover
               resolvedHref && cardButton ? (
                 <a
                   href={resolvedHref}
+                  {...getExternalLinkAttrs(resolvedHref)}
                   class="group/rd-card-title inline-flex min-w-0 items-center rounded-sm text-inherit no-underline outline-none focus-visible:ring-ring/50 focus-visible:ring-[3px]"
                 >
                   <span class="min-w-0 leading-6">{resolvedTitle}</span>
@@ -456,6 +282,7 @@ const CardGradient = hasCover
         cardButton && (
           <a
             href={cardButton.href}
+            {...getExternalLinkAttrs(cardButton.href)}
             class="rd-card-button relative z-10 inline-flex h-8 shrink-0 items-center justify-center self-center rounded-xl [corner-shape:superellipse(1.2)] px-3 text-[13px] no-underline transition-opacity duration-200 hover:opacity-95 focus-visible:outline-none focus-visible:ring-ring/50 focus-visible:ring-[3px]"
             style={cardButtonStyle}
           >

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

@@ -313,7 +313,14 @@ const textSizeClass = icon ? "text-lg sm:text-xl" : "text-xl sm:text-2xl";
         glass && isIconOnly && "rd-card-gradient-content-glass-icon",
       ]}
     >
-      {icon && <Icon name={icon} class="size-9 text-white/70" />}
+      {
+        icon && (
+          <Icon
+            name={icon}
+            class:list={["text-white/70", text ? "size-7" : "size-9"]}
+          />
+        )
+      }
       {
         text && (
           <span

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

@@ -1,21 +1,4 @@
 ---
-const columnProps = Astro.props as Record<string, unknown>;
-
-function getSourceFile(pathname: string): string {
-  const pagePath = pathname
-    .replace(/^\/documentation\//, "")
-    .replace(/\/$/, "");
-  return `${pagePath}.mdx`;
-}
-
-const unknownProps = Object.keys(columnProps);
-if (unknownProps.length > 0) {
-  const propLabel = unknownProps.length === 1 ? "prop" : "props";
-  const unknownLabel = unknownProps.map((name) => `"${name}"`).join(", ");
-  throw new Error(
-    `[USER_ERROR]: <Column>: Unsupported ${propLabel}: ${unknownLabel}. <Column> does not accept props; render another <Columns> block for a new row. (in ${getSourceFile(Astro.url.pathname)})`,
-  );
-}
 ---
 
 <div data-rd-column class="min-w-0">

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

@@ -1,168 +1,19 @@
 ---
-import {
-  validateNoUnknownProps,
-  validateProps,
-} from "../../lib/component-error";
-
 interface Props {
-  columns?: 2 | 3;
+  columns?: 2 | 3 | "2" | "3";
 }
 
-const columnsProps = Astro.props as Record<string, unknown>;
-
-validateNoUnknownProps(
-  "Columns",
-  columnsProps,
-  ["columns"],
-  Astro.url.pathname,
-);
-
-validateProps(
-  "Columns",
-  columnsProps,
-  {
-    columns: { type: ["number", "string"] },
-  },
-  Astro.url.pathname,
-);
+const columnsProps = Astro.props as Props;
 
-function normalizeColumns(value: unknown): 2 | 3 {
+function normalizeColumns(value: Props["columns"]): 2 | 3 {
   if (value === undefined) return 2;
-
-  const normalizedValue =
-    typeof value === "number"
-      ? value
-      : typeof value === "string"
-        ? Number(value.trim())
-        : Number.NaN;
-
-  if (normalizedValue !== 2 && normalizedValue !== 3) {
-    throw new Error(
-      `[USER_ERROR]: <Columns>: Invalid prop "columns": expected 2 or 3 (in ${Astro.url.pathname})`,
-    );
-  }
-
-  return normalizedValue;
-}
-
-function getSourceFile(pathname: string): string {
-  const pagePath = pathname
-    .replace(/^\/documentation\//, "")
-    .replace(/\/$/, "");
-  return `${pagePath}.mdx`;
-}
-
-function createColumnsError(message: string): Error {
-  return new Error(
-    `[USER_ERROR]: <Columns>: ${message} (in ${getSourceFile(Astro.url.pathname)})`,
-  );
-}
-
-const VOID_ELEMENTS = new Set([
-  "area",
-  "base",
-  "br",
-  "col",
-  "embed",
-  "hr",
-  "img",
-  "input",
-  "link",
-  "meta",
-  "param",
-  "source",
-  "track",
-  "wbr",
-]);
-
-function getTopLevelElements(html: string): Array<{
-  tagName: string;
-  attributes: string;
-}> {
-  const elements: Array<{ tagName: string; attributes: string }> = [];
-  let depth = 0;
-  let index = 0;
-
-  while (index < html.length) {
-    const nextTagStart = html.indexOf("<", index);
-    if (nextTagStart === -1) break;
-
-    if (html.startsWith("<!--", nextTagStart)) {
-      const commentEnd = html.indexOf("-->", nextTagStart + 4);
-      index = commentEnd === -1 ? html.length : commentEnd + 3;
-      continue;
-    }
-
-    const tagEnd = html.indexOf(">", nextTagStart + 1);
-    if (tagEnd === -1) break;
-
-    const rawTag = html.slice(nextTagStart + 1, tagEnd).trim();
-    index = tagEnd + 1;
-
-    if (!rawTag || rawTag.startsWith("!") || rawTag.startsWith("?")) {
-      continue;
-    }
-
-    if (rawTag.startsWith("/")) {
-      depth = Math.max(0, depth - 1);
-      continue;
-    }
-
-    const tagMatch = rawTag.match(/^([A-Za-z][\w:-]*)([\s\S]*)$/);
-    if (!tagMatch) continue;
-
-    const tagName = tagMatch[1].toLowerCase();
-    const attributes = tagMatch[2] ?? "";
-    const isSelfClosing = /\/\s*$/.test(rawTag);
-
-    if (depth === 0) {
-      elements.push({ tagName, attributes });
-    }
-
-    if (!isSelfClosing && !VOID_ELEMENTS.has(tagName)) {
-      depth += 1;
-    }
-  }
-
-  return elements;
-}
-
-function isColumnElement(element: { tagName: string; attributes: string }) {
-  return (
-    element.tagName === "div" &&
-    /(?:^|\s)data-rd-column(?:\s|=|$)/.test(element.attributes)
-  );
-}
-
-function validateColumnChildren(html: string, expectedColumns: 2 | 3): void {
-  const topLevelElements = getTopLevelElements(html);
-  const columnElements = topLevelElements.filter(isColumnElement);
-
-  if (topLevelElements.length === 0) {
-    throw createColumnsError(
-      `Must contain exactly ${expectedColumns} <Column> children.`,
-    );
-  }
-
-  if (columnElements.length !== topLevelElements.length) {
-    throw createColumnsError(
-      "Only direct <Column> children are allowed. Wrap each column's content in <Column>.",
-    );
-  }
-
-  if (columnElements.length !== expectedColumns) {
-    throw createColumnsError(
-      `Expected exactly ${expectedColumns} <Column> children for columns={${expectedColumns}}, but found ${columnElements.length}. Render another <Columns> block for a new row.`,
-    );
-  }
+  return Number(value) === 3 ? 3 : 2;
 }
 
 const columns = normalizeColumns(columnsProps.columns);
 const html = Astro.slots.has("default")
   ? await Astro.slots.render("default")
   : "";
-
-validateColumnChildren(html, columns);
 ---
 
 <div class="rd-prose-block rd-columns-container w-full max-w-none!">

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

@@ -1,5 +1,4 @@
 ---
-import { validateNoUnknownProps, validateProps } from "../../lib/component-error";
 import { resolveStaticAssetUrl } from "../../lib/static-asset-url";
 
 interface Props {
@@ -7,34 +6,22 @@ interface Props {
   alt?: string;
   title?: string;
   width?: number | string;
+  align?: "left" | "center" | "right";
   zoom?: boolean;
 }
 
 const imageProps = Astro.props as Record<string, unknown>;
-
-validateNoUnknownProps(
-  "Image",
-  imageProps,
-  ["src", "alt", "title", "width", "zoom"],
-  Astro.url.pathname,
-);
-
-validateProps(
-  "Image",
-  imageProps,
-  {
-    src: { required: true, type: ["string", "object"] },
-    alt: { type: "string" },
-    title: { type: "string" },
-    width: { type: ["number", "string"] },
-    zoom: { type: "boolean" },
-  },
-  Astro.url.pathname,
-);
-
-const { src, alt, title, width, zoom = true } = imageProps as Props;
+const {
+  src,
+  alt,
+  title,
+  width,
+  align = "center",
+  zoom = true,
+} = imageProps as Props;
 const zoomEnabled = zoom !== false;
 const rawWidth = width;
+const imageAlign = align === "left" || align === "right" ? align : "center";
 
 function normalizeImageSource(value: Props["src"]): {
   light: string;
@@ -51,12 +38,6 @@ function normalizeImageSource(value: Props["src"]): {
 }
 
 const normalizedSource = normalizeImageSource(src);
-if (!normalizedSource.light.trim()) {
-  throw new Error(
-    `[USER_ERROR]: <Image>: Invalid prop "src": object form requires a non-empty "light" string (in ${Astro.url.pathname})`,
-  );
-}
-
 const resolvedLightSrc = resolveStaticAssetUrl(normalizedSource.light);
 const resolvedDarkSrc =
   typeof normalizedSource.dark === "string" && normalizedSource.dark.trim()
@@ -131,6 +112,12 @@ const hasCustomImageWidth = isConstrainedWidthValue(rawWidth);
 const contentWidthStyle = hasCustomImageWidth
   ? `width: ${toCssWidthValue(rawWidth) ?? "auto"};`
   : undefined;
+const constrainedWidthAlignmentClass =
+  imageAlign === "left"
+    ? "w-fit max-w-full ml-0 mr-auto"
+    : imageAlign === "right"
+      ? "w-fit max-w-full ml-auto mr-0"
+      : "w-fit max-w-full mx-auto";
 
 const slotCaptionHtml = Astro.slots.has("default")
   ? (await Astro.slots.render("default")).trim()
@@ -141,7 +128,7 @@ const hasCaption = slotCaptionHtml.length > 0;
 <figure
   class:list={[
     "rd-prose-block p-1.5 pb-1 xs:pb-1.5 group border-[0.5px] border-neutral-900/8 dark:border-white/6 bg-(--rd-code-surface) rounded-2xl shadow-[0_.5px_1px_rgba(0,0,0,0.15),0_5px_12px_-8px_rgba(0,0,0,0.08)] dark:shadow-[0_-.5px_1px_rgba(255,255,255,0.15),0_5px_12px_-8px_rgba(0,0,0,0.2)]",
-    hasCustomImageWidth ? "w-fit max-w-full mx-auto" : "w-full",
+    hasCustomImageWidth ? constrainedWidthAlignmentClass : "w-full",
   ]}
   x-data="{ 
     open: false, 

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

@@ -1,21 +1,11 @@
 ---
 import { Icon } from "astro-icon/components";
-import { validateProps } from "../../lib/component-error";
 
 interface Props {
   title: string;
 }
 
 const { title } = Astro.props;
-
-validateProps(
-  "Step",
-  { title },
-  {
-    title: { required: true, type: "string" },
-  },
-  Astro.url.pathname,
-);
 ---
 
 <div

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

@@ -1,21 +1,9 @@
 ---
-import { validateProps, validateRequired } from "../../lib/component-error";
-
 interface Props {
   label: string;
   icon?: string;
 }
 const { label, icon } = Astro.props;
-
-validateProps(
-  "Tab",
-  { label, icon },
-  {
-    label: { required: true, type: "string" },
-    icon: { type: "string" },
-  },
-  Astro.url.pathname
-);
 ---
 
 <section data-label={label} data-icon={icon || ""}>

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

@@ -16,13 +16,6 @@ while ((match = tabRegex.exec(html)) !== null) {
   icons.push(iconMatch?.[1] ?? "");
   tabContents.push(match[4]);
 }
-
-if (labels.length === 0) {
-  const pagePath = Astro.url.pathname.replace(/^\/documentation\//, "").replace(/\/$/, "");
-  throw new Error(
-    `[USER_ERROR]: <Tabs>: Must contain at least two <Tab> children (in ${pagePath}.mdx)`
-  );
-}
 ---
 
 <div x-data="{
@@ -166,7 +159,7 @@ class="rd-prose-block">
         type="button"
         x-ref={`tab-${index}`}
         @click={`selectTab(${index})`}
-        class="relative flex h-[32px] w-full min-w-0 max-w-full cursor-pointer items-center gap-2 px-3 text-sm font-medium transition-colors duration-200"
+        class="relative flex h-[32px] w-full min-w-0 max-w-full cursor-pointer items-center justify-center gap-2 px-3 text-sm font-medium transition-colors duration-200"
         style={index === 0 ? "" : ""}
         class:list={[index === 0 ? "text-foreground" : "text-muted-foreground"]}
         :class={`{
@@ -175,7 +168,7 @@ class="rd-prose-block">
       }`}
       >
         {icons[index] && <Icon name={icons[index]} class="size-4 shrink-0" />}
-        <span class="min-w-0 flex-1 truncate" title={label}>{label}</span>
+        <span class="min-w-0 truncate" title={label}>{label}</span>
       </button>
     </li>
     )) }

package/template/src/content.config.ts

@@ -1,6 +1,6 @@
 import { defineCollection } from "astro:content";
 import { glob } from "astro/loaders";
-import { docsSchema } from "./lib/frontmatter-schema";
+import { docsSchema } from "radiant-docs-validator/frontmatter-schema";
 
 const docs = defineCollection({
   // Load Markdown and MDX files from src/content/docs