@aravindc26/velu 0.10.0 → 0.11.0

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

@@ -0,0 +1,78 @@
+'use client';
+
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { usePathname } from 'next/navigation';
+import type { VeluProductOption } from '@/lib/velu';
+
+function ChevronDownIcon() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
+      <path d="m6 9 6 6 6-6" />
+    </svg>
+  );
+}
+
+export function ProductSwitcher({ products }: { products: VeluProductOption[] }) {
+  const pathname = usePathname();
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  const current = useMemo(() => {
+    const firstSeg = pathname.split('/').filter(Boolean)[0] ?? '';
+    return products.find((p) => p.slug === firstSeg) ?? products[0];
+  }, [pathname, products]);
+
+  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 (!current || products.length <= 1) return null;
+
+  function switchTo(target: VeluProductOption) {
+    setOpen(false);
+
+    const segments = pathname.split('/').filter(Boolean);
+    const firstSeg = segments[0] ?? '';
+
+    if (current && current.slug === firstSeg) {
+      // 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('/');
+        return;
+      }
+    }
+
+    window.location.href = target.defaultPath;
+  }
+
+  return (
+    <div className="velu-product-switcher-wrap" ref={ref}>
+      <button type="button" className="velu-product-switcher" onClick={() => setOpen((v) => !v)}>
+        <span className="velu-product-switcher-label">{current.product}</span>
+        <ChevronDownIcon />
+      </button>
+      {open && (
+        <div className="velu-product-menu">
+          {products.map((product) => (
+            <button
+              key={product.slug}
+              type="button"
+              className={`velu-product-option ${product.slug === current.slug ? 'active' : ''}`}
+              onClick={() => switchTo(product)}
+            >
+              <span className="velu-product-option-name">{product.product}</span>
+              {product.description && (
+                <span className="velu-product-option-desc">{product.description}</span>
+              )}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/engine/components/providers.tsx

@@ -0,0 +1,26 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import dynamic from 'next/dynamic';
+import { RootProvider } from 'fumadocs-ui/provider/next';
+
+const PagefindSearch = dynamic(
+  () => import('@/components/search').then((m) => m.PagefindSearch),
+  { ssr: false }
+);
+
+interface ProvidersProps {
+  children: ReactNode;
+  theme?: {
+    defaultTheme: string;
+    enableSystem: boolean;
+  };
+}
+
+export function Providers({ children, theme }: ProvidersProps) {
+  return (
+    <RootProvider theme={theme} search={{ SearchDialog: PagefindSearch }}>
+      {children}
+    </RootProvider>
+  );
+}

package/src/engine/components/search.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useEffect, useRef, useState, useCallback, type ReactNode } from 'react';
+import { usePathname } from 'next/navigation';
 
 interface PagefindResult {
   url: string;
@@ -19,10 +20,54 @@ interface PagefindResponse {
 
 interface PagefindInstance {
   init: () => Promise<void>;
-  search: (query: string) => Promise<PagefindResponse>;
+  search: (query: string, options?: { filters?: Record<string, string | string[]> }) => Promise<PagefindResponse>;
   destroy: () => void;
 }
 
+interface SearchFilters {
+  language?: string;
+  version?: string;
+  product?: string;
+}
+
+// Extract language and version/product from URL path
+// Format: /[lang]/[version|product]/... or /[version|product]/...
+function extractFiltersFromPath(pathname: string): SearchFilters {
+  const filters: SearchFilters = {};
+  const segments = pathname.split('/').filter(Boolean);
+  
+  // Common language codes (expand as needed)
+  const langCodes = new Set(['en', 'ja', 'es', 'fr', 'de', 'zh', 'ko', 'pt', 'ru', 'ar']);
+  
+  if (segments.length === 0) return filters;
+  
+  // Check if first segment is a language code
+  const firstSeg = segments[0];
+  if (langCodes.has(firstSeg)) {
+    filters.language = firstSeg;
+    // Look for version/product in second segment
+    if (segments.length > 1) {
+      const secondSeg = segments[1];
+      // Version patterns: v1, v2, v1.0, 1.0, etc.
+      if (/^v?\d/.test(secondSeg)) {
+        filters.version = secondSeg;
+      } else {
+        // Could be a product slug
+        filters.product = secondSeg;
+      }
+    }
+  } else {
+    // First segment might be version or product
+    if (/^v?\d/.test(firstSeg)) {
+      filters.version = firstSeg;
+    } else {
+      filters.product = firstSeg;
+    }
+  }
+  
+  return filters;
+}
+
 export function PagefindSearch({
   open,
   onOpenChange,
@@ -33,10 +78,20 @@ export function PagefindSearch({
   const inputRef = useRef<HTMLInputElement>(null);
   const dialogRef = useRef<HTMLDialogElement>(null);
   const pagefindRef = useRef<PagefindInstance | null>(null);
+  const pathname = usePathname();
   const [query, setQuery] = useState('');
   const [results, setResults] = useState<PagefindResult[]>([]);
   const [loading, setLoading] = useState(false);
   const [available, setAvailable] = useState(true);
+  const [activeFilters, setActiveFilters] = useState<SearchFilters>({});
+
+  // Extract filters from current URL when search opens
+  useEffect(() => {
+    if (open && pathname) {
+      const filters = extractFiltersFromPath(pathname);
+      setActiveFilters(filters);
+    }
+  }, [open, pathname]);
 
   useEffect(() => {
     async function loadPagefind() {
@@ -72,7 +127,15 @@ export function PagefindSearch({
       }
       setLoading(true);
       try {
-        const response = await pagefindRef.current.search(q);
+        // Build filters for pagefind
+        const filters: Record<string, string> = {};
+        if (activeFilters.language) filters.language = activeFilters.language;
+        if (activeFilters.version) filters.version = activeFilters.version;
+        if (activeFilters.product) filters.product = activeFilters.product;
+
+        const response = await pagefindRef.current.search(q, 
+          Object.keys(filters).length > 0 ? { filters } : undefined
+        );
         const items = await Promise.all(
           response.results.slice(0, 8).map((r) => r.data())
         );
@@ -82,7 +145,7 @@ export function PagefindSearch({
       }
       setLoading(false);
     },
-    []
+    [activeFilters]
   );
 
   return (

package/src/engine/components/sidebar-links.tsx

@@ -0,0 +1,51 @@
+import { getGlobalAnchors, getLanguages } from '@/lib/velu';
+import { ThemeToggle } from '@/components/theme-toggle';
+import { LanguageSwitcher } from '@/components/lang-switcher';
+
+function ExternalLinkIcon() {
+  return (
+    <svg
+      className="velu-sidebar-link-icon"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M7 17 17 7" />
+      <path d="M7 7h10v10" />
+    </svg>
+  );
+}
+
+export function SidebarLinks() {
+  const anchors = getGlobalAnchors();
+  const languages = getLanguages();
+
+  return (
+    <div className="velu-sidebar-footer">
+      {anchors.length > 0 && (
+        <div className="velu-sidebar-links">
+          {anchors.map((anchor) => (
+            <a
+              key={anchor.href}
+              href={anchor.href}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="velu-sidebar-link"
+            >
+              <span className="velu-sidebar-link-text">{anchor.anchor}</span>
+              <ExternalLinkIcon />
+            </a>
+          ))}
+        </div>
+      )}
+      <div className="velu-sidebar-footer-row">
+        {languages.length > 1 && <LanguageSwitcher languages={languages} defaultLang={languages[0]} />}
+        <ThemeToggle />
+      </div>
+    </div>
+  );
+}

package/src/engine/components/theme-toggle.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+import { useTheme } from 'next-themes';
+import { useEffect, useState } from 'react';
+
+export function ThemeToggle() {
+  const { setTheme, resolvedTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => setMounted(true), []);
+
+  const isDark = mounted ? resolvedTheme === 'dark' : false;
+
+  return (
+    <div className="velu-theme-toggle" style={mounted ? undefined : { opacity: 0 }}>
+      <button
+        type="button"
+        className={`velu-theme-btn ${!isDark ? 'active' : ''}`}
+        onClick={() => setTheme('light')}
+        aria-label="Light mode"
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" width="16" height="16">
+          <circle cx="12" cy="12" r="4" />
+          <path d="M12 2v2" /><path d="M12 20v2" /><path d="m4.93 4.93 1.41 1.41" /><path d="m17.66 17.66 1.41 1.41" /><path d="M2 12h2" /><path d="M20 12h2" /><path d="m6.34 17.66-1.41 1.41" /><path d="m19.07 4.93-1.41 1.41" />
+        </svg>
+      </button>
+      <button
+        type="button"
+        className={`velu-theme-btn ${isDark ? 'active' : ''}`}
+        onClick={() => setTheme('dark')}
+        aria-label="Dark mode"
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" width="16" height="16">
+          <path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" />
+        </svg>
+      </button>
+    </div>
+  );
+}

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

@@ -0,0 +1,89 @@
+'use client';
+
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { usePathname } from 'next/navigation';
+import type { VeluVersionOption } from '@/lib/velu';
+
+function VersionIcon() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
+      <path d="M4 6h16" />
+      <path d="M4 12h16" />
+      <path d="M4 18h16" />
+    </svg>
+  );
+}
+
+function ChevronDownIcon() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
+      <path d="m6 9 6 6 6-6" />
+    </svg>
+  );
+}
+
+export function VersionSwitcher({ versions }: { versions: VeluVersionOption[] }) {
+  const pathname = usePathname();
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  const fallback = useMemo(() => versions.find((v) => v.isDefault) ?? versions[0], [versions]);
+
+  const current = useMemo(() => {
+    const firstSeg = pathname.split('/').filter(Boolean)[0] ?? '';
+    return versions.find((version) => version.tabSlugs.includes(firstSeg)) ?? fallback;
+  }, [pathname, versions, fallback]);
+
+  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 (!fallback || versions.length <= 1) return null;
+
+  function switchTo(target: VeluVersionOption) {
+    setOpen(false);
+
+    const segments = pathname.split('/').filter(Boolean);
+    const firstSeg = segments[0] ?? '';
+
+    if (current && current.tabSlugs.includes(firstSeg)) {
+      const index = current.tabSlugs.indexOf(firstSeg);
+      const targetTab = target.tabSlugs[index] ?? target.tabSlugs[0];
+      if (targetTab) {
+        const rest = segments.slice(1);
+        window.location.href = '/' + [targetTab, ...rest].join('/');
+        return;
+      }
+    }
+
+    window.location.href = target.defaultPath;
+  }
+
+  return (
+    <div className="velu-version-switcher-wrap" ref={ref}>
+      <button type="button" className="velu-version-switcher" onClick={() => setOpen((v) => !v)}>
+        <VersionIcon />
+        <span>{current.version}</span>
+        <ChevronDownIcon />
+      </button>
+      {open && (
+        <div className="velu-version-menu">
+          {versions.map((version) => (
+            <button
+              key={version.slug}
+              type="button"
+              className={`velu-version-option ${version.slug === current.slug ? 'active' : ''}`}
+              onClick={() => switchTo(version)}
+            >
+              {version.version}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/engine/lib/layout.shared.ts

@@ -1,17 +1,39 @@
 import type { BaseLayoutProps } from 'fumadocs-ui/layouts/shared';
-import { getExternalTabs } from '@/lib/velu';
+import { createElement } from 'react';
+import { VersionSwitcher } from '@/components/version-switcher';
+import { getExternalTabs, getNavbarAnchors, getVersionOptions } from '@/lib/velu';
 
 export function baseOptions(): BaseLayoutProps {
   const externalTabs = getExternalTabs();
-  const links = externalTabs.map((tab: { label: string; href: string }) => ({
-    text: tab.label,
-    url: tab.href,
-    secondary: false,
-  }));
+  const navAnchors = getNavbarAnchors();
+  const versions = getVersionOptions();
+
+  const links = [
+    ...externalTabs.map((tab: { label: string; href: string }) => ({
+      text: tab.label,
+      url: tab.href,
+      secondary: false,
+    })),
+    ...navAnchors
+      .filter((a): a is { anchor: string; href: string } => typeof a.href === 'string' && a.href.length > 0)
+      .map((a) => ({
+        text: a.anchor,
+        url: a.href,
+        secondary: true,
+      })),
+  ];
 
   return {
     nav: {
       title: 'Velu Docs',
+      children:
+        versions.length > 1
+          ? createElement(
+              'div',
+              { className: 'velu-header-version-switcher' },
+              createElement(VersionSwitcher, { versions })
+            )
+          : undefined,
     },
     links,
   };