chore: updated guide and example to use mdx

newrelic · May 20, 2020 · 4eabc6a · 4eabc6a
1 parent 43ea8f3
commit 4eabc6a
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 11 deletions.
diff --git 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 → src/markdown-pages/example.mdx b/src/markdown-pages/example.md → 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
@@ -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