Internationalization Support

Copyinterface MiddlewareOptions extends I18nConfig {
  format?: URLFormatter | ((locale: string, pathname: string) => string);
  cookieName?: string;
}
 
export interface URLFormatter {
  get: (url: NextURL) => string | undefined;
  add: (url: NextURL, locale: string) => URL;
  remove: (url: NextURL) => URL;
}

Copyexport const DefaultFormatter: URLFormatter = {
  get(url) {
    const segs = url.pathname.split('/');
    if (segs.length > 1 && segs[1]) return segs[1];
  },
  add(url, locale) {
    const next = new URL(url);
    next.pathname = `${url.basePath}/${locale}/${url.pathname}`.replaceAll(/\/+/g, '/');
    return next;
  },
  remove(url) {
    const next = new URL(url);
    const pathname = url.pathname.split('/').slice(2).join('/');
    next.pathname = `${url.basePath}/${pathname}`.replaceAll(/\/+/g, '/');
    return next;
  },
};

Copy    if (!pathLocale) {
      if (hideLocale === 'default-locale') {
        return NextResponse.rewrite(formatter.add(url, defaultLanguage));
      }
 
      const finalLanguages = getNegotiator(request).languages(languages);
      const preferred = matchLocale(finalLanguages, languages, defaultLanguage);
      if (hideLocale === 'always') {
        const locale = request.cookies.get(cookieName)?.value ?? preferred;
 
        return NextResponse.rewrite(formatter.add(url, locale));
      }
 
      return NextResponse.redirect(formatter.add(url, preferred));
    }

Copyinterface LocaleItem {
  name: string;
  locale: string;
}
 
interface LocaleContextType {
  locale?: string;
  onChange?: (v: string) => void;
  locales?: LocaleItem[];
}
 
const LocaleContext = createContext<LocaleContextType>({});
 
export function useI18n(): LocaleContextType {
  return use(LocaleContext);
}

