chore(docs): remove slug generation from MDX doc (gatsbyjs#33915)

Co-authored-by: Lennart <[email protected]>
Co-authored-by: gatsbybot <[email protected]>

docs/docs/mdx/programmatically-creating-pages.md

@@ -91,60 +91,13 @@ title: Blog Post 2
 Gatsby is the best
 ```
 
-## Generate slugs
-
-Since MDX posts are being sourced outside of `src/pages`, each post
-needs to be given a slug which tells Gatsby the URL to render to.
-
-If you want to set the URLs in your frontmatter, you can skip this step.
-
-```javascript:title=gatsby-node.js
-const { createFilePath } = require("gatsby-source-filesystem")
-
-exports.onCreateNode = ({ node, actions, getNode }) => {
-  const { createNodeField } = actions
-
-  // you only want to operate on `Mdx` nodes. If you had content from a
-  // remote CMS you could also check to see if the parent node was a
-  // `File` node here
-  if (node.internal.type === "Mdx") {
-    const value = createFilePath({ node, getNode })
-
-    createNodeField({
-      // Name of the field you are adding
-      name: "slug",
-      // Individual MDX node
-      node,
-      // Generated value based on filepath with "blog" prefix. you
-      // don't need a separating "/" before the value because
-      // createFilePath returns a path with the leading "/".
-      value: `/blog${value}`,
-    })
-  }
-}
-```
-
-The `value` in the `createNodeField` call is the URL you'll use later
-to set up our page. `/blog${value}` is a [template
-string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)
-that will result in:
-
-- `blog-1.mdx` => `http://localhost:8000/blog/blog-1/`
-- `blog-2.mdx` => `http://localhost:8000/blog/blog-2/`
-
-[`createFilePath`](/plugins/gatsby-source-filesystem/?=gatsby-source#createfilepath)
-is a function from `gatsby-source-filesystem` that translates file
-paths to usable URLs.
-
-[`onCreateNode`](/docs/reference/config-files/gatsby-node/#onCreateNode)
-is a Gatsby lifecycle method that gets called whenever a new node is
-created. In this case only `MDX` nodes are touched.
-
 ## Create pages from sourced MDX files
 
+`gatsby-plugin-mdx` automatically adds a `slug` field to each MDX node derived from the corresponding filename. You can use special characters, whitespaces, or uppercase in the filenames, and `gastby-plugin-mdx` will "slugify" it, making the slug safe for serving over the internet and human readable.
+
 In order to create pages from the sourced MDX files, you need
 to construct a query that finds all MDX nodes and pulls out
-the `slug` field added earlier.
+the `slug` field.
 
 > **Note**: You can open up a GraphiQL console for query testing
 > in your browser at `http://localhost:8000/___graphql`
@@ -155,19 +108,14 @@ query {
     edges {
       node {
         id
-        fields {
-          # Slug field created in the last section
-          slug
-        }
+        # Slug field added by gatsby-plugin-mdx
+        slug
       }
     }
   }
 }
 ```
 
-If you skipped the last step and want to use frontmatter for your
-slugs instead of the generated field, replace `fields` with `frontmatter`.
-
 ```javascript:title=gatsby-node.js
 const path = require("path")
 
@@ -181,9 +129,7 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
         edges {
           node {
             id
-            fields {
-              slug
-            }
+            slug
           }
         }
       }
@@ -200,9 +146,9 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
   // you'll call `createPage` for each result
   posts.forEach(({ node }, index) => {
     createPage({
-      // This is the slug you created before
-      // (or `node.frontmatter.slug`)
-      path: node.fields.slug,
+      // The slug generated by gatsby-plugin-mdx doesn't contain a slash at the beginning
+      // You can prepend it with any prefix you want
+      path: `/blog/${node.slug}`,
       // This component will wrap our MDX content
       component: path.resolve(`./src/components/posts-page-layout.js`),
       // You can use the values in this context in
@@ -327,7 +273,7 @@ const BlogIndex = ({ data }) => {
       <ul>
         {posts.map(({ node: post }) => (
           <li key={post.id}>
-            <Link to={post.fields.slug}>
+            <Link to={post.slug}>
               <h2>{post.frontmatter.title}</h2>
             </Link>
             <p>{post.excerpt}</p>
@@ -348,9 +294,7 @@ export const pageQuery = graphql`
           frontmatter {
             title
           }
-          fields {
-            slug
-          }
+          slug
         }
       }
     }