add config for trailing slash (hasura#54)

Author: praveenweb

config.js

@@ -2,7 +2,8 @@ const config = {
 	"gatsby": {
 		"pathPrefix": "/",
 		"siteUrl": "https://learn.hasura.io",
-		"gaTrackingId": null
+		"gaTrackingId": null,
+		"trailingSlash": false
 	},
 	"header": {
 		"logo": "https://graphql-engine-cdn.hasura.io/learn-hasura/assets/homepage/favicon.png",
@@ -24,11 +25,11 @@ const config = {
 	},
 	"sidebar": {
 		"forcedNavOrder": [
-			"/introduction",
+			"/introduction", // add trailing slash if enabled above
     		"/codeblock"
 		],
     	"collapsedNav": [
-      		"/codeblock"
+      		"/codeblock" // add trailing slash if enabled above
     	],
 		"links": [
 			{ "text": "Hasura", "link": "https://hasura.io"},

gatsby-config.js

@@ -11,7 +11,6 @@ const plugins = [
     }
   },
   'gatsby-plugin-emotion',
-  'gatsby-plugin-remove-trailing-slashes',
   'gatsby-plugin-react-helmet',
   {
     resolve: "gatsby-source-filesystem",
@@ -77,6 +76,12 @@ if (config.pwa && config.pwa.enabled && config.pwa.manifest) {
 } else {
   plugins.push('gatsby-plugin-remove-serviceworker');
 }
+
+// check and remove trailing slash
+if (config.gatsby && !config.gatsby.trailingSlash) {
+  plugins.push('gatsby-plugin-remove-trailing-slashes');
+}
+
 module.exports = {
   pathPrefix: config.gatsby.pathPrefix,
   siteMetadata: {

gatsby-node.js

@@ -1,6 +1,7 @@
 const componentWithMDXScope = require("gatsby-plugin-mdx/component-with-mdx-scope");
 const path = require("path");
 const startCase = require("lodash.startcase");
+const config = require("./config");
 
 exports.createPages = ({ graphql, actions }) => {
   const { createPage } = actions;
@@ -74,11 +75,19 @@ exports.onCreateNode = ({ node, getNode, actions }) => {
       value = "";
     }
 
-    createNodeField({
-      name: `slug`,
-      node,
-      value: `/${value}`
-    });
+    if(config.gatsby && config.gatsby.trailingSlash) {
+      createNodeField({
+        name: `slug`,
+        node,
+        value: value === "" ? `/` : `/${value}/`
+      });
+    } else {
+      createNodeField({
+        name: `slug`,
+        node,
+        value: `/${value}`
+      });
+    }
 
     createNodeField({
       name: "id",

src/components/rightSidebar.js

@@ -5,8 +5,6 @@ import Link from "./link";
 import './styles.css';
 import config from '../../config';
 
-const forcedNavOrder = config.sidebar.forcedNavOrder;
-
 const Sidebar = styled('aside')`
   width: 100%;
   background-color: #fff;

src/components/sidebar/index.js

@@ -6,8 +6,6 @@ import {ExternalLink} from "react-feather";
 import '../styles.css';
 import config from '../../../config';
 
-const forcedNavOrder = config.sidebar.forcedNavOrder;
-
 // eslint-disable-next-line no-unused-vars
 const ListItem = styled(({ className, active, level, ...props }) => {
     return (

src/components/sidebar/tree.js

@@ -7,8 +7,9 @@ const calculateTreeData = edges => {
   const tree = originalData.reduce((accu, {node: {fields: {slug, title}}}) => {
     const parts = slug.split('/');
     let {items: prevItems} = accu;
-    for (const part of parts.slice(1, -1)) {
-      let tmp = prevItems.find(({label}) => label == part);
+    const slicedParts = config.gatsby && config.gatsby.trailingSlash ? parts.slice(1, -2) : parts.slice(1, -1);
+    for (const part of slicedParts) {
+      let tmp = prevItems && prevItems.find(({label}) => label == part);
       if (tmp) {
         if (!tmp.items) {
           tmp.items = [];
@@ -19,13 +20,14 @@ const calculateTreeData = edges => {
       }
       prevItems = tmp.items;
     }
-    const existingItem = prevItems.find(({label}) => label === parts[parts.length - 1]);
+    const slicedLength = config.gatsby && config.gatsby.trailingSlash ? parts.length - 2 : parts.length - 1;
+    const existingItem = prevItems.find(({label}) => label === parts[slicedLength]);
     if (existingItem) {
       existingItem.url = slug;
       existingItem.title = title;
     } else {
       prevItems.push({
-        label: parts[parts.length - 1],
+        label: parts[slicedLength],
         url: slug,
         items: [],
         title
@@ -35,12 +37,15 @@ const calculateTreeData = edges => {
   }, {items: []});
   const {sidebar: {forcedNavOrder = []}} = config;
   const tmp = [...forcedNavOrder];
+  if(config.gatsby && config.gatsby.trailingSlash) {
+  }
   tmp.reverse();
   return tmp.reduce((accu, slug) => {
     const parts = slug.split('/');
     let {items: prevItems} = accu;
-    for (const part of parts.slice(1, -1)) {
-      let tmp = prevItems.find(({label}) => label == part);
+    const slicedParts = config.gatsby && config.gatsby.trailingSlash ? parts.slice(1, -2) : parts.slice(1, -1);
+    for (const part of slicedParts) {
+      let tmp = prevItems.find((item) => item && item.label == part);
       if (tmp) {
         if (!tmp.items) {
           tmp.items = [];
@@ -49,7 +54,9 @@ const calculateTreeData = edges => {
         tmp = {label: part, items: []};
         prevItems.push(tmp)
       }
-      prevItems = tmp.items;
+      if(tmp && tmp.items) {
+        prevItems = tmp.items;
+      }
     }
     // sort items alphabetically.
     prevItems.map((item) => {
@@ -62,15 +69,17 @@ const calculateTreeData = edges => {
           return 0;
         });
     })
-    const index = prevItems.findIndex(({label}) => label === parts[parts.length - 1]);
-    accu.items.unshift(prevItems.splice(index, 1)[0]);
+    const slicedLength = config.gatsby && config.gatsby.trailingSlash ? (parts.length - 2) : (parts.length - 1);
+    const index = prevItems.findIndex(({label}) => label === parts[slicedLength]);
+    if(prevItems.length) {
+      accu.items.unshift(prevItems.splice(index, 1)[0]);
+    }
     return accu;
   }, tree);
 }
 
-
 const Tree = ({edges}) => {
-  const [treeData] = useState(() => {
+  let [treeData] = useState(() => {
     return calculateTreeData(edges);
   });
   const defaultCollapsed = {};

src/components/sidebar/treeNode.js

@@ -39,9 +39,9 @@ const TreeNode = ({className = '', setCollapsed, collapsed, url, title, items, .
 
       {!isCollapsed && hasChildren ? (
         <ul>
-          {items.map((item) => (
+          {items.map((item, index) => (
             <TreeNode
-              key={item.url}
+              key={item.url + index.toString()}
               setCollapsed={setCollapsed}
               collapsed={collapsed}
               {...item}

src/templates/docs.js

@@ -61,7 +61,10 @@ export default class MDXRuntimeTest extends Component {
             return { ...acc, [cur]: [cur] };
           }
 
-          const prefix = cur.split("/")[1];
+          let prefix = cur.split("/")[1];
+          if(config.gatsby && config.gatsby.trailingSlash) {
+            prefix = prefix + '/';
+          }
 
           if (prefix && forcedNavOrder.find(url => url === `/${prefix}`)) {
             return { ...acc, [`/${prefix}`]: [...acc[`/${prefix}`], cur] };