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 {