upgrade to nextra v3

primer · Jan 24, 2025 · 4ec8bc9 · 4ec8bc9
1 parent be78694
commit 4ec8bc9
Show file tree

Hide file tree

Showing 21 changed files with 18,183 additions and 7,564 deletions.
diff --git a/.eslintrc.js → eslint.config.cjs b/.eslintrc.js → eslint.config.cjs
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/site/.gitignore b/packages/site/.gitignore
@@ -1,2 +1,3 @@
 .next/
-out/
+out/
+*.tsbuildinfo
diff --git a/packages/site/.eslintrc.js → packages/site/eslint.config.cjs b/packages/site/.eslintrc.js → packages/site/eslint.config.cjs
@@ -1,5 +1,5 @@
 // eslint-disable-next-line filenames/match-regex
-const base = require('../../.eslintrc')
+const base = require('../../eslint.config.cjs')
 
 module.exports = {
   ...base,

diff --git a/packages/site/next.config.js b/packages/site/next.config.js
@@ -1,6 +1,6 @@
-const withDoctocat = require('@primer/doctocat-nextjs/doctocat.config')
+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' : '',

diff --git a/packages/site/package.json b/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 ./eslint.config.cjs",
     "start": "next start"
   },
   "repository": {

diff --git a/packages/site/.prettierrc.js → packages/site/prettier.config.cjs b/packages/site/.prettierrc.js → packages/site/prettier.config.cjs
diff --git a/packages/theme/components/layout/header/Header.tsx b/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
           }
         })

diff --git a/packages/theme/components/layout/index-cards/IndexCards.tsx b/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}>

diff --git a/packages/theme/components/layout/root-layout/Theme.tsx b/packages/theme/components/layout/root-layout/Theme.tsx
diff --git a/packages/theme/components/layout/sidebar/Sidebar.tsx b/packages/theme/components/layout/sidebar/Sidebar.tsx
@@ -7,23 +7,13 @@ import getConfig from 'next/config'
 
 import styles from './Sidebar.module.css'
 import {LinkExternalIcon} from '@primer/octicons-react'
-import type {ThemeConfig} from '../../../index'
+import type {DocsItem, ThemeConfig} from '../../../index'
+import {hasChildren} from '../../../helpers/hasChildren'
 
 type SidebarProps = {
   pageMap: DocsItem[]
 }
 
