From b5e36d0aade1ee6142168352a71f890ad9742a9d Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Mon, 12 Oct 2020 11:21:00 +0200
Subject: [PATCH] feat(website): add edit docs button

---
 website/src/assets/icons/pen.svg  |  1 +
 website/src/templates/doc-page.js | 33 +++++++++++++++++++++++++++++++
 2 files changed, 34 insertions(+)
 create mode 100644 website/src/assets/icons/pen.svg

diff --git a/website/src/assets/icons/pen.svg b/website/src/assets/icons/pen.svg
new file mode 100644
index 00000000..b473a184
--- /dev/null
+++ b/website/src/assets/icons/pen.svg
@@ -0,0 +1 @@
+<svg fill="currentColor" height="40px" width="40px" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right: 0.3em; vertical-align: sub;"><g><path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"></path></g></svg>
\ No newline at end of file
diff --git a/website/src/templates/doc-page.js b/website/src/templates/doc-page.js
index 4c36da53..cafb8a3a 100644
--- a/website/src/templates/doc-page.js
+++ b/website/src/templates/doc-page.js
@@ -1,9 +1,12 @@
 import React from 'react';
 import { graphql } from 'gatsby';
+import { Box } from 'reflexbox';
+import styled from '@emotion/styled';
 
 import DocPage from 'components/Page/Doc';
 import Mdx from './mdx-renderer/DocMdx';
 import { H1 } from 'components/Typo';
+import Icon from 'components/Icon';
 
 const docsMenu = [
   { title: 'Introduction' },
@@ -44,6 +47,32 @@ const docsMenu = [
   },
 ];
 
+const EditLink = styled.a`
+  display: flex;
+  align-items: center;
+
+  &:hover {
+    opacity: 0.6;
+  }
+
+  .icon {
+    margin-right: 5px;
+  }
+`;
+
+const EditButton = ({ slug }) => (
+  <Box my={[4, 4, 5]}>
+    <EditLink
+      href={`https://github.com/wbkd/react-flow/edit/main/website/src/markdown${slug}`}
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      <Icon width="22px" name="pen" colorizeStroke strokeColor="red" />
+      Edit this page
+    </EditLink>
+  </Box>
+);
+
 function extendMenu(items, menuData) {
   items.forEach((menuItem) => {
     if (menuItem.group) {
@@ -68,10 +97,13 @@ const DocPageTemplate = ({ data, pageContext }) => {
 
   extendMenu(docsMenu, pageContext.menu);
 
+  const slug = content.fileAbsolutePath.split('markdown')[1];
+
   return (
     <DocPage metaTags={metaTags} menu={docsMenu}>
       <H1>{title}</H1>
       <Mdx content={content.body} />
+      <EditButton slug={slug} />
     </DocPage>
   );
 };
@@ -82,6 +114,7 @@ export const pageQuery = graphql`
   query DocPageBySlug($slug: String!) {
     content: mdx(fields: { slug: { eq: $slug } }) {
       id
+      fileAbsolutePath
       excerpt
       body
       fields {