Core & UI: Support trailing slash

.changeset/green-items-help.md

@@ -0,0 +1,6 @@
+---
+'fumadocs-core': patch
+'fumadocs-ui': patch
+---
+
+Support trailing slash

apps/docs/next.config.ts

@@ -13,9 +13,6 @@ const config: NextConfig = {
     ignoreDuringBuilds: true,
   },
   serverExternalPackages: ['ts-morph', 'typescript', 'oxc-transform'],
-  experimental: {
-    reactCompiler: true,
-  },
   images: {
     unoptimized: true,
     remotePatterns: [

apps/docs/package.json

@@ -20,7 +20,6 @@
     "@radix-ui/react-tooltip": "^1.1.6",
     "@shikijs/rehype": "^1.26.1",
     "@theguild/remark-mermaid": "^0.2.0",
-    "babel-plugin-react-compiler": "19.0.0-beta-df7b47d-20241124",
     "class-variance-authority": "^0.7.1",
     "fumadocs-core": "workspace:*",
     "fumadocs-docgen": "workspace:^",

packages/core/src/breadcrumb.tsx

@@ -116,7 +116,9 @@ export function getBreadcrumbItemsFromPath(
 export function searchPath(
   nodes: PageTree.Node[],
   url: string,
-): (PageTree.Folder | PageTree.Item | PageTree.Separator)[] | null {
+): PageTree.Node[] | null {
+  if (url.endsWith('/')) url = url.slice(0, -1);
+
   let separator: PageTree.Separator | undefined;
 
   for (const node of nodes) {

packages/ui/src/components/layout/root-toggle.tsx

@@ -21,7 +21,7 @@ export interface Option {
   /**
    * Detect from a list of urls
    */
-  urls?: string[];
+  urls?: Set<string>;
 
   props?: HTMLAttributes<HTMLElement>;
 }
@@ -41,7 +41,9 @@ export function RootToggle({
   const selected = useMemo(() => {
     return options.findLast((item) =>
       item.urls
-        ? item.urls.includes(pathname)
+        ? item.urls.has(
+            pathname.endsWith('/') ? pathname.slice(0, -1) : pathname,
+          )
         : isActive(item.url, pathname, true),
     );
   }, [options, pathname]);

packages/ui/src/layouts/docs/shared.tsx

@@ -157,7 +157,7 @@ function getSidebarTabs(
           icon: node.icon,
           description: node.description,
 
-          urls: getFolderUrls(node),
+          urls: getFolderUrls(node, new Set()),
         };
 
         const mapped = transform ? transform(option, node) : option;
@@ -175,14 +175,16 @@ function getSidebarTabs(
   return findOptions(pageTree as PageTree.Folder);
 }
 
-function getFolderUrls(folder: PageTree.Folder): string[] {
-  const results: string[] = [];
-  if (folder.index) results.push(folder.index.url);
+function getFolderUrls(
+  folder: PageTree.Folder,
+  output: Set<string>,
+): Set<string> {
+  if (folder.index) output.add(folder.index.url);
 
   for (const child of folder.children) {
-    if (child.type === 'page') results.push(child.url);
-    if (child.type === 'folder') results.push(...getFolderUrls(child));
+    if (child.type === 'page') output.add(child.url);
+    if (child.type === 'folder') getFolderUrls(child, output);
   }
 
-  return results;
+  return output;
 }

packages/ui/src/page.client.tsx

@@ -22,6 +22,7 @@ import {
   getBreadcrumbItemsFromPath,
 } from 'fumadocs-core/breadcrumb';
 import { usePageStyles } from '@/contexts/layout';
+import { isActive } from '@/utils/is-active';
 
 export function TocNav(props: HTMLAttributes<HTMLDivElement>) {
   const { open } = useSidebar();
@@ -152,7 +153,7 @@ export function Footer({ items }: FooterProps) {
     const list = cached ?? scanNavigationList(root.children);
     listCache.set(root, list);
 
-    const idx = list.findIndex((item) => item.url === pathname);
+    const idx = list.findIndex((item) => isActive(item.url, pathname, false));
 
     if (idx === -1) return {};
     return {

packages/ui/src/utils/is-active.ts

@@ -3,5 +3,8 @@ export function isActive(
   pathname: string,
   nested = true,
 ): boolean {
+  if (url.endsWith('/')) url = url.slice(0, -1);
+  if (pathname.endsWith('/')) pathname = pathname.slice(0, -1);
+
   return url === pathname || (nested && pathname.startsWith(`${url}/`));
 }