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'
|
|
|
|
|
import {withMDXLive} from 'mdx-live'
|
2018-12-07 12:31:33 +03:00
|
|
|
import {injectGlobal} from 'emotion'
|
2018-12-05 03:21:15 +03:00
|
|
|
import {BaseStyles, Box, Flex, Link, theme} from '@primer/components'
|
2018-12-07 11:29:20 +03:00
|
|
|
import {Header, PackageHeader, SideNav, IndexHero} from '../src/components'
|
2018-12-05 02:59:30 +03:00
|
|
|
import {rootPage} from '../src/utils'
|
2018-11-30 22:54:49 +03:00
|
|
|
|
2018-12-05 12:00:18 +03:00
|
|
|
import 'primer/index.scss'
|
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
|
|
|
|
|
|
2018-12-05 02:59:30 +03:00
|
|
|
const node = rootPage.first(node => node.path === pathname)
|
2018-12-05 08:14:49 +03:00
|
|
|
const {meta = {}, outline: getOutline = () => []} = node || {}
|
|
|
|
|
|
|
|
|
|
const components = {
|
|
|
|
|
// render links with our component
|
|
|
|
|
a: Link,
|
|
|
|
|
p: ({children, ...rest}) => {
|
|
|
|
|
if (children === '{:toc}') {
|
|
|
|
|
return <TableOfContents outline={getOutline()} {...rest} />
|
|
|
|
|
} else {
|
|
|
|
|
return <p {...rest}>{children}</p>
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
code: withMDXLive('pre'),
|
|
|
|
|
pre: props => props.children
|
|
|
|
|
}
|
2018-12-04 02:53:47 +03:00
|
|
|
|
2018-11-30 22:54:49 +03:00
|
|
|
return (
|
|
|
|
|
<BaseStyles style={{fontFamily: theme.fonts.normal}}>
|
|
|
|
|
<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-07 12:31:33 +03:00
|
|
|
<Flex flexDirection="row-reverse" justifyContent="space-between">
|
2018-12-07 22:29:38 +03:00
|
|
|
<Box width="80%">
|
2018-12-05 01:04:53 +03:00
|
|
|
{meta.hero ? <IndexHero /> : null}
|
2018-12-07 12:31:33 +03:00
|
|
|
<Box color="gray.9" maxWidth={960} mx="auto" my={6} px={6}>
|
2018-12-05 01:04:53 +03:00
|
|
|
<div className="markdown-body">
|
|
|
|
|
{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>
|
2018-12-07 12:31:33 +03:00
|
|
|
<details>
|
|
|
|
|
<summary>Metadata</summary>
|
|
|
|
|
<pre>meta: {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-07 12:31:33 +03:00
|
|
|
<Box width="20%" minWidth={240}>
|
|
|
|
|
<SideNav />
|
|
|
|
|
</Box>
|
2018-11-30 22:54:49 +03:00
|
|
|
</Flex>
|
|
|
|
|
</Container>
|
|
|
|
|
</BaseStyles>
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
}
|
2018-12-05 08:14:49 +03:00
|
|
|
|
|
|
|
|
function TableOfContents({outline, ...rest}) {
|
|
|
|
|
if (outline && outline.length) {
|
|
|
|
|
return (
|
|
|
|
|
<Box is="details" mb={4}>
|
|
|
|
|
<summary>Table of contents</summary>
|
|
|
|
|
<List items={outline} {...rest} />
|
|
|
|
|
</Box>
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
return null
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function List({items, ...rest}) {
|
|
|
|
|
if (items && items.length) {
|
|
|
|
|
return (
|
|
|
|
|
<ul {...rest}>
|
|
|
|
|
{items.map(item => (
|
2018-12-05 08:46:50 +03:00
|
|
|
<li key={item.id}>
|
2018-12-05 08:14:49 +03:00
|
|
|
<a href={`#${item.id}`}>{item.title}</a>
|
|
|
|
|
<List items={item.children} />
|
|
|
|
|
</li>
|
|
|
|
|
))}
|
|
|
|
|
</ul>
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
return null
|
|
|
|
|
}
|
