@aravindc26/velu 0.11.4 → 0.11.6

package/package.json

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

package/src/cli.ts

@@ -1,5 +1,5 @@
 import { resolve, join, dirname, delimiter } from "node:path";
-import { existsSync, mkdirSync, writeFileSync, readdirSync, copyFileSync, cpSync, rmSync } from "node:fs";
+import { existsSync, mkdirSync, writeFileSync, readdirSync, copyFileSync, cpSync, rmSync, readFileSync } from "node:fs";
 import { spawn } from "node:child_process";
 import { fileURLToPath } from "node:url";
 
@@ -61,6 +61,11 @@ function init(targetDir: string) {
   const config = {
     $schema: "https://raw.githubusercontent.com/aravindc26/velu/main/schema/velu.schema.json",
     theme: "neutral" as const,
+    colors: {
+      primary: "#DC143C",
+      light: "#DC143C",
+      dark: "#DC143C",
+    },
     navigation: {
       tabs: [
         {
@@ -256,11 +261,103 @@ function exportMarkdownRoutes(outDir: string) {
   console.log(`📝 Exported ${copied} markdown files to static route paths`);
 }
 
+function collectStaticRoutePaths(distDir: string): string[] {
+  const routes = new Set<string>();
+
+  function walk(relDir: string) {
+    const absDir = join(distDir, relDir);
+    const entries = readdirSync(absDir, { withFileTypes: true });
+
+    for (const entry of entries) {
+      if (!entry.isDirectory()) continue;
+      const childRel = relDir ? join(relDir, entry.name) : entry.name;
+      if (existsSync(join(distDir, childRel, "index.html"))) {
+        const normalized = childRel.replace(/\\/g, "/").replace(/^\/+|\/+$/g, "");
+        if (
+          normalized.length > 0 &&
+          !normalized.startsWith("_next") &&
+          !normalized.startsWith("_not-found") &&
+          normalized !== "404" &&
+          !normalized.startsWith("pagefind")
+        ) {
+          routes.add(`/${normalized}`);
+        }
+      }
+      walk(childRel);
+    }
+  }
+
+  walk("");
+  return Array.from(routes).sort((a, b) => a.localeCompare(b));
+}
+
+function addStaticRouteCompatibility(outDir: string) {
+  const distDir = join(outDir, "dist");
+  if (!existsSync(distDir)) return;
+
+  const routes = collectStaticRoutePaths(distDir);
+  if (routes.length === 0) return;
+
+  let aliasCount = 0;
+  for (const route of routes) {
+    const rel = route.replace(/^\/+/, "");
+    const src = join(distDir, rel, "index.html");
+    const htmlAlias = join(distDir, `${rel}.html`);
+    if (existsSync(src) && !existsSync(htmlAlias)) {
+      copyFileSync(src, htmlAlias);
+      aliasCount += 1;
+    }
+  }
+
+  const fallbackPath = join(distDir, "404.html");
+  if (existsSync(fallbackPath)) {
+    const html = readFileSync(fallbackPath, "utf-8");
+    if (!html.includes("velu-noslash-fallback")) {
+      const script = [
+        '<script id="velu-noslash-fallback">',
+        "(function(){",
+        "  try {",
+        `    var routes = new Set(${JSON.stringify(routes)});`,
+        "    var path = (window.location && window.location.pathname ? window.location.pathname : '/').replace(/\\/+$/, '');",
+        "    if (!path || path === '/') return;",
+        "    if (/\\.[a-zA-Z0-9]+$/.test(path)) return;",
+        "    if (!routes.has(path)) return;",
+        "    var search = window.location.search || '';",
+        "    var hash = window.location.hash || '';",
+        "    window.location.replace(path + '/' + search + hash);",
+        "  } catch (_) {}",
+        "})();",
+        "</script>",
+      ].join("");
+      const patched = html.includes("</body>") ? html.replace("</body>", `${script}</body>`) : `${html}\n${script}\n`;
+      writeFileSync(fallbackPath, patched, "utf-8");
+    }
+  }
+
+  const redirectsPath = join(distDir, "_redirects");
+  const existingRedirects = existsSync(redirectsPath) ? readFileSync(redirectsPath, "utf-8") : "";
+  const existingLines = new Set(existingRedirects.split(/\r?\n/).map((line) => line.trim()).filter(Boolean));
+  const redirectLines = routes.map((route) => `${route}  ${route}/  301`);
+  let redirectAdded = 0;
+  for (const line of redirectLines) {
+    if (existingLines.has(line)) continue;
+    existingLines.add(line);
+    redirectAdded += 1;
+  }
+  if (redirectAdded > 0) {
+    const merged = Array.from(existingLines).join("\n") + "\n";
+    writeFileSync(redirectsPath, merged, "utf-8");
+  }
+
+  console.log(`🔁 Added static compatibility for ${routes.length} routes (${aliasCount} .html aliases, ${redirectAdded} redirects)`);
+}
+
 async function buildSite(docsDir: string) {
   const docsOutDir = await generateProject(docsDir);
   const runtimeOutDir = prepareRuntimeOutDir(docsOutDir);
   await buildStatic(runtimeOutDir, docsDir);
   exportMarkdownRoutes(runtimeOutDir);
+  addStaticRouteCompatibility(runtimeOutDir);
 
   if (!samePath(docsOutDir, runtimeOutDir)) {
     const docsDistDir = join(docsOutDir, "dist");

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

@@ -41,6 +41,26 @@ interface PageTreeFolderNode {
   children?: unknown[];
 }
 
+function withTrailingSlashUrl(url: string): string {
+  const trimmed = url.trim();
+  if (trimmed.length === 0) return trimmed;
+  if (/^(https?:|mailto:|tel:|#)/i.test(trimmed)) return trimmed;
+
+  const hashIndex = trimmed.indexOf('#');
+  const queryIndex = trimmed.indexOf('?');
+  const endIndex = [hashIndex, queryIndex].filter((index) => index >= 0).sort((a, b) => a - b)[0] ?? trimmed.length;
+  const path = trimmed.slice(0, endIndex);
+  const suffix = trimmed.slice(endIndex);
+
+  if (!path.startsWith('/')) return trimmed;
+  if (path === '/' || path.endsWith('/')) return `${path}${suffix}`;
+
+  const lastSegment = path.split('/').filter(Boolean).pop() ?? '';
+  if (lastSegment.includes('.')) return trimmed;
+
+  return `${path}/${suffix}`;
+}
+
 function resolveLocale(slugInput: string[] | undefined): string {
   const languages = getLanguages();
   const defaultLanguage = languages[0] ?? 'en';
@@ -122,6 +142,10 @@ function renderIconsInTree<T>(node: T, iconLibrary: 'fontawesome' | 'lucide' | '
       out[key] = <VeluIcon name={value} iconType={iconType} library={iconLibrary} fallback={false} />;
       continue;
     }
+    if (key === 'url' && typeof value === 'string') {
+      out[key] = withTrailingSlashUrl(value);
+      continue;
+    }
     out[key] = renderIconsInTree(value, iconLibrary);
   }
   return out as T;
@@ -347,12 +371,12 @@ export default async function SlugLayout({ children, params }: SlugLayoutProps)
         return {
           type: 'menu',
           text: tabText,
-          url: tab.url,
+          url: withTrailingSlashUrl(tab.url),
           active: 'nested-url',
           secondary: false,
           items: menuLinks.map((item) => ({
             text: item.text,
-            url: item.url,
+            url: withTrailingSlashUrl(item.url),
             active: 'nested-url',
           })),
         };
@@ -360,7 +384,7 @@ export default async function SlugLayout({ children, params }: SlugLayoutProps)
 
       return {
         text: tabText,
-        url: tab.url,
+        url: withTrailingSlashUrl(tab.url),
         active: 'nested-url',
         secondary: false,
       };

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

@@ -215,6 +215,13 @@ function normalizeDocPath(value: string): string {
   return collapsed;
 }
 
+function withTrailingSlashPath(path: string): string {
+  if (!path.startsWith('/')) return path;
+  if (path === '/' || path.endsWith('/')) return path;
+  if (/\.[a-zA-Z0-9]+$/.test(path)) return path;
+  return `${path}/`;
+}
+
 function toAbsoluteMetaUrl(origin: string, value: string): string {
   const trimmed = value.trim();
   if (!trimmed) return trimmed;
@@ -614,7 +621,7 @@ export default async function Page({ params }: PageProps) {
   const pageUrl = (typeof sourcePageUrl === 'string' && sourcePageUrl.trim())
     ? sourcePageUrl
     : (fallbackPath === '' ? '/' : fallbackPath);
-  const rssHref = `${pageUrl.replace(/\/$/, '') || ''}/rss.xml`;
+  const rssHref = `${withTrailingSlashPath(pageUrl).replace(/\/$/, '') || ''}/rss.xml`;
   const shouldReplaceTocWithApiExample = !hasExplicitApiRendering && Boolean(inlineApiDoc) && playgroundDisplay === 'interactive';
   const shouldShowOpenApiExampleInToc = !hasExplicitApiRendering && !parsedApiFrontmatter && Boolean(parsedOpenApiFrontmatter);
   const hasApiTocRail = shouldReplaceTocWithApiExample || shouldShowOpenApiExampleInToc;
@@ -741,7 +748,7 @@ export default async function Page({ params }: PageProps) {
           {(previousPage || nextPage) ? (
             <div className={['velu-page-nav-grid', previousPage && nextPage ? 'velu-page-nav-grid-two' : 'velu-page-nav-grid-one'].join(' ')}>
               {previousPage ? (
-                <a href={previousPage.url} className="velu-page-nav-card">
+                <a href={withTrailingSlashPath(previousPage.url)} className="velu-page-nav-card">
                   <p className="velu-page-nav-title">{previousPage.data.title}</p>
                   <p className="velu-page-nav-meta">
                     <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M15 18l-6-6 6-6" /></svg>
@@ -750,7 +757,7 @@ export default async function Page({ params }: PageProps) {
                 </a>
               ) : null}
               {nextPage ? (
-                <a href={nextPage.url} className="velu-page-nav-card velu-page-nav-card-next">
+                <a href={withTrailingSlashPath(nextPage.url)} className="velu-page-nav-card velu-page-nav-card-next">
                   <p className="velu-page-nav-title">{nextPage.data.title}</p>
                   <p className="velu-page-nav-meta velu-page-nav-meta-next">
                     <span>{nextPage.data.description ?? 'Next'}</span>

package/src/engine/app/page.tsx

@@ -37,7 +37,10 @@ function resolveDefaultDocsHref(): string {
   const defaultLanguage = getLanguages()[0] ?? 'en';
   const tree = source.getPageTree(defaultLanguage);
   const first = findFirstPageUrl(tree);
-  return first || '/';
+  if (!first || first === '/') return '/';
+  if (!first.startsWith('/')) return first;
+  if (first.endsWith('/')) return first;
+  return `${first}/`;
 }
 
 export default function HomePage() {

package/src/engine/components/lang-switcher.tsx

@@ -30,6 +30,12 @@ function nativeLabel(code: string): string {
   return code.toUpperCase();
 }
 
+function withTrailingSlashPath(path: string): string {
+  if (!path.startsWith('/')) return path;
+  if (path === '/' || path.endsWith('/')) return path;
+  return `${path}/`;
+}
+
 export function LanguageSwitcher({ languages, defaultLang }: { languages: string[]; defaultLang: string }) {
   const [open, setOpen] = useState(false);
   const [mounted, setMounted] = useState(false);
@@ -63,7 +69,7 @@ export function LanguageSwitcher({ languages, defaultLang }: { languages: string
     const newPath = code === defaultLang
       ? '/' + rest.join('/')
       : '/' + code + '/' + rest.join('/');
-    window.location.href = newPath;
+    window.location.href = withTrailingSlashPath(newPath);
   }
 
   return (

package/src/engine/components/page-feedback.tsx

@@ -5,6 +5,14 @@ import { ThumbsDown, ThumbsUp } from 'lucide-react';
 
 type Vote = 'yes' | 'no';
 
+const YES_OPTIONS = [
+  'The guide worked as expected',
+  'It was easy to find the information I needed',
+  'It was easy to understand the product and features',
+  'The documentation is up to date',
+  'Something else',
+];
+
 const NO_OPTIONS = [
   'Help me get started faster',
   'Make it easier to find what I\'m looking for',
@@ -19,7 +27,8 @@ export function PageFeedback() {
   const [details, setDetails] = useState('');
   const [email, setEmail] = useState('');
 
-  const showForm = vote === 'no';
+  const showForm = vote !== null;
+  const options = vote === 'yes' ? YES_OPTIONS : NO_OPTIONS;
   const showOptionalInputs = selectedReason === 'Something else';
 
   const onChooseVote = (value: Vote) => {
@@ -81,10 +90,12 @@ export function PageFeedback() {
 
       {showForm ? (
         <div className="velu-page-feedback-panel">
-          <h3 className="velu-page-feedback-panel-title">How can we improve our product?</h3>
+          <h3 className="velu-page-feedback-panel-title">
+            {vote === 'yes' ? 'Great! What worked best for you?' : 'How can we improve our product?'}
+          </h3>
 
           <div className="velu-page-feedback-options" role="radiogroup" aria-label="Feedback reasons">
-            {NO_OPTIONS.map((option) => {
+            {options.map((option) => {
               const checked = selectedReason === option;
               return (
                 <button

package/src/engine/components/product-switcher.tsx

@@ -14,6 +14,12 @@ function ChevronDownIcon() {
   );
 }
 
+function withTrailingSlashPath(path: string): string {
+  if (!path.startsWith('/')) return path;
+  if (path === '/' || path.endsWith('/')) return path;
+  return `${path}/`;
+}
+
 export function ProductSwitcher({
   products,
   iconLibrary,
@@ -50,12 +56,12 @@ export function ProductSwitcher({
       // Replace the product segment, keep tab/group/page segments
       const rest = segments.slice(1);
       if (rest.length > 0) {
-        window.location.href = '/' + [target.slug, ...rest].join('/');
+        window.location.href = withTrailingSlashPath('/' + [target.slug, ...rest].join('/'));
         return;
       }
     }
 
-    window.location.href = target.defaultPath;
+    window.location.href = withTrailingSlashPath(target.defaultPath);
   }
 
   return (

package/src/engine/components/version-switcher.tsx

@@ -22,6 +22,12 @@ function ChevronDownIcon() {
   );
 }
 
+function withTrailingSlashPath(path: string): string {
+  if (!path.startsWith('/')) return path;
+  if (path === '/' || path.endsWith('/')) return path;
+  return `${path}/`;
+}
+
 export function VersionSwitcher({ versions }: { versions: VeluVersionOption[] }) {
   const pathname = usePathname();
   const [open, setOpen] = useState(false);
@@ -55,12 +61,12 @@ export function VersionSwitcher({ versions }: { versions: VeluVersionOption[] })
       const targetTab = target.tabSlugs[index] ?? target.tabSlugs[0];
       if (targetTab) {
         const rest = segments.slice(1);
-        window.location.href = '/' + [targetTab, ...rest].join('/');
+        window.location.href = withTrailingSlashPath('/' + [targetTab, ...rest].join('/'));
         return;
       }
     }
 
-    window.location.href = target.defaultPath;
+    window.location.href = withTrailingSlashPath(target.defaultPath);
   }
 
   return (

package/src/engine/lib/velu.ts

@@ -211,6 +211,12 @@ function pageBasename(page: string): string {
   return parts[parts.length - 1] ?? page;
 }
 
+function withTrailingSlashPath(path: string): string {
+  if (!path.startsWith('/')) return path;
+  if (path === '/' || path.endsWith('/')) return path;
+  return `${path}/`;
+}
+
 function findFirstPageInGroup(group: VeluGroup): string | undefined {
   for (const item of group.pages) {
     if (typeof item === 'string') return item;
@@ -382,7 +388,7 @@ export function getProductOptions(): VeluProductOption[] {
       icon: product.icon,
       iconType: product.iconType,
       tabSlugs,
-      defaultPath,
+      defaultPath: withTrailingSlashPath(defaultPath),
     };
   });
 }
@@ -417,7 +423,7 @@ export function getVersionOptions(): VeluVersionOption[] {
       explicitDefault: version.default === true,
       versionParts: parseVersionParts(version.version),
       tabSlugs,
-      defaultPath,
+      defaultPath: withTrailingSlashPath(defaultPath),
       order: index,
     };
   });

package/src/engine/next.config.mjs

@@ -9,6 +9,10 @@ const withMDX = createMDX({
 const config = {
   reactStrictMode: false,
   output: process.env.NODE_ENV === 'production' ? 'export' : undefined,
+  // For static hosts without rewrite rules, emit directory routes
+  // (e.g. /docs/page/index.html) so extensionless URLs resolve.
+  trailingSlash: true,
+  skipTrailingSlashRedirect: true,
   distDir: 'dist',
   devIndicators: false,
   turbopack: {