@aravindc26/velu 0.9.1 → 0.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aravindc26/velu",
-  "version": "0.9.1",
+  "version": "0.10.0",
   "description": "A modern documentation site generator powered by Markdown and JSON configuration",
   "type": "module",
   "license": "MIT",

package/schema/velu.schema.json

@@ -12,9 +12,9 @@
     },
     "theme": {
       "type": "string",
-      "description": "Named theme preset that controls the overall look and feel.",
-      "enum": ["violet", "maple", "palm", "willow", "linden", "almond", "aspen"],
-      "default": "violet"
+      "description": "Named theme preset that controls the overall look and feel. Supports Fumadocs presets and legacy Velu aliases.",
+      "enum": ["neutral", "black", "vitepress", "dusk", "catppuccin", "ocean", "emerald", "ruby", "purple", "solar", "aspen", "violet", "maple", "palm", "willow", "linden", "almond"],
+      "default": "neutral"
     },
     "colors": {
       "type": "object",

package/src/build.ts

@@ -1,7 +1,7 @@
 import { readFileSync, writeFileSync, mkdirSync, copyFileSync, cpSync, existsSync, rmSync } from "node:fs";
 import { join, dirname } from "node:path";
 import { fileURLToPath } from "node:url";
-import { generateThemeCss, type VeluColors, type VeluStyling } from "./themes.js";
+import { generateThemeCss, resolveThemeName, type VeluColors, type VeluStyling } from "./themes.js";
 
 // ── Engine directory (shipped with the CLI package) ──────────────────────────
 const __filename = fileURLToPath(import.meta.url);
@@ -219,12 +219,12 @@ function build(docsDir: string, outDir: string) {
     styling: config.styling,
   });
   writeFileSync(join(outDir, "app", "velu-theme.css"), themeCss, "utf-8");
-  console.log(`🎨 Generated theme: ${config.theme || "mint"}`);
+  console.log(`🎨 Generated theme: ${resolveThemeName(config.theme)}`);
 
   // ── 6. Generate index.mdx (dynamic — references first page) ──────────────
   writeFileSync(
     join(outDir, "content", "docs", "index.mdx"),
-    `---\ntitle: "Overview"\ndescription: Documentation powered by Velu + Fumadocs\n---\n\nimport { Card, Cards } from "fumadocs-ui/components/card"\nimport { Callout } from "fumadocs-ui/components/callout"\n\n<Callout type="info">\n  This site is powered by Velu + Fumadocs.\n</Callout>\n\n## Start here\n\n<Cards>\n  <Card\n    title="Read the docs"\n    href="/${firstPage}/"\n    description="Begin with the first page in your configured navigation."\n  />\n</Cards>\n`,
+    `---\ntitle: "Overview"\ndescription: Documentation powered by Velu\n---\n\nimport { Card, Cards } from "fumadocs-ui/components/card"\nimport { Callout } from "fumadocs-ui/components/callout"\n\n<Callout type="info">\n  Welcome to your documentation site.\n</Callout>\n\n## Start here\n\n<Cards>\n  <Card\n    title="Read the docs"\n    href="/${firstPage}/"\n    description="Begin with the first page in your configured navigation."\n  />\n</Cards>\n`,
     "utf-8"
   );
 

package/src/cli.ts

@@ -49,7 +49,7 @@ function init(targetDir: string) {
   // velu.json
   const config = {
     $schema: "https://raw.githubusercontent.com/aravindc26/velu/main/schema/velu.schema.json",
-    theme: "violet" as const,
+    theme: "neutral" as const,
     navigation: {
       tabs: [
         {

package/src/engine/_server.mjs

@@ -128,7 +128,7 @@ function writeMetaFiles(metaFiles) {
 function writeIndexPage(firstPage) {
   writeFileSync(
     join(contentDir, 'index.mdx'),
-    `---\ntitle: "Overview"\ndescription: Documentation powered by Velu + Fumadocs\n---\n\nimport { Card, Cards } from "fumadocs-ui/components/card"\nimport { Callout } from "fumadocs-ui/components/callout"\n\n<Callout type="info">\n  This site is powered by Velu + Fumadocs.\n</Callout>\n\n## Start here\n\n<Cards>\n  <Card\n    title="Read the docs"\n    href="/${firstPage}/"\n    description="Begin with the first page in your configured navigation."\n  />\n</Cards>\n`,
+    `---\ntitle: "Overview"\ndescription: Documentation powered by Velu\n---\n\nimport { Card, Cards } from "fumadocs-ui/components/card"\nimport { Callout } from "fumadocs-ui/components/callout"\n\n<Callout type="info">\n  Welcome to your documentation site.\n</Callout>\n\n## Start here\n\n<Cards>\n  <Card\n    title="Read the docs"\n    href="/${firstPage}/"\n    description="Begin with the first page in your configured navigation."\n  />\n</Cards>\n`,
     'utf-8'
   );
 }
@@ -244,7 +244,7 @@ const port = portIdx !== -1 ? parseInt(args[portIdx + 1], 10) : 4321;
 
 if (command === 'dev') {
   console.log('');
-  console.log('  \x1b[36mvelu\x1b[0m  fumadocs dev');
+  console.log('  \x1b[36mvelu\x1b[0m  dev server');
   console.log('');
   console.log('  watching for file changes...');
   startWatcher();

package/src/engine/app/(docs)/[[...slug]]/page.tsx

@@ -43,6 +43,9 @@ export default async function Page({ params }: PageProps) {
           />
         </DocsBody>
       </div>
+      <footer className="velu-footer">
+        Powered by <a href="https://getvelu.com" target="_blank" rel="noopener noreferrer">Velu</a>
+      </footer>
     </DocsPage>
   );
 }

package/src/engine/app/global.css

@@ -1,5 +1,4 @@
 @import 'tailwindcss';
-@import 'fumadocs-ui/css/neutral.css';
 @import 'fumadocs-ui/css/preset.css';
 @import './velu-theme.css';
 
@@ -19,3 +18,22 @@ body {
     --fd-toc-width: 268px;
   }
 }
+
+.velu-footer {
+  margin-top: 3rem;
+  padding-top: 1.5rem;
+  border-top: 1px solid var(--color-fd-border);
+  text-align: right;
+  font-size: 1.2rem;
+  color: var(--color-fd-muted-foreground);
+}
+
+.velu-footer a {
+  color: var(--color-fd-primary);
+  font-weight: 600;
+  text-decoration: none;
+}
+
+.velu-footer a:hover {
+  text-decoration: underline;
+}

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 };