import React from 'react' import App, {Container} from 'next/app' import {MDXProvider} from '@mdx-js/tag' import Head from 'next/head' import {BaseStyles, BorderBox, Box, Flex, theme} from '@primer/components' 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' import '../src/index.scss' 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 {file, meta = {}} = node || {} const components = getComponents(node) const Hero = file ? requirePage(file).Hero : null return ( Primer CSS{meta.title ? ` / ${meta.title}` : null}

{Hero ? : null}

{!meta.hero && meta.title ?

{meta.title}

: null} {config.production ? null : (

Metadata

{JSON.stringify(meta, null, 2)}

)}

{/* TODO: bring back edit link! */} ) } }