Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 | import {
BorderBox,
Box,
Details,
Flex,
Grid,
Heading,
Position,
StyledOcticon,
Text,
} from '@primer/components'
import {ChevronDownIcon, ChevronRightIcon} from '@primer/octicons-react'
import React from 'react'
import {Location} from '@reach/router'
import {MDXProvider} from "@mdx-js/react"
import Head from './head'
import Header, {HEADER_HEIGHT} from './header'
import PageFooter from './page-footer'
import Sidebar from './sidebar'
import SourceLink from './source-link'
import StatusLabel from './status-label'
import TableOfContents from './table-of-contents'
import VariantSelect from './variant-select'
function Layout({children, pageContext}) {
const {
title,
description,
status,
source,
additionalContributors = [],
} = pageContext.frontmatter
return (
<MDXProvider components={{
}}>
<Flex flexDirection="column" minHeight="100vh">
<Head title={title} description={description} />
<Header />
<Flex flex="1 1 auto" flexDirection="row" css={{zIndex: 0}}>
<Box display={['none', null, null, 'block']}>
<Sidebar />
</Box>
<Grid
id="skip-nav"
maxWidth="100%"
gridTemplateColumns={['100%', null, 'minmax(0, 65ch) 220px']}
gridTemplateAreas={[
'"heading" "content"',
null,
'"heading table-of-contents" "content table-of-contents"',
]}
gridColumnGap={[null, null, 6, 7]}
gridRowGap={3}
mx="auto"
p={[5, 6, null, 7]}
css={{alignItems: 'start', alignSelf: 'start'}}
>
<Box css={{gridArea: 'heading'}}>
<BorderBox
borderWidth={0}
borderBottomWidth={1}
borderRadius={0}
pb={2}
>
<Location>
{({location}) => {
if (location.pathname.startsWith('/cli/')) {
return (
<Box>
<Box>
<Heading as="h1">{title}</Heading>
{description}
</Box>
</Box>
);
} else {
return <Heading as="h1">{title}</Heading>;
}
}}
</Location>
</BorderBox>
<Location>
{({location}) => {
if (location.pathname.startsWith('/cli/')) {
return (
<Box css={{'margin-top': '25px'}}>
<VariantSelect overlay={true} direction="se" menuWidth="min(30ch, 500px)" root="/cli" />
</Box>
);
}
}}
</Location>
</Box>
{pageContext.tableOfContents.items ? (
<Position
display={['none', null, 'block']}
css={{gridArea: 'table-of-contents', overflow: 'auto'}}
position="sticky"
top={HEADER_HEIGHT + 24}
mt="6px"
maxHeight={`calc(100vh - ${HEADER_HEIGHT}px - 24px)`}
>
<Text display="inline-block" fontWeight="bold" mb={1}>
Table of contents
</Text>
<TableOfContents items={pageContext.tableOfContents.items} />
</Position>
) : null}
<Box css={{gridArea: 'content'}}>
{status || source ? (
<Flex mb={3} alignItems="center">
{status ? <StatusLabel status={status} /> : null}
<Box mx="auto" />
{source ? <SourceLink href={source} /> : null}
</Flex>
) : null}
{pageContext.tableOfContents.items ? (
<Box display={['block', null, 'none']} mb={3}>
<Details>
{({open}) => (
<>
<Text as="summary" fontWeight="bold">
{open ? (
<StyledOcticon icon={ChevronDownIcon} mr={2} />
) : (
<StyledOcticon icon={ChevronRightIcon} mr={2} />
)}
Table of contents
</Text>
<Box pt={1}>
<TableOfContents
items={pageContext.tableOfContents.items}
/>
</Box>
</>
)}
</Details>
</Box>
) : null}
{children}
<PageFooter
editUrl={pageContext.editUrl}
contributors={pageContext.contributors.concat(
additionalContributors.map((login) => ({login})),
)}
/>
</Box>
</Grid>
</Flex>
</Flex>
</MDXProvider>
)
}
export default Layout
|