feat(gatsby-theme-emilia-core): Custom slug for projects via frontmatter

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

cypress/e2e/emilia.ts

@@ -58,4 +58,10 @@ describe(`gatsby-theme-emilia`, () => {
  .findByLabelText(/visit jodie project page/i)
  .findByText(/About Me/i)
  })
+ it(`should accept custom slug in frontmatter and use that as URL`, () => {
+ cy.findByLabelText(/Visit Ars Aurea project page/i)
+ .click()
+ .waitForRouteChange()
+ .assertRoute(`/ars-aurea-goldene-kunst`)
+ })
 })

examples/emilia/content/projects/ars-aurea/index.mdx

@@ -1,4 +1,5 @@
 ---
+slug: "/ars-aurea-goldene-kunst"
 cover: "./heather-ford-vAfCO8xrz0I-unsplash.jpg"
 date: "2019-09-01"
 title: "Ars Aurea"

themes/gatsby-theme-emilia-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, `/`)
  }
@@ -121,6 +121,7 @@ exports.onCreateNode = ({ node, actions, getNode, createNodeId, createContentDig
  // Check for "projects" and create the "Project" type
  if (node.internal.type === `Mdx` && source === projectsPath) {
  const fieldData = {
+ slug: node.frontmatter.slug ? node.frontmatter.slug : undefined,
  title: node.frontmatter.title,
  cover: node.frontmatter.cover,
  date: node.frontmatter.date,
@@ -230,7 +231,7 @@ exports.createPages = async ({ actions, graphql, reporter }, themeOptions) => {
  `)
 
  if (result.errors) {
- reporter.panic(`There was an error loading your projects or pages`, result.errors)
+ reporter.panicOnBuild(`There was an error loading your projects or pages`, result.errors)
  return
  }
 

themes/gatsby-theme-emilia/README.md

@@ -139,6 +139,7 @@ New projects will be shown on the index page of this theme and can be added by c
 1. Add images to the created folder (from step 1)
 1. Reference your desired images as your `cover` in the frontmatter
 1. Write your content below the frontmatter (optional)
+1. Add a `slug` to the frontmatter to use a custom slug, e.g. `slug: "/my-slug"` (Optional)
 
 **Frontmatter reference:**