Update

.eslintrc.json

@@ -1,15 +1,48 @@
 {
-  "env": {
-    "browser": true
+  "extends": [
+    "eslint:recommended",
+    "plugin:import/errors",
+    "plugin:react/recommended",
+    "plugin:jsx-a11y/recommended",
+    "prettier",
+    "prettier/react"
+  ],
+  "plugins": ["react", "import", "jsx-a11y"],
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
   },
-  "globals": {
-    "graphql": false
+  "rules": {
+    "react/prop-types": 0,
+    "react/react-in-jsx-scope": "off",
+    "lines-between-class-members": ["error", "always"],
+    "padding-line-between-statements": [
+      "error",
+      { "blankLine": "always", "prev": ["const", "let", "var"], "next": "*" },
+      {
+        "blankLine": "always",
+        "prev": ["const", "let", "var"],
+        "next": ["const", "let", "var"]
+      },
+      { "blankLine": "always", "prev": "directive", "next": "*" },
+      { "blankLine": "any", "prev": "directive", "next": "directive" }
+    ]
   },
+  "parser": "babel-eslint",
   "parserOptions": {
     "ecmaVersion": 10,
     "sourceType": "module",
     "ecmaFeatures": {
       "jsx": true
     }
+  },
+  "env": {
+    "es6": true,
+    "browser": true,
+    "node": true
+  },
+  "globals": {
+    "graphql": false
   }
 }

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "printWidth": 100,
+  "jsxBracketSameLine": false,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "es5"
+}

README.md

