@aravindc26/velu 0.10.0 → 0.11.0

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

@@ -0,0 +1,87 @@
+import type { ReactNode } from 'react';
+import { DocsLayout } from 'fumadocs-ui/layouts/docs';
+import { baseOptions } from '@/lib/layout.shared';
+import { source } from '@/lib/source';
+import { getLanguages, getVersionOptions, getProductOptions, type VeluVersionOption, type VeluProductOption } from '@/lib/velu';
+import { SidebarLinks } from '@/components/sidebar-links';
+import { ProductSwitcher } from '@/components/product-switcher';
+
+interface LayoutParams {
+  slug?: string[];
+}
+
+interface SlugLayoutProps {
+  children: ReactNode;
+  params: Promise<LayoutParams>;
+}
+
+function resolveLocale(slugInput: string[] | undefined): string {
+  const languages = getLanguages();
+  const defaultLanguage = languages[0] ?? 'en';
+  const slug = slugInput ?? [];
+  const firstSeg = slug[0];
+
+  return languages.includes(firstSeg ?? '') ? firstSeg! : defaultLanguage;
+}
+
+function resolveCurrentVersion(slugInput: string[] | undefined, versions: VeluVersionOption[]): VeluVersionOption | undefined {
+  if (versions.length === 0) return undefined;
+  const firstSeg = (slugInput ?? [])[0] ?? '';
+  return versions.find((v) => v.slug === firstSeg) ?? versions.find((v) => v.isDefault) ?? versions[0];
+}
+
+function filterTreeBySlugPrefix<T extends { children?: unknown[] }>(tree: T, prefix?: string): T {
+  if (!prefix) return tree;
+
+  const children = Array.isArray(tree.children) ? tree.children : [];
+
+  const filtered = children.filter((node) => {
+    if (typeof node !== 'object' || node === null) return false;
+    const entry = node as { url?: unknown; path?: unknown; $ref?: { metaFile?: unknown; file?: unknown } };
+    const candidates = [entry.url, entry.path, entry.$ref?.metaFile, entry.$ref?.file]
+      .filter((value): value is string => typeof value === 'string');
+    return candidates.some((value) => value.includes(`${prefix}/`));
+  });
+
+  if (filtered.length === 0) return tree;
+  return { ...tree, children: filtered } as T;
+}
+
+function resolveCurrentProduct(slugInput: string[] | undefined, products: VeluProductOption[]): VeluProductOption | undefined {
+  if (products.length === 0) return undefined;
+  const firstSeg = (slugInput ?? [])[0] ?? '';
+  return products.find((p) => p.slug === firstSeg) ?? products[0];
+}
+
+export default async function SlugLayout({ children, params }: SlugLayoutProps) {
+  const resolvedParams = await params;
+  const locale = resolveLocale(resolvedParams.slug);
+  const versions = getVersionOptions();
+  const products = getProductOptions();
+  const currentVersion = resolveCurrentVersion(resolvedParams.slug, versions);
+  const currentProduct = resolveCurrentProduct(resolvedParams.slug, products);
+
+  const activePrefix = currentVersion?.slug ?? currentProduct?.slug;
+  const tree = filterTreeBySlugPrefix(source.getPageTree(locale), activePrefix);
+
+  return (
+    <DocsLayout
+      tree={tree}
+      sidebar={{
+        collapsible: false,
+        banner: products.length > 1 ? (
+          <div className="velu-sidebar-banner">
+            <ProductSwitcher products={products} />
+          </div>
+        ) : undefined,
+        footer: <SidebarLinks />,
+      }}
+      {...baseOptions()}
+      themeSwitch={{ enabled: false }}
+    >
+      {children}
+    </DocsLayout>
+  );
+}
+
+export { generateStaticParams } from './page';

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

@@ -9,6 +9,7 @@ import {
 } from 'fumadocs-ui/layouts/docs/page';
 import { getMDXComponents } from '@/mdx-components';
 import { source } from '@/lib/source';
