File watching

gatsby-config.js

@@ -12,13 +12,6 @@ module.exports = {
     `gatsby-plugin-sass`,
     `gatsby-plugin-sharp`,
     `gatsby-plugin-sitemap`,
-    {
-      resolve: `gatsby-source-filesystem`,
-      options: {
-        name: `files`,
-        path: `${__dirname}/static`
-      }
-    },    
     {
       resolve: `gatsby-source-git`,
       options: {
@@ -37,6 +30,20 @@ module.exports = {
         patterns: `docs/en/**`
       }
     },    
+    {
+      resolve: `gatsby-source-filesystem`,
+      options: {
+        name: `ss3-files`,
+        path: `${__dirname}/.cache/gatsby-source-git/3`
+      }
+    },    
+    {
+      resolve: `gatsby-source-filesystem`,
+      options: {
+        name: `ss4-files`,
+        path: `${__dirname}/.cache/gatsby-source-git/4`
+      }
+    },
     {
       resolve: 'gatsby-transformer-remark',
       options: {
@@ -45,7 +52,8 @@ module.exports = {
             resolve: `gatsby-remark-prismjs`,
             options: {
               aliases: {
-                ss: 'html',
+                ss: `html`,
+                sh: `bash`,
               }
             }
           },

gatsby-node.js

@@ -1,7 +1,6 @@
 const path = require('path');
 const { createFilePath } = require(`gatsby-source-filesystem`);
 const fileToTitle = require('./src/utils/fileToTitle');
-const crypto = require('crypto');
 
 const createSlug = (filePath, version) => {
   const parts = filePath.split('/');
@@ -13,11 +12,10 @@ const createSlug = (filePath, version) => {
   .toLowerCase()
 };
 
-exports.onCreateNode = async ({ node, getNode, actions }) => {  
+exports.onCreateNode = async ({ node, getNode, actions, createContentDigest }) => {  
   if (node.internal.type !== 'MarkdownRemark') {
     return;
   }
-
   const { createNode } = actions;
   const fileNode = getNode(node.parent);
   const version = fileNode.sourceInstanceName;
@@ -50,10 +48,10 @@ exports.onCreateNode = async ({ node, getNode, actions }) => {
 
   const docInternal = {
       type: `SilverstripeDocument`,
-      contentDigest: crypto
-        .createHash(`md5`)
-        .update(JSON.stringify(docData))
-        .digest(`hex`),
+      contentDigest: createContentDigest({
+        ...docData,
+        rawMarkdownBody: node.rawMarkdownBody,
+      }),
   };
   const nodeData = {    
     ...node,
@@ -62,7 +60,6 @@ exports.onCreateNode = async ({ node, getNode, actions }) => {
     parent: node.id,
     internal: docInternal,
   }  
-  
   createNode(nodeData);
 };
 
@@ -75,20 +72,8 @@ exports.createPages = async ({ actions, graphql }) => {
   {
     allSilverstripeDocument {
       nodes {
+        id
         slug
-        parent {
-          ... on MarkdownRemark {
-            parent {
-              ... on File {
-                gitRemote {
-                  sourceInstanceName
-                  ref
-                  webLink
-                }
-              }
-            }
-          }
-        }
       }
     }
   }`); 
@@ -103,6 +88,7 @@ exports.createPages = async ({ actions, graphql }) => {
                 path: node.slug,
                 component: docTemplate,
                 context: {
+                    id: node.id,
                     slug: node.slug,
                 }
             });

src/templates/docs-template.tsx

@@ -9,7 +9,7 @@ const Template: StatelessComponent<SingleFileQuery> = (result): ReactElement =>
     const currentNode = result.data.silverstripeDocument;    
     const { html } = currentNode.parent;
     const { title, slug } = currentNode;
-    const { relativePath, gitRemote: { ref, webLink, sourceInstanceName } } = currentNode.parent.parent;
+    const { relativePath, gitRemote: { ref, webLink } } = currentNode.parent.parent;
     const editLink = `${webLink}/edit/${ref}/${relativePath}`;
     useEffect(() => {
       setCurrentNode(slug);

src/theme/assets/scss/ss-docs.scss

@@ -205,3 +205,14 @@ h1, h2, h3 {
     }
 }
 
+:not(pre) > code[class*="language-"] {
+    background: #f5f6f8;
+    color: #5d6778;
+    text-shadow: none;
+}                
+.algolia-autocomplete {
+    width: 100%;
+}
+.gatsby-highlight {
+    margin: 2rem 0;
+}