Convert from remark to mdx

zandaleph · Nov 28, 2019 · 9a29fce · 9a29fce
1 parent e520dae
commit 9a29fce
Show file tree

Hide file tree

Showing 6 changed files with 1,348 additions and 36 deletions.
diff --git a/gatsby-config.js b/gatsby-config.js
@@ -21,10 +21,13 @@ module.exports = {
         path: `${__dirname}/src/posts`,
       },
     },
+    `gatsby-remark-vscode`,
+    `gatsby-remark-images`,
     {
-      resolve: `gatsby-transformer-remark`,
+      resolve: `gatsby-plugin-mdx`,
       options: {
-        plugins: [
+        extensions: ['.mdx', '.md'],
+        gatsbyRemarkPlugins: [
           {
             resolve: `gatsby-remark-vscode`,
             options: {

diff --git a/gatsby-node.js b/gatsby-node.js
@@ -9,7 +9,7 @@ const path = require(`path`);
 
 exports.onCreateNode = ({ node, getNode, actions }) => {
   const { createNodeField } = actions;
-  if (node.internal.type === `MarkdownRemark`) {
+  if (node.internal.type === `Mdx`) {
     const slug = createFilePath({ node, getNode, basePath: `posts` });
     createNodeField({
       node,
@@ -23,7 +23,7 @@ exports.createPages = async ({ graphql, actions }) => {
   const { createPage, createRedirect } = actions;
   const result = await graphql(`
     query {
-      allMarkdownRemark {
+      allMdx {
         edges {
           node {
             fields {
@@ -37,7 +37,7 @@ exports.createPages = async ({ graphql, actions }) => {
       }
     }
   `);
-  result.data.allMarkdownRemark.edges.forEach(({ node }) => {
+  result.data.allMdx.edges.forEach(({ node }) => {
     createPage({
       path: node.fields.slug,
       component: path.resolve(`./src/templates/blog-post.js`),

diff --git a/package.json b/package.json
@@ -5,13 +5,16 @@
   "author": "Nader Dabit <dabit3.@gmail.com>",
   "dependencies": {
     "@emotion/core": "^10.0.22",
+    "@mdx-js/mdx": "^1.5.1",
+    "@mdx-js/react": "^1.5.1",
     "aws-amplify": "^1.0.5",
     "aws-amplify-react": "^1.0.5",
     "gatsby": "^2.13.45",
     "gatsby-image": "^2.2.7",
     "gatsby-plugin-catch-links": "^2.1.15",
     "gatsby-plugin-emotion": "^4.1.13",
     "gatsby-plugin-manifest": "^2.2.4",
+    "gatsby-plugin-mdx": "^1.0.58",
     "gatsby-plugin-offline": "^2.2.4",
     "gatsby-plugin-react-helmet": "^3.1.2",
     "gatsby-plugin-sharp": "^2.2.9",

diff --git a/src/pages/index.js b/src/pages/index.js
@@ -18,7 +18,7 @@ export default function IndexPage({ data }) {
         riveting weblog entries.
       </p>
       <ul>
-        {data.allMarkdownRemark.edges.map(({ node }) => (
+        {data.allMdx.edges.map(({ node }) => (
           <li key={node.id}>
             <Link to={node.fields.slug}>{node.frontmatter.title}</Link>
           </li>
@@ -30,7 +30,7 @@ export default function IndexPage({ data }) {
 
 export const query = graphql`
   query {
-    allMarkdownRemark(sort: { fields: [frontmatter___date], order: DESC }) {
+    allMdx(sort: { fields: [frontmatter___date], order: DESC }) {
       totalCount
       edges {
         node {

diff --git a/src/templates/blog-post.js b/src/templates/blog-post.js
@@ -1,11 +1,12 @@
 import React from 'react';
 import { graphql } from 'gatsby';
+import { MDXRenderer } from 'gatsby-plugin-mdx';
 import { css } from '@emotion/core';
 import ordinal from 'ordinal';
 import Layout from '../components/Layout';
 
 export default function BlogPost({ data }) {
-  const post = data.markdownRemark;
+  const post = data.mdx;
   const fm = post.frontmatter;
   const date = `${fm.month} ${ordinal(parseInt(fm.day))}, ${fm.year}`;
   return (
@@ -19,15 +20,15 @@ export default function BlogPost({ data }) {
       >
         {fm.lead}
       </p>
-      <div dangerouslySetInnerHTML={{ __html: post.html }} />
+      <MDXRenderer>{post.body}</MDXRenderer>
     </Layout>
   );
 }
 
 export const query = graphql`
   query($slug: String!) {
-    markdownRemark(fields: { slug: { eq: $slug } }) {
-      html
+    mdx(fields: { slug: { eq: $slug } }) {
+      body
       frontmatter {
         title
         day: date(formatString: "DD")