+import { getLanguages, getVersionOptions, getProductOptions } from '@/lib/velu';
 import { CopyPageButton } from '@/components/copy-page';
 
 interface RouteParams {
@@ -19,17 +20,79 @@ interface PageProps {
   params: Promise<RouteParams>;
 }
 
+function resolveLocaleSlug(slugInput: string[] | undefined) {
+  const languages = getLanguages();
+  const defaultLanguage = languages[0] ?? 'en';
+  const slug = slugInput ?? [];
+  const firstSeg = slug[0];
+  const hasLocalePrefix = languages.includes(firstSeg ?? '');
+
+  return {
+    defaultLanguage,
+    locale: hasLocalePrefix ? firstSeg! : defaultLanguage,
+    pageSlug: hasLocalePrefix ? slug.slice(1) : slug,
+  };
+}
+
+function resolveContextFromSlug(slugInput: string[] | undefined) {
+  const languages = getLanguages();
+  const versions = getVersionOptions();
+  const products = getProductOptions();
+  const slug = slugInput ?? [];
+  
+  // Check for language prefix
+  const firstSeg = slug[0];
+  const hasLocalePrefix = languages.includes(firstSeg ?? '');
+  const locale = hasLocalePrefix ? firstSeg! : (languages[0] ?? 'en');
+  const remainingSlug = hasLocalePrefix ? slug.slice(1) : slug;
+  
+  // Check for version/product in remaining slug
+  const contextSeg = remainingSlug[0] ?? '';
+  const version = versions.find((v) => v.slug === contextSeg);
+  const product = products.find((p) => p.slug === contextSeg);
+  
+  return {
+    locale,
+    version: version?.slug,
+    product: product?.slug,
+  };
+}
+
 export default async function Page({ params }: PageProps) {
   const resolvedParams = await params;
-  const page = source.getPage(resolvedParams.slug);
+  const { locale, pageSlug } = resolveLocaleSlug(resolvedParams.slug);
+  const { locale: filterLocale, version, product } = resolveContextFromSlug(resolvedParams.slug);
+  const hasI18n = getLanguages().length > 1;
+
+  const page = hasI18n ? source.getPage(pageSlug, locale) : source.getPage(pageSlug);
 
   if (!page) notFound();
 
   const MDX = page.data.body;
 
+  // Build pagefind filter attributes
+  const metaAttrs: string[] = [`title:${page.data.title}`];
+  const filterAttrs: string[] = [];
+  if (hasI18n) {
+    metaAttrs.push(`language:${filterLocale}`);
+    filterAttrs.push(`language:${filterLocale}`);
+  }
+  if (version) {
+    metaAttrs.push(`version:${version}`);
+    filterAttrs.push(`version:${version}`);
+  }
+  if (product) {
+    metaAttrs.push(`product:${product}`);
+    filterAttrs.push(`product:${product}`);
+  }
+
   return (
     <DocsPage toc={page.data.toc} full={page.data.full}>
-      <div data-pagefind-body data-pagefind-meta={`title:${page.data.title}`}>
+      <div
+        data-pagefind-body
+        data-pagefind-meta={metaAttrs.join(',')}
+        data-pagefind-filter={filterAttrs.length > 0 ? filterAttrs.join(',') : undefined}
+      >
         <div className="velu-title-row">
           <DocsTitle>{page.data.title}</DocsTitle>
           <CopyPageButton />
@@ -51,14 +114,28 @@ export default async function Page({ params }: PageProps) {
 }
 
 export async function generateStaticParams() {
-  const params = source.generateParams();
-  // Include root path for the optional catch-all [[...slug]]
-  return [{ slug: [] }, ...params];
+  const generated = source.generateParams('slug') as Array<{ slug?: string[] }>;
+  const seen = new Set<string>();
+
+  const nonRoot = generated.filter((entry) => {
+    const slug = entry.slug ?? [];
+    if (slug.length === 0) return false;
+    const key = slug.join('/');
+    if (seen.has(key)) return false;
+    seen.add(key);
+    return true;
+  });
+
+  // Include root variants for optional catch-all [[...slug]] in export mode.
+  return [{}, { slug: undefined }, { slug: [] }, ...nonRoot];
 }
 
 export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
   const resolvedParams = await params;
-  const page = source.getPage(resolvedParams.slug);
+  const { locale, pageSlug } = resolveLocaleSlug(resolvedParams.slug);
+  const hasI18n = getLanguages().length > 1;
+
+  const page = hasI18n ? source.getPage(pageSlug, locale) : source.getPage(pageSlug);
 
   if (!page) notFound();
 

package/src/engine/app/(docs)/layout.tsx

@@ -1,16 +1,4 @@
 import type { ReactNode } from 'react';
-import { DocsLayout } from 'fumadocs-ui/layouts/docs';
-import { baseOptions } from '@/lib/layout.shared';
-import { source } from '@/lib/source';
-
 export default function DocsRootLayout({ children }: { children: ReactNode }) {
-  return (
-    <DocsLayout
-      tree={source.getPageTree()}
-      sidebar={{ collapsible: false }}
-      {...baseOptions()}
-    >
-      {children}
-    </DocsLayout>
-  );
+  return children;
 }

package/src/engine/app/global.css

@@ -7,6 +7,10 @@ body {
 }
 
 /* Ensure sidebar/toc widths are set on the grid layout */
+nextjs-portal {
+  display: none !important;
+}
+
 @media (min-width: 768px) {
   #nd-docs-layout[data-sidebar-collapsed='false'] {
     --fd-sidebar-width: 268px;
@@ -19,6 +23,329 @@ body {
   }
 }
 
+.velu-sidebar-footer {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding-top: 0.5rem;
+}
+
+.velu-sidebar-banner {
+  display: flex;
+  width: 100%;
+  padding: 0.125rem 0;
+  order: -1;
+}
+
+/* Keep the sidebar title row above the product switcher */
+#nd-sidebar .flex.flex-col > :first-child {
+  order: -2;
+}
+
+.velu-header-version-switcher {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.velu-version-switcher-wrap {
+  position: relative;
+}
+
+.velu-version-switcher {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  padding: 0.25rem 0.5rem;
+  border: none;
+  border-radius: 0.375rem;
+  background: transparent;
+  color: var(--color-fd-muted-foreground);
+  font-size: 0.75rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: color 0.15s, background-color 0.15s;
+}
+
+.velu-version-switcher:hover {
+  color: var(--color-fd-foreground);
+  background-color: var(--color-fd-accent);
+}
+
+.velu-version-switcher svg {
+  width: 0.9rem;
+  height: 0.9rem;
+}
+
+.velu-version-switcher svg:last-child {
+  width: 0.8rem;
+  height: 0.8rem;
+}
+
+.velu-version-menu {
+  position: absolute;
+  top: calc(100% + 0.25rem);
+  right: 0;
+  min-width: 7.5rem;
+  padding: 0.25rem;
+  border-radius: 0.5rem;
+  background-color: var(--color-fd-popover);
+  border: 1px solid var(--color-fd-border);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  z-index: 60;
+}
+
+.velu-version-option {
+  display: block;
+  width: 100%;
+  padding: 0.35rem 0.5rem;
+  border: none;
+  border-radius: 0.375rem;
+  background: transparent;
+  color: var(--color-fd-muted-foreground);
+  font-size: 0.8rem;
+  text-align: left;
+  cursor: pointer;
+  transition: color 0.15s, background-color 0.15s;
+}
+
+.velu-version-option:hover {
+  background-color: var(--color-fd-accent);
+  color: var(--color-fd-foreground);
+}
+
+.velu-version-option.active {
+  color: var(--color-fd-primary);
+}
+
+.velu-product-switcher-wrap {
+  position: relative;
+  width: 100%;
+}
+
+.velu-product-switcher {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 0.5rem 0.625rem;
+  border: 1px solid var(--color-fd-border);
+  border-radius: 0.5rem;
+  background: var(--color-fd-background);
+  color: var(--color-fd-foreground);
+  font-size: 0.8125rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: border-color 0.15s, background-color 0.15s;
+}
+
+.velu-product-switcher:hover {
+  border-color: var(--color-fd-primary);
+  background-color: var(--color-fd-accent);
+}
+
+.velu-product-switcher svg {
+  width: 0.875rem;
+  height: 0.875rem;
+  flex-shrink: 0;
+  opacity: 0.6;
+}
+
+.velu-product-switcher-label {
+  flex: 1;
+  text-align: left;
+}
+
+.velu-product-menu {
+  position: absolute;
+  top: calc(100% + 0.25rem);
+  left: 0;
+  right: 0;
+  padding: 0.25rem;
+  border-radius: 0.5rem;
+  background-color: var(--color-fd-popover);
+  border: 1px solid var(--color-fd-border);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  z-index: 60;
+}
+
+.velu-product-option {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  padding: 0.5rem 0.625rem;
+  border: none;
+  border-radius: 0.375rem;
+  background: transparent;
+  text-align: left;
+  cursor: pointer;
+  transition: background-color 0.15s;
+}
+
+.velu-product-option:hover {
+  background-color: var(--color-fd-accent);
+}
+
+.velu-product-option.active {
+  background-color: var(--color-fd-accent);
+}
+
+.velu-product-option-name {
+  font-size: 0.8125rem;
+  font-weight: 500;
+  color: var(--color-fd-foreground);
+}
+
+.velu-product-option.active .velu-product-option-name {
+  color: var(--color-fd-primary);
+}
+
+.velu-product-option-desc {
+  font-size: 0.6875rem;
+  color: var(--color-fd-muted-foreground);
+  margin-top: 0.125rem;
+}
+
+.velu-sidebar-footer-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.velu-sidebar-links {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
+.velu-sidebar-link {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.375rem 0.5rem;
+  border-radius: 0.375rem;
+  font-size: 0.875rem;
+  color: var(--color-fd-muted-foreground);
+  text-decoration: none;
+  transition: color 0.15s, background-color 0.15s;
+}
+
+.velu-sidebar-link:hover {
+  color: var(--color-fd-foreground);
+  background-color: var(--color-fd-accent);
+}
+
+.velu-sidebar-link-text {
+  flex: 1;
+}
+
+.velu-sidebar-link-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+  opacity: 0.5;
+  flex-shrink: 0;
+}
+
+.velu-sidebar-link:hover .velu-sidebar-link-icon {
+  opacity: 0.8;
+}
+
+.velu-theme-toggle {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.25rem;
+  border-radius: 0.5rem;
+  background-color: var(--color-fd-accent);
+  width: fit-content;
+  margin-left: auto;
+}
+
+.velu-lang-switcher {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.375rem 0.5rem;
+  border: none;
+  border-radius: 0.375rem;
+  background: transparent;
+  color: var(--color-fd-muted-foreground);
+  font-size: 0.875rem;
+  cursor: pointer;
+  transition: color 0.15s, background-color 0.15s;
+  position: relative;
+}
+
+.velu-lang-switcher:hover {
+  color: var(--color-fd-foreground);
+  background-color: var(--color-fd-accent);
+}
+
+.velu-lang-switcher svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+.velu-lang-menu {
+  position: absolute;
+  bottom: 100%;
+  left: 0;
+  margin-bottom: 0.25rem;
+  min-width: 8rem;
+  padding: 0.25rem;
+  border-radius: 0.5rem;
+  background-color: var(--color-fd-popover);
+  border: 1px solid var(--color-fd-border);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  z-index: 50;
+}
+
+.velu-lang-option {
+  display: block;
+  width: 100%;
+  padding: 0.375rem 0.5rem;
+  border: none;
+  border-radius: 0.375rem;
+  background: transparent;
+  color: var(--color-fd-muted-foreground);
+  font-size: 0.875rem;
+  text-align: left;
+  cursor: pointer;
+  transition: color 0.15s, background-color 0.15s;
+}
+
+.velu-lang-option:hover {
+  background-color: var(--color-fd-accent);
+  color: var(--color-fd-foreground);
+}
+
+.velu-lang-option.active {
+  color: var(--color-fd-primary);
+}
+
+.velu-theme-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.375rem;
+  border: none;
+  border-radius: 0.375rem;
+  background: transparent;
+  color: var(--color-fd-muted-foreground);
+  cursor: pointer;
+  transition: color 0.15s, background-color 0.15s;
+}
+
+.velu-theme-btn:hover {
+  color: var(--color-fd-foreground);
+}
+
+.velu-theme-btn.active {
+  background-color: var(--color-fd-background);
+  color: var(--color-fd-foreground);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+
 .velu-footer {
   margin-top: 3rem;
   padding-top: 1.5rem;

package/src/engine/app/layout.tsx

@@ -1,7 +1,6 @@
 import type { ReactNode } from 'react';
-import { RootProvider } from 'fumadocs-ui/provider/next';
 import { getAppearance } from '@/lib/velu';
-import { PagefindSearch } from '@/components/search';
+import { Providers } from '@/components/providers';
 import { VeluAssistant } from '@/components/assistant';
 import './global.css';
 import './search.css';
@@ -21,13 +20,10 @@ export default function RootLayout({ children }: { children: ReactNode }) {
   return (
     <html lang="en" suppressHydrationWarning>
       <body className="min-h-screen" suppressHydrationWarning>
-        <RootProvider
-          theme={theme}
-          search={{ SearchDialog: PagefindSearch }}
-        >
+        <Providers theme={theme}>
           {children}
           <VeluAssistant />
-        </RootProvider>
+        </Providers>
       </body>
     </html>
   );

package/src/engine/app/search.css

@@ -116,3 +116,23 @@
   border-radius: 2px;
   padding: 0 2px;
 }
+
+/* Search filter indicator */
+.fd-search-filters {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 16px;
+  border-bottom: 1px solid var(--color-fd-border, #27272a);
+  background: var(--color-fd-accent, #27272a);
+  font-size: 0.75rem;
+}
+
+.fd-search-filter-label {
+  color: var(--color-fd-muted-foreground, #a1a1aa);
+}
+
+.fd-search-filter-value {
+  color: var(--color-fd-primary, #818cf8);
+  font-weight: 500;
+}

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

@@ -0,0 +1,95 @@
+'use client';
+
+import { useState, useRef, useEffect, useMemo } from 'react';
+import { usePathname } from 'next/navigation';
+
+function GlobeIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <circle cx="12" cy="12" r="10" />
+      <path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" />
+      <path d="M2 12h20" />
+    </svg>
+  );
+}
+
+function nativeLabel(code: string): string {
+  try {
+    const dn = new Intl.DisplayNames([code], { type: 'language' });
+    const name = dn.of(code);
+    if (name) return name.charAt(0).toUpperCase() + name.slice(1);
+  } catch {}
+  return code.toUpperCase();
+}
+
+export function LanguageSwitcher({ languages, defaultLang }: { languages: string[]; defaultLang: string }) {
+  const [open, setOpen] = useState(false);
+  const [mounted, setMounted] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+  const pathname = usePathname();
+
+  useEffect(() => setMounted(true), []);
+
+  const current = useMemo(() => {
+    const firstSeg = pathname.split('/').filter(Boolean)[0];
+    return languages.includes(firstSeg ?? '') ? firstSeg! : defaultLang;
+  }, [pathname, languages, defaultLang]);
+
+  useEffect(() => {
+    function handleClick(e: MouseEvent) {
+      if (ref.current && !ref.current.contains(e.target as Node)) {
+        setOpen(false);
+      }
+    }
+    document.addEventListener('mousedown', handleClick);
+    return () => document.removeEventListener('mousedown', handleClick);
+  }, []);
+
+  if (languages.length <= 1) return null;
+
+  function switchTo(code: string) {
+    setOpen(false);
+    const segments = pathname.split('/').filter(Boolean);
+    const isLangPrefix = languages.includes(segments[0] ?? '');
+    const rest = isLangPrefix ? segments.slice(1) : segments;
+    const newPath = code === defaultLang
+      ? '/' + rest.join('/')
+      : '/' + code + '/' + rest.join('/');
+    window.location.href = newPath;
+  }
+
+  return (
+    <div ref={ref} style={{ position: 'relative', ...(mounted ? {} : { opacity: 0, pointerEvents: 'none' as const }) }}>
+      <button
+        type="button"
+        className="velu-lang-switcher"
+        onClick={() => mounted && setOpen(!open)}
+      >
+        <GlobeIcon />
+        <span>{nativeLabel(current)}</span>
+      </button>
+      {open && (
+        <div className="velu-lang-menu">
+          {languages.map((code) => (
+            <button
+              key={code}
+              type="button"
+              className={`velu-lang-option ${code === current ? 'active' : ''}`}
+              onClick={() => switchTo(code)}
+            >
+              {nativeLabel(code)}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}