From 05cff1ec0bcd2ba2fb3b7cfbb8a55f626ab9abd8 Mon Sep 17 00:00:00 2001
From: LekoArts <lekoarts@gmail.com>
Date: Tue, 7 Jan 2020 15:38:48 +0100
Subject: [PATCH] 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                               | 8 ++++++++
 .../content/posts/curses-and-counter-courses/index.mdx    | 1 +
 themes/gatsby-theme-minimal-blog-core/gatsby-node.js      | 7 ++++---
 themes/gatsby-theme-minimal-blog/README.md                | 1 +
 4 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/cypress/e2e/minimal-blog.ts b/cypress/e2e/minimal-blog.ts
index 36fe2472c..4dad9e6b2 100644
--- a/cypress/e2e/minimal-blog.ts
+++ b/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)
   })
diff --git a/examples/minimal-blog/content/posts/curses-and-counter-courses/index.mdx b/examples/minimal-blog/content/posts/curses-and-counter-courses/index.mdx
index fabd246ca..60f524502 100644
--- a/examples/minimal-blog/content/posts/curses-and-counter-courses/index.mdx
+++ b/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.
diff --git a/themes/gatsby-theme-minimal-blog-core/gatsby-node.js b/themes/gatsby-theme-minimal-blog-core/gatsby-node.js
index 53e92ca1c..fb16c1100 100644
--- a/themes/gatsby-theme-minimal-blog-core/gatsby-node.js
+++ b/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
   }
 
diff --git a/themes/gatsby-theme-minimal-blog/README.md b/themes/gatsby-theme-minimal-blog/README.md
index 280ecab9f..1007d2a88 100644
--- a/themes/gatsby-theme-minimal-blog/README.md
+++ b/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:**