Copy
1npm install gatsby-plugin-mdx @mdx-js/mdx @mdx-js/react mdx-utils
2# probably with filesystem at the same time
3npm install gatsby-plugin-mdx @mdx-js/mdx @mdx-js/react gatsby-source-filesystem

Copy
1module.exports = {
2  plugins: [
3    {
4      resolve: `gatsby-plugin-mdx`,
5      options: {
6        extensions: [`.mdx`, `.md`],
7      },
8    },
9    {
10      resolve: `gatsby-source-filesystem`,
11      options: {
12        path: `${__dirname}/posts`,
13        name: `posts`,
14      },
15    },
16  ],
17}

Copy
1exports.createPages = async ({ graphql, actions }) => {
2  const { data } = await graphql(`
3    query {
4      allMdx(sort: { fields: frontmatter___date, order: DESC }) {
5        edges {
6          node {
7            frontmatter {
8              slug
9            }
10            id
11          }
12        }
13      }
14    }
15  `)
16
17  // Create single blog posts
18  data.allMdx.edges.forEach((edge) => {
19    const slug = edge.node.frontmatter.slug
20    const id = edge.node.id
21    actions.createPage({
22      path: slug,
23      component: require.resolve('./src/templates/blog-post.js'),
24      context: { id },
25    })
26  })
27}

Copy
1import * as React from 'react'
2import { graphql } from 'gatsby'
3import { MDXRenderer } from 'gatsby-plugin-mdx'
4import SEO from '../components/seo'
5import { Layout, CoverImage } from '../components'
6
7const BlogPost = ({ data }) => {
8  const coverImage = data.mdx.frontmatter.coverImage.childImageSharp.fluid
9
10  return (
11    <Layout>
12      <SEO title={data.mdx.frontmatter.title} description={data.mdx.frontmatter.excerpt} />
13      <CoverImage fluid={coverImage} />
14      <h1>{data.mdx.frontmatter.title}</h1>
15      <MDXRenderer>{data.mdx.body}</MDXRenderer>
16    </Layout>
17  )
18}
19
20export default BlogPost
21
22export const blogQuery = graphql`
23  query SinglePostQuery($id: String!) {
24    mdx(id: { eq: $id }) {
25      body
26      frontmatter {
27        date(formatString: "MM/DD/YYYY")
28        excerpt
29        slug
30        title
31        tags
32        coverImage {
33          publicURL
34          childImageSharp {
35            fluid {
36              ...GatsbyImageSharpFluid
37            }
38          }
39        }
40      }
41      timeToRead
42    }
43  }
44`

Copy
1import * as React from 'react'
2import Img from 'gatsby-image'
3import { useStaticQuery, graphql } from 'gatsby'
4
5export const CoverImage = ({ fluid }) => {
6  const data = useStaticQuery(graphql`
7    query {
8      imageSharp(fluid: { originalName: { eq: "steve-harvey-xWiXi6wRLGo-unsplash.jpg" } }) {
9        fluid {
10          ...GatsbyImageSharpFluid
11        }
12      }
13    }
14  `)
15
16  return (
17    <div className='overflow-hidden relative'>
18      <Img className='absolute top-0 left-0 w-full h-full' fluid={fluid ? fluid : data.imageSharp.fluid} />
19    </div>
20  )
21}

Copy
1exports.onCreateNode = ({ node, actions, getNode }) => {
2  const { createNodeField } = actions
3  if (node.internal.type === `MarkdownRemark` || node.internal.type === `Mdx`) {
4    createNodeField({
5      name: `collection`,
6      node,
7      // This doesn't work (without getNode being passed - I forgot!
8      value: getNode(node.parent).sourceInstanceName
9    });
10  })
11};

Copy
1query postsOnly {
2  allMdx(filter: { collection: { eq: "posts" } }) {
3    edges {
4      node {
5        id
6        collection
7      }
8      frontmatter {
9        title
10      }
11    }
12  }
13}

Copy
1query {
2  allMdx(sort: { fields: frontmatter___date, order: DESC }) {
3    edges {
4      node {
5        id
6        frontmatter {
7          slug
8        }
9        parent {
10          ... on File {
11            sourceInstanceName
12          }
13        }
14      }
15    }
16  }
17}

Copy
1// Create single blog posts
2data.allMdx.edges.forEach((edge) => {
3  const slug = edge.node.frontmatter.slug
4  const id = edge.node.id
5  const collection = edge.node.parent.sourceInstanceName
6
7  actions.createPage({
8    path: `${collection}/${slug}`,
9    component: require.resolve('./src/templates/blog-post.js'),
10    context: { id },
11  })
12})

Copy
1query {
2  allMdx(sort: { fields: frontmatter___date, order: DESC }) {
3    edges {
4      node {
5        id
6        frontmatter {
7          slug
8        }
9        fields {
10          collection
11        }
12      }
13    }
14  }
15}