diff --git a/CHANGELOG.md b/CHANGELOG.md
index b10971a..7f043c6 100644
--- a/CHANGELOG.md
+++ b/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)
diff --git a/src/App.js b/src/App.js
index 1ce5458..101f7c0 100644
--- a/src/App.js
+++ b/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 {
diff --git a/src/components/PostCard.js b/src/components/PostCard.js
index 3d4505d..a38d013 100644
--- a/src/components/PostCard.js
+++ b/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 }) => (
diff --git a/src/components/PostCategoriesNav.js b/src/components/PostCategoriesNav.js
index 2a8a629..9f7aa68 100644
--- a/src/components/PostCategoriesNav.js
+++ b/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 }) => (
{category.title}
diff --git a/src/util/url.js b/src/util/url.js
new file mode 100644
index 0000000..6e2c9cd
--- /dev/null
+++ b/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('/')