Copyexport function I18nProvider({
  locales = [],
  locale,
  onLocaleChange,
  children,
  translations = Empty,
}: I18nProviderProps) {
  const router = useRouter();
  const pathname = usePathname();
  const onChange = (value: string) => {
    if (onLocaleChange) {
      return onLocaleChange(value);
    }
    const segments = pathname.split('/').filter((v) => v.length > 0);
 
    if (segments.length === 0 || segments[0] !== locale) {
      segments.unshift(value);
    } else {
      segments[0] = value;
    }
 
    router.push(`/${segments.join('/')}`);
  };

Copyexport function LanguageSelect({
  className,
  variant = 'ghost',
  children,
  ...rest
}: LanguageSelectProps): React.ReactElement {
  const context = useI18n();
  const t = useTranslations({ note: 'language switcher' });
  if (!context.locales) throw new Error('Missing `<I18nProvider />`');
 
  const chooseLanguage = t('Choose a language');
 
  return (
    <Popover>
      <PopoverTrigger
        aria-label={t('Choose a language', { note: 'aria-label' })}
        className={(s) =>
          cn(buttonVariants({ variant }), 'gap-1.5 p-1.5', s.open && 'bg-fd-accent', className)
        }
        {...rest}
      >
        {children}
      </PopoverTrigger>
      <PopoverContent className="flex flex-col gap-0.5 p-1">
        <p className="p-2 text-xs font-medium text-fd-muted-foreground">{chooseLanguage}</p>

Copyexport function LanguageSelect({
  className,
  variant = 'ghost',
  children,
  ...rest
}: LanguageSelectProps): React.ReactElement {
  const context = useI18n();
  const t = useTranslations({ note: 'language switcher' });
  if (!context.locales) throw new Error('Missing `<I18nProvider />`');
 
  const chooseLanguage = t('Choose a language');
 
  return (
    <Popover>
      <PopoverTrigger
        aria-label={t('Choose a language', { note: 'aria-label' })}
        className={cn(
          buttonVariants({ variant }),
          'gap-1.5 p-1.5 data-[state=open]:bg-fd-accent',
          className,
        )}
        {...rest}
      >
        {children}
      </PopoverTrigger>
      <PopoverContent className="flex flex-col gap-0.5 p-1">
        <p className="p-2 text-xs font-medium text-fd-muted-foreground">{chooseLanguage}</p>

Copy<PopoverContent className="flex flex-col gap-0.5 p-1">
  <p className="p-2 text-xs font-medium text-fd-muted-foreground">{chooseLanguage}</p>
  {context.locales.map((item) => (
    <button
      key={item.locale}
      type="button"
      className={cn(
        'px-2 py-1.5 text-start text-sm rounded-lg transition-colors',
        item.locale === context.locale
          ? 'bg-fd-primary/10 text-fd-primary'
          : 'text-fd-muted-foreground hover:bg-fd-accent hover:text-fd-accent-foreground',
      )}
      onClick={() => {
        context.onChange?.(item.locale);
      }}
    >
      {item.name}
    </button>
  ))}
</PopoverContent>

Copy<PopoverContent className="flex flex-col gap-0.5 p-1">
  <p className="p-2 text-xs font-medium text-fd-muted-foreground">{chooseLanguage}</p>
  {context.locales.map((item) => (
    <button
      key={item.locale}
      type="button"
      className={cn(
        'px-2 py-1.5 text-start text-sm rounded-lg transition-colors',
        item.locale === context.locale
          ? 'bg-fd-primary/10 text-fd-primary'
          : 'text-fd-muted-foreground hover:bg-fd-accent hover:text-fd-accent-foreground',
      )}
      onClick={() => {
        context.onChange?.(item.locale);
      }}
    >
      {item.name}
    </button>
  ))}
</PopoverContent>

Copyexport type LanguageSelectTextProps = ComponentProps<'span'>;
 
export function LanguageSelectText(props: LanguageSelectTextProps) {
  const { locales, locale } = useI18n();
  const text = locales?.find((item) => item.locale === locale)?.name;
 
  return <span {...props}>{text}</span>;
}

Copyexport type LanguageSelectTextProps = ComponentProps<'span'>;
 
export function LanguageSelectText(props: LanguageSelectTextProps) {
  const { locales, locale } = useI18n();
  const text = locales?.find((item) => item.locale === locale)?.name;
 
  return <span {...props}>{text}</span>;
}

Copyimport translationKeys from '@/.translations/keys.json';
import type { TranslationExtension } from 'fumadocs-core/i18n';
import type { Translations } from '@/.translations';
 
export type { Translations };
export function apiDocsTranslations(): TranslationExtension<keyof Translations> {
  return { keys: translationKeys as never };
}

Copyimport translationKeys from '@/.translations/keys.json';
import type { TranslationExtension } from 'fumadocs-core/i18n';
import type { Translations } from '@/.translations';
import {
  type Translations as SharedTranslations,
  apiDocsTranslations,
} from '@fumadocs/api-docs/i18n';
 
export type { Translations };
export function openapiTranslations(): TranslationExtension<
  keyof Translations | keyof SharedTranslations
> {
  const shared = apiDocsTranslations();
  return { keys: [...shared.keys, ...translationKeys] as never };
}

Copyimport type { TranslationPreset } from 'fumadocs-core/i18n';
import type { Translations as UITranslations } from 'fumadocs-ui/i18n';
import type { Translations as OpenAPITranslations } from 'fumadocs-openapi/i18n';
import type { Translations as AsyncAPITranslations } from '@fumadocs/asyncapi/i18n';
import type { Translations as StoryTranslations } from '@fumadocs/story/i18n';
import type { Translations as APIDocsTranslations } from '@fumadocs/api-docs/i18n';
 
type Translations = UITranslations &
  OpenAPITranslations &
  AsyncAPITranslations &
  StoryTranslations &
  APIDocsTranslations;

Copyexport function defineI18nOpenAPI<Languages extends string>(
  config: I18nUIConfig<Languages>,
  translations: Partial<Record<NoInfer<Languages>, Partial<Translations>>>,
): I18nUIConfig<Languages> {
  return {
    ...config,
    provider(locale = config.defaultLanguage) {
      const out = config.provider(locale);
      const data = translations[locale as Languages];
      if (data) {
        out.translations = { ...out.translations, ...data };
      }
      return out;
    },
  };
}

Copyexport function TreeContextProvider({
  tree: rawTree,
  children,
}: {
  tree: PageTree.Root;
  children: ReactNode;
}) {
  const nextIdRef = useRef(0);
  const pathname = usePathname();
 
  const tree = useMemo(() => rawTree, [rawTree.$id]);
  const path = useMemo(() => {
    return (
      searchPath(tree.children, pathname) ??
      (tree.fallback ? searchPath(tree.fallback.children, pathname) : null) ??
      []
    );
  }, [tree, pathname]);
 
  const root = path.findLast((item) => item.type === 'folder' && item.root) ?? tree;
  root.$id ??= String(nextIdRef.current++);
 
  return (
    <TreeContext value={useMemo(() => ({ root, full: tree }) as TreeContextType, [root, tree])}>
      <PathContext value={path}>{children}</PathContext>
    </TreeContext>
  );
}

Copyconst footerCache = new WeakMap<PageTree.Root | PageTree.Folder, PageTree.Item[]>();
 
export function useFooterItems(): PageTree.Item[] {
  const { root } = useTreeContext();
  const cached = footerCache.get(root);
  if (cached) return cached;
 
  const list: PageTree.Item[] = [];
  function onNode(node: PageTree.Node) {
    if (node.type === 'folder') {
      if (node.index) onNode(node.index);
      for (const child of node.children) onNode(child);
    } else if (node.type === 'page' && !node.external) {
      list.push(node);
    }
  }
 
  for (const child of root.children) onNode(child);
  footerCache.set(root, list);
  return list;
}

Copyexport function Footer({ items, children, className, ...props }: FooterProps) {
  const footerList = useFooterItems();
  const pathname = usePathname();
  const { previous, next } = useMemo(() => {
    if (items) return items;
 
    const idx = footerList.findIndex((item) => isActive(item.url, pathname));
 
    if (idx === -1) return {};
    return {
      previous: footerList[idx - 1],
      next: footerList[idx + 1],
    };
  }, [footerList, items, pathname]);
 
  return (
    <>
      <div
        className={cn(
          '@container grid gap-4',
          previous && next ? 'grid-cols-2' : 'grid-cols-1',
          className,
        )}
        {...props}
      >
        {previous && <FooterItem item={previous} index={0} />}
        {next && <FooterItem item={next} index={1} />}
      </div>
      {children}
    </>
  );
}