Merge pull request #18 from primer/rezrah/dep-upgrades-23-jan-25

Upgrade to Nexta v3 and other project dependency upgrades

.changeset/olive-donuts-work.md

@@ -0,0 +1,29 @@
+---
+'@primer/doctocat-nextjs': minor
+---
+
+Upgraded internal framework to [Nextra v3](https://the-guild.dev/blog/nextra-3).
+
+To migrate Doctocat to this release, follow these steps:
+
+1. Install the latest version `npm i @primer/[email protected]`
+2. Rename your `next.config.js` to be `next.config.mjs`. Add `type="module"` to your `package.json` and update the file contents to match the following:
+
+```diff
+-  const withDoctocat = require('@primer/doctocat-nextjs/doctocat.config.js')
+
+-  module.exports = {
+-  ...withDoctocat({
+
+-  }),
+-  }
+
++  import withDoctocat from '@primer/doctocat-nextjs/doctocat.config.js'
+
++  export default {
++  ...withDoctocat({
+
++  }),
++  }
+
+```

package.json

@@ -24,10 +24,11 @@
   ],
   "devDependencies": {
     "@changesets/changelog-github": "^0.5.0",
-    "@changesets/cli": "2.27.10",
+    "@changesets/cli": "2.27.11",
     "@github/prettier-config": "^0.0.6",
+    "@oddbird/popover-polyfill": "^0.5.2",
     "@primer/react": "36.27.0",
-    "@primer/react-brand": "0.43.0",
+    "@primer/react-brand": "0.46.0",
     "@types/node": "18.11.10",
     "@typescript-eslint/parser": "^6.13.2",
     "eslint-import-resolver-typescript": "^3.6.1",
@@ -40,6 +41,6 @@
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-storybook": "^0.6.15",
-    "typescript": "5.7.2"
+    "typescript": "5.7.3"
   }
 }

packages/site/.eslintrc.js → packages/site/.eslintrc.cjs

@@ -1,5 +1,5 @@
 // eslint-disable-next-line filenames/match-regex
-const base = require('../../.eslintrc')
+const base = require('../../.eslintrc.cjs')
 
 module.exports = {
   ...base,
@@ -8,6 +8,13 @@ module.exports = {
     tsconfigRootDir: __dirname,
   },
   rules: {
+    'import/extensions': [
+      'error',
+      'ignorePackages',
+      {
+        js: 'always',
+      },
+    ],
     '@next/next/no-img-element': 'off',
     'primer-react/no-system-props': 'off',
   },

packages/site/.gitignore

@@ -1,2 +1,3 @@
 .next/
-out/
+out/
+*.tsbuildinfo

packages/site/.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+  "eslint.options": {
+    "configFile": ".eslintrc.cjs"
+  }
+}

packages/site/next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.

packages/site/next.config.js → packages/site/next.config.mjs

@@ -1,13 +1,14 @@
-const withDoctocat = require('@primer/doctocat-nextjs/doctocat.config')
+/** @type {import('next').NextConfig} */
+import withDoctocat from '@primer/doctocat-nextjs/doctocat.config.js'
 
