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' import {BaseStyles, Box, Flex, Link, theme} from '@primer/components' import {SideNav, Header, IndexHero} from '../src/components' import {rootPage} from '../src/utils' import 'primer/build/build.css' import 'prism-github/prism-github.css' export default class MyApp extends App { static async getInitialProps({Component, ctx}) { let page = {} if (Component.getInitialProps) { page = await Component.getInitialProps(ctx) } return {page} } render() { // strip the trailing slash const pathname = this.props.router.pathname.replace(/\/$/, '') const {Component, page} = this.props const node = rootPage.first(node => node.path === pathname) const {meta = {}, outline: getOutline = () => []} = node || {} const components = { // render links with our component a: Link, p: ({children, ...rest}) => { if (children === '{:toc}') { return } else { return

{children}

} }, code: withMDXLive('pre'), pre: props => props.children } return ( Primer CSS{meta.title ? ` / ${meta.title}` : null}
{meta.hero ? : null}
{meta.title ?

{meta.title}

: null} 
meta: {JSON.stringify(meta, null, 2)}
{/* TODO: bring back edit link! */} ) } } function TableOfContents({outline, ...rest}) { if (outline && outline.length) { return ( Table of contents ) } return null } function List({items, ...rest}) { if (items && items.length) { return ( ) } return null }