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

package/components/layout/sidebar/Sidebar.tsx

@@ -1,29 +1,32 @@
 import React, {useMemo} from 'react'
 import NextLink from 'next/link'
 import {NavList} from '@primer/react'
-import {Folder, MdxFile} from 'nextra'
-import {useRouter} from 'next/router'
-import getConfig from 'next/config'
+import {Folder, MdxFile, PageMapItem} from 'nextra'
 
 import styles from './Sidebar.module.css'
 import {LinkExternalIcon} from '@primer/octicons-react'
-import type {DocsItem, ThemeConfig} from '../../../index'
+import type {DocsItem, ExtendedPageItem} from '../../../index'
 import {hasChildren} from '../../../helpers/hasChildren'
+import {usePathname} from 'next/navigation'
 
 type SidebarProps = {
-  pageMap: DocsItem[]
+  pageMap: PageMapItem[]
 }
 
-const {publicRuntimeConfig} = getConfig()
-
-const hasShowTabs = (child: DocsItem): boolean => {
+const hasShowTabs = (child: ExtendedPageItem): boolean => {
   return child.name === 'index' && (child as MdxFile).frontMatter?.['show-tabs'] === true
 }
 
-export function Sidebar({pageMap}: SidebarProps) {
-  const router = useRouter()
+export function Sidebar({pageMap: pageMapIn}: SidebarProps) {
+  const pageMap = pageMapIn as ExtendedPageItem[]
+
+  const pathname = usePathname()
 
-  const {sidebarLinks}: ThemeConfig = publicRuntimeConfig
+  const externalLinks = pageMap.filter(page => {
+    if (page.href && page.href.startsWith('http')) {
+      return page
+    }
+  })
 
   /**
    * Sorts the incoming data so that folders with a menu-position frontmatter value
@@ -33,11 +36,11 @@ export function Sidebar({pageMap}: SidebarProps) {
   const reorderedPageMap = useMemo(
     () =>
       [...pageMap].sort((a, b) => {
-        if (hasChildren(a) && a.children) {
-          const aIndex = a.children.find(child => child.name === 'index' && child.type === 'doc')
+        if (hasChildren(a)) {
+          const aIndex = a.children.find(child => (child as MdxFile).name === 'index')
           const aPosition = (aIndex as MdxFile | undefined)?.frontMatter?.['menu-position'] ?? Infinity
-          if (hasChildren(b) && b.children) {
-            const bIndex = b.children.find(child => child.name === 'index' && child.type === 'doc')
+          if (hasChildren(b)) {
+            const bIndex = b.children.find(child => (child as MdxFile).name === 'index')
             const bPosition = (bIndex as MdxFile | undefined)?.frontMatter?.['menu-position'] ?? Infinity
             return aPosition - bPosition
           }
@@ -51,95 +54,73 @@ export function Sidebar({pageMap}: SidebarProps) {
     <div className={styles.Sidebar}>
       <NavList className={styles.NavList} aria-label="Menu links">
         {reorderedPageMap.map(item => {
-          if (item.type === 'doc' && item.route === '/') return null
+          if (item.hasOwnProperty('data')) return null
+
+          if (!hasChildren(item)) return null
 
-          if (!hasChildren(item) && item.type === 'doc') {
+          const indexPage = (item as Folder).children.find(child => (child as MdxFile).name === 'index') as MdxFile
+          const subNavName = indexPage.frontMatter?.title ?? ''
+          const shouldShowTabs = indexPage.frontMatter?.['show-tabs'] ?? false
+          if (shouldShowTabs) {
             return (
-              <NavList.Item as={NextLink} key={item.name} href={item.route} sx={{textTransform: 'capitalize'}}>
-                {(item as MdxFile).frontMatter?.title ?? item.name}
+              <NavList.Item as={NextLink} key={indexPage.name} href={indexPage.route}>
+                {(indexPage as MdxFile).frontMatter?.title || item.name}
               </NavList.Item>
             )
           }
 
-          // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-          if (hasChildren(item)) {
-            const indexPage = (item as Folder).children.find(child => (child as MdxFile).name === 'index') as MdxFile
-            const subNavName = indexPage.frontMatter?.title ?? ''
-            const shouldShowTabs = indexPage.frontMatter?.['show-tabs'] ?? false
-            if (shouldShowTabs) {
-              return (
-                <NavList.Item as={NextLink} key={indexPage.name} href={indexPage.route}>
-                  {(indexPage as MdxFile).frontMatter?.title || item.name}
-                </NavList.Item>
-              )
-            }
+          return (
+            <NavList.Group title={subNavName} key={item.name} sx={{mb: 24}}>
+              {item.children
+                .sort((a, b) => ((a as MdxFile).name === 'index' ? -1 : (b as MdxFile).name === 'index' ? 1 : 0)) // puts index page first
+                // only show index page if it has show-tabs
+                .filter(child => (child as MdxFile).name !== 'index' || hasShowTabs(child as ExtendedPageItem))
+                .map(child => {
+                  if (!hasChildren(child)) {
+                    const {name, route} = child as MdxFile
 
-            return (
-              <NavList.Group title={subNavName} key={item.name} sx={{mb: 24}}>
-                {item.children &&
-                  item.children
-                    .sort((a, b) => (a.name === 'index' ? -1 : b.name === 'index' ? 1 : 0)) // puts index page first
-                    // only show index page if it has show-tabs
-                    .filter(child => child.name !== 'index' || hasShowTabs(child))
-                    .map((child: DocsItem) => {
-                      if (child.type === 'doc') {
-                        return (
-                          <NavList.Item
-                            as={NextLink}
-                            key={child.name}
-                            href={child.route}
-                            sx={{textTransform: 'capitalize'}}
-                            aria-current={child.route === router.pathname ? 'page' : undefined}
-                          >
-                            {child.title}
-                          </NavList.Item>
-                        )
-                      }
+                    return (
+                      <NavList.Item
+                        as={NextLink}
+                        key={name}
+                        href={route}
+                        aria-current={route === pathname ? 'page' : undefined}
+                      >
+                        {(child as MdxFile).frontMatter?.title || name}
+                      </NavList.Item>
+                    )
+                  }
 
-                      if (hasChildren(child)) {
-                        const landingPageItem = (child as Folder).children.find(
-                          innerChild =>
-                            (innerChild as DocsItem).type === 'doc' && (innerChild as DocsItem).name === 'index',
-                        )
-                        return (
-                          <NavList.Item
-                            as={NextLink}
-                            key={(landingPageItem as MdxFile).route}
-                            href={(landingPageItem as MdxFile).route}
-                            sx={{textTransform: 'capitalize'}}
-                            aria-current={(landingPageItem as MdxFile).route === router.pathname ? 'page' : undefined}
-                          >
-                            {(landingPageItem as MdxFile).frontMatter?.title || item.name}
-                          </NavList.Item>
-                        )
-                      }
+                  if (hasChildren(child)) {
+                    const landingPageItem = (child as Folder).children.find(
+                      innerChild => (innerChild as DocsItem).name === 'index',
+                    )
 
-                      return null
-                    })}
-              </NavList.Group>
-            )
-          }
-
-          return null
+                    return (
+                      <NavList.Item
+                        as={NextLink}
+                        key={(landingPageItem as MdxFile).route}
+                        href={(landingPageItem as MdxFile).route}
+                        sx={{textTransform: 'capitalize'}}
+                        aria-current={(landingPageItem as MdxFile).route === pathname ? 'page' : undefined}
+                      >
+                        {(landingPageItem as MdxFile).frontMatter?.title || item.name}
+                      </NavList.Item>
+                    )
+                  }
+                })}
+            </NavList.Group>
+          )
         })}
-        {sidebarLinks && sidebarLinks.length > 0 && (
+        {externalLinks.length > 0 && (
           <NavList.Group title="" sx={{mb: 24}}>
-            {sidebarLinks.map(link => {
-              const isExternalUrl = link.href.startsWith('http')
-
+            {externalLinks.map(link => {
               return (
-                <NavList.Item
-                  as={NextLink}
-                  key={link.title}
-                  href={link.href}
-                  target={isExternalUrl ? '_blank' : undefined}
-                >
+                <NavList.Item as={NextLink} key={link.title} href={link.href}>
                   {link.title}
-                  {isExternalUrl && (
-                    <NavList.TrailingVisual>
-                      <LinkExternalIcon />
-                    </NavList.TrailingVisual>
-                  )}
+                  <NavList.TrailingVisual>
+                    <LinkExternalIcon />
+                  </NavList.TrailingVisual>
                 </NavList.Item>
               )
             })}

package/components/layout/table-of-contents/TableOfContents.module.css

@@ -1,3 +1,8 @@
+.wrapper {
+  position: sticky;
+  top: 0;
+}
+
 .heading {
   font-size: var(--base-size-12);
   padding-inline-start: var(--base-size-16);

package/components/layout/table-of-contents/TableOfContents.tsx

@@ -1,7 +1,9 @@
+'use client'
 import React, {useEffect, useMemo} from 'react'
 import {NavList} from '@primer/react'
 import {Text} from '@primer/react-brand'
 import {Heading as HeadingType} from 'nextra'
+import clsx from 'clsx'
 
 import styles from './TableOfContents.module.css'
 
@@ -57,14 +59,14 @@ export function TableOfContents({headings}: TableOfContentsProps) {
   if (!depth2Headings.length) return null
 
   return (
-    <aside className={styles.wrapper}>
+    <aside className={clsx(styles.wrapper, 'exclude-from-prose', 'custom-component')}>
       <Text as="p" size="100" variant="muted" weight="normal" className={styles.heading}>
         On this page
       </Text>
-      <NavList aria-label="Table of contents">
+      <NavList aria-label="Table of contents" className="custom-component">
         {depth2Headings.map(heading => (
           <NavList.Item
-            className={styles.item}
+            className={clsx(styles.item, 'custom-component')}
             key={heading.id}
             id={`toc-heading-${heading.id}`}
             href={`#${heading.id}`}

package/components/layout/underline-nav/UnderlineNav.tsx

@@ -1,6 +1,7 @@
-import React from 'react'
+import React, {useEffect, useState} from 'react'
 import {UnderlineNav as PrimerUnderlineNav} from '@primer/react'
-import {useRouter} from 'next/router'
+import {usePathname} from 'next/navigation'
+
 import Link from 'next/link'
 import {MdxFile} from 'nextra'
 
@@ -9,8 +10,10 @@ type UnderlineNavProps = {
 }
 
 export function UnderlineNav({tabData}: UnderlineNavProps) {
-  const router = useRouter()
-  const currentRoute = router.pathname
+  const [isClient, setIsClient] = useState(false)
+  const pathname = usePathname()
+
+  const currentRoute = pathname
 
   // Reorders tabData so the tab with name === index is always first
   if (tabData.length > 1) {
@@ -21,6 +24,12 @@ export function UnderlineNav({tabData}: UnderlineNavProps) {
     }
   }
 
+  useEffect(() => {
+    setIsClient(true)
+  }, [])
+
+  if (!isClient) return null
+
   return (
     <PrimerUnderlineNav aria-label="Sibling pages">
       {tabData.length > 1 &&

package/components/library.ts

@@ -0,0 +1,3 @@
+'use client'
+
+export {Box, Button, Heading, Text, Label, Stack} from '@primer/react-brand'

package/css/prose.module.css

@@ -244,6 +244,14 @@
   overflow: hidden;
 }
 
+.Prose video {
+  --spacing: var(--brand-Prose-img-spacing);
+  display: block;
+  max-width: 100%;
+  height: auto;
+  margin-block-start: var(--spacing);
+}
+
 /* ---------------------------------------------------------- */
 /* 9. Block elements                                          */
 /* ---------------------------------------------------------- */

package/doctocat.config.js

@@ -1,29 +1,23 @@
 import nextra from 'nextra'
-import transpiler from 'next-transpile-modules'
 
 const withNextra = nextra({
-  theme: '@primer/doctocat-nextjs',
   staticImage: true,
 })
 
-const withTM = transpiler(['@primer/doctocat-nextjs'])
-
 /*
  * Wrapper for next config, that allows us to do some shared configuration
  * Provides a default config, but allows overriding it
- * Uses next-transpile-modules to allow Next.js webpack to transpile the theme
+ * Relies on `transpilePackages: ['@primer/doctocat-nextjs'],` being set in the next.config
  */
 function withDoctocat(config = {}) {
-  return withTM({
+  return {
     ...withNextra(),
     images: {
       unoptimized: true,
     },
-    publicRuntimeConfig: {
-      siteTitle: config.publicRuntimeConfig.siteTitle || 'Doctocat', // to add a custom site title
-    },
+
     ...config,
-  })
+  }
 }
 
 export default withDoctocat

package/helpers/hasChildren.ts

@@ -1,5 +1,5 @@
 import {PageMapItem, Folder} from 'nextra'
-import {DocsItem} from '../types'
 
-export const hasChildren = (item: DocsItem | PageMapItem): boolean =>
-  'children' in item && Array.isArray((item as Folder).children) && (item as Folder).children.length > 0
+export function hasChildren(item: PageMapItem): item is Folder {
+  return 'children' in item && Array.isArray(item.children)
+}

package/index.tsx

@@ -2,15 +2,11 @@
  * Root layout / theme (required)
  */
 import Theme from './components/layout/root-layout/index'
-
+export {generateStaticParamsFor, importPage} from 'nextra/pages'
+export {getPageMap} from 'nextra/page-map'
 export default Theme
 
 /**
  * Types
  */
 export * from './types'
-/**
- * Components
- */
-export {DoDontContainer, Do, Dont} from './components/content/dos-and-donts/DosAndDonts'
-export {Caption} from './components/content/caption/Caption'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/doctocat-nextjs",
-  "version": "0.1.0",
+  "version": "0.2.0-rc.10bf384",
   "description": "A Next.js theme for building Primer documentation sites",
   "main": "index.js",
   "type": "module",
@@ -17,16 +17,17 @@
     "react-dom": "18.3.1"
   },
   "dependencies": {
-    "@primer/octicons-react": "19.14.0",
-    "@primer/react": "36.27.0",
+    "@next/mdx": "^15.1.6",
+    "@primer/octicons-react": "19.15.0",
+    "@primer/react": "^37.11.0",
     "@primer/react-brand": "0.46.0",
-    "next-transpile-modules": "^10.0.1",
-    "framer-motion": "12.0.1",
+    "@types/lodash.debounce": "^4.0.9",
+    "framer-motion": "12.4.0",
     "lodash.debounce": "^4.0.8",
-    "react-focus-on": "3.9.4",
-    "nextra": "3.3.1",
+    "nextra": "^4.2.1",
     "react": "18.3.1",
-    "react-dom": "18.3.1"
+    "react-dom": "18.3.1",
+    "react-focus-on": "3.9.4"
   },
   "devDependencies": {
     "@github/prettier-config": "^0.0.6",
@@ -35,7 +36,7 @@
     "@types/react-dom": "18.3.1",
     "clsx": "2.1.1",
     "next": "15.1.6",
-    "styled-components": "6.1.13",
+    "styled-components": "5.3.11",
     "typescript": "5.7.3"
   },
   "overrides": {

package/tsconfig.json

@@ -5,13 +5,15 @@
     "declaration": false,
     "noEmit": true,
     "esModuleInterop": true,
-    "strict": false,
+    "strict": true,
     "skipLibCheck": true,
     "allowJs": true,
     "jsx": "react-jsx",
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "lib": ["ESNext", "DOM", "DOM.Iterable"],
     "resolveJsonModule": true,
-    "strictNullChecks": true
+    "strictNullChecks": true,
+    "strictFunctionTypes": true,
+    "noImplicitAny": true
   }
 }

package/types.ts

@@ -1,4 +1,4 @@
-import {Folder, MdxFile} from 'nextra'
+import {Folder, PageMapItem, MdxFile} from 'nextra'
 
 export type ThemeConfig = {
   docsRepositoryBase: string
@@ -8,6 +8,12 @@ export type ThemeConfig = {
   }[]
 }
 
+export type ExtendedPageItem = PageMapItem & {
+  name: string
+  title: string
+  href: string
+}
+
 export type FolderWithoutChildren = Omit<Folder, 'children'>
 
 export type DocsItem = MdxFile & {
@@ -18,3 +24,16 @@ export type DocsItem = MdxFile & {
   withIndexPage?: boolean
   isUnderCurrentDocsTree?: boolean
 }
+
+export type FrontMatter = {
+  description?: string
+  filePath?: string
+  keywords?: string[]
+  related?: {
+    title: string
+    href: string
+  }[]
+  timestamp?: number
+  title?: string
+  [key: string]: unknown
+}