gatsby-config.js

module.exports = {
  siteMetadata: {
    title: 'Tim Feeley',
    description: 'People-centric Product Management',
    author: 'Tim Feeley',
  },
  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/content/`,
      },
    },
    {
      resolve: 'gatsby-plugin-page-creator',
      options: {
        path: `${__dirname}/src/images`,
      },
    },
    {
      resolve: `gatsby-plugin-mdx`,
      options: {
        extensions: [`.mdx`, `.md`],
      },
      plugins: [`gatsby-remark-images`, `gatsby-remark-copy-linked-files`],
      gatsbyRemarkPlugins: [
        {
          resolve: `gatsby-remark-copy-linked-files`,
        },
        {
          resolve: `gatsby-remark-images`,
          options: {
            maxWidth: 590,
          },
        },
      ],
    },
    {
      resolve: `gatsby-plugin-sass`,
      options: {
        implementation: require('sass'),
        postCssPlugins: [require(`tailwindcss`), require(`tailwindcss`), require(`./tailwind.config.js`)],
      },
    },
    {
      resolve: `gatsby-plugin-typegen`,
      options: {
        emitSchema: {
          './src/__generated__/gatsby-schema.graphql': true,
        },
        emitPluginDocuments: {
          './src/__generated__/gatsby-plugin-documents.graphql': true,
        },
      },
    },
    `gatsby-plugin-codegen`,
    `gatsby-plugin-preload-fonts`,
    `gatsby-plugin-react-helmet`,
    // `gatsby-plugin-force-trailing-slashes`,
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    `gatsby-plugin-slug`,
  ],
};

gatsby-node.js

const path = require(`path`);
const { createFilePath } = require(`gatsby-source-filesystem`);

// exports.onCreateWebpackConfig = ({ actions }) => {
//   actions.setWebpackConfig({
//     resolve: {
//       modules: [path.resolve(__dirname, `src`), `node_modules`],
//     },
//   });
// };

exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions;
  const postTemplate = path.resolve(`src/templates/Post/index.tsx`);
  const pageTemplate = path.resolve(`src/templates/Page/index.tsx`);

  const genPosts = await graphql(`
    query {
      allMdx(
        filter: { frontmatter: { category: { in: ["blog"] } } }
        sort: { fields: frontmatter___date, order: DESC }
      ) {
        edges {
          node {
            id
            fields {
              slug
            }
            frontmatter {
              title
            }
            body
          }
        }
      }
    }
  `);

  const posts = genPosts.data.allMdx.edges;

  posts.forEach((post, index) => {
    const previous = index === posts.length - 1 ? null : posts[index + 1].node;
    const next = index === 0 ? null : posts[index - 1].node;

    createPage({
      path: `${post.node.fields.slug}`,
      component: postTemplate,
      context: {
        slug: `${post.node.fields.slug}`,
        previous,
        next,
      },
    });
  });

  const genPages = await graphql(`
    query {
      allMdx(
        filter: { frontmatter: { category: { in: ["page"] } } }
        sort: { fields: frontmatter___date, order: DESC }
      ) {
        edges {
          node {
            id
            fields {
              slug
            }
            frontmatter {
              title
            }
            body
          }
        }
      }
    }
  `);

  const pages = genPages.data.allMdx.edges;

  pages.forEach((page, index) => {
    createPage({
      path: `${page.node.fields.slug}`,
      component: pageTemplate,
      context: {
        slug: `${page.node.fields.slug}`,
      },
    });
  });
};

index.mdx

category	cover	title	description	date	published	slug
blog	./cover.jpg	Test	Test	2020-06-14	true	test

Test