Remove post date from Gatsby URL slug

Question

We have a Gatsby Blog with a folder structure similar to this content/blog/bees-are-dying/index.mdx. Our blog keeps growing and the folder gets cluttered, which is why we want to include dates into the folder names. So instead of bees-are-dying we name the folder 20210309-bees-are-dying.

However, we do not want the date to appear in the slug. The URL should stay as www.web.com/blog/bees-are-dying. To further complicate things, not all folders will include the date in the folder name...

How can I set this up in Gastby 3?

Cheers!

Related Issues want to do this the other way around and add the date to the slug (1), remove parent folder names from the slug (2) or remove a fixed-length prefix in non-Gatsby environments (3).

Johnny · Answer 1 · 2021-03-09T22:12:00.620

Solved. By checking if eight digits (YYYYMMDD) are present at the beginning of the slug in gatsby-node.js file. With this code snippet:

    /* gatsby-node.js */
    
    let slug = createFilePath({ node, getNode, basePath: `pages` })
    console.log(slug)

    if (!isNaN(slug.substring(1, 9))) {
        slug = slug.replace(slug.substring(1, 10), "");
        console.log("removed date. new slug: " + slug);
    }

I am sure there is a better way to do this. This only checks if the digits are numbers, and does not validate if the number is a date. It also assumes there is a trailing hyphen to be removed. Note this does not match the folder structure mentioned in the question, rather the basic one pages/bees-are-dying.mdx used in the Gatsby Tutorial .

Full gatsby-node.js here:

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

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

  if (node.internal.type === `MarkdownRemark`) {
    const fileNode = getNode(node.parent)
    console.log(`\n`, fileNode.relativePath)

    let slug = createFilePath({ node, getNode, basePath: `pages` })
    console.log(slug)
    /* 
        Checks if 8 numbers are present at start of slug string,
        with the isNaN numerical check recommended here https://stackoverflow.com/a/175787/9761761
        If yes, these numbers and the following hyphen are removed
    */
    if (!isNaN(slug.substring(1, 9))) {
        slug = slug.replace(slug.substring(1, 10), "");
        console.log("removed date. new slug: " + slug);
    }
    createNodeField({
      node,
      name: `slug`,
      value: slug,
    })
  }
}

exports.createPages = async ({ graphql, actions }) => {
  // **Note:** The graphql function call returns a Promise
  // see: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise for more info
  const { createPage } = actions

  const result = await graphql(`
    query {
      allMarkdownRemark {
        edges {
          node {
            fields {
              slug
            }
          }
        }
      }
    }
  `)
  result.data.allMarkdownRemark.edges.forEach(({ node }) => {
    createPage({
      path: node.fields.slug,
      component: path.resolve(`./src/templates/blog-post.js`),
      context: {
        // Data passed to context is available
        // in page queries as GraphQL variables.
        slug: node.fields.slug,
      },
    })
  })
}

Known Issue: Two pages that share the same name after the date will overwrite each other. If two files /20210309-bees-are-dying.mdx and /20690420-bees-are-dying.mdx exist, only one page with slug /bees-are-dying/ will prevail.

Remove post date from Gatsby URL slug

1 Answers1