@@ -18,6 +18,7 @@ We also wanted to serve these tutorials in sub paths of [learn.hasura.io](https:
 - Progressive Web App, Works Offline
 - Google Analytics Integration
 - Automatically generated sidebar navigation, table of contents, previous/next
+- Dark Mode toggle
 - Edit on Github
 - Fully customisable
 - Rich embeds and live code editor using MDX

config.js

@@ -1,67 +1,81 @@
 const config = {
-	"gatsby": {
-		"pathPrefix": "/",
-		"siteUrl": "https://learn.hasura.io",
-		"gaTrackingId": null
-	},
-	"header": {
-		"logo": "https://graphql-engine-cdn.hasura.io/learn-hasura/assets/homepage/favicon.png",
-		"logoLink": "https://learn.hasura.io",
-		"title": "Gatsby Gitbook Boilerplate",
-		"githubUrl": "https://github.com/hasura/gatsby-gitbook-boilerplate",
-		"helpUrl": "",
-		"tweetText": "",
-		"links": [
-			{ "text": "", "link": ""}
-		],
-		"search": {
-			"enabled": false,
-			"indexName": "",
-			"algoliaAppId": process.env.GATSBY_ALGOLIA_APP_ID,
-			"algoliaSearchKey": process.env.GATSBY_ALGOLIA_SEARCH_KEY,
-			"algoliaAdminKey": process.env.ALGOLIA_ADMIN_KEY
-		}
-	},
-	"sidebar": {
-		"forcedNavOrder": [
-			"/introduction",
-    		"/codeblock"
-		],
-    	"collapsedNav": [
-      		"/codeblock"
-    	],
-		"links": [
-			{ "text": "Hasura", "link": "https://hasura.io"},
-		],
-		"frontline": false,
-		"ignoreIndex": true,
-	},
-	"siteMetadata": {
-		"title": "Gatsby Gitbook Boilerplate | Hasura",
-		"description": "Documentation built with mdx. Powering learn.hasura.io ",
-		"ogImage": null,
-		"docsLocation": "https://github.com/hasura/gatsby-gitbook-boilerplate/tree/master/content",
-		"favicon": "https://graphql-engine-cdn.hasura.io/img/hasura_icon_black.svg"
-	},
-	"pwa": {
-		"enabled": false, // disabling this will also remove the existing service worker.
-		"manifest": {
-			"name": "Gatsby Gitbook Starter",
-			"short_name": "GitbookStarter",
-			"start_url": "/",
-			"background_color": "#6b37bf",
-			"theme_color": "#6b37bf",
-			"display": "standalone",
-			"crossOrigin": "use-credentials",
-			icons: [
-				{
-					src: "src/pwa-512.png",
-					sizes: `512x512`,
-					type: `image/png`,
-				},
-			],
-		},
-	}
+  gatsby: {
+    pathPrefix: '/',
+    siteUrl: 'https://hasura.io',
+    gaTrackingId: null,
+    trailingSlash: false,
+  },
+  header: {
+    logo: 'https://graphql-engine-cdn.hasura.io/learn-hasura/assets/homepage/brand.svg',
+    logoLink: 'https://hasura.io/learn/',
+    title:
+      "<a href='https://hasura.io/learn/'><img class='img-responsive' src='https://graphql-engine-cdn.hasura.io/learn-hasura/assets/homepage/learn-logo.svg' alt='Learn logo' /></a>",
+    githubUrl: 'https://github.com/hasura/gatsby-gitbook-boilerplate',
+    helpUrl: '',
+    tweetText: '',
+    social: `<li>
+		    <a href="https://twitter.com/hasurahq" target="_blank" rel="noopener">
+		      <div class="twitterBtn">
+		        <img src='https://graphql-engine-cdn.hasura.io/learn-hasura/assets/homepage/twitter-brands-block.svg' alt={'Discord'}/>
+		      </div>
+		    </a>
+		  </li>
+			<li>
+		    <a href="https://discordapp.com/invite/hasura" target="_blank" rel="noopener">
+		      <div class="discordBtn">
+		        <img src='https://graphql-engine-cdn.hasura.io/learn-hasura/assets/homepage/discord-brands-block.svg' alt={'Discord'}/>
+		      </div>
+		    </a>
+		  </li>`,
+    links: [{ text: '', link: '' }],
+    search: {
+      enabled: false,
+      indexName: '',
+      algoliaAppId: process.env.GATSBY_ALGOLIA_APP_ID,
+      algoliaSearchKey: process.env.GATSBY_ALGOLIA_SEARCH_KEY,
+      algoliaAdminKey: process.env.ALGOLIA_ADMIN_KEY,
+    },
+  },
+  sidebar: {
+    forcedNavOrder: [
+      '/introduction', // add trailing slash if enabled above
+      '/codeblock',
+    ],
+    collapsedNav: [
+      '/codeblock', // add trailing slash if enabled above
+    ],
+    links: [{ text: 'Hasura', link: 'https://hasura.io' }],
+    frontline: false,
+    ignoreIndex: true,
+    title:
+      "<a href='https://hasura.io/learn/'>graphql </a><div class='greenCircle'></div><a href='https://hasura.io/learn/graphql/react/introduction/'>react</a>",
+  },
+  siteMetadata: {
+    title: 'Gatsby Gitbook Boilerplate | Hasura',
+    description: 'Documentation built with mdx. Powering hasura.io/learn ',
+    ogImage: null,
+    docsLocation: 'https://github.com/hasura/gatsby-gitbook-boilerplate/tree/master/content',
+    favicon: 'https://graphql-engine-cdn.hasura.io/img/hasura_icon_black.svg',
+  },
+  pwa: {
+    enabled: false, // disabling this will also remove the existing service worker.
+    manifest: {
+      name: 'Gatsby Gitbook Starter',
+      short_name: 'GitbookStarter',
+      start_url: '/',
+      background_color: '#6b37bf',
+      theme_color: '#6b37bf',
+      display: 'standalone',
+      crossOrigin: 'use-credentials',
+      icons: [
+        {
+          src: 'src/pwa-512.png',
+          sizes: `512x512`,
+          type: `image/png`,
+        },
+      ],
+    },
+  },
 };
 
 module.exports = config;

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,9 +1,14 @@
-const componentWithMDXScope = require("gatsby-plugin-mdx/component-with-mdx-scope");
-const path = require("path");
-const startCase = require("lodash.startcase");
+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;
+
   return new Promise((resolve, reject) => {
     resolve(
       graphql(
@@ -33,11 +38,11 @@ exports.createPages = ({ graphql, actions }) => {
         // Create blog posts pages.
         result.data.allMdx.edges.forEach(({ node }) => {
           createPage({
-            path: node.fields.slug ? node.fields.slug : "/",
-            component: path.resolve("./src/templates/docs.js"),
+            path: node.fields.slug ? node.fields.slug : '/',
+            component: path.resolve('./src/templates/docs.js'),
             context: {
-              id: node.fields.id
-            }
+              id: node.fields.id,
+            },
           });
         });
       })
@@ -48,18 +53,18 @@ exports.createPages = ({ graphql, actions }) => {
 exports.onCreateWebpackConfig = ({ actions }) => {
   actions.setWebpackConfig({
     resolve: {
-      modules: [path.resolve(__dirname, "src"), "node_modules"],
-      alias: { 
-        $components: path.resolve(__dirname, "src/components"),
-        buble: '@philpl/buble' // to reduce bundle size
-      }
-    }
+      modules: [path.resolve(__dirname, 'src'), 'node_modules'],
+      alias: {
+        $components: path.resolve(__dirname, 'src/components'),
+        buble: '@philpl/buble', // to reduce bundle size
+      },
+    },
   });
 };
 
 exports.onCreateBabelConfig = ({ actions }) => {
   actions.setBabelPlugin({
-    name: "@babel/plugin-proposal-export-default-from"
+    name: '@babel/plugin-proposal-export-default-from',
   });
 };
 
@@ -68,28 +73,37 @@ exports.onCreateNode = ({ node, getNode, actions }) => {
 
   if (node.internal.type === `Mdx`) {
     const parent = getNode(node.parent);
-    let value = parent.relativePath.replace(parent.ext, "");
 
-    if (value === "index") {
-      value = "";
+    let value = parent.relativePath.replace(parent.ext, '');
+
+    if (value === 'index') {
+      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",
+      name: 'id',
       node,
-      value: node.id
+      value: node.id,
     });
 
     createNodeField({
-      name: "title",
+      name: 'title',
       node,
-      value: node.frontmatter.title || startCase(parent.name)
+      value: node.frontmatter.title || startCase(parent.name),
     });
   }
 };