-module.exports = {
+export default {
   ...withDoctocat({
     output: 'export',
     basePath: process.env.GITHUB_ACTIONS === 'true' && process.env.IS_PROD ? '/doctocat-nextjs' : '',
     publicRuntimeConfig: {
       siteTitle: 'Doctocat',
       repo: 'https://github.com/primer/doctocat-nextjs',
-      repoSrcPath: 'packages/site', // folder path to your site root. Helpful for monorepos.
+      repoSrcPath: 'packages/site',
       sidebarLinks: [
         {
           title: 'GitHub',

packages/site/package.json

@@ -3,11 +3,12 @@
   "version": "0.0.4",
   "private": true,
   "description": "Documentation theme",
+  "type": "module",
   "scripts": {
     "dev": "next dev",
     "check": "tsc --noEmit",
     "build": "rm -rf out && next build",
-    "lint": "eslint '**/*.{js,ts,tsx,md,mdx}' --max-warnings=0 --config ./.eslintrc.js",
+    "lint": "eslint '**/*.{js,ts,tsx,md,mdx}' --max-warnings=0 --config ./.eslintrc.cjs",
     "start": "next start"
   },
   "repository": {
@@ -21,16 +22,16 @@
   "homepage": "https://github.com/primer/doctocat-nextjs#readme",
   "dependencies": {
     "@primer/doctocat-nextjs": "^0.0.4",
-    "@primer/octicons-react": "19.12.0",
-    "eslint-config-next": "15.0.3",
-    "next": "15.0.3",
+    "@primer/octicons-react": "19.14.0",
+    "eslint-config-next": "15.1.6",
+    "next": "15.1.6",
     "react": "18.3.1",
     "react-dom": "18.3.1"
   },
   "devDependencies": {
     "@github/prettier-config": "^0.0.6",
     "@primer/react": "36.27.0",
-    "@primer/react-brand": "0.43.0",
+    "@primer/react-brand": "0.46.0",
     "@types/node": "18.11.10",
     "next-transpile-modules": "^10.0.1",
     "typescript": "5.7.2"

packages/site/pages/_app.tsx

@@ -1,9 +1,7 @@
 // eslint-disable-next-line filenames/match-regex
-import {AppProps} from 'next/app'
+import type {AppProps} from 'next/app'
 import '@primer/doctocat-nextjs/css/global.css'
 
-function CustomApp({Component, pageProps}: AppProps) {
+export default function CustomApp({Component, pageProps}: AppProps) {
   return <Component {...pageProps} />
 }
-
-export default CustomApp

packages/theme/.eslintrc.js → packages/theme/.eslintrc.cjs

@@ -1,4 +1,4 @@
-const base = require('../../.eslintrc')
+const base = require('../../.eslintrc.cjs')
 
 module.exports = {
   ...base,

packages/theme/.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+  "eslint.options": {
+    "configFile": ".eslintrc.cjs"
+  }
+}

packages/theme/components/layout/header/Header.tsx

@@ -2,7 +2,7 @@ import {MarkGithubIcon, MoonIcon, SearchIcon, SunIcon, ThreeBarsIcon, XIcon} fro
 import {Box, FormControl, IconButton, TextInput} from '@primer/react'
 import {Heading, Stack, Text} from '@primer/react-brand'
 import {clsx} from 'clsx'
-import {MdxFile, PageMapItem} from 'nextra'
+import {MdxFile, Folder, PageMapItem} from 'nextra'
 import type {PageItem} from 'nextra/normalize-pages'
 import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react'
 import {debounce} from 'lodash'
@@ -12,6 +12,8 @@ import styles from './Header.module.css'
 import {NavDrawer} from '../nav-drawer/NavDrawer'
 import {useNavDrawerState} from '../nav-drawer/useNavDrawerState'
 import {useColorMode} from '../../context/color-modes/useColorMode'
+import {hasChildren} from '../../../helpers/hasChildren'
+import {DocsItem} from '../../../types'
 
 type HeaderProps = {
   pageMap: PageMapItem[]
@@ -80,10 +82,10 @@ export function Header({pageMap, docsDirectories, siteTitle}: HeaderProps) {
     () =>
       pageMap
         .map(item => {
-          if (item.kind === 'Folder') {
-            return item.children.filter(child => child.kind === 'MdxPage')
+          if (hasChildren(item)) {
+            return (item as Folder).children.filter(child => !hasChildren(child))
           }
-          if (item.kind === 'MdxPage') {
+          if ((item as DocsItem).type === 'doc') {
             return item
           }
         })

packages/theme/components/layout/index-cards/IndexCards.tsx

@@ -1,33 +1,21 @@
 import React from 'react'
 import {Heading, Stack, Text} from '@primer/react-brand'
-import {Folder, MdxFile} from 'nextra'
 
 import Link from 'next/link'
 import styles from './IndexCards.module.css'
+import {DocsItem} from '../../../types'
 
 type IndexCardsProps = {
   route: string
   folderData: DocsItem[]
 }
 
-type FolderWithoutChildren = Omit<Folder, 'children'>
-
-type DocsItem = (MdxFile | FolderWithoutChildren) & {
-  title: string
-  type: string
-  children?: DocsItem[]
-  firstChildRoute?: string
-  withIndexPage?: boolean
-  isUnderCurrentDocsTree?: boolean
-}
-
 export function IndexCards({route, folderData}: IndexCardsProps) {
-  const filteredData = folderData.filter(item => item.kind === 'MdxPage' && item.route.includes(`${route}/`))
-
+  const filteredData = folderData.filter(item => item.type === 'doc' && item.route.includes(`${route}/`))
   return (
     <Stack direction="vertical" padding="none" gap="spacious">
       {filteredData.map((item: DocsItem) => {
-        if (item.kind !== 'MdxPage' || !item.frontMatter) return null
+        if (item.type !== 'doc' || !item.frontMatter) return null
 
         return (
           <Stack direction="vertical" padding="none" gap="condensed" key={item.frontMatter.title}>