lk/theme deps

.npmrc

@@ -1,4 +1,3 @@
 ; This file is automatically added by @npmcli/template-oss. Do not edit.
 
 package-lock=true
-legacy-peer-deps=true

cli/package.json

@@ -30,9 +30,6 @@
   "devDependencies": {
     "@npmcli/eslint-config": "^4.0.2",
     "@npmcli/template-oss": "4.19.0",
-    "eslint-plugin-import": "^2.28.1",
-    "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-promise": "^6.1.1",
     "tap": "^16.3.9"
   },
   "author": "GitHub Inc.",

gatsby-config.js

@@ -13,9 +13,7 @@ module.exports = {
       resolve: './theme',
       options: {
         icon: './src/images/npm-favicon.png',
-        editOnGitHub: true,
         showContributors: false,
-        showSidebarEditLink: false,
         repo: {
           url: 'https://github.com/npm/documentation',
           defaultBranch: 'main',

package.json

@@ -35,10 +35,7 @@
     "@npmcli/eslint-config": "^4.0.2",
     "@npmcli/template-oss": "4.19.0",
     "eslint-plugin-github": "^4.10.1",
-    "eslint-plugin-import": "^2.28.1",
-    "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-primer-react": "^4.0.2",
-    "eslint-plugin-promise": "^6.1.1",
     "tap": "^16.3.9"
   },
   "author": "GitHub Inc.",

scripts/template-oss/index.js

@@ -37,11 +37,4 @@ module.exports = {
     '/CONTENT-MODEL.md',
     '/.nvmrc',
   ],
-  allowedPackages: [
-    // these need to be allowed since this repo uses legacy-peer-deps
-    // and these need to be installed explicitly
-    'eslint-plugin-promise',
-    'eslint-plugin-node',
-    'eslint-plugin-import',
-  ],
 }

theme/README.md

@@ -17,9 +17,11 @@ module.exports = {
       resolve: './theme',
       options: {
         icon: './src/images/npm-favicon.png',
-        editOnGitHub: true,
         showContributors: false,
-        showSidebarEditLink: true,
+        repo: {
+          url: 'https://github.com/npm/documentation',
+          defaultBranch: 'main'
+        }
       },
     }
   ],
