From 4eabc6a7d61855792cc105153583151d8e44ee0f Mon Sep 17 00:00:00 2001
From: Zack Stickles <zstickles@gmail.com>
Date: Wed, 20 May 2020 16:51:15 -0700
Subject: [PATCH] chore: updated guide and example to use mdx

---
 gatsby-node.js                                 |  4 ++--
 src/markdown-pages/{example.md => example.mdx} |  2 +-
 src/templates/GuideTemplate.js                 | 16 ++++++++--------
 3 files changed, 11 insertions(+), 11 deletions(-)
 rename src/markdown-pages/{example.md => example.mdx} (97%)

diff --git a/gatsby-node.js b/gatsby-node.js
index fe94cdd85..9eb81e796 100644
--- a/gatsby-node.js
+++ b/gatsby-node.js
@@ -5,7 +5,7 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
 
   const result = await graphql(`
     {
-      allMarkdownRemark(limit: 1000) {
+      allMdx(limit: 1000) {
         edges {
           node {
             frontmatter {
@@ -24,7 +24,7 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
     return;
   }
 
-  result.data.allMarkdownRemark.edges.forEach(({ node }) => {
+  result.data.allMdx.edges.forEach(({ node }) => {
     createPage({
       path: node.frontmatter.path,
       component: path.resolve(`src/templates/${node.frontmatter.template}.js`),
diff --git a/src/markdown-pages/example.md b/src/markdown-pages/example.mdx
similarity index 97%
rename from src/markdown-pages/example.md
rename to src/markdown-pages/example.mdx
index 5833d3053..cfcf05da3 100644
--- a/src/markdown-pages/example.md
+++ b/src/markdown-pages/example.mdx
@@ -5,7 +5,7 @@ title: 'GraphQL API'
 template: 'GuideTemplate'
 ---
 
-##Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+## Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 
 Vivamus sem dui, posuere et mattis eu,
 `laoreet eu sapien. Donec congue, leo vel cursus scelerisque, odio lacus gravida felis, ac finibus dui purus eget mi. Vivamus efficitur massa non nunc pharetra, ac aliquet purus condimentum. In egestas a velit non finibus. Duis tincidunt velit et fermentum porta. Duis pulvinar nunc at diam maximus mollis ut`
diff --git a/src/templates/GuideTemplate.js b/src/templates/GuideTemplate.js
index e321f2068..a42f77b2e 100644
--- a/src/templates/GuideTemplate.js
+++ b/src/templates/GuideTemplate.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import { graphql } from 'gatsby';
 import PropTypes from 'prop-types';
+import { MDXRenderer } from 'gatsby-plugin-mdx';
 import Layout from '../components/Layout';
 import BreadcrumbBar from '../components/BreadcrumbBar';
 import Container from '../components/Container';
@@ -9,8 +10,8 @@ import createBreadcrumbs from '../utils/create-breadcrumbs';
 import pages from '../data/sidenav.json';
 
 const GuideTemplate = ({ data }) => {
-  const { markdownRemark } = data;
-  const { frontmatter, html } = markdownRemark;
+  const { mdx } = data;
+  const { frontmatter, body } = mdx;
 
   const crumbs = createBreadcrumbs(frontmatter.path, pages);
 
@@ -21,10 +22,9 @@ const GuideTemplate = ({ data }) => {
         <div className="guideTemplate-container">
           <div>
             <h1>{frontmatter.title}</h1>
-            <div
-              className="guideTemplate-content"
-              dangerouslySetInnerHTML={{ __html: html }}
-            />
+            <div className="guideTemplate-content">
+              <MDXRenderer>{body}</MDXRenderer>
+            </div>
           </div>
         </div>
       </Container>
@@ -38,8 +38,8 @@ GuideTemplate.propTypes = {
 
 export const pageQuery = graphql`
   query($path: String!) {
-    markdownRemark(frontmatter: { path: { eq: $path } }) {
-      html
+    mdx(frontmatter: { path: { eq: $path } }) {
+      body
       frontmatter {
         duration
         path