Merge pull request #770 from primer/edit-links

Add Edit on GitHub links to docs

pages/_app.js

@@ -2,17 +2,22 @@ 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 Octicon, {Pencil} from '@githubprimer/octicons-react'
+import {BaseStyles, Link, Text, BorderBox, Box, Flex, theme} from '@primer/components'
 import {PackageHeader} from '../docs/components'
 import {Header, MarkdownHeading, JumpNav, SideNav} from '@primer/blueprints'
 import {NavList} from '@primer/blueprints/next-components'
 import getComponents from '../docs/markdown'
 import documents from '../searchIndex'
 import {config, requirePage, rootPage} from '../docs/utils'
 import {CONTENT_MAX_WIDTH} from '../docs/constants'
+import {repository} from '../package.json'
 
 import '../src/index.scss'
 
+const DocLink = props => <Link nounderline {...props} />
+const editLinkBase = `${repository}/edit/master/pages`
+
 export default class MyApp extends App {
   static async getInitialProps({Component, ctx}) {
     let page = {}
@@ -30,6 +35,7 @@ export default class MyApp extends App {
     const {Component, page} = this.props
     const node = rootPage.first(node => node.path === pathname) || {}
     const {file, meta = {}} = node || {}
+    const isIndex = file.includes('index')
     const components = getComponents(node)
 
     const Hero = file ? requirePage(file).Hero : null
@@ -69,6 +75,17 @@ export default class MyApp extends App {
                       <pre>{JSON.stringify(meta, null, 2)}</pre>
                     </details>
                   )}
+                  {pathname && (
+                    <Box color="gray.5" borderColor="gray.2" borderTop={1} my={6} pt={2}>
+                      <Text mr={2}>
+                        <Octicon icon={Pencil} />
+                      </Text>
+                      <DocLink muted href={`${editLinkBase}${pathname}${isIndex ? '/index' : ''}.md`}>
+                        Edit this page
+                      </DocLink>{' '}
+                      on GitHub
+                    </Box>
+                  )}
                 </div>
               </Box>
             </Box>