@primer/doctocat-nextjs 0.1.0-rc.61e8cc5 → 0.2.0-rc.10bf384

package/components/layout/root-layout/Theme.tsx

@@ -1,11 +1,9 @@
-import React, {useMemo, useRef} from 'react'
-import {createPortal} from 'react-dom'
+'use client'
+import React, {PropsWithChildren, useMemo} from 'react'
 import NextLink from 'next/link'
 import Head from 'next/head'
-import type {Folder, MdxFile, NextraThemeLayoutProps} from 'nextra'
-import {MDXProvider} from 'nextra/mdx'
+import type {Folder, MdxFile, PageMapItem} from 'nextra'
 import {useFSRoute} from 'nextra/hooks'
-import {PencilIcon} from '@primer/octicons-react'
 import {BaseStyles, Box as PRCBox, Breadcrumbs, PageLayout, ThemeProvider} from '@primer/react'
 
 import {
@@ -17,7 +15,6 @@ import {
   Button,
   Hero,
   Heading,
-  InlineLink,
   Stack,
   Text,
 } from '@primer/react-brand'
@@ -27,28 +24,49 @@ import {UnderlineNav} from '../underline-nav/UnderlineNav'
 import '@primer/react-brand/fonts/fonts.css'
 import '@primer/react-brand/lib/css/main.css'
 
-import {useRouter} from 'next/router'
-import getConfig from 'next/config'
 import {normalizePages} from 'nextra/normalize-pages'
+import {usePathname} from 'next/navigation'
+
 import {Header} from '../header/Header'
-import {TableOfContents} from '../table-of-contents/TableOfContents'
-import bodyStyles from '../../../css/prose.module.css'
 import {IndexCards} from '../index-cards/IndexCards'
 import {useColorMode} from '../../context/color-modes/useColorMode'
 import {SkipToMainContent} from '../skip-to-main-content/SkipToMainContent'
-import {RelatedContentLink, RelatedContentLinks} from '../related-content-links/RelatedContentLinks'
+import {RelatedContentLinks} from '../related-content-links/RelatedContentLinks'
+import {getRelatedPages} from '../related-content-links/getRelatedPages'
 import {hasChildren} from '../../../helpers/hasChildren'
+import {Footer} from '../footer/Footer'
+
+const repoSrcPath = process.env.NEXT_PUBLIC_REPO_SRC_PATH || ''
+const repoURL = process.env.NEXT_PUBLIC_REPO || ''
+
+if (!repoURL) {
+  // eslint-disable-next-line no-console
+  console.warn(
+    'NEXT_PUBLIC_REPO is not set. Edit the .env.local file to set the NEXT_PUBLIC_REPO environment variable.',
+  )
+}
 
-const {publicRuntimeConfig} = getConfig()
+export type ThemeProps = PropsWithChildren<{
+  pageMap: PageMapItem[]
+}>
 
-export function Theme({children, pageOpts}: NextraThemeLayoutProps) {
-  const tocPortalRef = useRef<HTMLDivElement | null>(null)
-  const {title, frontMatter, filePath, pageMap} = pageOpts
+export function Theme({children, pageMap}: ThemeProps) {
+  const pathname = usePathname()
+
+  const normalizedPages = normalizePages({
+    list: pageMap,
+    route: pathname,
+  })
+
+  const {activeMetadata} = normalizedPages
+
+  const {filePath = '', title = ''} = activeMetadata || {}
+
+  const route = usePathname()
 
-  const {asPath: route} = useRouter()
   const fsPath = useFSRoute()
   const {colorMode} = useColorMode()
-  const {activePath, topLevelNavbarItems, docsDirectories, flatDocsDirectories} = useMemo(
+  const {activePath, flatDocsDirectories} = useMemo(
     () =>
       normalizePages({
         list: pageMap,
@@ -57,91 +75,35 @@ export function Theme({children, pageOpts}: NextraThemeLayoutProps) {
     [pageMap, fsPath],
   )
 
-  const {siteTitle} = publicRuntimeConfig
+  // eslint-disable-next-line i18n-text/no-en
+  const siteTitle = process.env.NEXT_PUBLIC_SITE_TITLE || 'Example Site'
   const isHomePage = route === '/'
-  const isIndexPage = /index\.mdx?$/.test(filePath) && !isHomePage && !frontMatter['show-tabs']
+  const isIndexPage = /index\.mdx?$/.test(filePath) && !isHomePage && activeMetadata && !activeMetadata['show-tabs']
   const data = !isHomePage && activePath[activePath.length - 2]
   const filteredTabData: MdxFile[] = data && hasChildren(data) ? ((data as Folder).children as MdxFile[]) : []
 
-  /**
-   * Uses a frontmatter 'keywords' value (as an array)
-   * to find adjacent pages that share the same values.
-   * @returns {RelatedContentLink[]}
-   */
-  const getRelatedPages = () => {
-    const currentPageKeywords = frontMatter.keywords || []
-    const relatedLinks = frontMatter['related'] || []
-    const matches: RelatedContentLink[] = []
-
-    // 1. Check keywords property and find local matches
-    for (const page of flatDocsDirectories) {
-      if (page.route === route) continue
-
-      if ('frontMatter' in page) {
-        const pageKeywords = page.frontMatter?.keywords || []
-        const intersection = pageKeywords.filter(keyword => currentPageKeywords.includes(keyword))
-
-        if (intersection.length) {
-          matches.push(page)
-        }
-      }
-    }
-
-    // 2. Check related property for internal and external links
-    for (const link of relatedLinks) {
-      if (!link.title || !link.href || link.href === route) continue
-
-      if (link.href.startsWith('/')) {
-        const page = flatDocsDirectories.find(localPage => localPage.route === link.href) as
-          | RelatedContentLink
-          | undefined
-
-        if (page) {
-          const entry = {
-            ...page,
-            title: link.title || page.title,
-            route: link.href || page.route,
-          }
-          matches.push(entry)
-        }
-      } else {
-        matches.push({...link, route: link.href})
-      }
-    }
-
-    return matches
-  }
-
+  const relatedLinks = getRelatedPages(route, activeMetadata, flatDocsDirectories)
   return (
     <>
       <BrandThemeProvider dir="ltr" colorMode={colorMode}>
         <ThemeProvider colorMode={colorMode}>
           <BaseStyles>
-            <Head>
-              <title>{title}</title>
-              {frontMatter.description && <meta name="description" content={frontMatter.description} />}
-              <meta property="og:type" content="website" />
-              <meta property="og:title" content={title} />
-              {frontMatter.description && <meta property="og:description" content={frontMatter.description} />}
-              <meta
-                property="og:image"
-                content={
-                  frontMatter.image ||
-                  'https://github.com/primer/brand/assets/19292210/8562a9a5-a1e4-4722-9ec7-47ebccd5901e'
-                }
-              />
-              {/* X (Twitter) OG */}
-              <meta name="twitter:card" content="summary_large_image" />
-              <meta name="twitter:title" content={title} />
-              {frontMatter.description && <meta name="twitter:description" content={frontMatter.description} />}
-              <meta
-                name="twitter:image"
-                content={
-                  frontMatter.image ||
-                  'https://github.com/primer/brand/assets/19292210/8562a9a5-a1e4-4722-9ec7-47ebccd5901e'
-                }
-              />
-            </Head>
+            {activeMetadata && (
+              <Head>
+                <title>{title}</title>
+                {activeMetadata.description && <meta name="description" content={activeMetadata.description} />}
+                <meta property="og:type" content="website" />
+                <meta property="og:title" content={title} />
+                {activeMetadata.description && <meta property="og:description" content={activeMetadata.description} />}
+                <meta property="og:image" content={activeMetadata.image || '/og-image.png'} />
+                {/* X (Twitter) OG */}
+                <meta name="twitter:card" content="summary_large_image" />
+                <meta name="twitter:title" content={title} />
+                {activeMetadata.description && <meta name="twitter:description" content={activeMetadata.description} />}
+                <meta name="twitter:image" content={activeMetadata.image || '/og-image.png'} />
+              </Head>
+            )}
+
             <AnimationProvider runOnce visibilityOptions={1} autoStaggerChildren={false}>
               <Animate animate="fade-in">
                 <PRCBox
@@ -152,163 +114,102 @@ export function Theme({children, pageOpts}: NextraThemeLayoutProps) {
                   }}
                 >
                   <SkipToMainContent href="#main">Skip to main content</SkipToMainContent>
-                  <Header
-                    pageMap={pageMap}
-                    docsDirectories={docsDirectories}
-                    menuItems={topLevelNavbarItems}
-                    siteTitle={siteTitle}
-                  />
+                  <Header pageMap={pageMap} siteTitle={siteTitle} />
                 </PRCBox>
                 <PageLayout rowGap="none" columnGap="none" padding="none" containerWidth="full">
                   <PageLayout.Content padding="normal">
                     <div id="main">
-                      <PRCBox sx={!isHomePage && {display: 'flex', maxWidth: 1600, margin: '0 auto'}}>
-                        <MDXProvider
-                          components={{
-                            wrapper: ({children: mdxChildren, toc}) => {
-                              return (
-                                <>
-                                  {tocPortalRef.current &&
-                                    createPortal(
-                                      <PRCBox sx={{py: 2, pr: 3, display: ['none', null, null, null, 'block']}}>
-                                        <PRCBox
-                                          sx={{
-                                            position: 'sticky',
-                                            top: 112,
-                                            width: 220,
-                                          }}
-                                        >
-                                          {toc.length > 0 && <TableOfContents headings={toc} />}
-                                        </PRCBox>
-                                      </PRCBox>,
-
-                                      tocPortalRef.current,
-                                    )}
-
-                                  <div>{mdxChildren}</div>
-                                </>
-                              )
-                            },
-                          }}
-                        >
-                          <PRCBox sx={!isHomePage && {maxWidth: 800, width: '100%', margin: '0 auto'}}>
-                            <Stack direction="vertical" padding="none" gap="spacious">
-                              {!isHomePage && (
-                                <>
-                                  {activePath.length && (
-                                    <Breadcrumbs>
-                                      {siteTitle && (
-                                        <Breadcrumbs.Item
-                                          as={NextLink}
-                                          href="/"
-                                          sx={{
-                                            color: 'var(--brand-InlineLink-color-rest)',
-                                          }}
-                                        >
-                                          {siteTitle}
-                                        </Breadcrumbs.Item>
-                                      )}
-                                      {activePath.map((item, index) => {
-                                        return (
-                                          <Breadcrumbs.Item
-                                            as={NextLink}
-                                            key={item.name}
-                                            href={item.route}
-                                            selected={index === activePath.length - 1}
-                                            sx={{
-                                              textTransform: 'capitalize',
-                                              color: 'var(--brand-InlineLink-color-rest)',
-                                            }}
-                                          >
-                                            {item.title.replace(/-/g, ' ')}
-                                          </Breadcrumbs.Item>
-                                        )
-                                      })}
-                                    </Breadcrumbs>
+                      <PRCBox sx={!isHomePage && {maxWidth: 1200, width: '100%', margin: '0 auto'}}>
+                        <Stack direction="vertical" padding="none" gap="spacious">
+                          {!isHomePage && (
+                            <>
+                              {activePath.length && (
+                                <Breadcrumbs>
+                                  {siteTitle && (
+                                    <Breadcrumbs.Item
+                                      as={NextLink}
+                                      href="/"
+                                      sx={{
+                                        color: 'var(--brand-InlineLink-color-rest)',
+                                      }}
+                                    >
+                                      {siteTitle}
+                                    </Breadcrumbs.Item>
                                   )}
-
-                                  <Box>
-                                    <Stack direction="vertical" padding="none" gap={12} alignItems="flex-start">
-                                      {frontMatter.title && (
-                                        <Heading as="h1" size="3">
-                                          {frontMatter.title}
-                                        </Heading>
-                                      )}
-                                      {frontMatter.description && (
-                                        <Text as="p" variant="muted" size="300">
-                                          {frontMatter.description}
-                                        </Text>
-                                      )}
-                                      {frontMatter.image && (
-                                        <Box paddingBlockStart={16}>
-                                          <Hero.Image src={frontMatter.image} alt={frontMatter['image-alt']} />
-                                        </Box>
-                                      )}
-                                      {frontMatter['action-1-text'] && (
-                                        <Box paddingBlockStart={16}>
-                                          <ButtonGroup>
-                                            <Button as="a" href={frontMatter['action-1-link']}>
-                                              {frontMatter['action-1-text']}
-                                            </Button>
-                                            {frontMatter['action-2-text'] && (
-                                              <Button as="a" variant="secondary" href={frontMatter['action-2-link']}>
-                                                {frontMatter['action-2-text']}
-                                              </Button>
-                                            )}
-                                          </ButtonGroup>
-                                        </Box>
-                                      )}
-                                    </Stack>
-                                  </Box>
-                                  {Boolean(frontMatter['show-tabs']) && <UnderlineNav tabData={filteredTabData} />}
-                                </>
+                                  {activePath.map((item, index) => {
+                                    return (
+                                      <Breadcrumbs.Item
+                                        as={NextLink}
+                                        key={item.name}
+                                        href={item.route}
+                                        selected={index === activePath.length - 1}
+                                        sx={{
+                                          textTransform: 'capitalize',
+                                          color: 'var(--brand-InlineLink-color-rest)',
+                                        }}
+                                      >
+                                        {item.title.replace(/-/g, ' ')}
+                                      </Breadcrumbs.Item>
+                                    )
+                                  })}
+                                </Breadcrumbs>
                               )}
-                              <article className={route !== '/' && !isIndexPage ? bodyStyles.Prose : ''}>
-                                {isIndexPage ? (
-                                  <IndexCards folderData={flatDocsDirectories} route={route} />
-                                ) : (
-                                  <>
-                                    <>{children}</>
-                                    {getRelatedPages().length > 0 && (
-                                      <PRCBox sx={{pt: 5}}>
-                                        <RelatedContentLinks links={getRelatedPages()} />
-                                      </PRCBox>
-                                    )}
-                                  </>
-                                )}
-                              </article>
-                              <footer>
-                                <Box marginBlockStart={64}>
-                                  <Stack direction="vertical" padding="none" gap={16}>
-                                    <Stack direction="horizontal" padding="none" alignItems="center" gap={8}>
-                                      <PencilIcon size={16} fill="var(--brand-InlineLink-color-rest)" />
 
-                                      <InlineLink
-                                        href={`${publicRuntimeConfig.repo}/blob/main/${
-                                          publicRuntimeConfig.repoSrcPath ? `${publicRuntimeConfig.repoSrcPath}/` : ''
-                                        }${filePath}`}
-                                      >
-                                        Edit this page
-                                      </InlineLink>
-                                    </Stack>
-                                    <Box
-                                      marginBlockStart={8}
-                                      paddingBlockStart={24}
-                                      borderStyle="solid"
-                                      borderBlockStartWidth="thin"
-                                      borderColor="default"
-                                    >
-                                      <Text as="p" variant="muted" size="100">
-                                        &copy; {new Date().getFullYear()} GitHub, Inc. All rights reserved.
-                                      </Text>
+                              <Box>
+                                <Stack direction="vertical" padding="none" gap={12} alignItems="flex-start">
+                                  {activeMetadata?.title && (
+                                    <Heading as="h1" size="3">
+                                      {activeMetadata.title}
+                                    </Heading>
+                                  )}
+                                  {activeMetadata?.description && (
+                                    <Text as="p" variant="muted" size="300">
+                                      {activeMetadata.description}
+                                    </Text>
+                                  )}
+                                  {activeMetadata?.image && (
+                                    <Box paddingBlockStart={16} style={{width: '100%'}}>
+                                      <Hero.Image src={activeMetadata.image} alt={activeMetadata['image-alt']} />
+                                    </Box>
+                                  )}
+                                  {activeMetadata && activeMetadata['action-1-text'] && (
+                                    <Box paddingBlockStart={16}>
+                                      <ButtonGroup>
+                                        <Button as="a" href={activeMetadata['action-1-link']}>
+                                          {activeMetadata['action-1-text']}
+                                        </Button>
+                                        {activeMetadata['action-2-text'] && (
+                                          <Button as="a" variant="secondary" href={activeMetadata['action-2-link']}>
+                                            {activeMetadata['action-2-text']}
+                                          </Button>
+                                        )}
+                                      </ButtonGroup>
                                     </Box>
-                                  </Stack>
-                                </Box>
-                              </footer>
-                            </Stack>
-                          </PRCBox>
-                        </MDXProvider>
-                        <div ref={tocPortalRef} />
+                                  )}
+                                </Stack>
+                              </Box>
+                              {activeMetadata && activeMetadata['show-tabs'] && (
+                                <UnderlineNav tabData={filteredTabData} />
+                              )}
+                            </>
+                          )}
+                          <article>
+                            {isIndexPage ? (
+                              <IndexCards folderData={flatDocsDirectories} route={route} />
+                            ) : (
+                              <>
+                                <>{children}</>
+
+                                {relatedLinks.length > 0 && (
+                                  <PRCBox sx={{pt: 5}}>
+                                    <RelatedContentLinks links={relatedLinks} />
+                                  </PRCBox>
+                                )}
+                              </>
+                            )}
+                          </article>
+                          <Footer filePath={filePath} repoURL={repoURL} repoSrcPath={repoSrcPath} />
+                        </Stack>
                       </PRCBox>
                     </div>
                   </PageLayout.Content>
@@ -321,7 +222,7 @@ export function Theme({children, pageOpts}: NextraThemeLayoutProps) {
                     hidden={{narrow: true}}
                     divider="line"
                   >
-                    <Sidebar pageMap={docsDirectories} />
+                    <Sidebar pageMap={pageMap} />
                   </PageLayout.Pane>
                 </PageLayout>
               </Animate>
@@ -332,22 +233,3 @@ export function Theme({children, pageOpts}: NextraThemeLayoutProps) {
     </>
   )
 }
-
-export function MdxWrapper({children, toc}) {
-  return (
-    <>
-      <PRCBox sx={{py: 2, pr: 3, display: ['none', null, null, null, 'block']}}>
-        <PRCBox
-          sx={{
-            position: 'sticky',
-            top: 112,
-            width: 220,
-          }}
-        >
-          {toc.length > 0 && <TableOfContents headings={toc} />}
-        </PRCBox>
-      </PRCBox>
-      <div>{children}</div>
-    </>
-  )
-}

package/components/layout/root-layout/index.tsx

@@ -1,8 +1,13 @@
+'use client'
 import React from 'react'
-import type {NextraThemeLayoutProps} from 'nextra'
 
 import {ColorModeProvider} from '../../context/color-modes/ColorModeProvider'
-import {Theme} from './Theme'
+import {Theme, ThemeProps} from './Theme'
+import {PageMapItem} from 'nextra'
+
+type Props = {
+  pageMap: PageMapItem[]
+} & ThemeProps
 
 /**
  * Catch-all layout component
@@ -10,10 +15,12 @@ import {Theme} from './Theme'
  * To add custom layouts, create a new file in `pages/_layouts`
  * and export a component with the same name as the layout file
  */
-export default function Shell({children, ...rest}: NextraThemeLayoutProps) {
+export default function Shell({children, pageMap, ...rest}: Props) {
   return (
     <ColorModeProvider>
-      <Theme {...rest}>{children}</Theme>
+      <Theme {...rest} pageMap={pageMap}>
+        {children}
+      </Theme>
     </ColorModeProvider>
   )
 }