diff --git a/gatsby-browser.js b/gatsby-browser.js index 4a5e3eea013..507b543f306 100644 --- a/gatsby-browser.js +++ b/gatsby-browser.js @@ -1,2 +1,2 @@ -export {default as wrapPageElement} from './src/page-element' -export {default as wrapRootElement} from './src/root-element' +export {default as wrapPageElement} from './src/page' +export {default as wrapRootElement} from './src/root' diff --git a/gatsby-config.js b/gatsby-config.js index a5610ee8554..6f9de4f16d8 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -1,7 +1,7 @@ const path = require('path') const fs = require('fs') -const {NODE_ENV, GATSBY_PARTIAL_CONTENT, GATSBY_CONTENT_DIR = 'content'} = process.env +const {NODE_ENV, GATSBY_PARTIAL_CONTENT, GATSBY_CONTENT_IGNORE, GATSBY_CONTENT_DIR = 'content'} = process.env const DEV = NODE_ENV === 'development' const CONTENT_DIR = path.resolve(GATSBY_CONTENT_DIR) @@ -15,7 +15,7 @@ const walkDirs = dir => { } const getContentOptions = () => { - if (!DEV || !GATSBY_PARTIAL_CONTENT) { + if (!DEV || (!GATSBY_PARTIAL_CONTENT && !GATSBY_CONTENT_IGNORE)) { return } @@ -47,7 +47,6 @@ module.exports = { shortName: 'npm', description: 'Documentation for the npm registry, website, and command-line interface', lang: 'en', - // eslint-disable-next-line max-len imageUrl: 'https://user-images.githubusercontent.com/29712634/81721690-e2fb5d80-9445-11ea-8602-4b2294c964f3.png', }, plugins: [ diff --git a/gatsby-ssr.js b/gatsby-ssr.js index 4a5e3eea013..507b543f306 100644 --- a/gatsby-ssr.js +++ b/gatsby-ssr.js @@ -1,2 +1,2 @@ -export {default as wrapPageElement} from './src/page-element' -export {default as wrapRootElement} from './src/root-element' +export {default as wrapPageElement} from './src/page' +export {default as wrapRootElement} from './src/root' diff --git a/src/components/clipboard-copy.js b/src/components/clipboard-copy.js index 6625ffa4af2..e6406303196 100644 --- a/src/components/clipboard-copy.js +++ b/src/components/clipboard-copy.js @@ -1,16 +1,9 @@ import React from 'react' -import {Button, Octicon, themeGet} from '@primer/react' +import {Button, Octicon} from '@primer/react' import {CheckIcon, CopyIcon} from '@primer/octicons-react' -import styled from 'styled-components' import copy from 'copy-to-clipboard' import {announce} from '../util/aria-live' -const CopyToClipboard = styled(Button)` - &:focus { - box-shadow: 0 0 0 3px ${themeGet('colors.blue.5')}; - } -` - function ClipboardCopy({value}) { const [copied, setCopied] = React.useState(false) @@ -25,16 +18,17 @@ function ClipboardCopy({value}) { }, [copied]) return ( - { copy(value) setCopied(true) announce(`Copied to clipboard`) }} + sx={{px: 2}} > - - + + ) } diff --git a/src/components/contributors.js b/src/components/contributors.js index 799893d65e9..6e9a0a7f9ad 100644 --- a/src/components/contributors.js +++ b/src/components/contributors.js @@ -37,7 +37,7 @@ function Contributors({logins, latestCommit}) { ))} {latestCommit ? ( - + Last edited by {latestCommit.login} on{' '} {format(new Date(latestCommit.date))} diff --git a/src/components/dark-text-input.js b/src/components/dark-text-input.js deleted file mode 100644 index 356e3ad27c5..00000000000 --- a/src/components/dark-text-input.js +++ /dev/null @@ -1,21 +0,0 @@ -import {TextInput, themeGet} from '@primer/react' -import styled from 'styled-components' - -const DarkTextInput = styled(TextInput)` - /* The font-size of inputs should never be less than 16px. - * Otherwise, iOS browsers will zoom in when the input is focused. - * TODO: Update font-size of TextInput in @primer/react. - */ - font-size: ${themeGet('fontSizes.2')} !important; - color: ${themeGet('colors.white')}; - background-color: rgba(255, 255, 255, 0.07); - border: 1px solid transparent; - box-shadow: none; - - &:focus { - border: 1px solid rgba(255, 255, 255, 0.15); - outline: none; - box-shadow: none; - } -` -export default DarkTextInput diff --git a/src/components/drawer.js b/src/components/drawer.js index 8606489485d..a1ce66baf5d 100644 --- a/src/components/drawer.js +++ b/src/components/drawer.js @@ -43,8 +43,8 @@ const Drawer = ({isOpen, onDismiss, children}) => ( bottom: 0, bg: 'gray.0', width: 300, - zIndex: 1, }} + style={{zIndex: 1}} key="drawer" as={motion.div} initial={{x: '100%'}} diff --git a/src/components/header.js b/src/components/header.js index ff762ba28f7..23410229613 100644 --- a/src/components/header.js +++ b/src/components/header.js @@ -37,13 +37,16 @@ function Header() { @@ -52,8 +55,8 @@ function Header() { to="/" sx={{ mr: 4, - color: '#dddddd', - fontWeight: '600', + fontWeight: 'bold', + color: 'fg.default', display: 'flex', alignItems: 'center', }} @@ -69,7 +72,7 @@ function Header() { {headerNavItems.map((item, index) => ( - + {item.title} ))} diff --git a/src/components/hero.js b/src/components/hero.js index de2aa76c9ae..e885d51dce1 100644 --- a/src/components/hero.js +++ b/src/components/hero.js @@ -10,10 +10,10 @@ function Hero() { - + {title} - + {description} diff --git a/src/components/mobile-search.js b/src/components/mobile-search.js index 19a6ea3e56d..bafff51af0f 100644 --- a/src/components/mobile-search.js +++ b/src/components/mobile-search.js @@ -3,7 +3,7 @@ import {Button, Box} from '@primer/react' import {XIcon, SearchIcon} from '@primer/octicons-react' import {AnimatePresence, motion} from 'framer-motion' import {FocusOn} from 'react-focus-on' -import DarkTextInput from './dark-text-input' +import TextInput from './text-input' import SearchResults from './search-results' import useSiteMetadata from '../hooks/use-site-metadata' @@ -21,7 +21,7 @@ function MobileSearch({onDismiss, ...props}) { - + - @@ -66,16 +67,19 @@ function MobileSearch({onDismiss, ...props}) { {isOpen ? : null} diff --git a/src/components/nav-drawer.js b/src/components/nav-drawer.js index 36fbea8a2db..cc5a60aea1e 100644 --- a/src/components/nav-drawer.js +++ b/src/components/nav-drawer.js @@ -38,25 +38,31 @@ function NavDrawer() { display: 'flex', flexDirection: 'column', height: '100%', - bg: 'gray.0', + bg: 'canvas.default', overflow: 'auto', WebkitOverflowScrolling: 'touch', }} > - + @@ -71,17 +77,20 @@ function NavDrawer() { - + {headerNavItems.map((item, index) => ( diff --git a/src/components/page-footer.js b/src/components/page-footer.js index a7585219f5b..930b8c3052d 100644 --- a/src/components/page-footer.js +++ b/src/components/page-footer.js @@ -8,13 +8,13 @@ function PageFooter({editUrl, contributors = {}}) { return editUrl || logins.length ? ( diff --git a/src/components/search-results.js b/src/components/search-results.js index 8ff0446ac48..c125ea6f17d 100644 --- a/src/components/search-results.js +++ b/src/components/search-results.js @@ -29,17 +29,21 @@ function SearchResults({results, getItemProps, highlightedIndex}) { return results.map((item, index) => ( {item.title} diff --git a/src/components/search.js b/src/components/search.js index a7cbfdbd7be..69cf6909e12 100644 --- a/src/components/search.js +++ b/src/components/search.js @@ -1,6 +1,6 @@ import React from 'react' import {Box} from '@primer/react' -import DarkTextInput from './dark-text-input' +import TextInput from './text-input' import SearchResults from './search-results' import useSiteMetadata from '../hooks/use-site-metadata' @@ -10,7 +10,7 @@ function Search(props) { return ( - {isOpen ? ( diff --git a/src/components/sidebar.js b/src/components/sidebar.js index 00265878407..63ba112150d 100644 --- a/src/components/sidebar.js +++ b/src/components/sidebar.js @@ -3,6 +3,30 @@ import React from 'react' import NavItems from './nav-items' import {HEADER_HEIGHT} from '../constants' +function usePersistentScroll(id) { + const ref = React.useRef() + + const handleScroll = React.useCallback( + // Save scroll position in session storage on every scroll change + event => window.sessionStorage.setItem(id, event.target.scrollTop), + [id], + ) + + React.useLayoutEffect(() => { + // Restore scroll position when component mounts + const scrollPosition = window.sessionStorage.getItem(id) + if (scrollPosition && ref.current) { + ref.current.scrollTop = scrollPosition + } + }, [id]) + + // Return props to spread onto the scroll container + return { + ref, + onScroll: handleScroll, + } +} + const Sidebar = () => ( ( top: `${HEADER_HEIGHT}px`, height: `calc(100vh - ${HEADER_HEIGHT}px)`, minWidth: 260, - color: 'gray.8', - bg: 'gray.0', }} > diff --git a/src/components/table-of-contents.js b/src/components/table-of-contents.js index d246a82705d..2d9e70b908d 100644 --- a/src/components/table-of-contents.js +++ b/src/components/table-of-contents.js @@ -1,26 +1,29 @@ import React from 'react' -import {Box, Link, Text, Octicon, Details, useDetails} from '@primer/react' +import {Box, Text, Octicon, Details, useDetails} from '@primer/react' import {ChevronDownIcon, ChevronRightIcon} from '@primer/octicons-react' import {usePageContext} from '../layout' import {HEADER_HEIGHT} from '../constants' +import {NavList} from '@primer/react/drafts' -const TableOfContents = ({items, depth = 0, labelId}) => ( - +const TableOfContentsItems = ({items}) => ( + <> {items.map(item => ( - 0 ? 3 : 0}}> - - {item.title} - - {item.items ? : null} - + + {item.title} + {item.items ? ( + + + + ) : null} + ))} - + +) + +const TableOfContents = ({'aria-labelledby': ariaLabelledBy, items}) => ( + + + ) const withTableOfContents = Component => { @@ -66,6 +69,6 @@ export const Desktop = withTableOfContents(({items}) => ( Table of contents - + )) diff --git a/src/components/text-input.js b/src/components/text-input.js new file mode 100644 index 00000000000..264c1b37fbb --- /dev/null +++ b/src/components/text-input.js @@ -0,0 +1,17 @@ +import {TextInput as PrimerTextInput, themeGet} from '@primer/react' +import styled from 'styled-components' + +const TextInput = styled(PrimerTextInput)` + /* The font-size of inputs should never be less than 16px. + * Otherwise, iOS browsers will zoom in when the input is focused. + * TODO: Update font-size of TextInput in @primer/react. + */ + input { + font-size: ${themeGet('fontSizes.2')} !important; + } + + input::placeholder { + color: ${themeGet('colors.fg.muted')} !important; + } +` +export default TextInput diff --git a/src/mdx/code.js b/src/mdx/code.js index a9ba861bb75..4cfd4f7e66c 100644 --- a/src/mdx/code.js +++ b/src/mdx/code.js @@ -22,24 +22,15 @@ function Code({className: language = '', children}) { tabIndex={0} as="pre" className={className} - sx={{ - borderWidth: 1, - borderStyle: 'solid', - borderColor: 'border.default', - borderRadius: 2, - mt: 0, - mb: 3, - p: 3, - border: 0, - }} style={{...style, overflow: 'auto'}} + sx={{borderRadius: 2, mt: 0, mb: 3, p: 3, border: 0}} > {/* This is the scroll handle, it is supposed to be focused with keyboard and scroll a wide codebox horizontally */}