feat(website): add edit docs button
This commit is contained in:
@@ -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 React from 'react';
|
||||||
import { graphql } from 'gatsby';
|
import { graphql } from 'gatsby';
|
||||||
|
import { Box } from 'reflexbox';
|
||||||
|
import styled from '@emotion/styled';
|
||||||
|
|
||||||
import DocPage from 'components/Page/Doc';
|
import DocPage from 'components/Page/Doc';
|
||||||
import Mdx from './mdx-renderer/DocMdx';
|
import Mdx from './mdx-renderer/DocMdx';
|
||||||
import { H1 } from 'components/Typo';
|
import { H1 } from 'components/Typo';
|
||||||
|
import Icon from 'components/Icon';
|
||||||
|
|
||||||
const docsMenu = [
|
const docsMenu = [
|
||||||
{ title: 'Introduction' },
|
{ 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) {
|
function extendMenu(items, menuData) {
|
||||||
items.forEach((menuItem) => {
|
items.forEach((menuItem) => {
|
||||||
if (menuItem.group) {
|
if (menuItem.group) {
|
||||||
@@ -68,10 +97,13 @@ const DocPageTemplate = ({ data, pageContext }) => {
|
|||||||
|
|
||||||
extendMenu(docsMenu, pageContext.menu);
|
extendMenu(docsMenu, pageContext.menu);
|
||||||
|
|
||||||
|
const slug = content.fileAbsolutePath.split('markdown')[1];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<DocPage metaTags={metaTags} menu={docsMenu}>
|
<DocPage metaTags={metaTags} menu={docsMenu}>
|
||||||
<H1>{title}</H1>
|
<H1>{title}</H1>
|
||||||
<Mdx content={content.body} />
|
<Mdx content={content.body} />
|
||||||
|
<EditButton slug={slug} />
|
||||||
</DocPage>
|
</DocPage>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
@@ -82,6 +114,7 @@ export const pageQuery = graphql`
|
|||||||
query DocPageBySlug($slug: String!) {
|
query DocPageBySlug($slug: String!) {
|
||||||
content: mdx(fields: { slug: { eq: $slug } }) {
|
content: mdx(fields: { slug: { eq: $slug } }) {
|
||||||
id
|
id
|
||||||
|
fileAbsolutePath
|
||||||
excerpt
|
excerpt
|
||||||
body
|
body
|
||||||
fields {
|
fields {
|
||||||
|
|||||||
Reference in New Issue
Block a user