fix: fix toc and refactor slugify

gatsby-node.js

@@ -1,7 +1,6 @@
 const path = require("path");
 const createPaginatedPages = require("gatsby-paginate");
 const _ = require("lodash");
-const { createTags } = require("./src/utils/createTags");
 
 const createMetaPage = ({
   type,
@@ -163,14 +162,14 @@ exports.createPages = ({ actions, graphql }) => {
     const categories = _(edges)
       .map((item) => _.get(item, ["node", "frontmatter", "categories"], []))
       .flatten()
-      .map((item) => createTags(item))
+      .map((item) => slugify(item, {lower:true}))
       .uniq()
       .value();
 
     categories.forEach((category) => {
       const filteredEdges = edges.filter(({ node }) =>
         node.frontmatter.categories
-          .map((category) => createTags(category))
+          .map((category) => slugify(category, {lower:true}))
           .includes(category)
       );
 

package.json

@@ -41,6 +41,7 @@
     "react-modal-video": "^1.2.9",
     "react-popover": "^0.5.10",
     "react-refresh": "^0.14.0",
+    "slugify": "^1.6.5",
     "string-similarity": "^4.0.4"
   },
   "keywords": [

src/common/blog-post/Post.js

@@ -1,5 +1,6 @@
-import React, { useState, useEffect, Fragment } from "react";
+import React, { useState, useEffect } from "react";
 import { format, parseISO } from "date-fns";
+import slugify from "slugify";
 
 import parseHtml from "../../../scripts/parse-html";
 
@@ -12,10 +13,7 @@ const TableOfContents = () => {
   const getTocId = (element) => {
     return element.id
       ? element.id
-      : element.textContent
-          .toLowerCase()
-          .replace(/ /g, "-")
-          .replace(/[^a-z0-9\-]/g, "");
+      : slugify(element.textContent, {replacement: '-', remove: /[^a-z0-9\-]/g, lower: true})
   };
 
   useEffect(() => {
@@ -27,26 +25,22 @@ const TableOfContents = () => {
       });
     setToc(toc);
   });
-  console.log(toc);
-
+
   return (
-    <Fragment>
       <details className='blog-toc' open>
         <summary>Table of Contents</summary>
         <ul>
           {toc.map((item, index) => {
             const level = +item.tagName[1] - 2;
             const style = { paddingLeft: `${20 * level}px` };
-            let className = "toc-item";
             return (
-              <li className={className} style={style} key={index}>
+              <li className="toc-item" style={style} key={index}>
                 <a href={`#${item.id}`}>{item.textContent}</a>
               </li>
             );
           })}
         </ul>
       </details>
-    </Fragment>
   );
 };
 
@@ -55,7 +49,17 @@ const Post = ({ post, full }) => {
   const { hasPreview, previewHtml, mainHtml, previewDescription } =
     parseHtml(post);
 
-  const html = full ? mainHtml : hasPreview ? previewHtml : previewDescription;
+  let html = '';
+
+  if (full) {
+    html = mainHtml
+  } else {
+    if (hasPreview) {
+      html = previewHtml
+    } else {
+      html = previewDescription;
+    }
+  }
 
   return (
     <div className='blog-post' key={post.id}>
@@ -70,9 +74,7 @@ const Post = ({ post, full }) => {
                   category !== "_" && (
                     <span className='blog-post-category' key={category}>
                       <a
-                        href={`/blog/categories/${category
-                          .toLowerCase()
-                          .replace(" ", "-")}`}
+                        href={`/blog/categories/${slugify(category, {lower: true})}`}
                       >
                         {category}
                       </a>

src/common/blog-post/PostCard.js

@@ -1,8 +1,8 @@
 import React from "react";
 import { format, parseISO } from "date-fns";
+import slugify from "slugify";
 
 import parseHtml from "../../../scripts/parse-html";
-import { createTags } from "../../utils/createTags";
 
 const formatPostDate = (post) =>
   format(parseISO(post.frontmatter.date), "MMMM d, yyyy");
@@ -41,17 +41,17 @@ const PostCard = ({ post, full }) => {
           {categories.length > 0 && (
             <div className='blog-post-categories'>
               {categories.map(
-                (category, i) =>
+                (category, _) =>
                   category !== "_" && (
                     <span className='blog-post-category' key={category}>
-                      <a href={`/blog/categories/${createTags(category)}`}>
+                      <a className="blog-post-category-link" href={`/blog/categories/${slugify(category, {lower: true})}`}>
                         {category}
                       </a>
                     </span>
                   )
               )}
               {url && (
-                <span className='blog-post-category'>
+                <span className='blog-post-category blog-post-category-link'>
                   External
                 </span>
               )}

src/stylesheets/blog.scss

@@ -103,20 +103,20 @@ $tablet: "screen and (max-width : 900px)";
         &:last-child {
           margin-right: 0;
         }
-
-        a {
+      }
+
+      .blog-post-category-link {
           display: inline-block;
           padding: 10px 12px;
           border-radius: 18px;
           color: #999999;
           background-color: #f7f7f7;
           text-decoration: none;
+      }
 
-          &:hover {
-            color: #9c9c9c;
-            background-color: rgb(231, 231, 231);
-          }
-        }
+      a.blog-post-category-link:hover {
+          color: #9c9c9c;
+          background-color: rgb(231, 231, 231);
       }
     }