@@ -29,10 +31,8 @@ module.exports = {
 
 ## Theme Options
 
-| Option              | Required | Default | Type    | Description                                                                   |
-| ------------------- | -------- | ------- | ------- | ----------------------------------------------------------------------------- |
-| icon                | yes      | n/a     | string  | The favicon to display                                                        |
-| editOnGitHub        | yes      | n/a     | boolean | Determines if the "Edit this page on GitHub" link is displayed on the page    |
-| showContributors    | yes      | n/a     | boolean | Determines if the repository contributors are displayed                       |
-| showSidebarEditLink | yes      | n/a     | boolean | Determines if the "Edit this page on GitHub" link is displayed in the SideBar |
-| repo                | yes      | n/a     | object  | `url`, `defaultBranch` and `path` to repository                               |
+| Option           | Required | Default | Type    | Description                                             |
+| ---------------- | -------- | ------- | ------- | ------------------------------------------------------- |
+| icon             | yes      | n/a     | string  | The favicon to display                                  |
+| showContributors | yes      | n/a     | boolean | Determines if the repository contributors are displayed |
+| repo             | yes      | n/a     | object  | `url`, `defaultBranch` and `path` to repository         |

theme/gatsby-node.js

@@ -1,7 +1,4 @@
 const path = require('path')
-const readPkgUp = require('read-pkg-up')
-const getPkgRepo = require('get-pkg-repo')
-const axios = require('axios')
 const uniqBy = require('lodash.uniqby')
 
 const CONTRIBUTOR_CACHE = new Map()
@@ -27,7 +24,7 @@ exports.createSchemaCustomization = ({actions: {createTypes}}) => {
 }
 
 exports.createPages = async ({graphql, actions}, themeOptions) => {
-  const repo = themeOptions.repo ? themeOptions.repo : {url: getPkgRepo(readPkgUp.sync().package).browse()}
+  const repo = themeOptions.repo
 
   const {data} = await graphql(`
     {
@@ -68,7 +65,7 @@ exports.createPages = async ({graphql, actions}, themeOptions) => {
 
       const fileRelativePath = path.relative(rootAbsolutePath, node.fileAbsolutePath)
 
-      const editUrl = getEditUrl(themeOptions, repo, fileRelativePath, node.frontmatter)
+      const editUrl = getEditUrl(repo, fileRelativePath, node.frontmatter)
 
       const contributors =
         themeOptions.showContributors !== false ? await fetchContributors(repo, fileRelativePath, node.frontmatte) : []
@@ -93,6 +90,7 @@ exports.createPages = async ({graphql, actions}, themeOptions) => {
           editUrl,
           contributors,
           tableOfContents,
+          repositoryUrl: repo.url,
         },
       })
 
@@ -173,8 +171,8 @@ function getGitHubData(repo, overrideData, filePath) {
   return gh
 }
 
-function getEditUrl(themeOptions, repo, filePath, overrideData = {}) {
-  if (themeOptions.editOnGitHub === false || overrideData.edit_on_github === false) {
+function getEditUrl(repo, filePath, overrideData = {}) {
+  if (overrideData.edit_on_github === false) {
     return null
   }
 
@@ -196,16 +194,16 @@ async function fetchContributors(repo, filePath, overrideData = {}) {
   }
 
   try {
-    const req = {
-      method: 'get',
-      baseURL: 'https://api.github.com/',
-      url: `/repos/${gh.nwo}/commits?path=${gh.path}&sha=${gh.branch}&per_page=100`,
-      headers: {
-        Authorization: `token ${process.env.GITHUB_TOKEN}`,
+    const resp = await fetch(
+      `https://api.github.com/repos/${gh.nwo}/commits?path=${gh.path}&sha=${gh.branch}&per_page=100`,
+      {
+        headers: {
+          Authorization: `token ${process.env.GITHUB_TOKEN}`,
+        },
       },
-    }
+    )
 
-    const {data} = await axios.request(req)
+    const {data} = await resp.json()
 
     const commits = data
       .map(commit => ({

theme/package.json

@@ -27,20 +27,18 @@
   },
   "dependencies": {
     "@github/combobox-nav": "^2.3.0",
-    "@mdx-js/mdx": "^2.2.1",
+    "@mdx-js/mdx": "^1.6.22",
     "@mdx-js/react": "^1.6.22",
     "@primer/components": "^23.0.0",
     "@primer/octicons-react": "^17.10.0",
     "@primer/react": "^35.16.0",
     "@styled-system/theme-get": "^5.1.2",
     "@testing-library/react": "^9.5.0",
-    "axios": "^1.5.1",
     "babel-plugin-styled-components": "^2.1.4",
     "copy-to-clipboard": "^3.3.3",
     "date-fns": "^2.30.0",
     "details-element-polyfill": "^2.4.0",
     "downshift": "^8.2.2",
-    "find-up": "^6.3.0",
     "framer-motion": "^3.10.6",
     "fuse.js": "^3.6.1",
     "gatsby-plugin-catch-links": "^4.25.0",
@@ -50,14 +48,11 @@
     "gatsby-plugin-styled-components": "^5.25.0",
     "gatsby-source-filesystem": "^4.25.0",
     "gatsby-transformer-yaml": "^4.25.0",
-    "get-pkg-repo": "^5.0.0",
-    "github-slugger": "^1.5.0",
+    "github-slugger": "^2.0.0",
     "html-react-parser": "^1.4.14",
     "lodash.debounce": "4.0.8",
     "lodash.uniqby": "^4.7.0",
-    "pkg-up": "^3.1.0",
     "pluralize": "^8.0.0",
-    "preval.macro": "^5.0.0",
     "prism-react-renderer": "^0.2.0",
     "react-addons-text-content": "^0.0.4",
     "react-element-to-jsx-string": "^14.3.4",
@@ -66,8 +61,6 @@
     "react-helmet": "^6.1.0",
     "react-live": "^2.4.1",
     "react-measure": "^2.5.2",
-    "read-pkg-up": "^6.0.0",
-    "sentence-case": "^2.1.1",
     "styled-components": "^5.3.11",
     "styled-system": "^5.1.5"
   },

theme/src/components/header.js

@@ -17,7 +17,7 @@ const NpmHeaderBar = styled(Box)`
   background-image: linear-gradient(139deg, #fb8817, #ff4b01, #c12127, #e02aff);
 `
 
-function Header({location, isSearchEnabled = true}) {
+function Header({location, repositoryUrl, isSearchEnabled = true}) {
   const siteMetadata = useSiteMetadata()
   const search = useSearch()
 
@@ -51,7 +51,7 @@ function Header({location, isSearchEnabled = true}) {
           </Box>
           <Flex display={['flex', null, null, 'none']}>
             {isSearchEnabled ? <MobileSearch {...search} /> : null}
-            <NavDrawer location={location} />
+            <NavDrawer location={location} repositoryUrl={repositoryUrl} />
           </Flex>
         </Flex>
       </Flex>

theme/src/components/hero-layout.js

@@ -13,20 +13,20 @@ function HeroLayout({children, pageContext, location}) {
   return (
     <Flex flexDirection="column" minHeight="100vh">
       <Head />
-      <Header location={location} isSearchEnabled={pageContext.isSearchEnabled} />
+      <Header
+        location={location}
+        repositoryUrl={pageContext.repositoryUrl}
+        isSearchEnabled={pageContext.isSearchEnabled}
+      />
       <Flex flex="1 1 auto" flexDirection="row" role="main">
         <Box display={['none', null, null, 'block']}>
-          <Sidebar
-            editOnGitHub={pageContext.themeOptions.showSidebarEditLink && pageContext.themeOptions.editOnGitHub}
-            location={location}
-          />
+          <Sidebar repositoryUrl={pageContext.repositoryUrl} location={location} />
         </Box>
         <Box width="100%">
           <Hero />
           <Container>
             {children}
             <PageFooter
-              editOnGitHub={pageContext.themeOptions.editOnGitHub}
               editUrl={pageContext.themeOptions.editUrl}
               contributors={pageContext.contributors.concat(additionalContributors.map(login => ({login})))}
             />

theme/src/components/layout.js

@@ -35,13 +35,14 @@ function Layout({children, pageContext, location}) {
     >
       <Flex flexDirection="column" minHeight="100vh">
         <Head title={title} description={description} />
-        <Header location={location} isSearchEnabled={pageContext.isSearchEnabled} />
+        <Header
+          repositoryUrl={pageContext.repositoryUrl}
+          location={location}
+          isSearchEnabled={pageContext.isSearchEnabled}
+        />
         <Flex flex="1 1 auto" flexDirection="row" css={{zIndex: 0}} role="main">
           <Box display={['none', null, null, 'block']}>
-            <Sidebar
-              editOnGitHub={pageContext.themeOptions.showSidebarEditLink && pageContext.themeOptions.editOnGitHub}
-              location={location}
-            />
+            <Sidebar repositoryUrl={pageContext.repositoryUrl} location={location} />
           </Box>
           <Grid
             id="skip-nav"
@@ -125,7 +126,6 @@ function Layout({children, pageContext, location}) {
               ) : null}
               {children}
               <PageFooter
-                editOnGitHub={pageContext.themeOptions.editOnGitHub}
                 editUrl={pageContext.editUrl}
                 contributors={pageContext.contributors.concat(additionalContributors.map(login => ({login})))}
               />

theme/src/components/nav-drawer.js

@@ -25,7 +25,7 @@ const useDrawerIsOpen = () => {
   return [isOpen, {setOpen, setClose}]
 }
 
-function NavDrawer({location}) {
+function NavDrawer({location, repositoryUrl}) {
   const siteMetadata = useSiteMetadata()
   const [isOpen, {setOpen, setClose}] = useDrawerIsOpen()
 
@@ -54,7 +54,7 @@ function NavDrawer({location}) {
             </BorderBox>
             {navItems.length > 0 ? (
               <Flex flexDirection="column">
-                <NavItems location={location} items={navItems} editOnGitHub={false} />
+                <NavItems location={location} items={navItems} repositoryUrl={repositoryUrl} />
               </Flex>
             ) : null}
           </Flex>

theme/src/components/nav-items.js

@@ -1,23 +1,10 @@
 import {BorderBox, Box, Flex, StyledOcticon, Link, themeGet} from '@primer/components'
 import {LinkExternalIcon} from '@primer/octicons-react'
 import {Link as GatsbyLink} from 'gatsby'
-import preval from 'preval.macro'
 import React from 'react'
 import styled from 'styled-components'
 import NavHierarchy from '../nav-hierarchy'
 
-// This code needs to run at build-time so it can access the file system.
-const repositoryUrl = preval`
-  const readPkgUp = require('read-pkg-up')
-  const getPkgRepo = require('get-pkg-repo')
-  try {
-    const repo = getPkgRepo(readPkgUp.sync().package)
-    module.exports = \`https://github.com/\${repo.user}/\${repo.project}\`
-  } catch (error) {
-    module.exports = ''
-  }
-`
-
 const getActiveProps = className => props => {
   const location = NavHierarchy.getLocation(props.location.pathname)
   const href = NavHierarchy.getLocation(props.href)
@@ -161,31 +148,21 @@ function thirdLevelItems(items) {
   )
 }
 
-function githubLink() {
-  if (!repositoryUrl) {
-    return null
-  }
-
-  return (
-    <BorderBox borderWidth={0} borderTopWidth={1} borderRadius={0} py={5} px={4}>
-      <Link href={repositoryUrl} color="inherit">
-        <Flex justifyContent="space-between" alignItems="center" color="gray.5">
-          Edit on GitHub
-          <StyledOcticon icon={LinkExternalIcon} color="gray.5" />
-        </Flex>
-      </Link>
-    </BorderBox>
-  )
-}
-
-function NavItems(props) {
-  const path = NavHierarchy.getLocation(props.location.pathname)
+function NavItems({location, repositoryUrl}) {
+  const path = NavHierarchy.getLocation(location.pathname)
   const items = NavHierarchy.getHierarchy(null, {path, hideVariants: true})
 
   return (
     <>
       {topLevelItems(items, path)}
-      {props.editOnGitHub !== false ? githubLink(props) : null}
+      <BorderBox borderWidth={0} borderTopWidth={1} borderRadius={0} py={5} px={4}>
+        <Link href={repositoryUrl} color="inherit">
+          <Flex justifyContent="space-between" alignItems="center" color="gray.5">
+            GitHub
+            <StyledOcticon icon={LinkExternalIcon} color="gray.5" />
+          </Flex>
+        </Link>
+      </BorderBox>
     </>
   )
 }

theme/src/components/page-footer.js

@@ -3,11 +3,11 @@ import {PencilIcon} from '@primer/octicons-react'
 import React from 'react'
 import Contributors from './contributors'
 
-function PageFooter({editOnGitHub, editUrl, contributors}) {
+function PageFooter({editUrl, contributors}) {
   return editUrl || contributors.length > 0 ? (
     <BorderBox borderWidth={0} borderTopWidth={1} mt={8} py={5}>
       <Grid gridGap={4}>
-        {editOnGitHub !== false && editUrl != null ? (
+        {editUrl != null ? (
           <Link href={editUrl}>
             <StyledOcticon icon={PencilIcon} mr={2} />
             Edit this page on GitHub

theme/src/components/sidebar.js

@@ -4,7 +4,7 @@ import navItems from '../nav.yml'
 import {HEADER_HEIGHT} from './header'
 import NavItems from './nav-items'
 
-function Sidebar({location, editOnGitHub}) {
+function Sidebar({location, repositoryUrl}) {
   return (
     <Position
       position="sticky"
@@ -17,7 +17,7 @@ function Sidebar({location, editOnGitHub}) {
     >
       <BorderBox borderWidth={0} borderRightWidth={1} borderRadius={0} height="100%" style={{overflow: 'auto'}}>
         <Flex flexDirection="column" role="list">
-          <NavItems location={location} items={navItems} editOnGitHub={editOnGitHub} />
+          <NavItems location={location} items={navItems} repositoryUrl={repositoryUrl} />
         </Flex>
       </BorderBox>
     </Position>