Framework Routing Adapters

Copyexport interface Router {
  push: (url: string) => void | Promise<void>;
  refresh: () => void | Promise<void>;
}
 
export interface Framework {
  usePathname: () => string;
  useParams: () => Record<string, string | string[]>;
  useRouter: () => Router;
 
  Link?: FC<
    ComponentProps<'a'> & {
      prefetch?: boolean;
    }
  >;
 
  Image?: FC<ImageProps>;
}
 
const notImplemented = () => {
  throw new Error('You need to wrap your application inside `FrameworkProvider`.');
};
 
const FrameworkContext = createContext<Framework>({
  useParams: notImplemented,
  useRouter: notImplemented,
  usePathname: notImplemented,
});

Copyexport function FrameworkProvider({
  Link,
  useRouter,
  useParams,
  usePathname,
  Image,
  children,
}: Framework & { children: ReactNode }) {
  const framework = useMemo(
    () => ({
      usePathname,
      useRouter,
      Link,
      Image,
      useParams,
    }),
    [Link, usePathname, useRouter, useParams, Image],
  );
 
  return <FrameworkContext value={framework}>{children}</FrameworkContext>;
}
 
export function usePathname() {
  return use(FrameworkContext).usePathname();
}
 
export function useRouter() {
  return use(FrameworkContext).useRouter();
}
 
export function useParams() {
  return use(FrameworkContext).useParams();
}

Copyexport function Image(props: ImageProps) {
  const { Image } = use(FrameworkContext);
  if (!Image) {
    const { src, alt, priority, ...rest } = props;
 
    return (
      <img alt={alt} src={src as string} fetchPriority={priority ? 'high' : 'auto'} {...rest} />
    );
  }
 
  return <Image {...props} />;
}
 
export function Link(props: LinkProps) {
  const { Link } = use(FrameworkContext);
  if (!Link) {
    const { href, prefetch: _, ...rest } = props;
    return <a href={href} {...rest} />;
  }
 
  return <Link {...props} />;
}

Copy'use client';
import { type Framework, FrameworkProvider } from '@/framework/index';
import type { ReactNode } from 'react';
import { useParams, usePathname, useRouter } from 'next/navigation';
import Link from 'next/link';
import Image from 'next/image';
 
