fix(website): restore docs search with fumadocs 16.15 upgrade

apps/website/package.json

@@ -15,8 +15,6 @@
     },
     "dependencies": {
         "@base-ui/react": "^1.7.0",
-        "@orama/orama": "^3.1.18",
-        "@oramacloud/client": "^2.1.4",
         "@radix-ui/react-collapsible": "^1.1.20",
         "@radix-ui/react-dialog": "^1.1.23",
         "@radix-ui/react-radio-group": "^1.4.7",
@@ -29,11 +27,11 @@
         "@vercel/analytics": "^1.6.1",
         "clsx": "^2.1.1",
         "color-convert": "^3.1.3",
-        "fumadocs-core": "16.8.11",
+        "fumadocs-core": "16.15.5",
         "fumadocs-docgen": "3.0.10",
         "fumadocs-mdx": "14.3.2",
         "fumadocs-typescript": "5.2.6",
-        "fumadocs-ui": "npm:@fumadocs/base-ui@16.8.11",
+        "fumadocs-ui": "npm:@fumadocs/base-ui@16.15.5",
         "fuse.js": "^7.5.0",
         "lodash-es": "^4.18.1",
         "markdown-table": "^3.0.4",

apps/website/src/app/(home)/page.tsx

@@ -1,7 +1,5 @@
 'use client';
 
-import { useState } from 'react';
-
 import { Badge, Button, Text, useTheme } from '@vapor-ui/core';
 import {
     AiSmartieIcon,
@@ -10,6 +8,7 @@ import {
     SearchOutlineIcon,
     StarIcon,
 } from '@vapor-ui/icons';
+import { useSearchContext } from 'fumadocs-ui/contexts/search';
 import Link from 'next/link';
 
 import { ChromeWindow } from '~/components/chrome-window';
@@ -19,7 +18,6 @@ import {
     LocalTabsContent,
     LocalTabsList,
 } from '~/components/local-tabs/local-tabs';
-import DefaultSearchDialog from '~/components/search/search';
 import { VAPOR_BANNER_URL } from '~/constants/image-urls';
 import { CustomThemeProvider, useCustomTheme } from '~/providers';
 
@@ -159,7 +157,7 @@ const ThemeSection = () => {
     );
 };
 export default function HomePage() {
-    const [isSearchOpen, setIsSearchOpen] = useState(false);
+    const { setOpenSearch } = useSearchContext();
     const { resolvedTheme } = useTheme();
 
     return (
@@ -183,7 +181,6 @@ export default function HomePage() {
                                     : 'linear-gradient(180deg, rgba(35, 39, 46, 0.00) 0%, var(--vapor-color-canvas, #23272E) 100%)',
                         }}
                     />
-                    <DefaultSearchDialog open={isSearchOpen} onOpenChange={setIsSearchOpen} />
 
                     <div className="flex flex-col items-center gap-4 self-stretch">
                         <div className="flex flex-col items-center gap-10 self-stretch">
@@ -237,7 +234,7 @@ export default function HomePage() {
                             <button
                                 type="button"
                                 className="max-w-[720px] w-full rounded-v-400 flex flex-col items-center gap-4 bg-[rgba(0,0,0,0.16)] border border-v-normal shadow-[var(--vapor-shadow-100)] p-3 md:p-4"
-                                onClick={() => setIsSearchOpen(true)}
+                                onClick={() => setOpenSearch(true)}
                             >
                                 <div className="flex items-center w-full px-6 h-12 justify-between rounded-v-300 border border-v-normal bg-v-overlay-100">
                                     <div className="flex items-center gap-v-100">

apps/website/src/app/api/search/route.ts

@@ -1,19 +1,5 @@
-import { structure } from 'fumadocs-core/mdx-plugins';
-import { createSearchAPI } from 'fumadocs-core/search/server';
+import { createFromSource } from 'fumadocs-core/search/server';
 
 import { source } from '~/lib/source';
 
-export const { GET } = createSearchAPI('advanced', {
-    indexes: async () => {
-        const items = source.getPages().map(async (page) => {
-            const { url, data } = page;
-            const { title = '', description, getText } = data;
-            const raw = await getText('raw');
-
-            return { id: url, url, title, description, structuredData: structure(raw) };
-        });
-
-        const settled = await Promise.allSettled(items);
-        return settled.filter((item) => item.status === 'fulfilled').map((item) => item.value);
-    },
-});
+export const { GET } = createFromSource(source);

apps/website/src/components/fumadocs/docs-layout-client.tsx

@@ -17,9 +17,11 @@ import clsx from 'clsx';
 import { usePathname } from 'fumadocs-core/framework';
 import Link from 'fumadocs-core/link';
 import type { SidebarTabWithProps } from 'fumadocs-ui/components/sidebar/tabs/dropdown';
-import { SidebarTabsDropdown, isTabActive } from 'fumadocs-ui/components/sidebar/tabs/dropdown';
+import { SidebarTabsDropdown } from 'fumadocs-ui/components/sidebar/tabs/dropdown';
 import { Popover, PopoverContent, PopoverTrigger } from 'fumadocs-ui/components/ui/popover';
+import { useTreePath } from 'fumadocs-ui/contexts/tree';
 import type { LinkItemType, MenuItemType } from 'fumadocs-ui/layouts/shared';
+import { isLayoutTabActive } from 'fumadocs-ui/layouts/shared';
 import { useIsScrollTop } from 'fumadocs-ui/utils/use-is-scroll-top';
 
 export function normalize(urlOrPath: string) {
@@ -242,6 +244,7 @@ export function LayoutHeaderTabs({
     ...props
 }: LayoutHeaderTabsProps) {
     const pathname = usePathname();
+    const path = useTreePath();
     const filteredOptions = useMemo(() => {
         if (!options) return undefined;
 
@@ -253,8 +256,10 @@ export function LayoutHeaderTabs({
     }, [options, pathname, filterByPathname]);
 
     const selectedIdx = useMemo(() => {
-        return filteredOptions?.findLastIndex((option) => isTabActive(option, pathname));
-    }, [filteredOptions, pathname]);
+        return filteredOptions?.findLastIndex((option) =>
+            isLayoutTabActive(option, path, pathname),
+        );
+    }, [filteredOptions, path, pathname]);
 
     return (
         <div className={clsx('flex flex-row items-end gap-6', className)} {...props}>

apps/website/src/components/fumadocs/docs-page-client.tsx

@@ -30,7 +30,6 @@ import {
     CollapsibleContent,
     CollapsibleTrigger,
 } from 'fumadocs-ui/components/ui/collapsible';
-import { useI18n } from 'fumadocs-ui/contexts/i18n';
 import { useTreeContext, useTreePath } from 'fumadocs-ui/contexts/tree';
 import { useFooterItems } from 'fumadocs-ui/utils/use-footer-items';
 
@@ -96,7 +95,6 @@ export function PageTOCPopover({ children, className, ...rest }: ComponentProps<
 }
 
 export function PageTOCPopoverTrigger({ className, ...props }: ComponentProps<'button'>) {
-    const { text } = useI18n();
     const { open } = use(TocPopoverContext)!;
     const items = useTOCItems();
     const active = useActiveAnchor();
@@ -129,7 +127,7 @@ export function PageTOCPopoverTrigger({ className, ...props }: ComponentProps<'b
                         showItem && 'pointer-events-none -translate-y-full opacity-0',
                     )}
                 >
-                    {path?.name ?? text.toc}
+                    {path?.name ?? 'On this page'}
                 </span>
                 <span
                     className={clsx(
@@ -221,7 +219,6 @@ export function PageLastUpdate({
     date: value,
     ...props
 }: Omit<ComponentProps<'p'>, 'children'> & { date: Date }) {
-    const { text } = useI18n();
     const [date, setDate] = useState('');
 
     useEffect(() => {
@@ -231,7 +228,7 @@ export function PageLastUpdate({
 
     return (
         <p {...props} className={clsx('text-fd-muted-foreground text-sm', props.className)}>
-            {text.lastUpdate} {date}
+            Last updated on {date}
         </p>
     );
 }
@@ -279,7 +276,6 @@ export function PageFooter({ items, ...props }: FooterProps) {
 }
 
 function FooterItem({ index, item }: { item: Item; index: 0 | 1 }) {
-    const { text } = useI18n();
     const Icon = index === 0 ? ChevronLeftOutlineIcon : ChevronRightOutlineIcon;
 
     return (
@@ -300,7 +296,7 @@ function FooterItem({ index, item }: { item: Item; index: 0 | 1 }) {
                 <p>{item.name}</p>
             </div>
             <p className="text-fd-muted-foreground truncate">
-                {item.description ?? (index === 0 ? text.previousPage : text.nextPage)}
+                {item.description ?? (index === 0 ? 'Previous Page' : 'Next Page')}
             </p>
         </Link>
     );

apps/website/src/components/fumadocs/docs-page.tsx

@@ -7,7 +7,6 @@ import { TOCProvider, TOCScrollArea } from 'fumadocs-ui/components/toc';
 import * as TocClerk from 'fumadocs-ui/components/toc/clerk';
 import * as TocDefault from 'fumadocs-ui/components/toc/default';
 import { buttonVariants } from 'fumadocs-ui/components/ui/button';
-import { I18nLabel } from 'fumadocs-ui/contexts/i18n';
 
 import type { BreadcrumbProps, FooterProps } from './docs-page-client';
 import {
@@ -164,7 +163,7 @@ export function CustomDocsPage({
                             id="toc-title"
                         >
                             <AlignCenterOutlineIcon className="size-4" />
-                            <I18nLabel label="toc" />
+                            On this page
                         </h3>
                         <TOCScrollArea>
                             {tocOptions.style === 'clerk' ? (
@@ -206,7 +205,7 @@ export function EditOnGitHub(props: ComponentProps<'a'>) {
             {props.children ?? (
                 <>
                     <EditOutlineIcon className="size-3.5" />
-                    <I18nLabel label="editOnGithub" />
+                    Edit on GitHub
                 </>
             )}
         </a>

apps/website/src/components/fumadocs/search-toggle.tsx

@@ -6,7 +6,6 @@ import { SearchOutlineIcon } from '@vapor-ui/icons';
 import clsx from 'clsx';
 import type { ButtonProps } from 'fumadocs-ui/components/ui/button';
 import { buttonVariants } from 'fumadocs-ui/components/ui/button';
-import { useI18n } from 'fumadocs-ui/contexts/i18n';
 import { useSearchContext } from 'fumadocs-ui/contexts/search';
 
 interface SearchToggleProps extends Omit<ComponentProps<'button'>, 'color'>, ButtonProps {
@@ -52,7 +51,6 @@ export function LargeSearchToggle({
     hideIfDisabled?: boolean;
 }) {
     const { enabled, hotKey, setOpenSearch } = useSearchContext();
-    const { text } = useI18n();
 
     if (hideIfDisabled && !enabled) return null;
 
@@ -70,7 +68,7 @@ export function LargeSearchToggle({
             }}
         >
             <SearchOutlineIcon className="size-4" />
-            {text.search}
+            Search
             <div className="ms-auto inline-flex gap-0.5">
                 {hotKey.map((k, i) => (
                     <kbd key={i} className="bg-fd-background rounded-md border px-1.5">