hasura / gatsby-gitbook-starter

Generate GitBook style modern docs/tutorial websites using Gatsby + MDX

gatsby-gitbook-starter

Kick off your project with this starter to create a powerful/flexible docs/tutorial web apps.

Motivation

We wanted to create a GraphQL tutorial 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. 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 and deployed as docker containers.

🔥 Features

• Write using Markdown / 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
• Dark Mode toggle
• 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

🚀 Quickstart

Get started by running the following commands:

$ git clone [email protected]:hasura/gatsby-gitbook-starter.git
$ cd gatsby-gitbook-starter
$ 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

• 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:

<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

---
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

gatsby-gitbook-starter's Issues

hide search results panel when out of focus

Currently when the search results appear, it stays persistent till the search term is cleared. When the focus is not inside the search results, then the panel needs to be hidden from the view.

Change favIcon using gitbook-starter

How can i change the favicon? I already tried every way i know and don't work...

By default the theme comes with GraphQL url:

"favicon": "https://graphql-engine-cdn.hasura.io/img/hasura_icon_black.svg"
But I no idea how i use this... someone can help me please?

I tried with image base64 but when i do push to my repo in VSTS, return a error...

add dark mode toggle option

Add an option to toggle between light/dark mode theme.

Build failing when parsing MDX

Getting errors when attempting to build the application.
Specifically:

 ERROR #95313

Building static HTML failed for path "/modules/pl7505/1-discussion"

