diff --git a/gatsby-config.js b/gatsby-config.js index df8176c2..fc84c8e7 100644 --- 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 index f02b00c7..9ea63e35 100644 --- 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 index d3f7f52e..1e21ea00 100644 --- a/package.json +++ b/package.json @@ -5,6 +5,8 @@ "author": "Nader Dabit ", "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", @@ -12,6 +14,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 index 2991075d..64265718 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -18,7 +18,7 @@ export default function IndexPage({ data }) { riveting weblog entries.