2018-11-30 22:54:49 +03:00
|
|
|
import React from 'react'
|
|
|
|
|
import App, {Container} from 'next/app'
|
|
|
|
|
import {MDXProvider} from '@mdx-js/tag'
|
|
|
|
|
import Head from 'next/head'
|
2018-12-21 01:29:18 +03:00
|
|
|
import {BaseStyles, BorderBox, Box, Flex, theme} from '@primer/components'
|
2019-02-05 00:04:24 +03:00
|
|
|
import {Header, PackageHeader, SideNav} from '../docs/components'
|
|
|
|
|
import getComponents from '../docs/markdown'
|
|
|
|
|
import {config, requirePage, rootPage} from '../docs/utils'
|
|
|
|
|
import {CONTENT_MAX_WIDTH} from '../docs/constants'
|
2018-11-30 22:54:49 +03:00
|
|
|
|
2019-02-05 02:46:56 +03:00
|
|
|
import '../src/index.scss'
|
2018-12-18 02:05:27 +03:00
|
|
|
|
2018-11-30 22:54:49 +03:00
|
|
|
export default class MyApp extends App {
|
|
|
|
|
static async getInitialProps({Component, ctx}) {
|
|
|
|
|
let page = {}
|
|
|
|
|
|
|
|
|
|
if (Component.getInitialProps) {
|
|
|
|
|
page = await Component.getInitialProps(ctx)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return {page}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
render() {
|
2018-12-05 00:57:50 +03:00
|
|
|
// strip the trailing slash
|
|
|
|
|
const pathname = this.props.router.pathname.replace(/\/$/, '')
|
2018-11-30 22:54:49 +03:00
|
|
|
const {Component, page} = this.props
|
|
|
|
|
|
2019-01-11 01:19:31 +03:00
|
|
|
const node = rootPage.first(node => node.path === pathname) || {}
|
|
|
|
|
const {file, meta = {}} = node || {}
|
2018-12-14 08:39:47 +03:00
|
|
|
const components = getComponents(node)
|
2018-12-04 02:53:47 +03:00
|
|
|
|
2019-01-11 01:19:31 +03:00
|
|
|
const Hero = file ? requirePage(file).Hero : null
|
2018-12-21 01:54:09 +03:00
|
|
|
|
2018-11-30 22:54:49 +03:00
|
|
|
return (
|
2019-01-09 22:32:42 +03:00
|
|
|
<BaseStyles fontSize={2} style={{fontFamily: theme.fonts.normal}}>
|
2018-11-30 22:54:49 +03:00
|
|
|
<Container>
|
|
|
|
|
<Head>
|
2018-12-04 02:53:47 +03:00
|
|
|
<title>Primer CSS{meta.title ? ` / ${meta.title}` : null}</title>
|
2018-11-30 22:54:49 +03:00
|
|
|
</Head>
|
|
|
|
|
<Header />
|
2018-12-21 01:29:18 +03:00
|
|
|
<Flex
|
|
|
|
|
flexDirection={['column', 'column', 'column', 'row-reverse']}
|
|
|
|
|
alignContent="stretch"
|
|
|
|
|
justifyContent="space-between"
|
|
|
|
|
>
|
2019-01-09 22:32:42 +03:00
|
|
|
<Box width={['auto', 'auto', '100%']}>
|
2018-12-21 01:54:09 +03:00
|
|
|
{Hero ? <Hero /> : null}
|
2018-12-08 02:20:20 +03:00
|
|
|
<Box color="gray.9" maxWidth={['auto', 'auto', 'auto', CONTENT_MAX_WIDTH]} px={6} mx="auto" my={6}>
|
2018-12-05 01:04:53 +03:00
|
|
|
<div className="markdown-body">
|
2018-12-08 02:20:20 +03:00
|
|
|
{!meta.hero && meta.title ? <h1>{meta.title}</h1> : null}
|
2018-12-07 11:29:20 +03:00
|
|
|
<PackageHeader {...meta} />
|
2018-12-05 01:04:53 +03:00
|
|
|
<MDXProvider components={components}>
|
|
|
|
|
<Component {...page} />
|
|
|
|
|
</MDXProvider>
|
2019-01-08 23:12:35 +03:00
|
|
|
{config.production ? null : (
|
|
|
|
|
<details>
|
|
|
|
|
<summary>Metadata</summary>
|
|
|
|
|
<pre>{JSON.stringify(meta, null, 2)}</pre>
|
|
|
|
|
</details>
|
|
|
|
|
)}
|
2018-12-05 01:04:53 +03:00
|
|
|
</div>
|
2018-12-04 02:53:47 +03:00
|
|
|
{/* TODO: bring back edit link! */}
|
2018-11-30 22:54:49 +03:00
|
|
|
</Box>
|
|
|
|
|
</Box>
|
2018-12-21 01:29:18 +03:00
|
|
|
<BorderBox
|
2019-01-09 22:32:42 +03:00
|
|
|
width={['100%', '100%', 256]}
|
|
|
|
|
minWidth={256}
|
2018-12-21 01:29:18 +03:00
|
|
|
bg="gray.0"
|
|
|
|
|
borderColor="gray.2"
|
|
|
|
|
borderRadius={0}
|
|
|
|
|
border={0}
|
|
|
|
|
borderRight={1}
|
|
|
|
|
borderTop={[1, 1, 0, 0]}
|
|
|
|
|
>
|
2018-12-07 12:31:33 +03:00
|
|
|
<SideNav />
|
2018-12-21 01:29:18 +03:00
|
|
|
</BorderBox>
|
2018-11-30 22:54:49 +03:00
|
|
|
</Flex>
|
|
|
|
|
</Container>
|
|
|
|
|
</BaseStyles>
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
}
|
