Skip to content

Commit a8b2e4e

Browse files
samrichcasamrichca
committed
0 parents  commit a8b2e4e

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

64 files changed

+20984
-0
lines changed

‎.dockerignore

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
node_modules
2+
public
3+
.cache

‎.editorconfig

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
root = true
2+
3+
[*]
4+
indent_style = space
5+
indent_size = 2
6+
charset = utf-8
7+
trim_trailing_whitespace = true
8+
insert_final_newline = true

‎.eslintrc.json

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
{
2+
"extends": [
3+
"eslint:recommended",
4+
"plugin:import/errors",
5+
"plugin:react/recommended",
6+
"plugin:jsx-a11y/recommended",
7+
"prettier",
8+
"prettier/react"
9+
],
10+
"plugins": ["react", "import", "jsx-a11y"],
11+
"settings": {
12+
"react": {
13+
"version": "detect"
14+
}
15+
},
16+
"rules": {
17+
"react/prop-types": 0,
18+
"react/react-in-jsx-scope": "off",
19+
"lines-between-class-members": ["error", "always"],
20+
"padding-line-between-statements": [
21+
"error",
22+
{ "blankLine": "always", "prev": ["const", "let", "var"], "next": "*" },
23+
{
24+
"blankLine": "always",
25+
"prev": ["const", "let", "var"],
26+
"next": ["const", "let", "var"]
27+
},
28+
{ "blankLine": "always", "prev": "directive", "next": "*" },
29+
{ "blankLine": "any", "prev": "directive", "next": "directive" }
30+
]
31+
},
32+
"parser": "babel-eslint",
33+
"parserOptions": {
34+
"ecmaVersion": 10,
35+
"sourceType": "module",
36+
"ecmaFeatures": {
37+
"jsx": true
38+
}
39+
},
40+
"env": {
41+
"es6": true,
42+
"browser": true,
43+
"node": true
44+
},
45+
"globals": {
46+
"graphql": false
47+
}
48+
}

‎.gitignore

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
public
2+
.cache
3+
node_modules
4+
*DS_Store
5+
*.env
6+
7+
.idea/

‎.prettierrc

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"printWidth": 100,
3+
"jsxBracketSameLine": false,
4+
"singleQuote": true,
5+
"tabWidth": 2,
6+
"trailingComma": "es5"
7+
}

‎Dockerfile

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
FROM node:buster
2+
3+
# Create app directory
4+
WORKDIR /app
5+
6+
# Install app dependencies
7+
# RUN npm -g install serve
8+
RUN npm -g install gatsby-cli
9+
10+
COPY package*.json ./
11+
12+
RUN npm ci
13+
14+
# Bundle app source
15+
COPY . .
16+
17+
# Build static files
18+
RUN npm run build
19+
20+
# serve on port 8080
21+
# CMD ["serve", "-l", "tcp://0.0.0.0:8080", "public"]
22+
CMD ["gatsby", "serve", "--verbose", "--prefix-paths", "-p", "8080", "--host", "0.0.0.0"]

‎LICENSE

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

‎README.md

