Render a link to source repo

gatsby-node.js

@@ -80,12 +80,20 @@ exports.createPages = async ({ graphql, actions }) => {
               pathname
               sourceInstanceName
             }
+            parent {
+              ... on File {
+                gitRemote {
+                  webLink
+                }
+              }
+            }
           }
         }
       }
     }
   `);
   result.data.allMarkdownRemark.edges.forEach(({ node }) => {
+    const sourceLink = node.parent.gitRemote ? node.parent.gitRemote.webLink : null;
     createPage({
       path: node.fields.pathname,
       component: path.resolve(`./src/templates/docs-page.js`),
@@ -94,6 +102,7 @@ exports.createPages = async ({ graphql, actions }) => {
         // in page queries as GraphQL variables.
         pathname: node.fields.pathname,
         sourceInstanceName: node.fields.sourceInstanceName,
+        sourceLink,
       },
     });
   });

src/components/table-of-contents.js

@@ -36,11 +36,16 @@ const useStyles = makeStyles(theme => ({
 
 export default function TableOfContents(props) {
   const classes = useStyles();
-  const { __html, headings, title = 'Table of contents' } = props;
+  const { __html, headings, source, title = 'Table of contents' } = props;
 
   const [tocRef, setActiveHeading] = useActiveHeading(headings, classes.active);
 
   return (<>
+    <h3>
+        <a href={source.sourceLink} style={{ textDecoration: 'none' }}>
+          {source.sourceInstanceName} source
+        </a>
+    </h3>
     <Typography component='label' className={classes.title}>{title}</Typography>
     <Box
       ref={tocRef}

src/templates/docs-page.js

@@ -31,13 +31,18 @@ const useStyles = makeStyles({
   },
 });
 
-export default function DocsPage({ data }) {
+export default function DocsPage({ data, pageContext }) {
   const classes = useStyles();
 
   const { markdownRemark: post } = data;
+  const { sourceInstanceName, sourceLink } = pageContext;
   const [tocHtml, setTocHtml] = useState(post.tableOfContents);
   const title = post.headings.find(({ depth }) => depth === 1)?.value;
   const toc = {
+    source: {
+      sourceInstanceName,
+      sourceLink,
+    },
     title,
     __html: tocHtml,
     headings: post.headings