Add built in slug for gatsby-plugin-mdx (#25767)

* initial slug query

* initial commit for slug, behavior not ideal

* initial commit, not ideal behavior

* undo gatsby-dev in packagejson

* should be nullable

* use relative path from context node instead

* use relative path from context node instead

* with relative path we don't need to slugify slashes

* add whitespace

* better naming

* add another test case

* use resolvable extensions list

* add additional tests

* fix typo in test

* use path for parsing instead

* can be const

* fix test typos

* add minor comment

* make some minor changes to remove try/catch

Co-authored-by: Laurie Barth <laurie@LauriesrkLaptop.fios-router.home>

e2e-tests/mdx/cypress/integration/pages.js

@@ -15,4 +15,24 @@ describe(`Pages`, () => {
         cy.visit(`/`).waitForRouteChange()
         cy.getTestElement(`external`).contains(`Now an external import`)
     })
+
+    it (`generates slug for mdx in pages dir`, () => {
+        cy.visit(`/list`).waitForRouteChange()
+        cy.getTestElement(`mdx-slug`).contains(`another`)
+    })
+
+    it (`generates complex slug with md extension`, () => {
+        cy.visit(`/list`).waitForRouteChange()
+        cy.getTestElement(`md-slug`).contains(`my-blog`)
+    })
+
+    it (`generates a slug with an index file`, () => {
+        cy.visit(`/list`).waitForRouteChange()
+        cy.getTestElement(`complex-slug`).contains(`about`)
+    })
+
+    it (`generates a slug with a slash`, () => {
+        cy.visit(`/list`).waitForRouteChange()
+        cy.getTestElement(`embed-slug`).contains(`about/embedded`)
+    })
 })

e2e-tests/mdx/gatsby-config.js

@@ -10,8 +10,16 @@ module.exports = {
         path: `${__dirname}/src/pages/`,
       },
     },
+    {
+      resolve: `gatsby-source-filesystem`,
+      options: {
+        name: `pages`,
+        path: `${__dirname}/src/posts`,
+      },
+    },
     {resolve: `gatsby-plugin-mdx`,
     options: {
+      extensions: [`.mdx`, `.md`],
       defaultLayouts: {
         default: require.resolve("./src/components/layout.js"),
       },

e2e-tests/mdx/src/pages/another.mdx

@@ -0,0 +1 @@
+This is to add another source page for slugification.

e2e-tests/mdx/src/pages/list.js

@@ -0,0 +1,46 @@
+import React from 'react'
+import { graphql } from 'gatsby'
+
+const ListPage = ({ data }) => {
+  const anotherPage = data.another.nodes[0]
+  const blogPage = data.blog.nodes[0]
+  const aboutPage = data.complex.nodes[0]
+  const embedPage = data.embed.nodes[0]
+
+
+  return (
+    <div>
+      <div data-testid="mdx-slug">{anotherPage.slug}</div>
+      <div data-testid="md-slug">{blogPage.slug}</div>
+      <div data-testid="complex-slug">{aboutPage.slug}</div>
+      <div data-testid="embed-slug">{embedPage.slug}</div>
+
+    </div>
+  )
+}
+
+export const query = graphql`
+{
+    another: allMdx(filter: {slug: {eq: "another"}}) {
+      nodes {
+        slug
+      }
+    }
+    blog: allMdx(filter: {slug: {eq: "my-blog"}}) {
+      nodes {
+        slug
+      }
+    }
+    complex: allMdx(filter: {slug: {eq: "about/"}}) {
+      nodes {
+        slug
+      }
+    }
+    embed: allMdx(filter: {slug: {eq: "about/embedded"}}) {
+      nodes {
+        slug
+      }
+    }
+  }
+`
+export default ListPage

e2e-tests/mdx/src/posts/about/embedded.mdx

@@ -0,0 +1 @@
+This is a page that should include a slash slug

e2e-tests/mdx/src/posts/about/index.mdx

@@ -0,0 +1 @@
+This should be an about page we can access with a nested slug.

e2e-tests/mdx/src/posts/my-blog.md

@@ -0,0 +1 @@
+Let's see if we can generate a slug for this too

packages/gatsby-plugin-mdx/gatsby/source-nodes.js

@@ -9,6 +9,8 @@ const remove = require(`unist-util-remove`)
 const toString = require(`mdast-util-to-string`)
 const generateTOC = require(`mdast-util-toc`)
 const prune = require(`underscore.string/prune`)
+const slugify = require(`slugify`)
+const path = require(`path`)
 
 const debug = require(`debug`)(`gatsby-plugin-mdx:extend-node-type`)
 const getTableOfContents = require(`../utils/get-table-of-content`)
@@ -133,6 +135,32 @@ module.exports = (
       rawBody: { type: `String!` },
       fileAbsolutePath: { type: `String!` },
       frontmatter: { type: `MdxFrontmatter` },
+      slug: {
+        type: `String`,
+        async resolve(mdxNode, args, context) {
+          const nodeWithContext = context.nodeModel.findRootNodeAncestor(
+            mdxNode,
+            node => node.internal && node.internal.type === `File`
+          )
+
+          if (!nodeWithContext) {
+            return null
+          }
+          const fileRelativePath = nodeWithContext.relativePath
+
+          const parsedPath = path.parse(fileRelativePath)
+
+          let relevantPath
+          if (parsedPath.name === `index`) {
+            relevantPath = fileRelativePath.replace(parsedPath.base, ``)
+          } else {
+            relevantPath = fileRelativePath.replace(parsedPath.ext, ``)
+          }
+          return slugify(relevantPath, {
+            remove: /[^\w\s$*_+~.()'"!\-:@/]/g, // this is the set of allowable characters
+          })
+        },
+      },
       body: {
         type: `String!`,
         async resolve(mdxNode) {

packages/gatsby-plugin-mdx/package.json

@@ -46,6 +46,7 @@
     "remark": "^10.0.1",
     "remark-retext": "^3.1.3",
     "retext-english": "^3.0.4",
+    "slugify": "^1.4.4",
     "static-site-generator-webpack-plugin": "^3.4.2",
     "style-to-object": "^0.3.0",
     "underscore.string": "^3.3.5",