feat(website): add edit on github links to guides and api docs as well

Author: christianalfoni

packages/overmind-website/src/components/Api/index.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import Doc from '../Doc'
 import { Wrapper, List, Item, ListWrapper, TocList, TocItem } from './elements'
-import { compile } from '../../utils'
+import { compile, getGithubBaseUrl } from '../../utils'
 import { TApi } from '../App'
 
 type State = {
@@ -46,12 +46,15 @@ class Api extends React.Component<Props, State> {
       </TocList>
     )
   }
+  getGithubUrl() {
+    return getGithubBaseUrl() + this.props.currentPath + '.md'
+  }
   render() {
     if (!this.state.content) {
       return (
         <Wrapper>
           <ListWrapper />
-          <Doc />
+          <Doc url={this.getGithubUrl()} />
         </Wrapper>
       )
     }
@@ -78,7 +81,7 @@ class Api extends React.Component<Props, State> {
             })}
           </List>
         </ListWrapper>
-        <Doc>{compiled.tree}</Doc>
+        <Doc url={this.getGithubUrl()}>{compiled.tree}</Doc>
       </Wrapper>
     )
   }

packages/overmind-website/src/components/Doc/elements.tsx

@@ -1,6 +1,13 @@
 import styled from '../../styled-components'
 
+export const Edit = styled.a`
+  position: absolute;
+  top: 85px;
+  right: ${({ theme }) => theme.padding.large};
+`
+
 export const Content = styled.div`
+  position: relative;
   width: 700px;
   min-height: 100vh;
   margin: 0 auto;

packages/overmind-website/src/components/Doc/index.tsx

@@ -1,6 +1,17 @@
 import * as React from 'react'
-import { Content } from './elements'
+import { Content, Edit } from './elements'
 
-const Doc: React.SFC = ({ children }) => <Content>{children}</Content>
+type Props = {
+  url: string
+}
+
+const Doc: React.SFC<Props> = ({ url, children }) => (
+  <Content>
+    <Edit href={url} target="_blank">
+      edit on github
+    </Edit>
+    {children}
+  </Content>
+)
 
 export default Doc

packages/overmind-website/src/components/Guide/index.tsx

@@ -2,7 +2,7 @@ import * as React from 'react'
 import GuideToc from '../GuideToc'
 import Doc from '../Doc'
 import { Wrapper } from './elements'
-import { compile } from '../../utils'
+import { compile, getGithubBaseUrl } from '../../utils'
 
 type State = {
   content: string
@@ -24,6 +24,9 @@ class Guide extends React.Component<Props, State> {
       this.setState({ content: module })
     )
   }
+  getGithubUrl() {
+    return getGithubBaseUrl() + this.props.currentPath + '.md'
+  }
   render() {
     if (!this.state.content) {
       return null
@@ -33,7 +36,7 @@ class Guide extends React.Component<Props, State> {
 
     return (
       <Wrapper>
-        <Doc>{compiled.tree}</Doc>
+        <Doc url={this.getGithubUrl()}>{compiled.tree}</Doc>
         <GuideToc toc={compiled.toc} />
       </Wrapper>
     )

packages/overmind-website/src/utils.tsx

@@ -10,6 +10,14 @@ export const viewport = {
   },
 }
 
+export const getBranch = () =>
+  location.host.split('.')[0] === 'next' || location.hostname === 'localhost'
+    ? 'next'
+    : 'master'
+
+export const getGithubBaseUrl = () =>
+  `https://github.com/cerebral/overmind/edit/${getBranch()}/packages/overmind-website/`
+
 export const getTheme = () => localStorage.getItem('theme') || 'react'
 
 export const getTypescript = () => localStorage.getItem('typescript') || false
@@ -115,14 +123,7 @@ class Example extends React.Component<{
       )
     }
 
-    const branch =
-      location.host.split('.')[0] === 'next' ||
-      location.hostname === 'localhost'
-        ? 'next'
-        : 'master'
-    const url = `https://github.com/cerebral/overmind/edit/${branch}/packages/overmind-website/examples/${
-      this.props.name
-    }.ts`
+    const url = `${getGithubBaseUrl()}examples/${this.props.name}.ts`
     return (
       <div>
         {this.state.content.map((example, index) => (