https://github.com/molebox/gatsby-theme-hbs-mdx

An mdx gatsby theme that sets up basic folder structure and pages, takes care of queries so you don't have to.
https://github.com/molebox/gatsby-theme-hbs-mdx

Last synced: 9 days ago
JSON representation

An mdx gatsby theme that sets up basic folder structure and pages, takes care of queries so you don't have to.

• Host: GitHub
• URL: https://github.com/molebox/gatsby-theme-hbs-mdx
• Owner: molebox
• Created: 2019-06-03T19:57:05.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-04T21:47:32.000Z (almost 2 years ago)
• Last Synced: 2024-04-25T13:43:07.243Z (7 months ago)
• Language: JavaScript
• Size: 4.96 MB
• Stars: 7
• Watchers: 1
• Forks: 0
• Open Issues: 25
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# gatsby-theme-hbs-mdx

A theme that provides a basic mdx setup. All you have to do is bring your mdx files in a blog folder at the root of your project.

```yarn add gatsby-theme-hbs-mdx```

In your sites gatsby-config: 

```

module.exports = {

    plugins: ['gatsby-theme-hbs-mdx']

}

```

---

* The first time you run ```gatsby develop``` a blog folder will be created at your projects root. Alternatively create a blog folder at the root of your project before you run the command. This is where you should place your mdx files.

* In your src folder create a new folder named after the theme - ```gatsby-theme-hbs-mdx``` then add a pages folder and shadow the themes blogIndex.js file to customize your blogs index. By default it has the following format:

```

const BlogIndex = ({ data }) => {

  const { edges: posts } = data.allMdx

  return (

    


      
Blog

      
Shadow this component to create your own blog index page

      


        {posts.map(({ node: post }) => (

          


            

              
{post.frontmatter.title}

            

            
{post.excerpt}

          

        ))}

      

    

  )

}


export default BlogIndex

```

Keep the parameters the same ```({data})```, all you have to do is change whats returned. You will have access to the same data as described above.

* To customize your posts layout shadow the posts-layout.js file by creating a components folder inside of ```gatsby-theme-hbs-mdx``` and then a posts-layout.js file. Its base format (with imports) is like so:

```

import React from "react";

import { graphql } from "gatsby";

import { MDXRenderer } from "gatsby-plugin-mdx"

function PageTemplate({ data: { mdx } }) {

  return (

    


      
{mdx.frontmatter.title}

      {mdx.code.body}

    

  );

}


export default PageTemplate

```

Like in the blogIndex, you will have access to the posts metadata and body content. Make sure you import the ```MDXRenderer``` from ```gatsby-plugin-mdx``` and render the posts body content within, the same as the original file.

---

The goal of this theme is to take away any complexity of working with graphql queries or plugins. Whats left is a single folder called blog at the root of your project which holds your mdx files. It's encouraged to shadow the blogIndex and posts-layout components in order to add you own styling (I have left the styles blank to encourage you to do this as thats not what this theme is about). 

Happy Blogging!