feat(gatsby-theme-minimal-blog-core): Custom slug for blog posts via …

…frontmatter

You now can add a "slug" to the frontmatter to overwrite the auto-generation from the "title"

Fixes #217

cypress/e2e/minimal-blog.ts

@@ -112,6 +112,14 @@ describe(`gatsby-theme-minimal-blog`, () => {
       .get(`[data-language="jsx"]`)
       .should(`exist`)
   })
+  it(`should accept custom slug in frontmatter and use that as URL`, () => {
+    cy.findByText(
+      `Curses and Counter-curses (Bewitch Your Friends and Befuddle Your Enemies with the Latest Revenges: Hair Loss, Jelly-Legs, Tongue-Tying, and Much, Much More)`
+    )
+      .click()
+      .waitForRouteChange()
+      .assertRoute(`/curses-counter-curses-and-more`)
+  })
   it(`should render the light/dark mode toggle`, () => {
     cy.findByLabelText(/Activate Dark Mode/i)
   })

examples/minimal-blog/content/posts/curses-and-counter-courses/index.mdx

@@ -1,6 +1,7 @@
 ---
 title: "Curses and Counter-curses (Bewitch Your Friends and Befuddle Your Enemies with the Latest Revenges: Hair Loss, Jelly-Legs, Tongue-Tying, and Much, Much More)"
 date: 2019-10-25
+slug: "/curses-counter-curses-and-more"
 ---
 
 Thestral dirigible plums, Viktor Krum hexed memory charm Animagus Invisibility Cloak three-headed Dog. Half-Blood Prince Invisibility Cloak cauldron cakes, hiya Harry! Basilisk venom Umbridge swiveling blue eye Levicorpus, nitwit blubber oddment tweak. Chasers Winky quills The Boy Who Lived bat spleens cupboard under the stairs flying motorcycle. Sirius Black Holyhead Harpies, you’ve got dirt on your nose. Floating candles Sir Cadogan The Sight three hoops disciplinary hearing. Grindlewald pig’s tail Sorcerer's Stone biting teacup. Side-along dragon-scale suits Filch 20 points, Mr. Potter.

themes/gatsby-theme-minimal-blog-core/gatsby-node.js

@@ -41,7 +41,7 @@ exports.createSchemaCustomization = ({ actions, schema }, themeOptions) => {
   const { basePath } = withDefaults(themeOptions)
 
   const slugify = source => {
-    const slug = kebabCase(source.title)
+    const slug = source.slug ? source.slug : kebabCase(source.title)
 
     return `/${basePath}/${slug}`.replace(/\/\/+/g, `/`)
   }
@@ -133,7 +133,7 @@ exports.onCreateNode = ({ node, actions, getNode, createNodeId, createContentDig
   const fileNode = getNode(node.parent)
   const source = fileNode.sourceInstanceName
 
-  // Check for "projects" and create the "Project" type
+  // Check for "posts" and create the "Post" type
   if (node.internal.type === `Mdx` && source === postsPath) {
     let modifiedTags
 
@@ -147,6 +147,7 @@ exports.onCreateNode = ({ node, actions, getNode, createNodeId, createContentDig
     }
 
     const fieldData = {
+      slug: node.frontmatter.slug ? node.frontmatter.slug : undefined,
       title: node.frontmatter.title,
       date: node.frontmatter.date,
       tags: modifiedTags,
@@ -249,7 +250,7 @@ exports.createPages = async ({ actions, graphql, reporter }, themeOptions) => {
   `)
 
   if (result.errors) {
-    reporter.panic(`There was an error loading your posts or pages`, result.errors)
+    reporter.panicOnBuild(`There was an error loading your posts or pages`, result.errors)
     return
   }
 

themes/gatsby-theme-minimal-blog/README.md

@@ -223,6 +223,7 @@ New blog posts will be shown on the index page (the three most recent ones) of t
 1. Add images to the created folder (from step 1) you want to reference in your blog post
 1. Reference an image as your `banner` in the frontmatter
 1. Write your content below the frontmatter
+1. Add a `slug` to the frontmatter to use a custom slug, e.g. `slug: "/my-slug"` (Optional)
 
 **Frontmatter reference:**