-type FolderWithoutChildren = Omit<Folder, 'children'>
-
-type DocsItem = (MdxFile | FolderWithoutChildren) & {
-  title: string
-  type: string
-  children?: DocsItem[]
-  firstChildRoute?: string
-  withIndexPage?: boolean
-  isUnderCurrentDocsTree?: boolean
-}
-
 const {publicRuntimeConfig} = getConfig()
 
 export function Sidebar({pageMap}: SidebarProps) {
@@ -39,11 +29,11 @@ export function Sidebar({pageMap}: SidebarProps) {
   const reorderedPageMap = useMemo(
     () =>
       [...pageMap].sort((a, b) => {
-        if (a.kind === 'Folder' && a.children) {
-          const aIndex = a.children.find(child => child.name === 'index' && child.kind === 'MdxPage')
+        if (hasChildren(a) && a.children) {
+          const aIndex = a.children.find(child => child.name === 'index' && child.type === 'doc')
           const aPosition = (aIndex as MdxFile | undefined)?.frontMatter?.['menu-position'] ?? Infinity
-          if (b.kind === 'Folder' && b.children) {
-            const bIndex = b.children.find(child => child.name === 'index' && child.kind === 'MdxPage')
+          if (hasChildren(b) && b.children) {
+            const bIndex = b.children.find(child => child.name === 'index' && child.type === 'doc')
             const bPosition = (bIndex as MdxFile | undefined)?.frontMatter?.['menu-position'] ?? Infinity
             return aPosition - bPosition
           }
@@ -57,21 +47,19 @@ export function Sidebar({pageMap}: SidebarProps) {
     <div className={styles.Sidebar}>
       <NavList className={styles.NavList} aria-label="Menu links">
         {reorderedPageMap.map(item => {
-          if (item.kind === 'MdxPage' && item.route === '/') return null
+          if (item.type === 'doc' && item.route === '/') return null
 
-          if (item.kind === 'MdxPage') {
+          if (!hasChildren(item) && item.type === 'doc') {
             return (
               <NavList.Item as={NextLink} key={item.name} href={item.route} sx={{textTransform: 'capitalize'}}>
-                {item.frontMatter?.title ?? item.name}
+                {(item as MdxFile).frontMatter?.title ?? item.name}
               </NavList.Item>
             )
           }
 
           // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-          if (item.kind === 'Folder') {
-            const indexPage = (item as Folder).children.find(
-              child => child.kind === 'MdxPage' && child.name === 'index',
-            ) as MdxFile
+          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) {
@@ -87,28 +75,31 @@ export function Sidebar({pageMap}: SidebarProps) {
                 {item.children &&
                   item.children
                     .sort((a, b) => (a.name === 'index' ? -1 : b.name === 'index' ? 1 : 0)) // puts index page first
-                    .filter(
-                      child =>
-                        (child as DocsItem).name !== 'index' ||
-                        ((child.name === 'index' && (child as MdxFile).frontMatter?.['show-tabs']) ?? false),
-                    ) // only show index page if it has show-tabs
+                    .filter(child => {
+                      return (
+                        child.name !== 'index' ||
+                        ((child.name === 'index' && (child as MdxFile).frontMatter?.['show-tabs']) ?? false)
+                      )
+                    }) // only show index page if it has show-tabs
                     .map((child: DocsItem) => {
-                      if (child.kind === 'MdxPage') {
+                      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 as MdxFile).frontMatter?.title || item.name}
+                            {child.title}
                           </NavList.Item>
                         )
                       }
 
-                      if ((child as DocsItem).kind === 'Folder') {
-                        const landingPageItem: PageMapItem | undefined = (child as Folder).children.find(
-                          innerChild => innerChild.kind === 'MdxPage' && innerChild.name === 'index',
+                      if (hasChildren(child)) {
+                        const landingPageItem = (child as Folder).children.find(
+                          innerChild =>
+                            (innerChild as DocsItem).type === 'doc' && (innerChild as DocsItem).name === 'index',
                         )
                         return (
                           <NavList.Item

diff --git a/packages/theme/components/mdx-components/mdx-components.module.css b/packages/theme/components/mdx-components/mdx-components.module.css
diff --git a/packages/theme/components/mdx-components/mdx-components.tsx b/packages/theme/components/mdx-components/mdx-components.tsx
diff --git a/packages/theme/css/global.css b/packages/theme/css/global.css
@@ -14,100 +14,6 @@ body {
   margin-block-start: 0 !important;
 }
 
-/**
- * Code block overrides
- */
-
-:root {
-  --shiki-color-text: #414141;
-  --shiki-color-background: transparent;
-  --shiki-token-constant: #1976d2;
-  --shiki-token-string: #22863a;
-  --shiki-token-comment: #aaa;
-  --shiki-token-keyword: #d32f2f;
-  --shiki-token-parameter: #ff9801;
-  --shiki-token-function: #6f42c1;
-  --shiki-token-string-expression: var(--shiki-token-string);
-  --shiki-token-punctuation: #212121;
-  --shiki-token-link: var(--shiki-token-string);
-  --shiki-color-ansi-black: #24292e;
-  --shiki-color-ansi-black-dim: rgba(36, 41, 46, 0.5);
-  --shiki-color-ansi-red: #d73a49;
-  --shiki-color-ansi-red-dim: rgba(215, 58, 73, 0.5);
-  --shiki-color-ansi-green: #28a745;
-  --shiki-color-ansi-green-dim: rgba(40, 167, 69, 0.5);
-  --shiki-color-ansi-yellow: #dbab09;
-  --shiki-color-ansi-yellow-dim: rgba(219, 171, 9, 0.5);
-  --shiki-color-ansi-blue: #0366d6;
-  --shiki-color-ansi-blue-dim: rgba(3, 102, 214, 0.5);
-  --shiki-color-ansi-magenta: #5a32a3;
-  --shiki-color-ansi-magenta-dim: rgba(90, 50, 163, 0.5);
-  --shiki-color-ansi-cyan: #1b7c83;
-  --shiki-color-ansi-cyan-dim: rgba(27, 124, 131, 0.5);
-  --shiki-color-ansi-white: #6a737d;
-  --shiki-color-ansi-white-dim: rgba(106, 115, 125, 0.5);
-  --shiki-color-ansi-bright-black: #959da5;
-  --shiki-color-ansi-bright-black-dim: rgba(149, 157, 165, 0.5);
-  --shiki-color-ansi-bright-red: #cb2431;
-  --shiki-color-ansi-bright-red-dim: rgba(203, 36, 49, 0.5);
-  --shiki-color-ansi-bright-green: #22863a;
-  --shiki-color-ansi-bright-green-dim: rgba(34, 134, 58, 0.5);
-  --shiki-color-ansi-bright-yellow: #b08800;
-  --shiki-color-ansi-bright-yellow-dim: rgba(176, 136, 0, 0.5);
-  --shiki-color-ansi-bright-blue: #005cc5;
-  --shiki-color-ansi-bright-blue-dim: rgba(0, 92, 197, 0.5);
-  --shiki-color-ansi-bright-magenta: #5a32a3;
-  --shiki-color-ansi-bright-magenta-dim: rgba(90, 50, 163, 0.5);
-  --shiki-color-ansi-bright-cyan: #3192aa;
-  --shiki-color-ansi-bright-cyan-dim: rgba(49, 146, 170, 0.5);
-  --shiki-color-ansi-bright-white: #d1d5da;
-  --shiki-color-ansi-bright-white-dim: rgba(209, 213, 218, 0.5);
-}
-
-[data-color-mode='dark'] {
-  --shiki-color-text: #d1d1d1;
-  --shiki-token-constant: #79b8ff;
-  --shiki-token-string: #ffab70;
-  --shiki-token-comment: #6b737c;
-  --shiki-token-keyword: #f97583;
-  --shiki-token-function: #b392f0;
-  --shiki-token-string-expression: #4bb74a;
-  --shiki-token-punctuation: #bbb;
-  --shiki-token-link: var(--shiki-token-string);
-  --shiki-color-ansi-black: #586069;
-  --shiki-color-ansi-black-dim: rgba(88, 96, 105, 0.5);
-  --shiki-color-ansi-red: #ea4a5a;
-  --shiki-color-ansi-red-dim: rgba(234, 74, 90, 0.5);
-  --shiki-color-ansi-green: #34d058;
-  --shiki-color-ansi-green-dim: rgba(52, 208, 88, 0.5);
-  --shiki-color-ansi-yellow: #ffea7f;
-  --shiki-color-ansi-yellow-dim: rgba(255, 234, 127, 0.5);
-  --shiki-color-ansi-blue: #2188ff;
-  --shiki-color-ansi-blue-dim: rgba(33, 136, 255, 0.5);
-  --shiki-color-ansi-magenta: #b392f0;
-  --shiki-color-ansi-magenta-dim: rgba(179, 146, 240, 0.5);
-  --shiki-color-ansi-cyan: #39c5cf;
-  --shiki-color-ansi-cyan-dim: rgba(57, 197, 207, 0.5);
-  --shiki-color-ansi-white: #d1d5da;
-  --shiki-color-ansi-white-dim: rgba(209, 213, 218, 0.5);
-  --shiki-color-ansi-bright-black: #959da5;
-  --shiki-color-ansi-bright-black-dim: rgba(149, 157, 165, 0.5);
-  --shiki-color-ansi-bright-red: #f97583;
-  --shiki-color-ansi-bright-red-dim: rgba(249, 117, 131, 0.5);
-  --shiki-color-ansi-bright-green: #85e89d;
-  --shiki-color-ansi-bright-green-dim: rgba(133, 232, 157, 0.5);
-  --shiki-color-ansi-bright-yellow: #ffea7f;
-  --shiki-color-ansi-bright-yellow-dim: rgba(255, 234, 127, 0.5);
-  --shiki-color-ansi-bright-blue: #79b8ff;
-  --shiki-color-ansi-bright-blue-dim: rgba(121, 184, 255, 0.5);
-  --shiki-color-ansi-bright-magenta: #b392f0;
-  --shiki-color-ansi-bright-magenta-dim: rgba(179, 146, 240, 0.5);
-  --shiki-color-ansi-bright-cyan: #56d4dd;
-  --shiki-color-ansi-bright-cyan-dim: rgba(86, 212, 221, 0.5);
-  --shiki-color-ansi-bright-white: #fafbfc;
-  --shiki-color-ansi-bright-white-dim: rgba(250, 251, 252, 0.5);
-}
-
 pre {
   background-color: var(--brand-color-canvas-subtle);
   border-radius: var(--brand-borderRadius-large);
@@ -123,6 +29,15 @@ code {
     'calt' 1,
     'ss01' 1;
 }
+
+code span {
+  color: var(--shiki-light);
+}
+
+[data-color-mode='dark'] code span {
+  color: var(--shiki-dark);
+}
+
 code[data-line-numbers] > .line {
   padding-left: 0.5rem;
 }