@primer/gatsby-theme-doctocat 3.1.1 → 3.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.eslintrc.json +2 -1
- package/CHANGELOG.md +25 -1
- package/babel.config.js +11 -1
- package/jest.config.js +2 -1
- package/package.json +11 -11
- package/src/components/caption.js +2 -2
- package/src/components/clipboard-copy.js +1 -1
- package/src/components/code.js +13 -16
- package/src/components/container.js +2 -2
- package/src/components/contributors.js +4 -4
- package/src/components/details.js +1 -1
- package/src/components/do-dont.js +37 -14
- package/src/components/drawer.js +6 -6
- package/src/components/header.js +20 -16
- package/src/components/heading.js +1 -1
- package/src/components/hero-layout.js +8 -8
- package/src/components/hero.js +3 -3
- package/src/components/image-container.js +13 -4
- package/src/components/layout.js +40 -35
- package/src/components/link.js +10 -0
- package/src/components/live-code.js +27 -13
- package/src/components/live-preview-wrapper.js +2 -2
- package/src/components/mobile-search.js +19 -10
- package/src/components/nav-drawer.js +46 -21
- package/src/components/nav-dropdown.js +11 -9
- package/src/components/nav-items.js +22 -11
- package/src/components/page-footer.js +15 -5
- package/src/components/search-results.js +6 -11
- package/src/components/search.js +11 -9
- package/src/components/sidebar.js +15 -8
- package/src/components/skip-link.js +1 -1
- package/src/components/source-link.js +2 -4
- package/src/components/status-label.js +1 -1
- package/src/components/storybook-link.js +2 -4
- package/src/components/table-of-contents.js +3 -3
- package/src/components/text-input.js +2 -2
- package/src/components/wrap-page-element.js +1 -1
- package/src/components/wrap-root-element.js +2 -1
- package/src/search.worker.js +1 -1
package/src/components/layout.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import componentMetadata from '@primer/component-metadata'
|
|
2
|
-
import {
|
|
2
|
+
import {Box, Heading, Text} from '@primer/react'
|
|
3
3
|
import React from 'react'
|
|
4
4
|
import Head from './head'
|
|
5
5
|
import Header, {HEADER_HEIGHT} from './header'
|
|
@@ -26,25 +26,25 @@ function Layout({children, pageContext}) {
|
|
|
26
26
|
}
|
|
27
27
|
|
|
28
28
|
return (
|
|
29
|
-
<
|
|
29
|
+
<Box sx={{flexDirection: 'column', minHeight: '100vh', display: 'flex'}}>
|
|
30
30
|
<Head title={title} description={description} />
|
|
31
31
|
<Header />
|
|
32
|
-
<
|
|
33
|
-
<Box
|
|
32
|
+
<Box css={{zIndex: 0}} sx={{flex: '1 1 auto', flexDirection: 'row', display: 'flex'}}>
|
|
33
|
+
<Box sx={{display: ['none', null, null, 'block']}}>
|
|
34
34
|
<Sidebar />
|
|
35
35
|
</Box>
|
|
36
36
|
<Box
|
|
37
37
|
id="skip-nav"
|
|
38
|
-
display="flex"
|
|
39
|
-
width="100%"
|
|
40
|
-
p={[4, 5, 6, 7]}
|
|
41
38
|
sx={{
|
|
42
39
|
justifyContent: 'center',
|
|
43
|
-
flexDirection: 'row-reverse'
|
|
40
|
+
flexDirection: 'row-reverse',
|
|
41
|
+
display: 'flex',
|
|
42
|
+
width: '100%',
|
|
43
|
+
p: [4, 5, 6, 7]
|
|
44
44
|
}}
|
|
45
45
|
>
|
|
46
46
|
{pageContext.tableOfContents.items ? (
|
|
47
|
-
<
|
|
47
|
+
<Box
|
|
48
48
|
sx={{
|
|
49
49
|
width: 220,
|
|
50
50
|
flex: '0 0 auto',
|
|
@@ -56,53 +56,58 @@ function Layout({children, pageContext}) {
|
|
|
56
56
|
}}
|
|
57
57
|
css={{gridArea: 'table-of-contents', overflow: 'auto'}}
|
|
58
58
|
>
|
|
59
|
-
<Text display
|
|
60
|
-
On this page
|
|
61
|
-
</Text>
|
|
59
|
+
<Text sx={{display: 'inline-block', fontWeight: 'bold', mb: 1}}>On this page</Text>
|
|
62
60
|
<TableOfContents items={pageContext.tableOfContents.items} />
|
|
63
|
-
</
|
|
61
|
+
</Box>
|
|
64
62
|
) : null}
|
|
65
|
-
<Box width
|
|
66
|
-
<Box
|
|
67
|
-
<
|
|
63
|
+
<Box sx={{width: '100%', maxWidth: '960px'}}>
|
|
64
|
+
<Box sx={{mb: 4}}>
|
|
65
|
+
<Box sx={{alignItems: 'center', display: 'flex'}}>
|
|
68
66
|
<Heading as="h1" sx={{mr: 2}}>
|
|
69
67
|
{title}
|
|
70
68
|
</Heading>{' '}
|
|
71
69
|
{status ? <StatusLabel status={status} /> : null}
|
|
72
|
-
</
|
|
73
|
-
{description ?
|
|
74
|
-
<Box pb={2} sx={{fontSize: 3}}>
|
|
75
|
-
{description}
|
|
76
|
-
</Box>
|
|
77
|
-
) : null}
|
|
70
|
+
</Box>
|
|
71
|
+
{description ? <Box sx={{fontSize: 3, pb: 2}}>{description}</Box> : null}
|
|
78
72
|
{source || storybook ? (
|
|
79
|
-
<
|
|
73
|
+
<Box
|
|
80
74
|
sx={{
|
|
81
75
|
py: 2,
|
|
82
76
|
gridGap: [1, null, 3],
|
|
83
77
|
gridAutoFlow: ['row', null, 'column'],
|
|
84
78
|
gridAutoColumns: 'max-content',
|
|
85
|
-
gridAutoRows: 'max-content'
|
|
79
|
+
gridAutoRows: 'max-content',
|
|
80
|
+
display: 'grid'
|
|
86
81
|
}}
|
|
87
82
|
>
|
|
88
83
|
{source ? <SourceLink href={source} /> : null}
|
|
89
84
|
{storybook ? <StorybookLink href={storybook} /> : null}
|
|
90
|
-
</
|
|
85
|
+
</Box>
|
|
91
86
|
) : null}
|
|
92
87
|
</Box>
|
|
93
88
|
{pageContext.tableOfContents.items ? (
|
|
94
|
-
<
|
|
95
|
-
sx={{
|
|
89
|
+
<Box
|
|
90
|
+
sx={{
|
|
91
|
+
display: ['block', null, 'none'],
|
|
92
|
+
mb: 5,
|
|
93
|
+
borderColor: 'border.muted',
|
|
94
|
+
bg: 'canvas.subtle',
|
|
95
|
+
borderWidth: '1px',
|
|
96
|
+
borderStyle: 'solid',
|
|
97
|
+
borderRadius: 2
|
|
98
|
+
}}
|
|
96
99
|
>
|
|
97
|
-
<Box
|
|
98
|
-
<
|
|
99
|
-
|
|
100
|
-
|
|
100
|
+
<Box sx={{p: 3}}>
|
|
101
|
+
<Box
|
|
102
|
+
sx={{flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', display: 'flex'}}
|
|
103
|
+
>
|
|
104
|
+
<Text sx={{fontWeight: 'bold'}}>On this page</Text>
|
|
105
|
+
</Box>
|
|
101
106
|
</Box>
|
|
102
|
-
<Box
|
|
107
|
+
<Box sx={{p: 3, borderTop: '1px solid', borderColor: 'border.muted'}}>
|
|
103
108
|
<TableOfContents items={pageContext.tableOfContents.items} />
|
|
104
109
|
</Box>
|
|
105
|
-
</
|
|
110
|
+
</Box>
|
|
106
111
|
) : null}
|
|
107
112
|
{children}
|
|
108
113
|
<PageFooter
|
|
@@ -111,8 +116,8 @@ function Layout({children, pageContext}) {
|
|
|
111
116
|
/>
|
|
112
117
|
</Box>
|
|
113
118
|
</Box>
|
|
114
|
-
</
|
|
115
|
-
</
|
|
119
|
+
</Box>
|
|
120
|
+
</Box>
|
|
116
121
|
)
|
|
117
122
|
}
|
|
118
123
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import {Box, Text} from '@primer/react'
|
|
2
2
|
import htmlReactParser from 'html-react-parser'
|
|
3
3
|
import githubTheme from '../github'
|
|
4
4
|
import React, {useState} from 'react'
|
|
@@ -34,27 +34,38 @@ function wrapWithFragment(jsx) {
|
|
|
34
34
|
return `<React.Fragment>${jsx}</React.Fragment>`
|
|
35
35
|
}
|
|
36
36
|
|
|
37
|
-
|
|
37
|
+
const getResolvedScope = metastring => {
|
|
38
|
+
if (typeof scope === 'function') return scope(metastring)
|
|
39
|
+
return scope
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
function LiveCode({code, language, noinline, metastring}) {
|
|
38
43
|
const theme = React.useContext(ThemeContext)
|
|
39
44
|
const [liveCode, setLiveCode] = useState(code)
|
|
40
45
|
const handleChange = updatedLiveCode => setLiveCode(updatedLiveCode)
|
|
41
46
|
|
|
42
47
|
return (
|
|
43
|
-
<
|
|
44
|
-
<LiveProvider
|
|
45
|
-
|
|
48
|
+
<Box sx={{flexDirection: 'column', mb: 3, display: 'flex'}}>
|
|
49
|
+
<LiveProvider
|
|
50
|
+
scope={getResolvedScope(metastring)}
|
|
51
|
+
code={liveCode}
|
|
52
|
+
transformCode={languageTransformers[language]}
|
|
53
|
+
noInline={noinline}
|
|
54
|
+
>
|
|
55
|
+
<Box
|
|
46
56
|
sx={{
|
|
47
57
|
border: '1px solid',
|
|
48
58
|
borderColor: 'border.default',
|
|
49
59
|
borderTopRightRadius: 2,
|
|
50
|
-
borderTopLeftRadius: 2
|
|
60
|
+
borderTopLeftRadius: 2,
|
|
61
|
+
display: 'flex'
|
|
51
62
|
}}
|
|
52
63
|
>
|
|
53
64
|
<LivePreviewWrapper>
|
|
54
65
|
<LivePreview />
|
|
55
66
|
</LivePreviewWrapper>
|
|
56
|
-
</
|
|
57
|
-
<
|
|
67
|
+
</Box>
|
|
68
|
+
<Box sx={{position: 'relative'}}>
|
|
58
69
|
<LiveEditor
|
|
59
70
|
onChange={handleChange}
|
|
60
71
|
theme={githubTheme}
|
|
@@ -70,13 +81,16 @@ function LiveCode({code, language, noinline}) {
|
|
|
70
81
|
borderColor: theme.colors.border.default
|
|
71
82
|
}}
|
|
72
83
|
/>
|
|
73
|
-
<
|
|
84
|
+
<Box sx={{top: 0, right: 0, p: 2, position: 'absolute'}}>
|
|
74
85
|
<ClipboardCopy value={liveCode} />
|
|
75
|
-
</
|
|
76
|
-
</
|
|
77
|
-
<Text
|
|
86
|
+
</Box>
|
|
87
|
+
</Box>
|
|
88
|
+
<Text
|
|
89
|
+
as={LiveError}
|
|
90
|
+
sx={{m: 0, p: 3, fontFamily: 'mono', fontSize: 1, color: 'fg.onEmphasis', bg: 'danger.emphasis'}}
|
|
91
|
+
/>
|
|
78
92
|
</LiveProvider>
|
|
79
|
-
</
|
|
93
|
+
</Box>
|
|
80
94
|
)
|
|
81
95
|
}
|
|
82
96
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {BaseStyles, Box} from '@primer/
|
|
1
|
+
import {BaseStyles, Box} from '@primer/react'
|
|
2
2
|
import Frame from './frame'
|
|
3
3
|
import React from 'react'
|
|
4
4
|
|
|
@@ -8,7 +8,7 @@ function LivePreviewWrapper({children}) {
|
|
|
8
8
|
return (
|
|
9
9
|
<Frame>
|
|
10
10
|
<BaseStyles>
|
|
11
|
-
<Box
|
|
11
|
+
<Box sx={{p: 3}}>{children}</Box>
|
|
12
12
|
</BaseStyles>
|
|
13
13
|
</Frame>
|
|
14
14
|
)
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import {Box, Button} from '@primer/react'
|
|
2
2
|
import {XIcon} from '@primer/octicons-react'
|
|
3
3
|
import Downshift from 'downshift'
|
|
4
4
|
import {AnimatePresence, motion} from 'framer-motion'
|
|
@@ -6,8 +6,8 @@ import {navigate} from 'gatsby'
|
|
|
6
6
|
import React from 'react'
|
|
7
7
|
import {FocusOn} from 'react-focus-on'
|
|
8
8
|
import useSearch from '../use-search'
|
|
9
|
-
import TextInput from './text-input'
|
|
10
9
|
import SearchResults from './search-results'
|
|
10
|
+
import TextInput from './text-input'
|
|
11
11
|
|
|
12
12
|
function stateReducer(state, changes) {
|
|
13
13
|
switch (changes.type) {
|
|
@@ -38,14 +38,22 @@ function MobileSearch({isOpen, onDismiss}) {
|
|
|
38
38
|
<AnimatePresence>
|
|
39
39
|
{isOpen ? (
|
|
40
40
|
<FocusOn returnFocus={true} onEscapeKey={() => handleDismiss()}>
|
|
41
|
-
<
|
|
42
|
-
<
|
|
41
|
+
<Box sx={{top: 0, left: 0, right: 0, bottom: 0, zIndex: 1, position: 'fixed'}}>
|
|
42
|
+
<Box
|
|
43
43
|
as={motion.div}
|
|
44
44
|
initial={{opacity: 0}}
|
|
45
45
|
animate={{opacity: 1}}
|
|
46
46
|
exit={{opacity: 0}}
|
|
47
47
|
onClick={handleDismiss}
|
|
48
|
-
sx={{
|
|
48
|
+
sx={{
|
|
49
|
+
top: 0,
|
|
50
|
+
left: 0,
|
|
51
|
+
right: 0,
|
|
52
|
+
bottom: 0,
|
|
53
|
+
bg: 'primer.canvas.backdrop',
|
|
54
|
+
zIndex: -1,
|
|
55
|
+
position: 'absolute'
|
|
56
|
+
}}
|
|
49
57
|
/>
|
|
50
58
|
<Downshift
|
|
51
59
|
inputValue={query}
|
|
@@ -61,13 +69,14 @@ function MobileSearch({isOpen, onDismiss}) {
|
|
|
61
69
|
stateReducer={stateReducer}
|
|
62
70
|
>
|
|
63
71
|
{({getInputProps, getItemProps, getMenuProps, getRootProps, isOpen: isMenuOpen, highlightedIndex}) => (
|
|
64
|
-
<
|
|
72
|
+
<Box
|
|
65
73
|
{...getRootProps({
|
|
66
74
|
flexDirection: 'column',
|
|
67
75
|
height: isMenuOpen ? '100%' : 'auto'
|
|
68
76
|
})}
|
|
77
|
+
sx={{display: 'flex'}}
|
|
69
78
|
>
|
|
70
|
-
<
|
|
79
|
+
<Box sx={{bg: 'canvas.default', color: 'fg.default', p: 3, flex: '0 0 auto', display: 'flex'}}>
|
|
71
80
|
<motion.div
|
|
72
81
|
initial={{scaleX: 0.1}}
|
|
73
82
|
animate={{scaleX: 1}}
|
|
@@ -85,7 +94,7 @@ function MobileSearch({isOpen, onDismiss}) {
|
|
|
85
94
|
<Button aria-label="Cancel" onClick={handleDismiss} sx={{ml: 3}}>
|
|
86
95
|
<XIcon />
|
|
87
96
|
</Button>
|
|
88
|
-
</
|
|
97
|
+
</Box>
|
|
89
98
|
{isMenuOpen ? (
|
|
90
99
|
<Box
|
|
91
100
|
{...getMenuProps({
|
|
@@ -108,10 +117,10 @@ function MobileSearch({isOpen, onDismiss}) {
|
|
|
108
117
|
/>
|
|
109
118
|
</Box>
|
|
110
119
|
) : null}
|
|
111
|
-
</
|
|
120
|
+
</Box>
|
|
112
121
|
)}
|
|
113
122
|
</Downshift>
|
|
114
|
-
</
|
|
123
|
+
</Box>
|
|
115
124
|
</FocusOn>
|
|
116
125
|
) : null}
|
|
117
126
|
</AnimatePresence>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import {Box, Button, Link, Text, ThemeProvider} from '@primer/react'
|
|
2
2
|
import {ChevronDownIcon, ChevronUpIcon, XIcon} from '@primer/octicons-react'
|
|
3
3
|
import {Link as GatsbyLink} from 'gatsby'
|
|
4
4
|
import debounce from 'lodash.debounce'
|
|
@@ -43,28 +43,46 @@ function NavDrawer({isOpen, onDismiss}) {
|
|
|
43
43
|
const siteMetadata = useSiteMetadata()
|
|
44
44
|
return (
|
|
45
45
|
<Drawer isOpen={isOpen} onDismiss={onDismiss}>
|
|
46
|
-
<
|
|
46
|
+
<Box
|
|
47
47
|
style={{overflow: 'auto', WebkitOverflowScrolling: 'touch'}}
|
|
48
|
-
sx={{flexDirection: 'column', height: '100%', bg: 'canvas.default'}}
|
|
48
|
+
sx={{flexDirection: 'column', height: '100%', bg: 'canvas.default', display: 'flex'}}
|
|
49
49
|
>
|
|
50
|
-
<
|
|
51
|
-
|
|
52
|
-
|
|
50
|
+
<Box
|
|
51
|
+
sx={{flexDirection: 'column', flex: '0 0 auto', color: 'fg.default', bg: 'canvas.default', display: 'flex'}}
|
|
52
|
+
>
|
|
53
|
+
<Box
|
|
54
|
+
sx={{
|
|
55
|
+
borderWidth: 0,
|
|
56
|
+
borderRadius: 0,
|
|
57
|
+
borderBottomWidth: 1,
|
|
58
|
+
borderColor: 'border.muted',
|
|
59
|
+
borderStyle: 'solid'
|
|
60
|
+
}}
|
|
61
|
+
>
|
|
62
|
+
<Box sx={{py: 3, pl: 4, pr: 3, alignItems: 'center', justifyContent: 'space-between', display: 'flex'}}>
|
|
53
63
|
<Link href="https://primer.style" sx={{fontFamily: 'mono', color: 'inherit'}}>
|
|
54
64
|
Primer
|
|
55
65
|
</Link>
|
|
56
66
|
<Button aria-label="Close" onClick={onDismiss}>
|
|
57
67
|
<XIcon />
|
|
58
68
|
</Button>
|
|
59
|
-
</
|
|
60
|
-
</
|
|
61
|
-
<
|
|
69
|
+
</Box>
|
|
70
|
+
</Box>
|
|
71
|
+
<Box sx={{flexDirection: 'column', display: 'flex'}}>
|
|
62
72
|
<PrimerNavItems items={primerNavItems} />
|
|
63
|
-
</
|
|
64
|
-
</
|
|
73
|
+
</Box>
|
|
74
|
+
</Box>
|
|
65
75
|
{navItems.length > 0 ? (
|
|
66
76
|
<ThemeProvider colorMode="day">
|
|
67
|
-
<
|
|
77
|
+
<Box
|
|
78
|
+
sx={{
|
|
79
|
+
flexDirection: 'column',
|
|
80
|
+
flex: '1 0 auto',
|
|
81
|
+
color: 'fg.default',
|
|
82
|
+
bg: 'canvas.default',
|
|
83
|
+
display: 'flex'
|
|
84
|
+
}}
|
|
85
|
+
>
|
|
68
86
|
<Link
|
|
69
87
|
as={GatsbyLink}
|
|
70
88
|
to="/"
|
|
@@ -73,10 +91,10 @@ function NavDrawer({isOpen, onDismiss}) {
|
|
|
73
91
|
{siteMetadata.title}
|
|
74
92
|
</Link>
|
|
75
93
|
<NavItems items={navItems} />
|
|
76
|
-
</
|
|
94
|
+
</Box>
|
|
77
95
|
</ThemeProvider>
|
|
78
96
|
) : null}
|
|
79
|
-
</
|
|
97
|
+
</Box>
|
|
80
98
|
</Drawer>
|
|
81
99
|
)
|
|
82
100
|
}
|
|
@@ -84,27 +102,34 @@ function NavDrawer({isOpen, onDismiss}) {
|
|
|
84
102
|
function PrimerNavItems({items}) {
|
|
85
103
|
return items.map((item, index) => {
|
|
86
104
|
return (
|
|
87
|
-
<
|
|
105
|
+
<Box
|
|
88
106
|
key={item.title}
|
|
89
|
-
sx={{
|
|
107
|
+
sx={{
|
|
108
|
+
borderWidth: 0,
|
|
109
|
+
borderRadius: 0,
|
|
110
|
+
borderTopWidth: index !== 0 ? 1 : 0,
|
|
111
|
+
borderColor: 'border.muted',
|
|
112
|
+
p: 4,
|
|
113
|
+
borderStyle: 'solid'
|
|
114
|
+
}}
|
|
90
115
|
>
|
|
91
116
|
{item.children ? (
|
|
92
117
|
<Details key={index}>
|
|
93
118
|
{({open, toggle}) => (
|
|
94
119
|
<>
|
|
95
120
|
<summary onClick={toggle} style={{cursor: 'pointer'}}>
|
|
96
|
-
<
|
|
121
|
+
<Box sx={{alignItems: 'center', justifyContent: 'space-between', display: 'flex'}}>
|
|
97
122
|
<Text>{item.title}</Text>
|
|
98
123
|
{open ? <ChevronUpIcon /> : <ChevronDownIcon />}
|
|
99
|
-
</
|
|
124
|
+
</Box>
|
|
100
125
|
</summary>
|
|
101
|
-
<
|
|
126
|
+
<Box sx={{flexDirection: 'column', mt: 2, display: 'flex'}}>
|
|
102
127
|
{item.children.map(child => (
|
|
103
128
|
<Link key={child.title} href={child.url} sx={{py: 1, mt: 2, fontSize: 1, color: 'inherit'}}>
|
|
104
129
|
{child.title}
|
|
105
130
|
</Link>
|
|
106
131
|
))}
|
|
107
|
-
</
|
|
132
|
+
</Box>
|
|
108
133
|
</>
|
|
109
134
|
)}
|
|
110
135
|
</Details>
|
|
@@ -113,7 +138,7 @@ function PrimerNavItems({items}) {
|
|
|
113
138
|
{item.title}
|
|
114
139
|
</Link>
|
|
115
140
|
)}
|
|
116
|
-
</
|
|
141
|
+
</Box>
|
|
117
142
|
)
|
|
118
143
|
})
|
|
119
144
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {Box, Details, StyledOcticon, Text, themeGet, useDetails} from '@primer/
|
|
1
|
+
import {Box, Details, StyledOcticon, Text, themeGet, useDetails} from '@primer/react'
|
|
2
2
|
import {TriangleDownIcon} from '@primer/octicons-react'
|
|
3
3
|
import React from 'react'
|
|
4
4
|
import styled from 'styled-components'
|
|
@@ -11,15 +11,17 @@ function NavDropdown({title, children}) {
|
|
|
11
11
|
<Text>{title}</Text>
|
|
12
12
|
<StyledOcticon icon={TriangleDownIcon} sx={{ml: 1}} />
|
|
13
13
|
</summary>
|
|
14
|
-
<Box position
|
|
14
|
+
<Box sx={{position: 'absolute'}}>
|
|
15
15
|
<Box
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
16
|
+
sx={{
|
|
17
|
+
bg: 'canvas.overlay',
|
|
18
|
+
p: 2,
|
|
19
|
+
mt: 2,
|
|
20
|
+
borderWidth: '1px',
|
|
21
|
+
borderStyle: 'solid',
|
|
22
|
+
borderColor: 'border.default',
|
|
23
|
+
borderRadius: '12px'
|
|
24
|
+
}}
|
|
23
25
|
>
|
|
24
26
|
{children}
|
|
25
27
|
</Box>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {Box, Link, StyledOcticon, themeGet} from '@primer/
|
|
1
|
+
import {Box, Link, StyledOcticon, themeGet} from '@primer/react'
|
|
2
2
|
import {LinkExternalIcon} from '@primer/octicons-react'
|
|
3
3
|
import {Link as GatsbyLink} from 'gatsby'
|
|
4
4
|
import preval from 'preval.macro'
|
|
@@ -30,14 +30,16 @@ function NavItems({items}) {
|
|
|
30
30
|
{items.map(item => (
|
|
31
31
|
<Box
|
|
32
32
|
key={item.title}
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
33
|
+
sx={{
|
|
34
|
+
borderWidth: 0,
|
|
35
|
+
borderRadius: 0,
|
|
36
|
+
borderTopWidth: 1,
|
|
37
|
+
borderStyle: 'solid',
|
|
38
|
+
borderColor: 'border.muted',
|
|
39
|
+
p: 4
|
|
40
|
+
}}
|
|
39
41
|
>
|
|
40
|
-
<Box display
|
|
42
|
+
<Box sx={{display: 'flex', flexDirection: 'column'}}>
|
|
41
43
|
<NavLink
|
|
42
44
|
as={GatsbyLink}
|
|
43
45
|
to={item.url}
|
|
@@ -48,7 +50,7 @@ function NavItems({items}) {
|
|
|
48
50
|
{item.title}
|
|
49
51
|
</NavLink>
|
|
50
52
|
{item.children ? (
|
|
51
|
-
<Box display
|
|
53
|
+
<Box sx={{display: 'flex', flexDirection: 'column', mt: 2}}>
|
|
52
54
|
{item.children.map(child => (
|
|
53
55
|
<NavLink
|
|
54
56
|
key={child.title}
|
|
@@ -71,9 +73,18 @@ function NavItems({items}) {
|
|
|
71
73
|
</Box>
|
|
72
74
|
))}
|
|
73
75
|
{repositoryUrl ? (
|
|
74
|
-
<Box
|
|
76
|
+
<Box
|
|
77
|
+
sx={{
|
|
78
|
+
borderWidth: 0,
|
|
79
|
+
borderTopWidth: 1,
|
|
80
|
+
borderRadius: 0,
|
|
81
|
+
borderStyle: 'solid',
|
|
82
|
+
borderColor: 'border.default',
|
|
83
|
+
p: 4
|
|
84
|
+
}}
|
|
85
|
+
>
|
|
75
86
|
<Link href={repositoryUrl} sx={{color: 'inherit'}}>
|
|
76
|
-
<Box display
|
|
87
|
+
<Box sx={{display: 'flex', justifyContent: 'space-between', alignItems: 'center'}}>
|
|
77
88
|
GitHub
|
|
78
89
|
<StyledOcticon icon={LinkExternalIcon} sx={{color: 'fg.muted'}} />
|
|
79
90
|
</Box>
|
|
@@ -1,12 +1,22 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import {Box, Link, StyledOcticon} from '@primer/react'
|
|
2
2
|
import {PencilIcon} from '@primer/octicons-react'
|
|
3
3
|
import React from 'react'
|
|
4
4
|
import Contributors from './contributors'
|
|
5
5
|
|
|
6
6
|
function PageFooter({editUrl, contributors}) {
|
|
7
7
|
return editUrl || contributors.length > 0 ? (
|
|
8
|
-
<
|
|
9
|
-
|
|
8
|
+
<Box
|
|
9
|
+
sx={{
|
|
10
|
+
borderWidth: 0,
|
|
11
|
+
borderTopWidth: 1,
|
|
12
|
+
borderRadius: 0,
|
|
13
|
+
mt: 8,
|
|
14
|
+
py: 5,
|
|
15
|
+
borderStyle: 'solid',
|
|
16
|
+
borderColor: 'border.default'
|
|
17
|
+
}}
|
|
18
|
+
>
|
|
19
|
+
<Box sx={{gridGap: 4, display: 'grid'}}>
|
|
10
20
|
{editUrl ? (
|
|
11
21
|
<Link href={editUrl}>
|
|
12
22
|
<StyledOcticon icon={PencilIcon} sx={{mr: 2}} />
|
|
@@ -15,8 +25,8 @@ function PageFooter({editUrl, contributors}) {
|
|
|
15
25
|
) : null}
|
|
16
26
|
|
|
17
27
|
{contributors.length > 0 ? <Contributors contributors={contributors} /> : null}
|
|
18
|
-
</
|
|
19
|
-
</
|
|
28
|
+
</Box>
|
|
29
|
+
</Box>
|
|
20
30
|
) : null
|
|
21
31
|
}
|
|
22
32
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import {Box, Text} from '@primer/react'
|
|
2
2
|
import React from 'react'
|
|
3
3
|
import sentenceCase from 'sentence-case'
|
|
4
4
|
import useSiteMetadata from '../use-site-metadata'
|
|
@@ -7,15 +7,11 @@ function SearchResults({results, getItemProps, highlightedIndex}) {
|
|
|
7
7
|
const siteMetadata = useSiteMetadata()
|
|
8
8
|
|
|
9
9
|
if (results.length === 0) {
|
|
10
|
-
return
|
|
11
|
-
<Box p={3} fontSize={1} color="fg.muted" width="100%">
|
|
12
|
-
No results
|
|
13
|
-
</Box>
|
|
14
|
-
)
|
|
10
|
+
return <Box sx={{p: 3, fontSize: 1, color: 'fg.muted', width: '100%'}}>No results</Box>
|
|
15
11
|
}
|
|
16
12
|
|
|
17
13
|
return results.map((item, index) => (
|
|
18
|
-
<
|
|
14
|
+
<Box
|
|
19
15
|
key={item.path}
|
|
20
16
|
{...getItemProps({
|
|
21
17
|
item,
|
|
@@ -29,12 +25,11 @@ function SearchResults({results, getItemProps, highlightedIndex}) {
|
|
|
29
25
|
style: {cursor: 'pointer'},
|
|
30
26
|
borderRadius: 2
|
|
31
27
|
})}
|
|
28
|
+
sx={{display: 'flex'}}
|
|
32
29
|
>
|
|
33
|
-
<Text
|
|
34
|
-
{getBreadcrumbs(siteMetadata.shortName, item.path).join(' / ')}
|
|
35
|
-
</Text>
|
|
30
|
+
<Text sx={{fontSize: 0, color: 'fg.muted'}}>{getBreadcrumbs(siteMetadata.shortName, item.path).join(' / ')}</Text>
|
|
36
31
|
{item.title}
|
|
37
|
-
</
|
|
32
|
+
</Box>
|
|
38
33
|
))
|
|
39
34
|
}
|
|
40
35
|
|