+146
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
# gatsby-gitbook-starter
2+
3+
Kick off your project with this starter to create a powerful/flexible docs/tutorial web apps.
4+
5+
![gatsby-gitbook-starter](https://graphql-engine-cdn.hasura.io/learn-hasura/gatsby-gitbook-starter/assets/documentation_app_blog.png)
6+
7+
## Motivation
8+
9+
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.
10+
11+
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.
12+
13+
## 🔥 Features
14+
- Write using Markdown / [MDX](https://github.com/mdx-js/mdx)
15+
- GitBook style theme
16+
- Syntax Highlighting using Prism [`Bonus`: Code diff highlighting]
17+
- Search Integration with Algolia
18+
- Progressive Web App, Works Offline
19+
- Google Analytics Integration
20+
- Automatically generated sidebar navigation, table of contents, previous/next
21+
- Dark Mode toggle
22+
- Edit on Github
23+
- Fully customisable
24+
- Rich embeds and live code editor using MDX
25+
- Easy deployment: Deploy on Netlify / Now.sh / Docker
26+
27+
## 🔗 Live Demo
28+
29+
Here's a [live demo](https://learn.hasura.io/graphql/react)
30+
31+
## 🚀 Quickstart
32+
33+
Get started by running the following commands:
34+
35+
```
36+
$ git clone [email protected]:hasura/gatsby-gitbook-starter.git
37+
$ cd gatsby-gitbook-starter
38+
$ npm install
39+
$ npm start
40+
```
41+
42+
Visit `http://localhost:8000/` to view the app.
43+
44+
## 🔧 Configure
45+
46+
Write markdown files in `content` folder.
47+
48+
Open `config.js` for templating variables. Broadly configuration is available for `gatsby`, `header`, `sidebar` and `siteMetadata`.
49+
50+
- `gatsby` config for global configuration like
51+
- `pathPrefix` - Gatsby Path Prefix
52+
- `siteUrl` - Gatsby Site URL
53+
- `gaTrackingId` - Google Analytics Tracking ID
54+
55+
- `header` config for site header configuration like
56+
- `title` - The title that appears on the top left
57+
- `githubUrl` - The Github URL for the docs website
58+
- `helpUrl` - Help URL for pointing to resources
59+
- `tweetText` - Tweet text
60+
- `links` - Links on the top right
61+
- `search` - Enable search and [configure Algolia](https://www.gatsbyjs.org/docs/adding-search-with-algolia/)
62+
63+
- `sidebar` config for navigation links configuration
64+
- `forcedNavOrder` for left sidebar navigation order. It should be in the format "/<filename>"
65+
- `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)
66+
- `links` - Links on the bottom left of the sidebar
67+
- `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.
68+
69+
- `siteMetadata` config for website related configuration
70+
- `title` - Title of the website
71+
- `description` - Description of the website
72+
- `ogImage` - Social Media share og:image tag
73+
- `docsLocation` - The Github URL for Edit on Github
74+
75+
- 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.
76+
77+
### Algolia Configuration
78+
79+
To setup Algolia, go to `config.js` and update the `search` object to look like the one below:
80+
81+
```...,
82+
"search": {
83+
"enabled": true,
84+
"indexName": "MY_INDEX_NAME",
85+
"algoliaAppId": process.env.GATSBY_ALGOLIA_APP_ID,
86+
"algoliaSearchKey": process.env.GATSBY_ALGOLIA_SEARCH_KEY,
87+
"algoliaAdminKey": process.env.ALGOLIA_ADMIN_KEY
88+
},
89+
```
90+
91+
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.
92+
93+
### Progressive Web App, Offline
94+
95+
To enable PWA, go to `config.js` and update the `pwa` object to look like the one below:
96+
97+
```
98+
"pwa": {
99+
"enabled": false, // disabling this will also remove the existing service worker.
100+
"manifest": {
101+
"name": "Gatsby Gitbook Starter",
102+
"short_name": "GitbookStarter",
103+
"start_url": "/",
104+
"background_color": "#6b37bf",
105+
"theme_color": "#6b37bf",
106+
"display": "standalone",
107+
"crossOrigin": "use-credentials",
108+
icons: [
109+
{
110+
src: "src/pwa-512.png",
111+
sizes: `512x512`,
112+
type: `image/png`,
113+
},
114+
],
115+
},
116+
}
117+
```
118+
119+
## Live Code Editor
120+
121+
To render react components for live editing, add the `react-live=true` to the code section. For example:
122+
123+
```javascript react-live=true
124+
<button>Edit my text</button>
125+
```
126+
127+
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.
128+
129+
## 🤖 SEO friendly
130+
131+
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
132+
133+
```markdown
134+
---
135+
title: "Title of the page"
136+
metaTitle: "Meta Title Tag for this page"
137+
metaDescription: "Meta Description Tag for this page"
138+
---
139+
```
140+
141+
Canonical URLs are generated automatically.
142+
143+
## ☁️ Deploy
144+
145+
[![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)
146+

‎config.js

+81
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
const config = {
2+
gatsby: {
3+
pathPrefix: '/',
4+
siteUrl: 'https://hasura.io',
5+
gaTrackingId: null,
6+
trailingSlash: false,
7+
},
8+
header: {
9+
logo: 'https://graphql-engine-cdn.hasura.io/learn-hasura/assets/homepage/brand.svg',
10+
logoLink: 'https://hasura.io/learn/',
11+
title:
12+
"<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>",
13+
githubUrl: 'https://github.com/hasura/gatsby-gitbook-boilerplate',
14+
helpUrl: '',
15+
tweetText: '',
16+
social: `<li>
17+
<a href="https://twitter.com/hasurahq" target="_blank" rel="noopener">
18+
<div class="twitterBtn">
19+
<img src='https://graphql-engine-cdn.hasura.io/learn-hasura/assets/homepage/twitter-brands-block.svg' alt={'Discord'}/>
20+
</div>
21+
</a>
22+
</li>
23+
<li>
24+
<a href="https://discordapp.com/invite/hasura" target="_blank" rel="noopener">
25+
<div class="discordBtn">
26+
<img src='https://graphql-engine-cdn.hasura.io/learn-hasura/assets/homepage/discord-brands-block.svg' alt={'Discord'}/>
27+
</div>
28+
</a>
29+
</li>`,
30+
links: [{ text: '', link: '' }],
31+
search: {
32+
enabled: false,
33+
indexName: '',
34+
algoliaAppId: process.env.GATSBY_ALGOLIA_APP_ID,
35+
algoliaSearchKey: process.env.GATSBY_ALGOLIA_SEARCH_KEY,
36+
algoliaAdminKey: process.env.ALGOLIA_ADMIN_KEY,
37+
},
38+
},
39+
sidebar: {
40+
forcedNavOrder: [
41+
'/introduction', // add trailing slash if enabled above
42+
'/codeblock',
43+
],
44+
collapsedNav: [
45+
'/codeblock', // add trailing slash if enabled above
46+
],
47+
links: [{ text: 'Hasura', link: 'https://hasura.io' }],
48+
frontline: false,
49+
ignoreIndex: true,
50+
title:
51+
"<a href='https://hasura.io/learn/'>graphql </a><div class='greenCircle'></div><a href='https://hasura.io/learn/graphql/react/introduction/'>react</a>",
52+
},
53+
siteMetadata: {
54+
title: 'Gatsby Gitbook Boilerplate | Hasura',
55+
description: 'Documentation built with mdx. Powering hasura.io/learn ',
56+
ogImage: null,
57+
docsLocation: 'https://github.com/hasura/gatsby-gitbook-boilerplate/tree/master/content',
58+
favicon: 'https://graphql-engine-cdn.hasura.io/img/hasura_icon_black.svg',
59+
},
60+
pwa: {
61+
enabled: false, // disabling this will also remove the existing service worker.
62+
manifest: {
63+
name: 'Gatsby Gitbook Starter',
64+
short_name: 'GitbookStarter',
65+
start_url: '/',
66+
background_color: '#6b37bf',
67+
theme_color: '#6b37bf',
68+
display: 'standalone',
69+
crossOrigin: 'use-credentials',
70+
icons: [
71+
{
72+
src: 'src/pwa-512.png',
73+
sizes: `512x512`,
74+
type: `image/png`,
75+
},
76+
],
77+
},
78+
},
79+
};
80+
81+
module.exports = config;

‎content/codeblock.md

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
---
2+
title: "Syntax Highlighting"
3+
metaTitle: "Syntax Highlighting is the meta title tag for this page"
4+
metaDescription: "This is the meta description for this page"
5+
---
6+
7+
The following is a code block with JavaScript language syntax highlighting.
8+
9+
```javascript
10+
import React from 'react';
11+
```
12+
13+
Supports multiple languages.
14+
15+
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.
16+
17+
```javascript
18+
- const data = ['1','2'];
19+
+ const data = [1,2];
20+
```
21+
22+
## Live Editing example
23+
24+
```javascript react-live=true
25+
<button className={'btn btn-default'}>Change my text</button>
26+
```

0 commit comments

Comments
 (0)