add gatsby boilerplate

.dockerignore

@@ -0,0 +1,3 @@
+node_modules
+public
+.cache

.eslintrc.json

@@ -0,0 +1,8 @@
+{
+  "env": {
+    "browser": true
+  },
+  "globals": {
+    "graphql": false
+  }
+}

.gitignore

@@ -0,0 +1,7 @@
+public
+.cache
+node_modules
+*DS_Store
+*.env
+
+.idea/

Dockerfile

@@ -0,0 +1,20 @@
+FROM node:carbon
+
+# Create app directory
+WORKDIR /app
+
+# Install app dependencies
+RUN npm -g install gatsby-cli
+
+COPY package*.json ./
+
+RUN npm ci
+
+# Bundle app source
+COPY . .
+
+# Build static files
+RUN npm run build
+
+# serve on port 8080
+CMD ["gatsby", "serve", "--verbose", "--prefix-paths", "-p", "8080", "--host", "0.0.0.0"]

README.md

@@ -0,0 +1,71 @@
+# gatsby-gitbook-boilerplate
+
+Kick off your project with this boilerplate to create a powerful/flexible docs/tutorial web apps.
+
+## Features
+- Write using Markdown / [MDX](https://github.com/mdx-js/mdx)
+- GitBook style theme
+- Syntax Highlighting using Prism [`Bonus`: Code diff highlighting]
+- Google Analytics Integration
+- Automatically generated sidebar navigation, table of contents, previous/next
+- Edit on Github
+- Fully customisable
+- Easy deployment: Deploy on Netlify / Now.sh / Docker
+
+## Live Demo
+
+Link to live demo
+
+## Setup
+
+Get started by running the following commands:
+
+```
+$ npm install
+$ npm start
+```
+
+Visit `http://localhost:8000/` to view the app.
+
+## Configure
+
+Write markdown files in `content` folder.
+
+Open `config.js` for templating variables. Broadly configuration is available for `gatsby`, `header`, `sidebar` and `siteMetadata`.
+
+- `gatsby` config for global configuration like 
+    - `pathPrefix` - Gatsby Path Prefix
+    - `siteUrl` - Gatsby Site URL
+    - `gaTrackingId` - Google Analytics Tracking ID
+
+- `header` config for site header configuration like
+    - `title`
+    - `githubUrl`
+    - `helpUrl`
+    - `tweetText`
+    - `links`
+
+- `sidebar` config for navigation links configuration
+    - `forcedNavOrder` for left sidebar navigation order. It should be in the format "/<filename.md>"
+    - `links`
+
+- `siteMetadata` config for website related configuration
+    - `title`
+    - `description`
+    - `ogImage`
+    - `docsLocation`
+
+- For sub nesting in left sidebar, create a folder with the same name as the top level `.md` filename and the sub navigation is auto-generated. Currently it supports only one level of nesting.
+
+#### Develop
+
+```
+$ npm start
+```
+
+#### Build
+
+```
+$ npm run build
+```
+

config.js

@@ -0,0 +1,35 @@
+const config = {
+	"gatsby": {
+		"pathPrefix": "/",
+		"siteUrl": "https://learn.hasura.io",
+		"gaTrackingId": null
+	},
+	"header": {
+		"logo": "https://graphql-engine-cdn.hasura.io/img/hasura_icon_white.svg",
+		"title": "Gatsby Gitbook Boilerplate",
+		"githubUrl": "https://github.com/hasura/gatsby-gitbook-boilerplate",
+		"helpUrl": "",
+		"tweetText": "",
+		"links": [
+			{ "text": "", "link": ""}
+		],
+	},
+	"sidebar": {
+		"forcedNavOrder": [
+			"/introduction",
+    		"/codeblock"
+		],
+		"links": [
+			{ "text": "", "link": ""},
+		]
+	},
+	"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"
+	},
+};
+
+module.exports = config;

content/codeblock.md

@@ -0,0 +1,18 @@
+---
+title: "Syntax Highlighting"
+---
+
+The following is a code block with JavaScript language syntax highlighting.
+
+```javascript
+import React from 'react';
+```
+
+Supports multiple languages.
+
+The following is a code block with diff. Lines with `+` highlighted in green shade indicating an addition. Lines with `-` highlighted in red shade indicating a deletion.
+
+```javascript
+- const data = ['1','2'];
++ const data = [1,2];
+```

content/index.mdx

@@ -0,0 +1,30 @@
+---
+title: "Introduction"
+---
+
+Some introduction text. Lists out all the headings from h1 to h6. Easy to customise. Some more text. Additional text.
+
+# Heading H1
+Heading 1 text
+
+## Heading H2
+Heading 2 text
+
+### Heading H3
+Heading 3 text
+
+#### Heading H4
+Heading 4 text
+
+##### Heading H5
+Heading 5 text
+
+###### Heading H6
+Heading 6 text
+
+## Lists
+- Item 1
+- Item 2
+- Item 3
+- Item 4
+- Item 5