export function NextProvider({
  children,
  Link: CustomLink,
  Image: CustomImage,
}: {
  children: ReactNode;
  Link?: Framework['Link'];
  Image?: Framework['Image'];
}) {
  return (
    <FrameworkProvider
      usePathname={usePathname}
      useRouter={useRouter}
      useParams={useParams}
      Link={CustomLink ?? (Link as Framework['Link'])}
      Image={CustomImage ?? (Image as Framework['Image'])}
    >
      {children}
    </FrameworkProvider>
  );

Copy'use client';
import type { ComponentProps } from 'react';
import { RootProvider as BaseProvider } from '@/provider/base';
import { NextProvider } from 'fumadocs-core/framework/next';
import type { Framework } from 'fumadocs-core/framework';
 
export interface RootProviderProps extends ComponentProps<typeof BaseProvider> {
  /**
   * Custom framework components to override Next.js defaults
   */
  components?: {
    Link?: Framework['Link'];
    Image?: Framework['Image'];
  };
}
 
export function RootProvider({ components, ...props }: RootProviderProps) {
  return (
    <NextProvider Link={components?.Link} Image={components?.Image}>
      <BaseProvider {...props}>{props.children}</BaseProvider>
    </NextProvider>
  );
}

Copyconst framework: Framework = {
  usePathname() {
    return useLocation().pathname;
  },
  useParams() {
    return useParams() as Record<string, string | string[]>;
  },

CopyuseRouter() {
  const navigate = useNavigate();
  const revalidator = useRevalidator();
 
  return useMemo(
    () => ({
      push(url) {
        navigate(url);
      },
      refresh() {
        void revalidator.revalidate();
      },
    }),
    [navigate, revalidator],
  );
},

CopyLink({ href, prefetch, ...props }) {
  return (
    <Link to={href!} prefetch={prefetch ? 'intent' : 'none'} {...props}>
      {props.children}
    </Link>
  );
},

Copyexport function ReactRouterProvider({
  children,
  Link: CustomLink,
  Image: CustomImage,
}: {
  children: ReactNode;
  Link?: Framework['Link'];
  Image?: Framework['Image'];
}) {
  return (
    <FrameworkProvider
      {...framework}
      Link={CustomLink ?? framework.Link}
      Image={CustomImage ?? framework.Image}
    >
      {children}
    </FrameworkProvider>
  );
}

Copyexport interface RootProviderProps extends ComponentProps<typeof BaseProvider> {
  /**
   * Custom framework components to override React Router defaults
   */
  components?: {
    Link?: Framework['Link'];
    Image?: Framework['Image'];
  };
}
 
export function RootProvider({ components, ...props }: RootProviderProps) {
  return (
    <ReactRouterProvider Link={components?.Link} Image={components?.Image}>
      <BaseProvider {...props}>{props.children}</BaseProvider>
    </ReactRouterProvider>
  );

Copyconst framework: Framework = {
  Link({ href, prefetch = true, ...props }) {
    return (
      <Link to={href} preload={prefetch ? 'intent' : false} {...props}>
        {props.children}
      </Link>
    );
  },

CopyusePathname() {
  const { isLoading, pathname } = useRouterState({
    select: (state) => ({
      isLoading: state.isLoading,
      pathname: state.location.pathname,
    }),
  });
 
  const activePathname = useRef(pathname);
  return useMemo(() => {
    if (isLoading) {
      return activePathname.current;
    }
 
    activePathname.current = pathname;
    return pathname;
  }, [isLoading, pathname]);
},

CopyuseRouter() {
  const router = useRouter();
 
  return useMemo(
    () => ({
      push(url) {
        void router.navigate({
          href: url,
        });
      },
      refresh() {
        void router.invalidate();
      },
    }),
    [router],
  );
},

Copy  useParams() {
    return useParams({ strict: false });
  },
};
 
/**
 * Fumadocs adapter for Tanstack Router/Start
 */
export function TanstackProvider({
  children,
  Link: CustomLink,
  Image: CustomImage,
}: {
  children: ReactNode;
  Link?: Framework['Link'];
  Image?: Framework['Image'];
}) {
  return (
    <FrameworkProvider
      {...framework}
      Link={CustomLink ?? framework.Link}
      Image={CustomImage ?? framework.Image}
    >
      {children}
    </FrameworkProvider>
  );
}

Copyexport interface RootProviderProps extends ComponentProps<typeof BaseProvider> {
  /**
   * Custom framework components to override Tanstack Router defaults
   */
  components?: {
    Link?: Framework['Link'];
    Image?: Framework['Image'];
  };
}
 
export function RootProvider({ components, ...props }: RootProviderProps) {
  return (
    <TanstackProvider Link={components?.Link} Image={components?.Image}>
      <BaseProvider {...props}>{props.children}</BaseProvider>
    </TanstackProvider>
  );

Copyconst framework: Framework = {
  usePathname() {
    return useRouter().path;
  },
  useParams() {
    console.warn('[Fumadocs] useParams() is not supported on Waku');
    return useMemo(() => ({}), []);
  },

CopyuseRouter() {
  const router = useRouter();
  const routerRef = useRef(router);
  routerRef.current = router;
 
  return useMemo(
    () => ({
      push(url: string) {
        return routerRef.current.push(url);
      },
      refresh() {
        return routerRef.current.reload();
      },
    }),
    [],
  );
},

Copy  Link({ href, prefetch = true, ...props }) {
    return (
      <Link to={href!} unstable_prefetchOnEnter={prefetch} {...props}>
        {props.children}
      </Link>
    );
  },
};

Copyexport function WakuProvider({
  children,
  Link: CustomLink,
  Image: CustomImage,
}: {
  children: ReactNode;
  Link?: Framework['Link'];
  Image?: Framework['Image'];
}) {
  return (
    <FrameworkProvider
      {...framework}
      Link={CustomLink ?? framework.Link}
      Image={CustomImage ?? framework.Image}
    >
      {children}
    </FrameworkProvider>
  );
}

Copyexport interface RootProviderProps extends ComponentProps<typeof BaseProvider> {
  /**
   * Custom framework components to override Waku defaults
   */
  components?: {
    Link?: Framework['Link'];
    Image?: Framework['Image'];
  };
}
 
export function RootProvider({ components, ...props }: RootProviderProps) {
  return (
    <WakuProvider Link={components?.Link} Image={components?.Image}>
      <BaseProvider {...props}>{props.children}</BaseProvider>
    </WakuProvider>
  );

Copyconst compiler = createMarkdownCompiler({
  remarkPlugins: [
    remarkGfm,
    remarkMath,
    remarkMdxMermaid,
    plugin(remarkHeading, { generateToc: false }),
    plugin(remarkNpm, { persist: { id: 'package-manager' } }),
    remarkCodeTab,
  ],
  remarkRehypeOptions: {
    passThrough: ['mdxJsxFlowElement', 'mdxJsxTextElement'],
  },
  rehypePlugins: [
    rehypeKatex,
    plugin(rehypeCode, { lazy: true, fallbackLanguage: 'text' }),
    plugin(rehypeToc, { exportToc: { as: 'data' } }),
  ],
});

Copyexport const DynamicLink = forwardRef<HTMLAnchorElement, DynamicLinkProps>(
  ({ href, ...props }, ref) => {
    const params = useParams();
 
    const url = useMemo(() => (href ? updateHref(href, params) : href), [params, href]);
 
    return <Link ref={ref} href={url} {...props} />;
  },
);

Copyexport function updateHref(href: string, params: Record<string, string | string[]>) {
  return href.replace(/\[(.*)]\/?/, (match, key) => {
    const hasEndingSlash = match[match.length - 1] === '/';
    const value = key in params ? params[key] : undefined;
    if (!value) return '';
 
    const replacement = typeof value === 'string' ? value : value.join('/');
    return hasEndingSlash ? `${replacement}/` : replacement;
  });
}

Copyexport function updateHref(href: string, params: Record<string, string | string[]>) {
  return href.replace(/\[(.*)]\/?/, (match, key) => {
    const hasEndingSlash = match[match.length - 1] === '/';
    const value = key in params ? params[key] : undefined;
    if (!value) return '';
 
    const replacement = typeof value === 'string' ? value : value.join('/');
    return hasEndingSlash ? `${replacement}/` : replacement;
  });
}

Copyexport function isLayoutTabActive(tab: LayoutTab, pathname: string) {
  if (tab.$folder) {
    return (
      PageTree.findPath(
        tab.$folder.children,
        (node) => node.type === 'page' && isActive(node.url, pathname),
      ) !== null
    );
  }
 
  if (tab.urls) {
    return tab.urls.has(normalize(pathname));
  }
 
  return isActive(tab.url, pathname, true);
}