Add slugify() util function

CHANGELOG.md

@@ -1,3 +1,7 @@
+## 0.2.6 - 2018-05-25
+
+* Add slugify() util function
+
 ## 0.2.5 - 2018-05-25
 
 * Upgrade CMS (1.8.2)

src/App.js

@@ -2,7 +2,6 @@ import React, { Component } from 'react'
 import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
 import Helmet from 'react-helmet'
 import _findIndex from 'lodash/findIndex'
-import _kebabCase from 'lodash/kebabCase'
 
 import ScrollToTop from './components/ScrollToTop'
 import Meta from './components/Meta'
@@ -18,6 +17,7 @@ import GithubCorner from './components/GithubCorner'
 import ServiceWorkerNotifications from './components/ServiceWorkerNotifications'
 import AOS from './components/AOS'
 import data from './data.json'
+import { slugify } from './util/url'
 import { documentHasTerm, getCollectionTerms } from './util/collection'
 
 class App extends Component {
@@ -142,7 +142,7 @@ class App extends Component {
                 const slug = props.match.params.slug
                 const singlePostID = _findIndex(
                   posts,
-                  item => _kebabCase(item.title) === slug
+                  item => slugify(item.title) === slug
                 )
                 const singlePost = posts[singlePostID]
                 const nextPost = posts[singlePostID + 1]
@@ -152,10 +152,10 @@ class App extends Component {
                   <SinglePost
                     singlePost={singlePost}
                     nextPostURL={
-                      nextPost && `/blog/${_kebabCase(nextPost.title)}/`
+                      nextPost && `/blog/${slugify(nextPost.title)}/`
                     }
                     prevPostURL={
-                      prevPost && `/blog/${_kebabCase(prevPost.title)}/`
+                      prevPost && `/blog/${slugify(prevPost.title)}/`
                     }
                     {...props}
                   />

src/components/PostCard.js

@@ -1,13 +1,13 @@
 import React from 'react'
 import { Link } from 'react-router-dom'
-import _kebabCase from 'lodash/kebabCase'
 
+import { slugify } from '../util/url'
 import BackgroundImage from './BackgroundImage'
 import './PostCard.css'
 
 const PostCard = ({ postItem, className = '', ...props }) => (
   <Link
-    to={`/blog/${_kebabCase(postItem.title)}/`}
+    to={slugify(`/blog/${postItem.title}/`)}
     className={`PostCard ${className}`}
     {...props}
   >

src/components/PostCategoriesNav.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { NavLink } from 'react-router-dom'
-import _kebabCase from 'lodash/kebabCase'
 
+import { slugify } from '../util/url'
 import './PostCategoriesNav.css'
 
 const PostCategoriesNav = ({ categories }) => (
@@ -14,7 +14,7 @@ const PostCategoriesNav = ({ categories }) => (
         <NavLink
           className='NavLink'
           key={category.title + index}
-          to={`/blog/category/${_kebabCase(category.title)}/`}
+          to={`/blog/category/${slugify(category.title)}/`}
         >
           {category.title}
         </NavLink>

src/util/url.js

@@ -0,0 +1,8 @@
+import _kebabCase from 'lodash/kebabCase'
+
+export const slugify = (string = '') =>
+  // keeps forward slashes
+  string
+    .split('/')
+    .map(_kebabCase)
+    .join('/')