init

.dockerignore

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

.editorconfig

@@ -0,0 +1,8 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true

.eslintrc.json

@@ -0,0 +1,15 @@
+{
+  "env": {
+    "browser": true
+  },
+  "globals": {
+    "graphql": false
+  },
+  "parserOptions": {
+    "ecmaVersion": 10,
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  }
+}

.gitignore

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

Dockerfile

@@ -0,0 +1,22 @@
+FROM node:buster
+
+# Create app directory
+WORKDIR /app
+
+# Install app dependencies
+# RUN npm -g install serve
+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 ["serve", "-l", "tcp://0.0.0.0:8080", "public"]
+CMD ["gatsby", "serve", "--verbose", "--prefix-paths", "-p", "8080", "--host", "0.0.0.0"]

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 Hasura
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,144 @@
+# gatsby-gitbook-starter
+
+Kick off your project with this starter to create a powerful/flexible docs/tutorial web apps.
+
+![gatsby-gitbook-starter](https://graphql-engine-cdn.hasura.io/learn-hasura/gatsby-gitbook-starter/assets/documentation_app_blog.png)
+
+## Motivation
+
+We wanted to create a [GraphQL tutorial](https://learn.hasura.io) series. The content would be written by developers for various languages/frameworks and what better than writing it in Markdown! And since this is a tutorial series we also needed rich embeds, syntax highlighting and more customisations.
+
+We also wanted to serve these tutorials in sub paths of [learn.hasura.io](https://learn.hasura.io). To serve all these requirements, we decided to use Gatsby + MDX (Markdown + JSX) to extend markdown and used a neat consistent theme like the one at [GitBook](https://www.gitbook.com) and deployed as docker containers.
+
+## 🔥 Features
+- Write using Markdown / [MDX](https://github.com/mdx-js/mdx)
+- GitBook style theme
+- Syntax Highlighting using Prism [`Bonus`: Code diff highlighting]
+- Search Integration with Algolia
+- Progressive Web App, Works Offline
+- Google Analytics Integration
+- Automatically generated sidebar navigation, table of contents, previous/next
+- Edit on Github
+- Fully customisable
+- Rich embeds and live code editor using MDX
+- Easy deployment: Deploy on Netlify / Now.sh / Docker
+
+## 🔗 Live Demo
+
+Here's a [live demo](https://learn.hasura.io/graphql/react)
+
+## 🚀 Quickstart
+
+Get started by running the following commands:
+
+```
+$ git clone [email protected]:hasura/gatsby-gitbook-starter.git
+$ 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` - The title that appears on the top left
+    - `githubUrl` - The Github URL for the docs website
+    - `helpUrl` - Help URL for pointing to resources
+    - `tweetText` - Tweet text
+    - `links` - Links on the top right
+    - `search` - Enable search and [configure Algolia](https://www.gatsbyjs.org/docs/adding-search-with-algolia/)
+
+- `sidebar` config for navigation links configuration
+    - `forcedNavOrder` for left sidebar navigation order. It should be in the format "/<filename>"
+    - `frontLine` - whether to show a front line at the beginning of a nested menu.(Collapsing capability would be turned of if this option is set to true)
+    - `links` - Links on the bottom left of the sidebar
+    - `ignoreIndex` - Set this to true if the index.md file shouldn't appear on the left sidebar navigation. Typically this can be used for landing pages.
+
+- `siteMetadata` config for website related configuration
+    - `title` - Title of the website
+    - `description` - Description of the website
+    - `ogImage` - Social Media share og:image tag
+    - `docsLocation` - The Github URL for Edit on Github
+
+- 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. The sub navigation is alphabetically ordered.
+
+### Algolia Configuration
+
+To setup Algolia, go to `config.js` and update the `search` object to look like the one below:
+
+```...,
+	"search": {
+		"enabled": true,
+		"indexName": "MY_INDEX_NAME",
+		"algoliaAppId": process.env.GATSBY_ALGOLIA_APP_ID,
+		"algoliaSearchKey": process.env.GATSBY_ALGOLIA_SEARCH_KEY,
+		"algoliaAdminKey": process.env.ALGOLIA_ADMIN_KEY
+	},
+```
+
+Values for Algolia App ID, Search Key, and Admin Key can be obtained from Algolia Dashboard with the right set of permissions. Replace `MY_INDEX_NAME` with the Algolia Index name of your choice. To build the Algolia index, you need to run `npm run build` which will do a gatsby build along with content indexing in Algolia.
+
+### Progressive Web App, Offline
+
+To enable PWA, go to `config.js` and update the `pwa` object to look like the one below:
+
+```
+   "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`,
+                },
+            ],
+        },
+    }
+```
+
+## Live Code Editor
+
+To render react components for live editing, add the `react-live=true` to the code section. For example:
+
+```javascript react-live=true
+<button>Edit my text</button>
+```
+
+In the above code, just add `javascript react-live=true` after the triple quote ``` to start rendering react components that can be edited by users.
+
+## 🤖 SEO friendly
+
+This is a static site and comes with all the SEO benefits. Configure meta tags like title and description for each markdown file using MDX Frontmatter
+
+```markdown
+---
+title: "Title of the page"
+metaTitle: "Meta Title Tag for this page"
+metaDescription: "Meta Description Tag for this page"
+---
+```
+
+Canonical URLs are generated automatically.
+
+## ☁️ Deploy
+
+[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/hasura/gatsby-gitbook-starter)
+

config.js

@@ -0,0 +1,67 @@
+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`,
+				},
+			],
+		},
+	}
+};
+
+module.exports = config;

content/codeblock.md

@@ -0,0 +1,26 @@
+---
+title: "Syntax Highlighting"
+metaTitle: "Syntax Highlighting is the meta title tag for this page"
+metaDescription: "This is the meta description for this page"
+---
+
+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];
+```
+
+## Live Editing example
+
+```javascript react-live=true
+<button className={'btn btn-default'}>Change my text</button>
+```

content/codeblock/1-index.md

@@ -0,0 +1,26 @@
+---
+title: "Sub Page"
+metaTitle: "Syntax Highlighting is the meta title tag for this page"
+metaDescription: "This is the meta description for this page"
+---
+
+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];
+```
+
+## Live Editing example
+
+```javascript react-live=true
+<button className={'btn btn-default'}>Change my text</button>
+```

content/index.mdx

@@ -0,0 +1,37 @@
+---
+title: "Landing Page"
+---
+
+Some introduction text. Lists out all the headings from h1 to h6. Easy to customise. Some more text. Additional text.
+
+$a_i$
+
+$$\sqrt{2}$$
+
+# 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
+
+<script src='https://cdnjs.loli.net/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML' type='text/javascript'></script>
+