feat(website): add edit docs button
This commit is contained in:
1
website/src/assets/icons/pen.svg
Normal file
1
website/src/assets/icons/pen.svg
Normal 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 |
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user