Fix the category names.

app/gatsby-node.js

@@ -1,12 +1,6 @@
 const fs = require("fs")
 const categories = JSON.parse(fs.readFileSync("src/data/categories.json"))
-
-function createSlug (categoryName) {
-    categoryName = categoryName.toLowerCase();
-    categoryName = categoryName.replace(/ /g, "-");
-    categoryName = categoryName.replace(/,/g, "");
-    return categoryName;
-};
+var slugify = require('slugify')
 
 exports.createPages = async function ({ actions, graphql }) {
   const { createPage } = actions
@@ -34,8 +28,9 @@ exports.createPages = async function ({ actions, graphql }) {
       }
     `,
     {categoryName: category.name})
+    console.log(category.name, data.data)
     createPage({
-        path: createSlug(category.name),
+        path: slugify(category.name),
         component: require.resolve("./src/templates/categoryTemplate.js"),
         context: {
             categoryName: category.name,

app/package-lock.json

@@ -19779,9 +19779,9 @@
       }
     },
     "slugify": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/slugify/-/slugify-1.4.0.tgz",
-      "integrity": "sha512-FtLNsMGBSRB/0JOE2A0fxlqjI6fJsgHGS13iTuVT28kViI4JjUiNqp/vyis0ZXYcMnpR3fzGNkv+6vRlI2GwdQ=="
+      "version": "1.4.5",
+      "resolved": "https://registry.npmjs.org/slugify/-/slugify-1.4.5.tgz",
+      "integrity": "sha512-WpECLAgYaxHoEAJ8Q1Lo8HOs1ngn7LN7QjXgOLbmmfkcWvosyk4ZTXkTzKyhngK640USTZUlgoQJfED1kz5fnQ=="
     },
     "snapdragon": {
       "version": "0.8.2",

app/package.json

@@ -22,7 +22,8 @@
     "react-dom": "^16.10.2",
     "react-helmet": "^5.2.1",
     "react-star-rating-component": "^1.4.1",
-    "react-star-ratings": "^2.3.0"
+    "react-star-ratings": "^2.3.0",
+    "slugify": "^1.4.5"
   },
   "devDependencies": {
     "eslint": "^7.7.0",

app/src/components/sidebar.js

@@ -2,13 +2,7 @@ import React from "react"
 import { Nav } from "react-bootstrap"
 import { StaticQuery, graphql } from "gatsby"
 import "../styles/sidebar.css"
-
-function createSlug(categoryName) {
-  categoryName = categoryName.toLowerCase()
-  categoryName = categoryName.replace(/ /g, "-")
-  categoryName = categoryName.replace(/,/g, "")
-  return categoryName
-}
+var slugify = require('slugify')
 
 export default () => {
   return (
@@ -20,6 +14,7 @@ export default () => {
               node {
                 id
                 name
+                emoji
               }
             }
           }
@@ -34,8 +29,8 @@ export default () => {
             {data.allCategoriesJson.edges.map(function(x, index) {
               return (
                 <Nav.Item>
-                  <Nav.Link href={createSlug(x.node.name)}>
-                    {x.node.name}
+                  <Nav.Link href={slugify(x.node.name)}>
+                    {x.node.emoji} {x.node.name}
                   </Nav.Link>
                 </Nav.Item>
               )

app/src/data/categories.json

@@ -1,18 +1,21 @@
 [
   {
-    "name": "🚀 Startups and Business"
+    "name": "Startups and Business",
+    "emoji": "🚀"
   },
   {
-    "name": "☯️ Philosophy and Psychology"
+    "name": "Philosophy And Psychology",
+    "emoji": "☯️"
   },
   {
-    "name": "👩🏾 Autobiographies and Biographies"
+    "name": "Autobiographies and Biographies",
+    "emoji": "👩🏾"
   },
   {
     "name": "History"
   },
   {
-    "name": "Evolution, Science and Medicine"
+    "name": "Science and Medicine"
   },
   {
     "name": "Logic and Problem Solving"
@@ -38,9 +41,6 @@
   {
     "name": "Theater and Film"
   },
-  {
-    "name": "Fiction"
-  },
   {
     "name": "Health"
   },