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 @@
+
\ 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 }) => (
+
+
+
+ Edit this page
+
+
+);
+
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 (
{title}
+
);
};
@@ -82,6 +114,7 @@ export const pageQuery = graphql`
query DocPageBySlug($slug: String!) {
content: mdx(fields: { slug: { eq: $slug } }) {
id
+ fileAbsolutePath
excerpt
body
fields {