Style updates and misc fixes

Other fixes:
- disable scroll behavior for cli version selections
- close mobile search after successful navigation

.eslintrc.js

@@ -46,7 +46,7 @@ module.exports = {
       },
     },
     {
-      files: ['*.mdx', 'shared.js'],
+      files: ['*.mdx', 'shared.js', 'src/**/*.js'],
       rules: {
         'react/forbid-elements': [
           'error',
@@ -109,7 +109,8 @@ module.exports = {
               'header',
               'hgroup',
               'hr',
-              'html',
+              // used in head
+              // 'html',
               'i',
               'input',
               'ins',
@@ -170,7 +171,8 @@ module.exports = {
               'th',
               'thead',
               'time',
-              'title',
+              // used in head
+              // 'title',
               'tr',
               'track',
               'tt',

gatsby-browser.js

@@ -1,2 +1,7 @@
 export {default as wrapPageElement} from './src/page'
 export {default as wrapRootElement} from './src/root'
+
+export const shouldUpdateScroll = ({routerProps}) => {
+  const {scrollUpdate = true} = routerProps.location.state ?? {}
+  return scrollUpdate
+}

src/components/header.js

@@ -6,26 +6,16 @@ import NavDrawer from './nav-drawer'
 import Link from './link'
 import useSearch from '../hooks/use-search'
 import {HEADER_HEIGHT, HEADER_BAR} from '../constants'
-import useSiteMetadata from '../hooks/use-site-metadata'
 import headerNavItems from '../../content/header-nav.yml'
 import {DarkTheme} from '../theme'
+import SiteTitle from './site-title'
 
 const NpmHeaderBar = styled(Box)`
   height: ${HEADER_BAR}px;
   background-image: linear-gradient(139deg, #fb8817, #ff4b01, #c12127, #e02aff);
 `
 
-const NpmLogo = ({size, sx}) => (
-  <Box sx={{...sx, color: 'logoBg'}} role="banner">
-    <svg height={size} width={size} viewBox="0 0 700 700" fill="currentColor" aria-hidden="true">
-      <polygon fill="currentColor" points="0,700 700,700 700,0 0,0" />
-      <polygon fill="#ffffff" points="150,550 350,550 350,250 450,250 450,550 550,550 550,150 150,150 " />
-    </svg>
-  </Box>
-)
-
 function Header() {
-  const siteMetadata = useSiteMetadata()
   const search = useSearch()
 
   return (
@@ -35,7 +25,7 @@ function Header() {
         as="header"
         sx={{
           display: 'flex',
-          height: HEADER_HEIGHT,
+          height: `${HEADER_HEIGHT}px`,
           px: [3, null, null, 4],
           alignItems: 'center',
           justifyContent: 'space-between',
@@ -47,19 +37,7 @@ function Header() {
         }}
       >
         <Box sx={{display: 'flex', alignItems: 'center'}}>
-          <Link
-            to="/"
-            sx={{
-              mr: 4,
-              fontWeight: 'bold',
-              color: 'fg.default',
-              display: 'flex',
-              alignItems: 'center',
-            }}
-          >
-            <NpmLogo size="32" sx={{display: 'flex', mr: 3}} />
-            {siteMetadata.title}
-          </Link>
+          <SiteTitle logo={true} sx={{mr: 4}} />
           <Box sx={{display: ['none', null, null, 'block'], ml: 4}}>
             <Search.Desktop {...search} />
           </Box>

src/components/link.js

@@ -2,6 +2,16 @@ import React from 'react'
 import {Link as PrimerLink} from '@primer/react'
 import {Link as GatsbyLink} from 'gatsby'
 
+const omit = (obj, ...keys) => {
+  const res = {}
+  for (const k of Object.keys(obj)) {
+    if (!keys.includes(k)) {
+      res[k] = obj[k]
+    }
+  }
+  return res
+}
+
 const FALLBACK = `http://_${Math.random().toString().slice(2)}._${Math.random().toString().slice(2)}`
 
 const getLocalPath = href => {
@@ -21,11 +31,8 @@ const getLocalPath = href => {
   return null
 }
 
-const GatsbyLinkWithoutSxProps = React.forwardRef(function GatsbyLinkWithoutSxProps(
-  {sx, underline, hoverColor, muted, ...props},
-  ref,
-) {
-  return <GatsbyLink ref={ref} {...props} />
+const GatsbyLinkWithoutSxProps = React.forwardRef(function GatsbyLinkWithoutSxProps(props, ref) {
+  return <GatsbyLink ref={ref} {...omit(props, 'sx', 'underline', 'hoverColor', 'muted')} />
 })
 
 const Link = React.forwardRef(function Link({to, href, ...props}, ref) {

src/components/nav-drawer.js

@@ -1,38 +1,85 @@
 import React from 'react'
 import {Button, Box} from '@primer/react'
 import {XIcon, ThreeBarsIcon} from '@primer/octicons-react'
-import Link from './link'
-import Drawer from './drawer'
 import NavItems from './nav-items'
-import useSiteMetadata from '../hooks/use-site-metadata'
 import {useIsMobile} from '../hooks/use-breakpoint'
 import {DarkTheme, LightTheme} from '../theme'
+import {AnimatePresence, motion} from 'framer-motion'
+import {FocusOn} from 'react-focus-on'
+import {HEADER_BAR, HEADER_HEIGHT} from '../constants'
+import SiteTitle from './site-title'
 
-const useDrawerIsOpen = () => {
+const Drawer = ({isOpen, onDismiss, children}) => (
+  <AnimatePresence>
+    {isOpen ? (
+      // These event handlers fix a bug that caused links below the fold
+      // to be unclickable in macOS Safari.
+      // Reference: https://github.com/theKashey/react-focus-lock/issues/79
+      <Box
+        onMouseDown={event => event.preventDefault()}
+        onKeyDown={event => event.target.focus()}
+        onClick={event => event.target.focus()}
+        role="button"
+        tabIndex="0"
+      >
+        <FocusOn returnFocus={true} onEscapeKey={onDismiss}>
+          <Box
+            sx={{
+              position: 'fixed',
+              top: 0,
+              right: 0,
+              bottom: 0,
+              left: 0,
+              bg: 'overlay.backdrop',
+            }}
+            key="overlay"
+            as={motion.div}
+            initial={{opacity: 0}}
+            animate={{opacity: 1}}
+            exit={{opacity: 0}}
+            transition={{type: 'tween'}}
+            onClick={onDismiss}
+          />
+          <Box
+            sx={{
+              position: 'fixed',
+              top: `${HEADER_BAR}px`,
+              right: 0,
+              bottom: 0,
+              width: 300,
+              zIndex: 1,
+            }}
+            key="drawer"
+            as={motion.div}
+            initial={{x: '100%'}}
+            animate={{x: 0}}
+            exit={{x: '100%'}}
+            transition={{type: 'tween', duration: 0.2}}
+          >
+            {children}
+          </Box>
+        </FocusOn>
+      </Box>
+    ) : null}
+  </AnimatePresence>
+)
+
+function NavDrawer() {
   const isMobile = useIsMobile()
-  const [isOpen, setIsOpen] = React.useState(false)
-  const setOpen = React.useCallback(() => setIsOpen(true), [])
-  const setClose = React.useCallback(() => setIsOpen(false), [])
+  const [open, setOpen] = React.useState(false)
 
   React.useEffect(() => {
-    if (!isMobile && isOpen) {
-      setIsOpen(false)
+    if (!isMobile && open) {
+      setOpen(false)
     }
-  }, [isMobile, isOpen])
-
-  return [isOpen, {setOpen, setClose}]
-}
-
-function NavDrawer() {
-  const siteMetadata = useSiteMetadata()
-  const [isOpen, {setOpen, setClose}] = useDrawerIsOpen()
+  }, [isMobile, open])
 
   return (
     <>
-      <Button aria-label="Menu" aria-expanded={isOpen} onClick={setOpen} sx={{ml: 3}}>
+      <Button aria-label="Menu" aria-expanded={open} onClick={() => setOpen(true)} sx={{ml: 3}}>
         <ThreeBarsIcon />
       </Button>
-      <LightTheme as={Drawer} isOpen={isOpen} onDismiss={setClose}>
+      <LightTheme as={Drawer} isOpen={open} onDismiss={() => setOpen(false)}>
         <Box
           sx={{
             display: 'flex',
@@ -54,32 +101,19 @@ function NavDrawer() {
           >
             <DarkTheme
               sx={{
-                borderWidth: 0,
-                borderRadius: 0,
-                borderBottomWidth: 1,
-                borderColor: 'border.muted',
-                borderStyle: 'solid',
                 color: 'fg.default',
                 bg: 'canvas.default',
+                height: `${HEADER_HEIGHT}px`,
+                px: 3,
+                alignItems: 'center',
+                justifyContent: 'space-between',
+                display: 'flex',
               }}
             >
-              <Box
-                sx={{
-                  py: 3,
-                  pl: 4,
-                  pr: 3,
-                  alignItems: 'center',
-                  justifyContent: 'space-between',
-                  display: 'flex',
-                }}
-              >
-                <Link to="/" sx={{fontSize: 2, color: 'fg.default'}}>
-                  {siteMetadata.title}
-                </Link>
-                <Button aria-label="Close" onClick={setClose}>
-                  <XIcon />
-                </Button>
-              </Box>
+              <SiteTitle />
+              <Button aria-label="Close" onClick={() => setOpen(false)}>
+                <XIcon />
+              </Button>
             </DarkTheme>
             <Box sx={{display: 'flex', flexDirection: 'column'}}>
               <NavItems />

src/components/nav-items.js

@@ -59,9 +59,7 @@ const Navigation = () => {
 
   return (
     <>
-      <VisuallyHidden>
-        <h3>Site navigation</h3>
-      </VisuallyHidden>
+      <VisuallyHidden as="h3">Site navigation</VisuallyHidden>
       <NavList aria-label="Site">
         <NavItems items={items} path={pathname} />
         <NavList.Divider />

src/components/page-footer.js

@@ -29,7 +29,7 @@ const Contributors = ({contributors = [], latestCommit}) => {
   }
 
   return (
-    <div>
+    <>
       <Box sx={{display: 'flex', alignItems: 'center'}}>
         <Text sx={{mr: 2}}>
           {contributors.length} {pluralize('contributor', contributors.length)}
@@ -48,7 +48,7 @@ const Contributors = ({contributors = [], latestCommit}) => {
           <Link href={latestCommit.url}>{format(new Date(latestCommit.date))}</Link>
         </Text>
       ) : null}
-    </div>
+    </>
   )
 }