feat(website): add edit docs button

This commit is contained in:
moklick
2020-10-12 11:21:00 +02:00
parent fe4643f82c
commit b5e36d0aad
2 changed files with 34 additions and 0 deletions

View File

@@ -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>

After

Width:  |  Height:  |  Size: 329 B

View File

@@ -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 {