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 {PackageHeader} from '../docs/components'
import {Header, JumpNav, Section, Router, RouteMatch, SectionLink, SideNav} from '@primer/blueprints'
import {NavList} from '@primer/blueprints/dist/next-components-index.umd.js'
import getComponents from '../docs/markdown'
import documents from '../searchIndex'
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 (
      <BaseStyles fontSize={2} style={{fontFamily: theme.fonts.normal}}>
        <Container>
          <Head>
            <title>Primer CSS{meta.title ? ` / ${meta.title}` : null}</title>
          </Head>
          <Header
            documents={documents}
            root="https://primer.style"
            subfolder="css"
            title="Primer"
            subtitle="CSS"
          >
            <JumpNav />
          </Header>
          <Flex
            flexDirection={['column', 'column', 'column', 'row-reverse']}
            alignContent="stretch"
            justifyContent="space-between"
          >
            <Box width={['auto', 'auto', '100%']}>
              {Hero ? <Hero /> : null}
              <Box color="gray.9" maxWidth={['auto', 'auto', 'auto', CONTENT_MAX_WIDTH]} px={6} mx="auto" my={6}>
                <div className="markdown-body">
                  {!meta.hero && meta.title ? <h1>{meta.title}</h1> : null}
                  <PackageHeader {...meta} />
                  <MDXProvider components={components}>
                    <Component {...page} />
                  </MDXProvider>
                  {config.production ? null : (
                    <details>
                      <summary>Metadata</summary>
                      <pre>{JSON.stringify(meta, null, 2)}</pre>
                    </details>
                  )}
                </div>
              </Box>
            </Box>
            <BorderBox
              width={['100%', '100%', 256]}
              minWidth={256}
              bg="gray.0"
              borderColor="gray.2"
              borderRadius={0}
              border={0}
              borderRight={1}
              borderTop={[1, 1, 0, 0]}
            >
              <SideNav>
                <NavList currentPath={pathname} path="/css/getting-started" />
                <NavList currentPath={pathname} path="/css/tools" />
                <NavList currentPath={pathname} path="/css/principles" />
                <NavList currentPath={pathname} path="/css/support" />
                <NavList currentPath={pathname} path="/css/utilities" />
                <NavList currentPath={pathname} path="/css/objects" />
                <NavList currentPath={pathname} path="/css/components" />
              </SideNav>
            </BorderBox>
          </Flex>
        </Container>
      </BaseStyles>
    )
  }
}

@@ -139,19 +139,120 @@
 ort 
-%7BBaseStyles
+Octicon, %7BiconsByName, Pencil%7D from '@githubprimer/octicons-react'%0Aimport %7BBaseStyles, Link, Text, StyledOcticon
 , Bo
@@ -732,35 +732,136 @@
 ts'%0A
-%0Aimport '../src/index.scss'
+import %7Brepository%7D from '../package.json'%0A%0Aimport '../src/index.scss'%0A%0Aconst DocLink = props =%3E %3CLink nounderline %7B...props%7D /%3E
 %0A%0Aex
@@ -1346,24 +1346,126 @@
  node %7C%7C %7B%7D%0A
+    const isIndex = file.includes('index')%0A    const editLinkBase = %60$%7Brepository%7D/edit/master/pages%60%0A
     const co
@@ -2932,16 +2932,515 @@
      )%7D%0A
+                  %7Bpathname && (%0A                    %3CBox color=%22gray.5%22 borderColor=%22gray.2%22 borderTop=%7B1%7D my=%7B6%7D pt=%7B2%7D%3E%0A                      %3CText mr=%7B2%7D%3E%0A                        %3COcticon icon=%7BPencil%7D /%3E%0A                      %3C/Text%3E%0A                      %3CDocLink muted href=%7B%60$%7BeditLinkBase%7D$%7Bpathname%7D$%7BisIndex ? '/index' : ''%7D.md%60%7D%3E%0A                        Edit this page%0A                      %3C/DocLink%3E%7B' '%7D%0A                      on GitHub%0A                    %3C/Box%3E%0A                  )%7D%0A
         

add edit link