Function GuidebookApp

pages/_app.tsx:44–164

({
  Component,
  pageProps,
  router,
  locale,
  guidebook,
}: AppProps & {
  locale: string
  guidebook: TreeNode
})

const { locales, defaultLocale } = config.i18n!

export default function GuidebookApp({
  Component,
  pageProps,
  router,
  locale,
  guidebook,
}: AppProps & {
  locale: string
  guidebook: TreeNode
}) {
  const localePrefix = locale === defaultLocale ? '' : `/${locale}`

  const LinkComponent = useMemo(() => {
    return ({ href, children, style }: LinkProps) => (
      <Link
        href={isExternalUrl(href) ? href : `${localePrefix}${href}`}
        passHref
      >
        <Anchor style={style}>{children}</Anchor>
      </Link>
    )
  }, [localePrefix])

  const Components = useMemo(
    () => ({
      ...PageComponents,
      Example: EditorConsole,
      Author,
      FileTreeDiagram,
      Details: ({ children }: { children: React.ReactNode }) => children,
      a: LinkComponent,
    }),
    [LinkComponent]
  )

  // Use `asPath`, since `pathname` will be "_error" if the page isn't found
  const pathname = router.pathname.slice(localePrefix.length)
  const clientPath = router.asPath.slice(localePrefix.length)
  const theme = pathname.endsWith('slides') ? slidesTheme : defaultTheme

  let content
  let title: string
  let description: string | undefined

  const node = findNodeBySlug(guidebook, pathname.slice(1))

  if (node) {
    const isIntroduction = node.slug === ''

    title = node.title
    description = node.subtitle
    content = (
      <MDXProvider components={Components}>
        <Page
          rootNode={guidebook}
          header={
            isIntroduction ? (
              <Banner logo={logo} github={config.github} />