@aravindc26/velu 0.9.1 → 0.11.0

package/src/themes.ts

@@ -1,27 +1,5 @@
 // ── Types ────────────────────────────────────────────────────────────────────
 
-interface ColorSet {
-  accentLow: string;
-  accent: string;
-  accentHigh: string;
-  white: string;
-  gray1: string;
-  gray2: string;
-  gray3: string;
-  gray4: string;
-  gray5: string;
-  gray6: string;
-  gray7: string;
-  black: string;
-}
-
-interface ThemePreset {
-  dark: ColorSet;
-  light: ColorSet;
-  font?: string;
-  fontMono?: string;
-}
-
 interface VeluColors {
   primary?: string;
   light?: string;
@@ -41,6 +19,42 @@ interface ThemeConfig {
   styling?: VeluStyling;
 }
 
+const FUMADOCS_THEMES = [
+  "neutral",
+  "black",
+  "vitepress",
+  "dusk",
+  "catppuccin",
+  "ocean",
+  "emerald",
+  "ruby",
+  "purple",
+  "solar",
+  "aspen",
+] as const;
+
+type FumadocsTheme = (typeof FUMADOCS_THEMES)[number];
+
+const LEGACY_THEME_ALIASES: Record<string, FumadocsTheme> = {
+  violet: "purple",
+  maple: "catppuccin",
+  palm: "ocean",
+  willow: "neutral",
+  linden: "emerald",
+  almond: "solar",
+  aspen: "aspen",
+};
+
+function resolveThemeName(theme?: string): FumadocsTheme {
+  if (!theme) return "neutral";
+
+  if (FUMADOCS_THEMES.includes(theme as FumadocsTheme)) {
+    return theme as FumadocsTheme;
+  }
+
+  return LEGACY_THEME_ALIASES[theme] || "neutral";
+}
+
 // ── Color utilities ──────────────────────────────────────────────────────────
 
 function hexToRgb(hex: string): [number, number, number] {
@@ -72,7 +86,10 @@ function mixColors(hex1: string, hex2: string, weight: number): string {
   );
 }
 
-function deriveAccentPalette(primary: string): { dark: Pick<ColorSet, "accentLow" | "accent" | "accentHigh">; light: Pick<ColorSet, "accentLow" | "accent" | "accentHigh"> } {
+function deriveAccentPalette(primary: string): {
+  dark: { accentLow: string; accent: string; accentHigh: string };
+  light: { accentLow: string; accent: string; accentHigh: string };
+} {
   return {
     dark: {
       accentLow: mixColors(primary, "#000000", 0.3),
@@ -87,193 +104,6 @@ function deriveAccentPalette(primary: string): { dark: Pick<ColorSet, "accentLow
   };
 }
 
-// ── Gray palettes ────────────────────────────────────────────────────────────
-
-const GRAY_SLATE = {
-  dark: {
-    white: "#ffffff",
-    gray1: "#eceef2",
-    gray2: "#c0c2c7",
-    gray3: "#888b96",
-    gray4: "#545861",
-    gray5: "#353841",
-    gray6: "#24272f",
-    gray7: "#17181c",
-    black: "#13141a",
-  },
-  light: {
-    white: "#13141a",
-    gray1: "#17181c",
-    gray2: "#24272f",
-    gray3: "#545861",
-    gray4: "#888b96",
-    gray5: "#c0c2c7",
-    gray6: "#eceef2",
-    gray7: "#f5f6f8",
-    black: "#ffffff",
-  },
-};
-
-const GRAY_ZINC = {
-  dark: {
-    white: "#ffffff",
-    gray1: "#ececef",
-    gray2: "#bfc0c4",
-    gray3: "#878890",
-    gray4: "#53545c",
-    gray5: "#34353b",
-    gray6: "#23242a",
-    gray7: "#17171a",
-    black: "#121214",
-  },
-  light: {
-    white: "#121214",
-    gray1: "#17171a",
-    gray2: "#23242a",
-    gray3: "#53545c",
-    gray4: "#878890",
-    gray5: "#bfc0c4",
-    gray6: "#ececef",
-    gray7: "#f5f5f7",
-    black: "#ffffff",
-  },
-};
-
-const GRAY_STONE = {
-  dark: {
-    white: "#ffffff",
-    gray1: "#eeeceb",
-    gray2: "#c3bfbb",
-    gray3: "#8c8680",
-    gray4: "#585550",
-    gray5: "#383532",
-    gray6: "#272421",
-    gray7: "#1a1816",
-    black: "#141210",
-  },
-  light: {
-    white: "#141210",
-    gray1: "#1a1816",
-    gray2: "#272421",
-    gray3: "#585550",
-    gray4: "#8c8680",
-    gray5: "#c3bfbb",
-    gray6: "#eeeceb",
-    gray7: "#f7f6f5",
-    black: "#ffffff",
-  },
-};
-
-// ── Theme presets ────────────────────────────────────────────────────────────
-
-const THEMES: Record<string, ThemePreset> = {
-  violet: {
-    dark: {
-      accentLow: "#1e1b4b",
-      accent: "#818cf8",
-      accentHigh: "#e0e7ff",
-      ...GRAY_SLATE.dark,
-    },
-    light: {
-      accentLow: "#e0e7ff",
-      accent: "#4f46e5",
-      accentHigh: "#1e1b4b",
-      ...GRAY_SLATE.light,
-    },
-  },
-
-  maple: {
-    dark: {
-      accentLow: "#2e1065",
-      accent: "#a78bfa",
-      accentHigh: "#ede9fe",
-      ...GRAY_ZINC.dark,
-    },
-    light: {
-      accentLow: "#ede9fe",
-      accent: "#7c3aed",
-      accentHigh: "#2e1065",
-      ...GRAY_ZINC.light,
-    },
-  },
-
-  palm: {
-    dark: {
-      accentLow: "#0c2d44",
-      accent: "#38bdf8",
-      accentHigh: "#e0f2fe",
-      ...GRAY_SLATE.dark,
-    },
-    light: {
-      accentLow: "#e0f2fe",
-      accent: "#0369a1",
-      accentHigh: "#0c2d44",
-      ...GRAY_SLATE.light,
-    },
-  },
-
-  willow: {
-    dark: {
-      accentLow: "#292524",
-      accent: "#a8a29e",
-      accentHigh: "#fafaf9",
-      ...GRAY_STONE.dark,
-    },
-    light: {
-      accentLow: "#f5f5f4",
-      accent: "#57534e",
-      accentHigh: "#1c1917",
-      ...GRAY_STONE.light,
-    },
-  },
-
-  linden: {
-    dark: {
-      accentLow: "#052e16",
-      accent: "#4ade80",
-      accentHigh: "#dcfce7",
-      ...GRAY_ZINC.dark,
-    },
-    light: {
-      accentLow: "#dcfce7",
-      accent: "#16a34a",
-      accentHigh: "#052e16",
-      ...GRAY_ZINC.light,
-    },
-    font: "'JetBrains Mono', 'Fira Code', 'Courier New', monospace",
-  },
-
-  almond: {
-    dark: {
-      accentLow: "#451a03",
-      accent: "#fbbf24",
-      accentHigh: "#fef3c7",
-      ...GRAY_STONE.dark,
-    },
-    light: {
-      accentLow: "#fef3c7",
-      accent: "#b45309",
-      accentHigh: "#451a03",
-      ...GRAY_STONE.light,
-    },
-  },
-
-  aspen: {
-    dark: {
-      accentLow: "#1e1b4b",
-      accent: "#818cf8",
-      accentHigh: "#e0e7ff",
-      ...GRAY_SLATE.dark,
-    },
-    light: {
-      accentLow: "#e0e7ff",
-      accent: "#4f46e5",
-      accentHigh: "#1e1b4b",
-      ...GRAY_SLATE.light,
-    },
-  },
-};
-
 // ── CSS generator ────────────────────────────────────────────────────────────
 
 function textColorFor(hex: string): string {
@@ -283,67 +113,44 @@ function textColorFor(hex: string): string {
 }
 
 function generateThemeCss(config: ThemeConfig): string {
-  const themeName = config.theme || "violet";
-  const preset = THEMES[themeName] || THEMES["violet"];
+  const themeName = resolveThemeName(config.theme);
 
-  const darkColors: ColorSet = { ...preset.dark };
-  const lightColors: ColorSet = { ...preset.light };
+  const lines: string[] = [];
+  lines.push(`/* Velu Theme: ${themeName} */`);
+  lines.push(`@import 'fumadocs-ui/css/${themeName}.css';`);
+  lines.push("");
 
-  // Apply color overrides
+  // Apply accent overrides on top of selected Fumadocs theme.
   if (config.colors) {
     const { primary, light, dark } = config.colors;
-
     const lightAccent = light || primary;
     const darkAccent = dark || primary;
 
     if (lightAccent) {
       const palette = deriveAccentPalette(lightAccent);
-      lightColors.accentLow = palette.light.accentLow;
-      lightColors.accent = palette.light.accent;
-      lightColors.accentHigh = palette.light.accentHigh;
+      lines.push(":root {");
+      lines.push(`  --color-fd-primary: ${palette.light.accent};`);
+      lines.push(`  --color-fd-primary-foreground: ${textColorFor(palette.light.accent)};`);
+      lines.push(`  --color-fd-accent: ${palette.light.accentLow};`);
+      lines.push(`  --color-fd-accent-foreground: ${textColorFor(palette.light.accentLow)};`);
+      lines.push(`  --color-fd-ring: ${palette.light.accent};`);
+      lines.push("}");
+      lines.push("");
     }
 
     if (darkAccent) {
       const palette = deriveAccentPalette(darkAccent);
-      darkColors.accentLow = palette.dark.accentLow;
-      darkColors.accent = palette.dark.accent;
-      darkColors.accentHigh = palette.dark.accentHigh;
+      lines.push(".dark {");
+      lines.push(`  --color-fd-primary: ${palette.dark.accent};`);
+      lines.push(`  --color-fd-primary-foreground: ${textColorFor(palette.dark.accent)};`);
+      lines.push(`  --color-fd-accent: ${palette.dark.accentLow};`);
+      lines.push(`  --color-fd-accent-foreground: ${textColorFor(palette.dark.accentLow)};`);
+      lines.push(`  --color-fd-ring: ${palette.dark.accent};`);
+      lines.push("}");
+      lines.push("");
     }
   }
 
-  const lines: string[] = [];
-  lines.push(`/* Velu Theme: ${themeName} */`);
-  lines.push("");
-
-  // Light mode (default)
-  lines.push(":root {");
-  lines.push(`  --color-fd-primary: ${lightColors.accent};`);
-  lines.push(`  --color-fd-primary-foreground: ${textColorFor(lightColors.accent)};`);
-  lines.push(`  --color-fd-accent: ${lightColors.accentLow};`);
-  lines.push(`  --color-fd-accent-foreground: ${textColorFor(lightColors.accentLow)};`);
-  lines.push(`  --color-fd-ring: ${lightColors.accent};`);
-  lines.push("}");
-
-  // Dark mode
-  lines.push("");
-  lines.push(".dark {");
-  lines.push(`  --color-fd-primary: ${darkColors.accent};`);
-  lines.push(`  --color-fd-primary-foreground: ${textColorFor(darkColors.accent)};`);
-  lines.push(`  --color-fd-accent: ${darkColors.accentLow};`);
-  lines.push(`  --color-fd-accent-foreground: ${textColorFor(darkColors.accentLow)};`);
-  lines.push(`  --color-fd-ring: ${darkColors.accent};`);
-  lines.push("}");
-
-  if (preset.font || preset.fontMono) {
-    lines.push("");
-  }
-  if (preset.font) {
-    lines.push(`body { font-family: ${preset.font}; }`);
-  }
-  if (preset.fontMono) {
-    lines.push(`code, pre, kbd, samp { font-family: ${preset.fontMono}; }`);
-  }
-
   if (config.appearance === "light") {
     lines.push("");
     lines.push("html { color-scheme: light; }");
@@ -357,7 +164,9 @@ function generateThemeCss(config: ThemeConfig): string {
 }
 
 function getThemeNames(): string[] {
-  return Object.keys(THEMES);
+  return [...FUMADOCS_THEMES];
 }
 
-export { generateThemeCss, getThemeNames, THEMES, ThemeConfig, VeluColors, VeluStyling };
+const THEMES = [...FUMADOCS_THEMES];
+
+export { generateThemeCss, getThemeNames, resolveThemeName, THEMES, ThemeConfig, VeluColors, VeluStyling };

package/src/validate.ts

@@ -2,23 +2,79 @@ import Ajv, { type AnySchema } from "ajv";
 import addFormats from "ajv-formats";
 import { readFileSync, existsSync } from "node:fs";
 import { resolve, join } from "node:path";
+import { normalizeConfigNavigation } from "./navigation-normalize.js";
+
+interface VeluSeparator {
+  separator: string;
+}
+
+interface VeluLink {
+  href: string;
+  label: string;
+  icon?: string;
+}
+
+interface VeluAnchor {
+  anchor: string;
+  href?: string;
+  icon?: string;
+  color?: {
+    light: string;
+    dark: string;
+  };
+  tabs?: VeluTab[];
+  hidden?: boolean;
+}
+
+interface VeluGlobalTab {
+  tab: string;
+  href: string;
+  icon?: string;
+}
 
 interface VeluGroup {
   group: string;
-  slug: string;
+  slug?: string;
   icon?: string;
   tag?: string;
   expanded?: boolean;
-  pages: (string | VeluGroup)[];
+  description?: string;
+  hidden?: boolean;
+  pages: (string | VeluGroup | VeluSeparator | VeluLink)[];
+}
+
+interface VeluMenuItem {
+  item: string;
+  icon?: string;
+  groups?: VeluGroup[];
+  pages?: (string | VeluSeparator | VeluLink)[];
 }
 
 interface VeluTab {
   tab: string;
-  slug: string;
+  slug?: string;
   icon?: string;
   href?: string;
-  pages?: string[];
+  pages?: (string | VeluSeparator | VeluLink)[];
   groups?: VeluGroup[];
+  menu?: VeluMenuItem[];
+}
+
+interface VeluLanguageNav {
+  language: string;
+  tabs: VeluTab[];
+}
+
+interface VeluProductNav {
+  product: string;
+  icon?: string;
+  tabs?: VeluTab[];
+  pages?: (string | VeluSeparator | VeluLink)[];
+}
+
+interface VeluVersionNav {
+  version: string;
+  tabs: VeluTab[];
 }
 
 interface VeluConfig {
@@ -28,7 +84,15 @@ interface VeluConfig {
   appearance?: "system" | "light" | "dark";
   styling?: { codeblocks?: { theme?: string | { light: string; dark: string } } };
   navigation: {
-    tabs: VeluTab[];
+    tabs?: VeluTab[];
+    languages?: VeluLanguageNav[];
+    products?: VeluProductNav[];
+    versions?: VeluVersionNav[];
+    anchors?: VeluAnchor[];
+    global?: {
+      anchors?: VeluAnchor[];
+      tabs?: VeluGlobalTab[];
+    };
   };
 }
 
@@ -37,22 +101,34 @@ function loadJson(filePath: string): unknown {
   return JSON.parse(raw);
 }
 
-function collectPages(config: VeluConfig): string[] {
+function isGroup(item: unknown): item is VeluGroup {
+  return typeof item === "object" && item !== null && "group" in item;
+}
+
+function isPageString(item: unknown): item is string {
+  return typeof item === "string";
+}
+
+function collectPagesFromTabs(tabs: VeluTab[]): string[] {
   const pages: string[] = [];
 
   function collectFromGroup(group: VeluGroup) {
     for (const item of group.pages) {
-      if (typeof item === "string") {
+      if (isPageString(item)) {
         pages.push(item);
-      } else {
+      } else if (isGroup(item)) {
         collectFromGroup(item);
       }
     }
   }
 
-  for (const tab of config.navigation.tabs) {
+  for (const tab of tabs) {
     if (tab.pages) {
-      pages.push(...tab.pages);
+      for (const item of tab.pages) {
+        if (isPageString(item)) {
+          pages.push(item);
+        }
+      }
     }
     if (tab.groups) {
       for (const group of tab.groups) {
@@ -64,6 +140,13 @@ function collectPages(config: VeluConfig): string[] {
   return pages;
 }
 
+function collectPages(config: VeluConfig): string[] {
+  const tabs = config.navigation.languages && config.navigation.languages.length > 0
+    ? config.navigation.languages.flatMap((lang) => lang.tabs)
+    : (config.navigation.tabs ?? []);
+  return collectPagesFromTabs(tabs);
+}
+
 function validateVeluConfig(docsDir: string, schemaPath: string): { valid: boolean; errors: string[] } {
   const errors: string[] = [];
 
@@ -77,13 +160,13 @@ function validateVeluConfig(docsDir: string, schemaPath: string): { valid: boole
   }
 
   const schema = loadJson(schemaPath) as AnySchema;
-  const config = loadJson(configPath) as VeluConfig;
+  const rawConfig = loadJson(configPath) as VeluConfig;
 
   // Validate against JSON schema
   const ajv = new Ajv({ allErrors: true, strict: false });
   addFormats(ajv);
   const validate = ajv.compile(schema);
-  const schemaValid = validate(config);
+  const schemaValid = validate(rawConfig);
 
   if (!schemaValid && validate.errors) {
     for (const err of validate.errors) {
@@ -91,6 +174,8 @@ function validateVeluConfig(docsDir: string, schemaPath: string): { valid: boole
     }
   }
 
+  const config = normalizeConfigNavigation(rawConfig);
+
   // Validate that all referenced .md files exist
   const pages = collectPages(config);
   for (const page of pages) {
@@ -101,15 +186,28 @@ function validateVeluConfig(docsDir: string, schemaPath: string): { valid: boole
   }
 
   // Check for duplicate page references
-  const seen = new Set<string>();
-  for (const page of pages) {
-    if (seen.has(page)) {
-      errors.push(`Duplicate page reference: ${page}`);
+  if (config.navigation.languages && config.navigation.languages.length > 0) {
+    for (const lang of config.navigation.languages) {
+      const seen = new Set<string>();
+      const langPages = collectPagesFromTabs(lang.tabs);
+      for (const page of langPages) {
+        if (seen.has(page)) {
+          errors.push(`Duplicate page reference in language '${lang.language}': ${page}`);
+        }
+        seen.add(page);
+      }
+    }
+  } else {
+    const seen = new Set<string>();
+    for (const page of pages) {
+      if (seen.has(page)) {
+        errors.push(`Duplicate page reference: ${page}`);
+      }
+      seen.add(page);
     }
-    seen.add(page);
   }
 
   return { valid: errors.length === 0, errors };
 }
 
-export { validateVeluConfig, collectPages, VeluConfig, VeluGroup, VeluTab };
+export { validateVeluConfig, collectPages, VeluConfig, VeluGroup, VeluTab, VeluSeparator, VeluLink, VeluAnchor };