See our docs page for more info on this error: https://gatsby.dev/debug-html


   9 | /* eslint-disable react/display-name */
  10 | export default {
> 11 |   h1: props => <Heading id={props.children.replace(/\s+/g, '').toLowerCase()} {...props} is="h1" fontSize={[5, 6]} />,
     |                                            ^
  12 |   h2: props => <Heading id={props.children.replace(/\s+/g, '').toLowerCase()} {...props} is="h2" fontSize={[4]} />,
  13 |   h3: props => <Heading id={props.children.replace(/\s+/g, '').toLowerCase()} {...props} is="h3" fontSize={3} />,
  14 |   h4: props => <Heading id={props.children.replace(/\s+/g, '').toLowerCase()} {...props} is="h4" fontSize={2} />,


  WebpackError: TypeError: Cannot read property 'replace' of undefined
  - index.js:11 h1
    src/components/mdxComponents/index.js:11:44


⠸ Building static HTML for pages

The repo I'm trying to build is at: https://github.com/readywater/sec.andrewlb.com

And I'm trying to deploy it to gh-pages as well, though this is pre-deployment, as the failure is happening on the build phase.

suggestion for git clone in README.md

git clone worked for me as:

git clone https://github.com/hasura/gatsby-gitbook-starter.git

Maybe change in the README? The current command resulted in error. Can do a PR.

problem with social icon loading when deployed to netlify

I really like your starter repo! I ran into a problem that seemed related to using react dangerouslySetInnerHTML. It's especially noticeable when I changed the discord link to a LinkedIn link with a larger icon. It's only noticeable when using gatsby build (don't see this on localhost).
You'll see the icons used in the social section when loading the page.
https://kind-clarke-92e677.netlify.app/

It's in this code in header.js

 {config.header.social ? (
              <ul
                className="socialWrapper visibleMobileView"
                dangerouslySetInnerHTML={{ __html: config.header.social }}
              ></ul>

I replaced the dangerouslySetInnerHTML with static HTML and values from config and I'm still seeing the loading issue. Since it only happens on deployed code, I think it's due to due to SSR.

Left nav section resizing on menu selection

Left nav is resizing on menu selections. Creates a jumpy visual when moving from menu selection to another selection.

To see example go here:
https://learn.hasura.io/graphql/react/queries/2-create-query
then select the content below the 'queries' section.
screenshot
https://screencast.com/t/EtZLmTu5t

At first I thought it was the size of the TOC on the right but that's not the cause.

migrate system-components to @rebass/components

system-components package is deprecated in favour of @rebass/components. Update the code related.

Add option to have a SideBar list-item closed by default

As a developer, it would be great to have the option of passing in some prop where we can determine if the SideBar items can be collapsed or not by default.

Thanks

src/components/sidebar/index.js:ListItem does not use target="_blank" but probably should

The icon for additional links in the sidebar indicates that the link would open in a new tab. But the definition of ListItem does not indicate this. Perhaps it should be an option or it should default to opening with target="_blank". The other option is to use a GatsbyLink instead of ListItem in case the link is to another part of the site or to an external destination.

No 404 Page

It doesn't seem to be possible to create a 404 page in the usual way with this setup. Anyone have a recommended way of doing so?

documentation versioning

Hi 👋
This is a great boilerplate thank you for open sourcing it. I'm looking to port my existing documentation to use it but I have one extra requirement which you seem to have solved on your own api docs, which is document versioning (v1, v2 etc of each file). Is this something that's open source for gatsby as well? If so is it something I can help port into the boilerplate?

Thanks!

Contents rightbar shows up on localhost but not from public

Am i missing something? I'm assuming that only the public folder is required on the prod server

My local site test out fine using npm start.
When i run the build and upload to a test server the rightbar doesn't load.

Can't import React component

How can we import React components into mdx files? I tried a very simple example and it didn't work:

---
title: "Button"
metaTitle: "Button Example"
metaDescription: "This is the meta description for this page"
---

import {Button} from './button'

Example of a button.

<Button/>

Mermaid (gatsby-remark) doesn't seem to work

Hi,

I am trying to use Mermaid to make graphs in my markdown files. I followed the instructions on the gatsby plugin site but it doesn't seem to work.

I tried to add the following to a markdown page:

```mermaid
classDiagram
Notification<|--User
Notification<|--Recurrence
User : int UserID()
Notification : int NotificationID()
Notification : int UserID()
Notification : string Message()
Notification : int RecurrenceID()
Notification : int Interval()
Notification : date StartingDate()
Recurrence : int RecurrenceID()
Recurrence : string Message()

But I didn't get the graph in my page. I only got a codeblock with the text in it.

I suspect I did something wrong in the gatsby.config.js but I can't put my finger on it.

Could you help me?

Support for ordering sidebar by frontmatter: order?

New to Gatsby, here's my question:

How can I set up this starter so that it sorts articles in sidebar by a frontmatter value, such as order, so that articles are not sorted alphabetically by title, which is hugely unhelpful in almost any documentation context.

using trailingSlash: true causes sidebar not to be sorted correctly

It looks like the algorithm src/components/sidebar/tree.js:calculateTreeData fails to produce a properly sorted sidebar if trailingSlash:true is used in config.js.

link on right sive nave do not work

The links on the right side nav does not work. The url is not correct. It points to the text and not the id.

And the id on the h1 tags are not correct, with spaces and other unhallowed chars.

Error: Cannot find module 'to-style'

Any progress on this error?

On npm start I get:

> [email protected] start /mnt/c/dev/gatsby-gitbook-starter
> gatsby develop

success open and validate gatsby-configs - 0.061 s

 ERROR 

Error in "/mnt/c/dev/gatsby-gitbook-starter/node_modules/gatsby-mdx/gatsby-node.js": Cannot find module 'to-style'



  Error: Cannot find module 'to-style'

  - v8-compile-cache.js:159 require
    [gatsby-gitbook-starter]/[v8-compile-cache]/v8-compile-cache.js:159:20

  - babel-plugin-html-attr-to-jsx-attr.js:2 Object.<anonymous>
    [gatsby-gitbook-starter]/[gatsby-mdx]/utils/babel-plugin-html-attr-to-jsx-attr.js:2    :23

  - v8-compile-cache.js:178 Module._compile
    [gatsby-gitbook-starter]/[v8-compile-cache]/v8-compile-cache.js:178:30

  - v8-compile-cache.js:159 require
    [gatsby-gitbook-starter]/[v8-compile-cache]/v8-compile-cache.js:159:20

  - gen-mdx.js:9 Object.<anonymous>
    [gatsby-gitbook-starter]/[gatsby-mdx]/utils/gen-mdx.js:9:27

  - v8-compile-cache.js:178 Module._compile
    [gatsby-gitbook-starter]/[v8-compile-cache]/v8-compile-cache.js:178:30


⠋ load plugins

npm ERR! Linux 4.4.0-17763-Microsoft
npm ERR! argv "/usr/bin/node" "/usr/bin/npm" "start"
npm ERR! node v8.10.0
npm ERR! npm  v3.5.2
npm ERR! code ELIFECYCLE
npm ERR! [email protected] start: `gatsby develop`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script 'gatsby develop'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the gatsby-gitbook-boilerplate package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     gatsby develop
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs gatsby-gitbook-boilerplate
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls gatsby-gitbook-boilerplate
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /mnt/c/dev/gatsby-gitbook-starter/npm-debug.log

Use with gatsby-plugin-catch-links

Can's seem to get it to work with https://www.gatsbyjs.org/packages/gatsby-plugin-catch-links/.

Have tried to put it both under gatsby-pluging-mdx (see below) and alone in gatsby-config.js after installing the package, but neither seems to help.

{ resolve: "gatsby-plugin-mdx", options: { gatsbyRemarkPlugins: [ { resolve: "gatsby-remark-images", options: { maxWidth: 1035, sizeByPixelDensity: true, }, }, { resolve: "gatsby-remark-copy-linked-files", }, { resolve: "gatsby-plugin-catch-links", }, ], extensions: [".mdx", ".md"], }, },
Should this be able to work?

flash of unstyled text

Thanks for the starter template - I really like it.

Minor thing, but I get a flash of unstyled text on my site using the template. I haven't changed any of the text styling from the default for the starter.

Screen recording to demonstrate is here.

collape by defaut closed

Description
How can i set the Collpase by defaut Closed. Nowadays when I entry in my blog, the collpase come open.

Print:

Theme
gitbook-starter

Environment
System:
OS: Windows 10
CPU: (6) x64 Intel(R) Core(TM) i5-8500T CPU @ 2.10GHz
Binaries:
npm: 6.9.0 - C:\Program Files\nodejs\npm.CMD
Browsers:
Edge: 42.17134.1.0
npmPackages:
gatsby: ^2.15.28 => 2.15.28
gatsby-image: ^2.2.24 => 2.2.24
gatsby-link: ^2.2.17 => 2.2.17
gatsby-plugin-algolia: ^0.3.4 => 0.3.4
gatsby-plugin-emotion: ^4.1.9 => 4.1.9
gatsby-plugin-feed: ^2.3.16 => 2.3.16
gatsby-plugin-gtag: ^1.0.11 => 1.0.11
gatsby-plugin-layout: ^1.1.10 => 1.1.10
gatsby-plugin-mdx: ^1.0.46 => 1.0.46
gatsby-plugin-react-helmet: ^3.1.11 => 3.1.11
gatsby-plugin-remove-trailing-slashes: ^2.1.9 => 2.1.9
gatsby-plugin-sharp: ^2.2.28 => 2.2.28
gatsby-plugin-sitemap: ^2.2.16 => 2.2.16
gatsby-plugin-styled-components: ^3.1.8 => 3.1.8
gatsby-remark-copy-linked-files: ^2.1.23 => 2.1.23
gatsby-remark-embed-markdown: 0.0.4 => 0.0.4
gatsby-remark-embed-snippet: ^4.1.11 => 4.1.11
gatsby-remark-images: ^3.1.25 => 3.1.25
gatsby-remark-prismjs: ^3.3.18 => 3.3.18
gatsby-source-filesystem: ^2.1.29 => 2.1.29
gatsby-transformer-remark: ^2.6.28 => 2.6.28
gatsby-transformer-sharp: ^2.2.20 => 2.2.20

Algolia API connexion issue

Hi,

I tried a lot before writing here to insert my Algolia API to the template but I always got the same issue...

I search on Gatsby and Algolia docs, but I've got no luck yet.

This is what I wrote in my .env file with my APIs

Several .env, .env.production, and I tried more, but always the same result.

I even tried to put in the config.js file, but I know this is not the way to do it.

Thanks in advance

Possible to have subdirectories in Nav?

Greetings -

I've been working with this project for a few weeks now and it's great, however I was wondering if there was a simple way to configure all treenodes to be collapsed by default. I've tried making a few modifications myself, but none of them have been successful (sometimes they'll work on gatsby develop, but won't launch in Gitlab pages). Here's the layout of the content directory that I'm using:

.

├── index.mdx
├── lab
│   ├── architecture
│   │   ├── 1-hardware.md
│   │   └── 1-network-topology.md
│   └── architecture.md
└── systems-administration
    └── Resize-Filesystem.md

I've been looking around src/components/sidebar/tree.js and was thinking of modifying it like this:

  treeData.items.forEach(item => {
    if (config.sidebar.collapsedNav && config.sidebar.collapsedNav.includes(item.url)) {
      defaultCollapsed[item.url] = true;
    } else if (item.items.length !== 0) { // Assume page has children that should be collapsed
        item.items.forEach(child => {
          defaultCollapsed[child.url] = true;
    } else {
      defaultCollapsed[item.url] = false;
    }

Any tips? Default behavior with subdirectories is pretty unsightly and it would be great to be able to set them collapsed by default.

Double image rendering

Hi ! I'm trying your really nice theme for documentation and I've got an annoying issue with images inside a mdx file.

When I import an image, there's always a good and bad version at the same time and I don't know how to remove the bad one.

Example :
Image issue
mdx file

I'm trying to tools with the plugin, but didn't found any solutions yet..

Thank you

emotion-theming doesn't seem to work

For our style guidelines I wanted to use this starter to have a solid base. Since this repository uses styled components and already implemented emotion-themeing. I though this was the perfect place to store our shared colors and fonts. Unfortunately emotion-theming doesn't seem to work and I don't really understand why it is not.

How to reproduce

1. Go to src/components/themeProvider.js
   This is the place where the EmotionThemeProvider is being added. For simplicity reason I added a new ThemeProvider which has it's own theme.
2. Replace themeProvider.js with the following contents

import * as React from "react";
import { ThemeProvider as EmotionThemeProvider } from "emotion-theming";
import defaultTheme from "./theme";
import styled from "react-emotion";
import Header from "./Header";
import "./styles.css";

const Button = styled("div")`
  background: ${props => props.theme.colors.primary};
`;

const theme = {
  colors: {
    primary: 'green'
  }
};

export default function ThemeProvider({ children, location }) {
  return (
    <div>
      <Header location={location} />
      <EmotionThemeProvider theme={theme}>
        <Button>some text</Button>
      </EmotionThemeProvider>
      <EmotionThemeProvider theme={{ ...defaultTheme, ...theme }}>
        {children}
      </EmotionThemeProvider>
    </div>
  );
}

3. Now go back to the site.
4. You should see the text some text with a green background. In reality you get an TypeError: Cannot read property 'primary' of undefined error since the props.theme property is undefined.

Considering the following documention emotion-theming. I expect the code above to work.

Can one of you get a working scenario?

migrate react-emotion to emotion 10

react-emotion is deprecated. Here's a migration path to https://emotion.sh/docs/migrating-to-emotion-10

add search functionality

The search should crawl through all the markdown files for content and give back the links to the pages of the content with possible highlighting of the searched word.

gatsby develop remains on "createPages"

When editing the site in "develop" mode, I see

success Re-building development build - 0.398s
..  createPages

The pages get updated, but this message makes it look like the site is still building.

add canonical urls to all pages generated

Use this plugin to generate canonical urls -
https://www.npmjs.com/package/gatsby-plugin-canonical-urls

forcedNavOrder for dropdown

First, this is an awesome template for a docs page. Thanks for all of your hard work on this template.

I skimmed through and attempted to edit the config.js file a bit after cloning for an option to force the order of the sub menu items as well. Is there a way to currently do this that I may have missed?

Thanks!

Bump deps

Great project! But a lot of the dependencies used by this project or really old. gatsby-mdx has been deprecated and is not gatsby-plugin-mdx.

I'm happy to help bump dependencies and upgrade this project.

fix styled component css delayed loading

The components wrapped with styled have issues with CSS getting applied late on the client leading to a partial rendering of the UI initially and a bad experience for the users.

GraphQL query is not executed when I wrap the class component with withAuthenticator method for Authentication

I am trying to implement Authentication on my simple Gatsby App. When I try to wrap the class component with withAuthenticator , the GraphQL query no longer executes. When i remove the withAuthenticator it works fine. Can you please take a look and suggest an alternative.

import React, { Component } from 'react';
import Helmet from 'react-helmet';
import { graphql } from 'gatsby';
import MDXRenderer from 'gatsby-plugin-mdx/mdx-renderer';

import { Layout, Link } from '$components';
import NextPrevious from '../components/NextPrevious';
import config from '../../config';
import { Edit, StyledHeading, StyledMainWrapper } from '../components/styles/Docs';



import { withAuthenticator } from '@aws-amplify/ui-react';

const forcedNavOrder = config.sidebar.forcedNavOrder;
class MDXRuntimeTest extends Component {
  render() {
    const { data } = this.props;

    if (!data) {
      return null;
    }
    const {
      allMdx,
      mdx,
      site: {
        siteMetadata: { docsLocation, title },
      },
    } = data;

    const gitHub = require('../components/images/github.svg');

    const navItems = allMdx.edges
      .map(({ node }) => node.fields.slug)
      .filter(slug => slug !== '/')
      .sort()
      .reduce(
        (acc, cur) => {
          if (forcedNavOrder.find(url => url === cur)) {
            return { ...acc, [cur]: [cur] };
          }

          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] };
          } else {
            return { ...acc, items: [...acc.items, cur] };
          }
        },
        { items: [] }
      );

    const nav = forcedNavOrder
      .reduce((acc, cur) => {
        return acc.concat(navItems[cur]);
      }, [])
      .concat(navItems.items)
      .map(slug => {
        if (slug) {
          const { node } = allMdx.edges.find(({ node }) => node.fields.slug === slug);

          return { title: node.fields.title, url: node.fields.slug };
        }
      });

    // meta tags
    const metaTitle = mdx.frontmatter.metaTitle;

    const metaDescription = mdx.frontmatter.metaDescription;

    let canonicalUrl = config.gatsby.siteUrl;

    canonicalUrl =
      config.gatsby.pathPrefix !== '/' ? canonicalUrl + config.gatsby.pathPrefix : canonicalUrl;
    canonicalUrl = canonicalUrl + mdx.fields.slug;

    return (
      <Layout {...this.props}>
        <Helmet>
          {metaTitle ? <title>{metaTitle}</title> : null}
          {metaTitle ? <meta name="title" content={metaTitle} /> : null}
          {metaDescription ? <meta name="description" content={metaDescription} /> : null}
          {metaTitle ? <meta property="og:title" content={metaTitle} /> : null}
          {metaDescription ? <meta property="og:description" content={metaDescription} /> : null}
          {metaTitle ? <meta property="twitter:title" content={metaTitle} /> : null}
          {metaDescription ? (
            <meta property="twitter:description" content={metaDescription} />
          ) : null}
          <link rel="canonical" href={canonicalUrl} />
        </Helmet>
        <div className={'titleWrapper'}>
          <StyledHeading>{mdx.fields.title}</StyledHeading>
          <Edit className={'mobileView'}>
            {docsLocation && (
              <Link className={'gitBtn'} to={`${docsLocation}/${mdx.parent.relativePath}`}>
                <img src={gitHub} alt={'Github logo'} /> Edit on GitHub
              </Link>
            )}
          </Edit>
        </div>
        <StyledMainWrapper>
          <MDXRenderer>{mdx.body}</MDXRenderer>
        </StyledMainWrapper>
        <div className={'addPaddTopBottom'}>
          <NextPrevious mdx={mdx} nav={nav} />
        </div>
      </Layout>
    );
  }
}

export default withAuthenticator(MDXRuntimeTest);

export const pageQuery = graphql`
  query($id: String!) {
    site {
      siteMetadata {
        title
        docsLocation
      }
    }
    mdx(fields: { id: { eq: $id } }) {
      fields {
        id
        title
        slug
      }
      body
      tableOfContents
      parent {
        ... on File {
          relativePath
        }
      }
      frontmatter {
        metaTitle
        metaDescription
      }
    }
    allMdx {
      edges {
        node {
          fields {
            slug
            title
          }
        }
      }
    }
  }
`; 

Cannot show component for a page.

Hi,

I am trying to add a component for a page.

How do I display the components of a page under src / pages using the following repository?
I can create new pages by adding components under the src/pages. But the pages show just blank pages. I don't know why...

I added a test.js (new simple component) under the src/pages

import React from "react"

export default () => (
    <div>Hello world!</div>
)

But the page for http://localhost:8000/test shows a just blank page.

Could you help me?

Setup Prettier + EsLint code formatter

Prettier and EsLint setup for the project.

How to display images in an md file.

New to Gatsby & React. I want to display some images in md files but it shows a broken images link. How can I fix it.

Link in title throws an error

System:
OS: macOS 10.15.4
CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 12.16.1 - /usr/local/bin/node
npm: 6.14.5 - /usr/local/bin/npm
Languages:
Python: 2.7.16 - /usr/bin/python
Browsers:
Chrome: 83.0.4103.97
Firefox: 75.0
Safari: 13.1
npmPackages:
gatsby: ^2.18.10 => 2.18.10
gatsby-link: ^2.2.27 => 2.2.27
gatsby-plugin-algolia: ^0.5.0 => 0.5.0
gatsby-plugin-emotion: ^4.1.18 => 4.1.18
gatsby-plugin-gtag: ^1.0.12 => 1.0.12
gatsby-plugin-layout: ^1.1.18 => 1.1.18
gatsby-plugin-manifest: ^2.2.33 => 2.2.33
gatsby-plugin-mdx: ^1.0.61 => 1.0.61
gatsby-plugin-offline: ^3.0.29 => 3.0.29
gatsby-plugin-react-helmet: ^3.1.18 => 3.1.18
gatsby-plugin-remove-serviceworker: ^1.0.0 => 1.0.0
gatsby-plugin-remove-trailing-slashes: ^2.1.17 => 2.1.17
gatsby-plugin-sharp: ^2.3.7 => 2.3.7
gatsby-plugin-sitemap: ^2.2.24 => 2.2.24
gatsby-remark-copy-linked-files: ^2.1.33 => 2.1.33
gatsby-remark-images: ^3.1.37 => 3.1.37
gatsby-source-filesystem: ^2.1.42 => 2.1.42
gatsby-transformer-remark: ^2.6.42 => 2.6.42
npmGlobalPackages:
gatsby-cli: 2.12.44
gatsby: 2.23.1

Search is not working, can you please check ?

Sorting as you add new MD file

When you add a new MD file to content folder it gets appended to the bottom of the the sidebar, however the order of the Back and Next arrows is all messed up.

The Back and Next arrows follow sorting alphabetically whereas the sidebar adds the navigation by order of file added. e.g.; in image below the order of nav is based by the sequence of files added:

But here the sequence of Back and Next arrow is not following the sidebar nav: I am in Verification and I have Back Button saying Use SDK in Node.

Is there a possibility to sort sidebar nav based by title alphabetically as followed in Next and Back arrows, without the need to update forcedNavOrder?

anchor tags with _blank need a rel="noopener" attribute

gatsby-gitbook-starter/src/components/mdxComponents/anchor.js

Line 6 in ea6c3b3

<a href={props.href} target="_blank">{link}</a>

See, https://dev.to/ben/the-targetblank-vulnerability-by-example

How to embed Videos ?

How to embed Videos ?

Connect it with Ghost

Dope starter guys!

This is not an issue, more a question.
How would you edit this to fetch contents from a Ghost website?

Use with github pages

I am following this tutorial and it doesn't seem to work:

https://www.gatsbyjs.org/docs/how-gatsby-works-with-github-pages/

How to use live editing with Reactstrap Components

Hello, I am not able to use live editing with reactstrap components.
I have imported the reactstrap component in src/components/mdxComponents/index.js and it is working properly outside of the live editor but, throws an error when used inside the live editor. Below is my code and error image.

import React from "react"

Live Editing example

<Button color="primary">Change my text</Button>

RESULT :

~ Thanks in advance

JSDocs Autogenerated Documentation

I was wondering if you guys would consider adding support for https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-transformer-documentationjs

That would make Hasura the perfect starter for almost any library that uses JSDocs which is probably almost all of them. All any dev would need to do is create the new starter inside the lib and you get instant perfect documentation autogenerated from JSDocs.

On build time, it could process all the JSDocs and build them into documentation

fix sidebar active element highlighting

The highlighting of active element on the left sidebar doesn't seem to work. It's probably an issue with URL matching that ends without slashes.

Code selection also copies '+' and '-' in safari

Apply the -webkit-user-select: none style for token operators in syntax highlighting.

add utterance script, but not show

Hi

I add utterance scirpt for comments, under addPaddTopBottom class in src/templates/docs.js.

but, just show up for a second and then disappears.

How to use utterances?

e