content/introduction.md

@@ -0,0 +1,30 @@
+---
+title: "Introduction"
+---
+
+Some introduction text. Lists out all the headings from h1 to h6. Easy to customise.
+
+# Heading H1
+Heading 1 text
+
+## Heading H2
+Heading 2 text
+
+### Heading H3
+Heading 3 text
+
+#### Heading H4
+Heading 4 text
+
+##### Heading H5
+Heading 5 text
+
+###### Heading H6
+Heading 6 text
+
+## Lists
+- Item 1
+- Item 2
+- Item 3
+- Item 4
+- Item 5

gatsby-config.js

@@ -0,0 +1,68 @@
+require("dotenv").config();
+const config = require("./config");
+module.exports = {
+  pathPrefix: config.gatsby.pathPrefix,
+  siteMetadata: {
+    title: config.siteMetadata.title,
+    description: config.siteMetadata.description,
+    docsLocation: config.siteMetadata.docsLocation,
+    ogImage: config.siteMetadata.ogImage,
+    favicon: config.siteMetadata.favicon,
+    logo: config.header.logo,
+    headerTitle: config.header.title,
+    githubUrl: config.header.githubUrl,
+    helpUrl: config.header.helpUrl,
+    tweetText: config.header.tweetText,
+    headerLinks: config.header.links,
+    siteUrl: config.gatsby.siteUrl,
+  },
+  plugins: [
+    'gatsby-plugin-sitemap',
+    'gatsby-plugin-sharp',
+    {
+      resolve: `gatsby-plugin-layout`,
+      options: {
+          component: require.resolve(`./src/templates/docs.js`)
+      }
+    },
+    {
+      resolve: 'gatsby-mdx',
+      options: {
+        gatsbyRemarkPlugins: [
+          {
+            resolve: "gatsby-remark-images",
+            options: {
+              maxWidth: 1035,
+              sizeByPixelDensity: true
+            }
+          },
+          {
+            resolve: 'gatsby-remark-copy-linked-files'
+          }
+        ],
+        extensions: [".mdx", ".md"]
+      }
+    },
+    'gatsby-plugin-emotion',
+    'gatsby-plugin-remove-trailing-slashes',
+    'gatsby-plugin-react-helmet',
+    {
+      resolve: "gatsby-source-filesystem",
+      options: {
+        name: "docs",
+        path: `${__dirname}/content/`
+      }
+    },
+    {
+      resolve: `gatsby-plugin-gtag`,
+      options: {
+        // your google analytics tracking id
+        trackingId: config.gatsby.gaTrackingId,
+        // Puts tracking script in the head instead of the body
+        head: true,
+        // enable ip anonymization
+        anonymize: false,
+      },
+    },
+  ]
+};

gatsby-node.js

@@ -0,0 +1,95 @@
+const componentWithMDXScope = require("gatsby-mdx/component-with-mdx-scope");
+const path = require("path");
+const startCase = require("lodash.startcase");
+
+exports.createPages = ({ graphql, actions }) => {
+  const { createPage } = actions;
+  return new Promise((resolve, reject) => {
+    resolve(
+      graphql(
+        `
+          {
+            allMdx {
+              edges {
+                node {
+                  fields {
+                    id
+                  }
+                  tableOfContents
+                  fields {
+                    slug
+                  }
+                  code {
+                    scope
+                  }
+                }
+              }
+            }
+          }
+        `
+      ).then(result => {
+        if (result.errors) {
+          console.log(result.errors); // eslint-disable-line no-console
+          reject(result.errors);
+        }
+
+        // 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"),
+            context: {
+              id: node.fields.id
+            }
+          });
+        });
+      })
+    );
+  });
+};
+
+exports.onCreateWebpackConfig = ({ actions }) => {
+  actions.setWebpackConfig({
+    resolve: {
+      modules: [path.resolve(__dirname, "src"), "node_modules"],
+      alias: { $components: path.resolve(__dirname, "src/components") }
+    }
+  });
+};
+
+exports.onCreateBabelConfig = ({ actions }) => {
+  actions.setBabelPlugin({
+    name: "@babel/plugin-proposal-export-default-from"
+  });
+};
+
+exports.onCreateNode = ({ node, getNode, actions }) => {
+  const { createNodeField } = actions;
+
+  if (node.internal.type === `Mdx`) {
+    const parent = getNode(node.parent);
+    let value = parent.relativePath.replace(parent.ext, "");
+
+    if (value === "index") {
+      value = "";
+    }
+
+    createNodeField({
+      name: `slug`,
+      node,
+      value: `/${value}`
+    });
+
+    createNodeField({
+      name: "id",
+      node,
+      value: node.id
+    });
+
+    createNodeField({
+      name: "title",
+      node,
+      value: node.frontmatter.title || startCase(parent.name)
+    });
+  }
+};