radiant-docs 0.1.40 → 0.1.41

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

@@ -0,0 +1,80 @@
+import {
+  type AssistantChromeConfig,
+  getAssistantChromeConfig,
+} from "./assistant-chrome";
+import { withBasePath } from "./base-path";
+import { getAssistantLauncherIconConfig } from "./assistant-embed-script";
+import type { DocsConfig } from "./validation";
+
+export type AssistantPanelRuntimeConfig = {
+  apiPath: string;
+  docsTitle: string;
+  isChatAvailable: boolean;
+  canSendChatRequest: boolean;
+  launcherThemeColor: string;
+  launcherThemeColors: {
+    light: string;
+    dark: string;
+  };
+  launcherIconColor: string;
+  launcherIconColors: {
+    light: string;
+    dark: string;
+  };
+  launcherIconImageSrc: string;
+  emptyStateHeading?: string;
+  emptyStateQuestions?: string[];
+  devProxyToken?: string;
+  chrome: AssistantChromeConfig;
+};
+
+export function getAssistantPanelRuntimeConfig(
+  config: DocsConfig,
+): AssistantPanelRuntimeConfig {
+  const assistantLauncherIcon = getAssistantLauncherIconConfig(config);
+  const assistantConfig = config.assistant;
+  const parsedOrgTier = Number.parseInt(
+    (import.meta.env.ORG_TIER ?? "1").toString(),
+    10,
+  );
+  const orgTier =
+    Number.isFinite(parsedOrgTier) && parsedOrgTier > 0 ? parsedOrgTier : 1;
+  const isDev = import.meta.env.DEV;
+  const assistantDevHost = (import.meta.env.ASK_AI_DEV_HOST ?? "")
+    .toString()
+    .trim();
+  const assistantDevProxySecret = (
+    import.meta.env.ASK_AI_DEV_PROXY_SECRET ?? ""
+  )
+    .toString()
+    .trim();
+  const hasAssistantDevConfig =
+    assistantDevHost.length > 0 && assistantDevProxySecret.length > 0;
+  const isChatAvailable = isDev || orgTier >= 3;
+  const canSendChatRequest = isDev ? hasAssistantDevConfig : orgTier >= 3;
+  let apiPath = withBasePath("/_platform/assistant");
+
+  if (isDev && hasAssistantDevConfig) {
+    try {
+      apiPath = new URL("/_platform/assistant", assistantDevHost).toString();
+    } catch {
+      apiPath = withBasePath("/_platform/assistant");
+    }
+  }
+
+  return {
+    apiPath,
+    docsTitle: config.title,
+    isChatAvailable,
+    canSendChatRequest,
+    launcherThemeColor: assistantLauncherIcon.themeColor,
+    launcherThemeColors: assistantLauncherIcon.themeColors,
+    launcherIconColor: assistantLauncherIcon.color,
+    launcherIconColors: assistantLauncherIcon.colors,
+    launcherIconImageSrc: assistantLauncherIcon.imageSrc,
+    emptyStateHeading: assistantConfig?.heading,
+    emptyStateQuestions: assistantConfig?.questions,
+    devProxyToken: isDev ? assistantDevProxySecret : undefined,
+    chrome: getAssistantChromeConfig(config),
+  };
+}

package/template/src/lib/favicon.ts

@@ -0,0 +1,31 @@
+import fs from "node:fs";
+import path from "node:path";
+
+export type FaviconConfig = {
+  href: string;
+  type: string;
+};
+
+const DOCS_DIR = path.join(process.cwd(), "src/content/docs");
+const DEFAULT_FAVICON: FaviconConfig = {
+  href: "/favicon.svg",
+  type: "image/svg+xml",
+};
+
+const FAVICON_CANDIDATES: FaviconConfig[] = [
+  DEFAULT_FAVICON,
+  { href: "/favicon.ico", type: "image/x-icon" },
+  { href: "/favicon.png", type: "image/png" },
+  { href: "/favicon.webp", type: "image/webp" },
+  { href: "/favicon.avif", type: "image/avif" },
+  { href: "/favicon.jpg", type: "image/jpeg" },
+  { href: "/favicon.jpeg", type: "image/jpeg" },
+];
+
+export function getFaviconConfig(): FaviconConfig {
+  const favicon = FAVICON_CANDIDATES.find((candidate) =>
+    fs.existsSync(path.join(DOCS_DIR, candidate.href.replace(/^\/+/, ""))),
+  );
+
+  return favicon ?? DEFAULT_FAVICON;
+}

package/template/src/lib/theme-css.ts

