gatsby-node.js

const componentWithMDXScope = require("gatsby-plugin-mdx/component-with-mdx-scope");

const path = require("path");

const startCase = require("lodash.startcase");

const config = require("./config");

exports.createPages = ({ graphql, actions }) => {
  const { createPage } = actions;

  return new Promise((resolve, reject) => {
    resolve(
      graphql(
        `
          {
            allMdx {
              edges {
                node {
                  fields {
                    id
                  }
                  tableOfContents
                  fields {
                    slug
                  }
                }
              }
            }
          }
        `
      ).then(result => {
        if (result.errors) {
          console.log(result.errors); // eslint-disable-line no-console
          reject(result.errors);
        }

        // Create blog posts pages.
        result.data.allMdx.edges.forEach(({ node }) => {
          createPage({
            path: node.fields.slug ? node.fields.slug : "/",
            component: path.resolve("./src/templates/docs.js"),
            context: {
              id: node.fields.id
            }
          });
        });
      })
    );
  });
};

exports.onCreateWebpackConfig = ({ actions }) => {
  actions.setWebpackConfig({
    resolve: {
      modules: [path.resolve(__dirname, "src"), "node_modules"],
      alias: { 
        $components: path.resolve(__dirname, "src/components"),
        buble: '@philpl/buble' // to reduce bundle size
      }
    }
  });
};

exports.onCreateBabelConfig = ({ actions }) => {
  actions.setBabelPlugin({
    name: "@babel/plugin-proposal-export-default-from"
  });
};

exports.onCreateNode = ({ node, getNode, actions }) => {
  const { createNodeField } = actions;

  if (node.internal.type === `Mdx`) {
    const parent = getNode(node.parent);

    let value = parent.relativePath.replace(parent.ext, "");

    if (value === "index") {
      value = "";
    }

    let slug = `/${value}`;

    let url = "";

    if(config?.gatsby?.trailingSlash) {
      slug = value === "" ? `/` : `/${value}/`
    }

    if (config?.gatsby?.siteUrl && config?.gatsby?.pathPrefix) {
      url = `${config.gatsby.siteUrl}${config.gatsby.pathPrefix}${slug}`
    }

    createNodeField({
      name: `slug`,
      node,
      value: `${slug}`,
    });

    createNodeField({
      name: `url`,
      node,
      value: `${url}`,
    });

    createNodeField({
      name: `sourceCategory`,
      node,
      value: `learn`,
    });

    createNodeField({
      name: "id",
      node,
      value: node.id
    });

    createNodeField({
      name: "title",
      node,
      value: node.frontmatter.title || startCase(parent.name)
    });
  }
};

exports.createSchemaCustomization = ({ actions }) => {
  const { createTypes } = actions

  createTypes(`
    type Mdx implements Node {
      frontmatter: MdxFrontmatter!
    }
    type MdxFrontmatter {
      metaTitle: String
      metaDescription: String
      canonicalUrl: String
    }
  `)
}