Skip to content

Commit 53dbeda

Browse files
lukekarryslukekarrys
committed
Style updates and misc fixes
Other fixes: - disable scroll behavior for cli version selections - close mobile search after successful navigation
1 parent f8f9934 commit 53dbeda

18 files changed

+244
-200
lines changed

‎.eslintrc.js‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ module.exports = {
4646
},
4747
},
4848
{
49-
files: ['*.mdx', 'shared.js'],
49+
files: ['*.mdx', 'shared.js', 'src/**/*.js'],
5050
rules: {
5151
'react/forbid-elements': [
5252
'error',
@@ -109,7 +109,8 @@ module.exports = {
109109
'header',
110110
'hgroup',
111111
'hr',
112-
'html',
112+
// used in head
113+
// 'html',
113114
'i',
114115
'input',
115116
'ins',
@@ -170,7 +171,8 @@ module.exports = {
170171
'th',
171172
'thead',
172173
'time',
173-
'title',
174+
// used in head
175+
// 'title',
174176
'tr',
175177
'track',
176178
'tt',

‎gatsby-browser.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,7 @@
11
export {default as wrapPageElement} from './src/page'
22
export {default as wrapRootElement} from './src/root'
3+
4+
export const shouldUpdateScroll = ({routerProps}) => {
5+
const {scrollUpdate = true} = routerProps.location.state ?? {}
6+
return scrollUpdate
7+
}

‎src/components/container.js‎

Lines changed: 0 additions & 6 deletions
This file was deleted.

‎src/components/drawer.js‎

Lines changed: 0 additions & 61 deletions
This file was deleted.

‎src/components/header.js‎

Lines changed: 3 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -6,26 +6,16 @@ import NavDrawer from './nav-drawer'
66
import Link from './link'
77
import useSearch from '../hooks/use-search'
88
import {HEADER_HEIGHT, HEADER_BAR} from '../constants'
9-
import useSiteMetadata from '../hooks/use-site-metadata'
109
import headerNavItems from '../../content/header-nav.yml'
1110
import {DarkTheme} from '../theme'
11+
import SiteTitle from './site-title'
1212

1313
const NpmHeaderBar = styled(Box)`
1414
height: ${HEADER_BAR}px;
1515
background-image: linear-gradient(139deg, #fb8817, #ff4b01, #c12127, #e02aff);
1616
`
1717

18-
const NpmLogo = ({size, sx}) => (
19-
<Box sx={{...sx, color: 'logoBg'}} role="banner">
20-
<svg height={size} width={size} viewBox="0 0 700 700" fill="currentColor" aria-hidden="true">
21-
<polygon fill="currentColor" points="0,700 700,700 700,0 0,0" />
22-
<polygon fill="#ffffff" points="150,550 350,550 350,250 450,250 450,550 550,550 550,150 150,150 " />
23-
</svg>
24-
</Box>
25-
)
26-
2718
function Header() {
28-
const siteMetadata = useSiteMetadata()
2919
const search = useSearch()
3020

3121
return (
@@ -35,7 +25,7 @@ function Header() {
3525
as="header"
3626
sx={{
3727
display: 'flex',
38-
height: HEADER_HEIGHT,
28+
height: `${HEADER_HEIGHT}px`,
3929
px: [3, null, null, 4],
4030
alignItems: 'center',
4131
justifyContent: 'space-between',
@@ -47,19 +37,7 @@ function Header() {
4737
}}
4838
>
4939
<Box sx={{display: 'flex', alignItems: 'center'}}>
50-
<Link
51-
to="/"
52-
sx={{
53-
mr: 4,
54-
fontWeight: 'bold',
55-
color: 'fg.default',
56-
display: 'flex',
57-
alignItems: 'center',
58-
}}
59-
>
60-
<NpmLogo size="32" sx={{display: 'flex', mr: 3}} />
61-
{siteMetadata.title}
62-
</Link>
40+
<SiteTitle logo={true} sx={{mr: 4}} />
6341
<Box sx={{display: ['none', null, null, 'block'], ml: 4}}>
6442
<Search.Desktop {...search} />
6543
</Box>

‎src/components/link.js‎

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,16 @@ import React from 'react'
22
import {Link as PrimerLink} from '@primer/react'
33
import {Link as GatsbyLink} from 'gatsby'
44

5+
const omit = (obj, ...keys) => {
6+
const res = {}
7+
for (const k of Object.keys(obj)) {
8+
if (!keys.includes(k)) {
9+
res[k] = obj[k]
10+
}
11+
}
12+
return res
13+
}
14+
515
const FALLBACK = `http://_${Math.random().toString().slice(2)}._${Math.random().toString().slice(2)}`
616

717
const getLocalPath = href => {
@@ -21,11 +31,8 @@ const getLocalPath = href => {
2131
return null
2232
}
2333

24-
const GatsbyLinkWithoutSxProps = React.forwardRef(function GatsbyLinkWithoutSxProps(
25-
{sx, underline, hoverColor, muted, ...props},
26-
ref,
27-
) {
28-
return <GatsbyLink ref={ref} {...props} />
34+
const GatsbyLinkWithoutSxProps = React.forwardRef(function GatsbyLinkWithoutSxProps(props, ref) {
35+
return <GatsbyLink ref={ref} {...omit(props, 'sx', 'underline', 'hoverColor', 'muted')} />
2936
})
3037

3138
const Link = React.forwardRef(function Link({to, href, ...props}, ref) {

‎src/components/nav-drawer.js‎

Lines changed: 75 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,85 @@
11
import React from 'react'
22
import {Button, Box} from '@primer/react'
33
import {XIcon, ThreeBarsIcon} from '@primer/octicons-react'
4-
import Link from './link'
5-
import Drawer from './drawer'
64
import NavItems from './nav-items'
7-
import useSiteMetadata from '../hooks/use-site-metadata'
85
import {useIsMobile} from '../hooks/use-breakpoint'
96
import {DarkTheme, LightTheme} from '../theme'
7+
import {AnimatePresence, motion} from 'framer-motion'
8+
import {FocusOn} from 'react-focus-on'
9+
import {HEADER_BAR, HEADER_HEIGHT} from '../constants'
10+
import SiteTitle from './site-title'
1011

11-
const useDrawerIsOpen = () => {
12+
const Drawer = ({isOpen, onDismiss, children}) => (
13+
<AnimatePresence>
14+
{isOpen ? (
15+
// These event handlers fix a bug that caused links below the fold
16+
// to be unclickable in macOS Safari.
17+
// Reference: https://github.com/theKashey/react-focus-lock/issues/79
18+
<Box
19+
onMouseDown={event => event.preventDefault()}
20+
onKeyDown={event => event.target.focus()}
21+
onClick={event => event.target.focus()}
22+
role="button"
23+
tabIndex="0"
24+
>
25+
<FocusOn returnFocus={true} onEscapeKey={onDismiss}>
26+
<Box
27+
sx={{
28+
position: 'fixed',
29+
top: 0,
30+
right: 0,
31+
bottom: 0,
32+
left: 0,
33+
bg: 'overlay.backdrop',
34+
}}
35+
key="overlay"
36+
as={motion.div}
37+
initial={{opacity: 0}}
38+
animate={{opacity: 1}}
39+
exit={{opacity: 0}}
40+
transition={{type: 'tween'}}
41+
onClick={onDismiss}
42+
/>
43+
<Box
44+
sx={{
45+
position: 'fixed',
46+
top: `${HEADER_BAR}px`,
47+
right: 0,
48+
bottom: 0,
49+
width: 300,
50+
zIndex: 1,
51+
}}
52+
key="drawer"
53+
as={motion.div}
54+
initial={{x: '100%'}}
55+
animate={{x: 0}}
56+
exit={{x: '100%'}}
57+
transition={{type: 'tween', duration: 0.2}}
58+
>
59+
{children}
60+
</Box>
61+
</FocusOn>
62+
</Box>
63+
) : null}
64+
</AnimatePresence>
65+
)
66+
67+
function NavDrawer() {
1268
const isMobile = useIsMobile()
13-
const [isOpen, setIsOpen] = React.useState(false)
14-
const setOpen = React.useCallback(() => setIsOpen(true), [])
15-
const setClose = React.useCallback(() => setIsOpen(false), [])
69+
const [open, setOpen] = React.useState(false)
1670

1771
React.useEffect(() => {
18-
if (!isMobile && isOpen) {
19-
setIsOpen(false)
72+
if (!isMobile && open) {
73+
setOpen(false)
2074
}
21-
}, [isMobile, isOpen])
22-
23-
return [isOpen, {setOpen, setClose}]
24-
}
25-
26-
function NavDrawer() {
27-
const siteMetadata = useSiteMetadata()
28-
const [isOpen, {setOpen, setClose}] = useDrawerIsOpen()
75+
}, [isMobile, open])
2976

3077
return (
3178
<>
32-
<Button aria-label="Menu" aria-expanded={isOpen} onClick={setOpen} sx={{ml: 3}}>
79+
<Button aria-label="Menu" aria-expanded={open} onClick={() => setOpen(true)} sx={{ml: 3}}>
3380
<ThreeBarsIcon />
3481
</Button>
35-
<LightTheme as={Drawer} isOpen={isOpen} onDismiss={setClose}>
82+
<LightTheme as={Drawer} isOpen={open} onDismiss={() => setOpen(false)}>
3683
<Box
3784
sx={{
3885
display: 'flex',
@@ -54,32 +101,19 @@ function NavDrawer() {
54101
>
55102
<DarkTheme
56103
sx={{
57-
borderWidth: 0,
58-
borderRadius: 0,
59-
borderBottomWidth: 1,
60-
borderColor: 'border.muted',
61-
borderStyle: 'solid',
62104
color: 'fg.default',
63105
bg: 'canvas.default',
106+
height: `${HEADER_HEIGHT}px`,
107+
px: 3,
108+
alignItems: 'center',
109+
justifyContent: 'space-between',
110+
display: 'flex',
64111
}}
65112
>
66-
<Box
67-
sx={{
68-
py: 3,
69-
pl: 4,
70-
pr: 3,
71-
alignItems: 'center',
72-
justifyContent: 'space-between',
73-
display: 'flex',
74-
}}
75-
>
76-
<Link to="/" sx={{fontSize: 2, color: 'fg.default'}}>
77-
{siteMetadata.title}
78-
</Link>
79-
<Button aria-label="Close" onClick={setClose}>
80-
<XIcon />
81-
</Button>
82-
</Box>
113+
<SiteTitle />
114+
<Button aria-label="Close" onClick={() => setOpen(false)}>
115+
<XIcon />
116+
</Button>
83117
</DarkTheme>
84118
<Box sx={{display: 'flex', flexDirection: 'column'}}>
85119
<NavItems />

‎src/components/nav-items.js‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -59,9 +59,7 @@ const Navigation = () => {
5959

6060
return (
6161
<>
62-
<VisuallyHidden>
63-
<h3>Site navigation</h3>
64-
</VisuallyHidden>
62+
<VisuallyHidden as="h3">Site navigation</VisuallyHidden>
6563
<NavList aria-label="Site">
6664
<NavItems items={items} path={pathname} />
6765
<NavList.Divider />

‎src/components/page-footer.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ const Contributors = ({contributors = [], latestCommit}) => {
2929
}
3030

3131
return (
32-
<div>
32+
<>
3333
<Box sx={{display: 'flex', alignItems: 'center'}}>
3434
<Text sx={{mr: 2}}>
3535
{contributors.length} {pluralize('contributor', contributors.length)}
@@ -48,7 +48,7 @@ const Contributors = ({contributors = [], latestCommit}) => {
4848
<Link href={latestCommit.url}>{format(new Date(latestCommit.date))}</Link>
4949
</Text>
5050
) : null}
51-
</div>
51+
</>
5252
)
5353
}
5454

0 commit comments

Comments
 (0)