@@ -0,0 +1,176 @@
+import colors from "tailwindcss/colors";
+import {
+  DEFAULT_THEME_COLOR_DARK,
+  DEFAULT_THEME_COLOR_LIGHT,
+  type BaseColorOption,
+  type DocsConfig,
+} from "./validation";
+
+const neutralColorShades = [
+  "50",
+  "100",
+  "200",
+  "300",
+  "400",
+  "500",
+  "600",
+  "700",
+  "800",
+  "900",
+  "950",
+] as const;
+type NeutralColorShade = (typeof neutralColorShades)[number];
+
+const paletteColors = colors as unknown as Record<
+  string,
+  Record<NeutralColorShade, string>
+>;
+
+function normalizeHexColorToRgb(
+  hexColor: string,
+): { r: number; g: number; b: number } | null {
+  const normalized = hexColor.replace("#", "").trim();
+  if (/^[a-fA-F0-9]{3,4}$/.test(normalized)) {
+    const [r, g, b] = normalized.split("");
+    if (!r || !g || !b) return null;
+    return {
+      r: Number.parseInt(`${r}${r}`, 16),
+      g: Number.parseInt(`${g}${g}`, 16),
+      b: Number.parseInt(`${b}${b}`, 16),
+    };
+  }
+
+  if (/^[a-fA-F0-9]{6,8}$/.test(normalized)) {
+    return {
+      r: Number.parseInt(normalized.slice(0, 2), 16),
+      g: Number.parseInt(normalized.slice(2, 4), 16),
+      b: Number.parseInt(normalized.slice(4, 6), 16),
+    };
+  }
+
+  return null;
+}
+
+function getOklabLightness(color: string): number | null {
+  const match = color
+    .trim()
+    .match(/^okl(?:ab|ch)\(\s*([+-]?(?:\d+\.?\d*|\.\d+))(%?)/i);
+  if (!match?.[1]) return null;
+
+  const lightness = Number.parseFloat(match[1]);
+  if (!Number.isFinite(lightness)) return null;
+
+  const normalizedLightness =
+    match[2] === "%" || lightness > 1 ? lightness / 100 : lightness;
+  return Math.min(Math.max(normalizedLightness, 0), 1);
+}
+
+export function getThemeForegroundColor(
+  color: string,
+  darkForeground = "#111827",
+): string {
+  const rgb = normalizeHexColorToRgb(color);
+  const oklabLightness = getOklabLightness(color);
+  if (!rgb && oklabLightness !== null) {
+    return oklabLightness > 0.6 ? darkForeground : "#ffffff";
+  }
+
+  if (!rgb) return "#ffffff";
+
+  const toLinear = (channel: number): number => {
+    const normalized = channel / 255;
+    return normalized <= 0.03928
+      ? normalized / 12.92
+      : ((normalized + 0.055) / 1.055) ** 2.4;
+  };
+
+  const luminance =
+    0.2126 * toLinear(rgb.r) +
+    0.7152 * toLinear(rgb.g) +
+    0.0722 * toLinear(rgb.b);
+  return luminance > 0.45 ? darkForeground : "#ffffff";
+}
+
+function getThemeColorVariables(themeColor: string): string[] {
+  const foreground = getThemeForegroundColor(themeColor);
+  const iconFilter = foreground === "#ffffff" ? "invert(1)" : "none";
+
+  return [
+    `--color-theme: ${themeColor};`,
+    `--color-theme-foreground: ${foreground};`,
+    `--color-theme-icon-filter: ${iconFilter};`,
+    "--color-theme-top: color-mix(in oklab, var(--color-theme) 88%, white);",
+    "--color-theme-bottom: color-mix(in oklab, var(--color-theme) 90%, black);",
+  ];
+}
+
+function getNeutralPaletteVariables(baseColor: BaseColorOption): string[] {
+  const palette = paletteColors[baseColor] ?? paletteColors.neutral;
+  return [
+    `--color-neutral: ${palette["500"]};`,
+    ...neutralColorShades.map(
+      (shade) => `--color-neutral-${shade}: ${palette[shade]};`,
+    ),
+  ];
+}
+
+export function getDocsBaseColorShade(
+  theme: DocsConfig["theme"],
+  mode: "light" | "dark",
+  shade: NeutralColorShade,
+): string {
+  const themeBaseColor = theme?.baseColor ?? "neutral";
+  const baseColor: BaseColorOption =
+    typeof themeBaseColor === "string" ? themeBaseColor : themeBaseColor[mode];
+  const palette = paletteColors[baseColor] ?? paletteColors.neutral;
+  return palette[shade];
+}
+
+export function getDocsLightBaseColorShade(
+  theme: DocsConfig["theme"],
+  shade: NeutralColorShade,
+): string {
+  return getDocsBaseColorShade(theme, "light", shade);
+}
+
+export function getDocsDarkBaseColorShade(
+  theme: DocsConfig["theme"],
+  shade: NeutralColorShade,
+): string {
+  return getDocsBaseColorShade(theme, "dark", shade);
+}
+
+export function getDocsThemeCss(theme: DocsConfig["theme"]): string {
+  const themeBaseColor = theme?.baseColor ?? "neutral";
+  const themeThemeColor = theme?.themeColor;
+  const lightBaseColor: BaseColorOption =
+    typeof themeBaseColor === "string" ? themeBaseColor : themeBaseColor.light;
+  const darkBaseColor: BaseColorOption =
+    typeof themeBaseColor === "string" ? themeBaseColor : themeBaseColor.dark;
+  const lightThemeColor =
+    typeof themeThemeColor === "string"
+      ? themeThemeColor
+      : (themeThemeColor?.light ?? DEFAULT_THEME_COLOR_LIGHT);
+  const darkThemeColor =
+    typeof themeThemeColor === "string"
+      ? themeThemeColor
+      : (themeThemeColor?.dark ?? DEFAULT_THEME_COLOR_DARK);
+
+  const lightNeutralVariables = getNeutralPaletteVariables(lightBaseColor);
+  const darkNeutralVariables = getNeutralPaletteVariables(darkBaseColor);
+  const lightThemeColorVariables = getThemeColorVariables(lightThemeColor);
+  const darkThemeColorVariables = getThemeColorVariables(darkThemeColor);
+
+  return [
+    "html[data-theme='light'], html:not(.dark):not([data-theme='dark']) {",
+    ...[...lightNeutralVariables, ...lightThemeColorVariables].map(
+      (declaration) => `  ${declaration.replace(/;$/, " !important;")}`,
+    ),
+    "}",
+    "html.dark, html[data-theme='dark'] {",
+    ...[...darkNeutralVariables, ...darkThemeColorVariables].map(
+      (declaration) => `  ${declaration.replace(/;$/, " !important;")}`,
+    ),
+    "}",
+  ].join("\n");
+}