fix: add eslint-plugin-github and fix lint errors

.eslintrc.local.js

@@ -1,4 +1,7 @@
 module.exports = {
+  extends: [
+    'plugin:github/react',
+  ],
   overrides: [{
     files: ['src/**'],
     parserOptions: {

package.json

@@ -34,6 +34,7 @@
   "devDependencies": {
     "@npmcli/eslint-config": "^4.0.1",
     "@npmcli/template-oss": "4.19.0",
+    "eslint-plugin-github": "^4.10.1",
     "tap": "^16.3.2"
   },
   "author": "GitHub Inc.",

theme/gatsby-node.js

@@ -73,6 +73,17 @@ exports.createPages = async ({graphql, actions}, themeOptions) => {
       const contributors =
         themeOptions.showContributors !== false ? await fetchContributors(repo, fileRelativePath, node.frontmatte) : []
 
+      // Fix some old CLI pages which have mismatched headings at the top level.
+      // All top level headings should be the same level.
+      const tableOfContents = node.tableOfContents?.items?.reduce((acc, item) => {
+        if (!item.url && Array.isArray(item.items)) {
+          acc.push(...item.items)
+        } else {
+          acc.push(item)
+        }
+        return acc
+      }, [])
+
       actions.createPage({
         path: pagePath,
         component: node.fileAbsolutePath,
@@ -81,7 +92,7 @@ exports.createPages = async ({graphql, actions}, themeOptions) => {
           themeOptions,
           editUrl,
           contributors,
-          tableOfContents: node.tableOfContents,
+          tableOfContents,
         },
       })
 

theme/package.json

@@ -77,7 +77,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "babel-jest": "^29.3.1",
     "eslint": "^8.33.0",
-    "eslint-plugin-github": "^4.6.0",
+    "eslint-plugin-github": "^4.10.1",
     "eslint-plugin-jsx-a11y": "^6.6.1",
     "eslint-plugin-primer-react": "1.0.1",
     "eslint-plugin-react": "^7.31.11",

theme/src/components/code.js

@@ -5,15 +5,41 @@ import React, {useState, useEffect} from 'react'
 import ClipboardCopy from './clipboard-copy'
 import LiveCode from './live-code'
 
+/**
+ * Resize the scroll handle to the size of the code contents, since the former has to be positioned absolutely.
+ */
+const useScrollSize = () => {
+  const ref = React.createRef()
+  const [size, setSize] = useState({})
+
+  useEffect(() => {
+    // Skip if already resized.
+    if (typeof size.width !== 'undefined') {
+      return
+    }
+
+    const node = ref.current
+    node.parentElement.style.position = 'relative'
+    const computedStyle = getComputedStyle(node.parentElement)
+    setSize({
+      height:
+        node.parentElement.clientHeight -
+        parseInt(computedStyle.paddingTop, 10) -
+        parseInt(computedStyle.paddingBottom, 10),
+      width:
+        node.parentElement.scrollWidth -
+        parseInt(computedStyle.paddingLeft, 10) -
+        parseInt(computedStyle.paddingRight, 10),
+    })
+  }, [size, ref])
+
+  return [ref, size]
+}
+
 function Code({className, children, live, noinline}) {
-  const [scrollHandleStyle, setScrollHandleStyle] = useState({position: 'absolute'})
   const language = className ? className.replace(/language-/, '') : ''
   const code = children.trim()
-  const scrollHandleRef = React.createRef()
-
-  useEffect(() => {
-    resizeScrollHandle()
-  })
+  const [scrollHandleRef, scrollSize] = useScrollSize()
 
   if (live) {
     return <LiveCode code={code} language={language} noinline={noinline} />
@@ -28,9 +54,7 @@ function Code({className, children, live, noinline}) {
         {({className, style, tokens, getLineProps, getTokenProps}) => (
           <BorderBox as="pre" className={className} mt={0} mb={3} p={3} border={0} style={{...style, overflow: 'auto'}}>
             {/* This is the scroll handle, it is supposed to be focused with keyboard and scroll a wide codebox horizontally */}
-            <div aria-hidden="true" style={scrollHandleStyle} ref={scrollHandleRef} aria-label={code}>
-              &nbsp;
-            </div>
+            <div aria-hidden="true" style={{position: 'absolute', ...scrollSize}} ref={scrollHandleRef} />
             {tokens.map((line, i) => (
               <div key={i} {...getLineProps({line, key: i})}>
                 {line.map((token, key) => (
@@ -43,29 +67,6 @@ function Code({className, children, live, noinline}) {
       </Highlight>
     </Relative>
   )
-
-  /**
-   * Resize the scroll handle to the size of the code contents, since the former has to be positioned absolutely.
-   */
-  function resizeScrollHandle() {
-    // Skip if already resized.
-    if (typeof scrollHandleStyle.width !== 'undefined') {
-      return
-    }
-
-    const node = scrollHandleRef.current
-    node.parentElement.style.position = 'relative'
-    const computedStyle = getComputedStyle(node.parentElement)
-    const height =
-      node.parentElement.clientHeight -
-      parseInt(computedStyle.paddingTop, 10) -
-      parseInt(computedStyle.paddingBottom, 10)
-    const width =
-      node.parentElement.scrollWidth -
-      parseInt(computedStyle.paddingLeft, 10) -
-      parseInt(computedStyle.paddingRight, 10)
-    setScrollHandleStyle({...scrollHandleStyle, height, width})
-  }
 }
 
 export default Code

theme/src/components/header.js

@@ -6,7 +6,6 @@ import headerNavItems from '../header-nav.yml'
 import useSiteMetadata from '../use-site-metadata'
 import MobileSearch from './mobile-search'
 import NavDrawer from './nav-drawer'
-import NavDropdown, {NavDropdownItem} from './nav-dropdown'
 import Search from './search'
 import NpmLogo from './npm-logo'
 import useSearch from '../use-search'
@@ -63,26 +62,11 @@ function Header({location, isSearchEnabled = true}) {
 function HeaderNavItems({items}) {
   return (
     <Flex alignItems="center" color="gray.2">
-      {items.map((item, index) => {
-        if (item.children) {
-          return (
-            <Box ml={4} key={index}>
-              <NavDropdown title={item.title}>
-                {item.children.map(child => (
-                  <NavDropdownItem key={child.title} href={child.url}>
-                    {child.title}
-                  </NavDropdownItem>
-                ))}
-              </NavDropdown>
-            </Box>
-          )
-        }
-        return (
-          <Link key={index} href={item.url} display="block" color="inherit" ml={4}>
-            {item.title}
-          </Link>
-        )
-      })}
+      {items.map((item, index) => (
+        <Link key={index} href={item.url} display="block" color="inherit" ml={4}>
+          {item.title}
+        </Link>
+      ))}
     </Flex>
   )
 }

theme/src/components/layout.js

@@ -76,7 +76,7 @@ function Layout({children, pageContext, location}) {
                 </Box>
               ) : null}
             </Box>
-            {pageContext.tableOfContents.items ? (
+            {pageContext.tableOfContents ? (
               <Position
                 display={['none', null, 'block']}
                 css={{gridArea: 'table-of-contents', overflow: 'auto'}}
@@ -91,7 +91,7 @@ function Layout({children, pageContext, location}) {
                 <Text display="inline-block" fontWeight="bold" mb={1} id="table-of-content-label">
                   Table of contents
                 </Text>
-                <TableOfContents items={pageContext.tableOfContents.items} labelId="table-of-content-label" />
+                <TableOfContents items={pageContext.tableOfContents} labelId="table-of-content-label" />
               </Position>
             ) : null}
             <Box css={{gridArea: 'content'}}>
@@ -102,7 +102,7 @@ function Layout({children, pageContext, location}) {
                   {source ? <SourceLink href={source} /> : null}
                 </Flex>
               ) : null}
-              {pageContext.tableOfContents.items ? (
+              {pageContext.tableOfContents ? (
                 <Box display={['block', null, 'none']} mb={3}>
                   <Details>
                     {({open}) => (
@@ -116,7 +116,7 @@ function Layout({children, pageContext, location}) {
                           Table of contents
                         </Text>
                         <Box pt={1}>
-                          <TableOfContents items={pageContext.tableOfContents.items} />
+                          <TableOfContents items={pageContext.tableOfContents} />
                         </Box>
                       </>
                     )}

theme/src/components/nav-drawer.js

@@ -1,12 +1,11 @@
-import {BorderBox, Flex, Link, Text} from '@primer/components'
-import {ChevronDownIcon, ChevronUpIcon, XIcon, ThreeBarsIcon} from '@primer/octicons-react'
+import {BorderBox, Flex, Link} from '@primer/components'
+import {XIcon, ThreeBarsIcon} from '@primer/octicons-react'
 import {Link as GatsbyLink} from 'gatsby'
 import React from 'react'
 import navItems from '../nav.yml'
 import headerNavItems from '../header-nav.yml'
 import useSiteMetadata from '../use-site-metadata'
 import DarkButton from './dark-button'
-import Details from './details'
 import Drawer from './drawer'
 import NavItems from './nav-items'
 import {useIsMobile} from '../use-breakpoint'
@@ -71,44 +70,20 @@ function NavDrawer({location}) {
 }
 
 function HeaderNavItems({items}) {
-  return items.map((item, index) => {
-    return (
-      <BorderBox
-        key={item.title}
-        borderWidth={0}
-        borderRadius={0}
-        borderTopWidth={index !== 0 ? 1 : 0}
-        borderColor="gray.7"
-        p={4}
-      >
-        {item.children ? (
-          <Details key={index}>
-            {({open, toggle}) => (
-              <>
-                <summary onClick={toggle} style={{cursor: 'pointer'}}>
-                  <Flex alignItems="center" justifyContent="space-between">
-                    <Text>{item.title}</Text>
-                    {open ? <ChevronUpIcon /> : <ChevronDownIcon />}
-                  </Flex>
-                </summary>
-                <Flex flexDirection="column" mt={2}>
-                  {item.children.map(child => (
-                    <Link key={child.title} href={child.url} py={1} mt={2} fontSize={1} color="inherit">
-                      {child.title}
-                    </Link>
-                  ))}
-                </Flex>
-              </>
-            )}
-          </Details>
-        ) : (
-          <Link key={index} href={item.url} color="inherit" display="block">
-            {item.title}
-          </Link>
-        )}
-      </BorderBox>
-    )
-  })
+  return items.map((item, index) => (
+    <BorderBox
+      key={item.title}
+      borderWidth={0}
+      borderRadius={0}
+      borderTopWidth={index !== 0 ? 1 : 0}
+      borderColor="gray.7"
+      p={4}
+    >
+      <Link key={index} href={item.url} color="inherit" display="block">
+        {item.title}
+      </Link>
+    </BorderBox>
+  ))
 }
 
 export default NavDrawer