feat(breadcrumb): Add breadcrumb

app.js

@@ -15,6 +15,7 @@ const about = require('./routes/about')
 const settings = require('./routes/settings')
 const sitemap = require('./routes/sitemap')
 const {initClient} = require('./services/contentful')
+const breadcrumb = require('./lib/breadcrumb')
 const app = express()
 
 // view engine setup
@@ -28,6 +29,7 @@ app.use(bodyParser.json())
 app.use(bodyParser.urlencoded({ extended: false }))
 app.use(cookieParser())
 app.use(express.static(path.join(__dirname, 'public')))
+app.use(breadcrumb())
 
 // Pass custom helpers to all our templates
 app.use(function (req, res, next) {
@@ -36,8 +38,6 @@ app.use(function (req, res, next) {
   res.locals.queryString = qs ? `?${qs}` : ''
   res.locals.query = req.query
   res.locals.currentPath = req.path
-  console.log(req.path)
-
   // Allow setting of credentials via query parameters
   const { space_id, preview_access_token, delivery_access_token } = req.query
   if (space_id && preview_access_token && delivery_access_token) { // eslint-disable-line camelcase

assets/stylesheets/global/breadcrumb.css

@@ -0,0 +1,35 @@
+@block breadcrumb {
+  margin-bottom: calc(var(--grid-gutter) / 2);
+  & ul {
+    display: flex;
+    list-style: none;
+    flex-wrap: wrap;
+    margin: 0;
+    padding: 0;
+  
+    & li {
+
+      margin: 0;
+
+      & + li {
+        margin-left: calc(var(--grid-gutter) / 4);
+      }
+
+      &:after{
+        content: ' >';
+      }
+      &:last-child:after{
+        content: '';
+      }
+
+      & a {
+        display: inline-block;
+        text-transform: capitalize;
+        &:hover {
+          color: var(--color-link-content-hover);
+        }
+
+      }
+    }
+  }
+}

assets/stylesheets/global/index.css

@@ -4,6 +4,7 @@
 @import './table-of-contents';
 @import './sidebar-menu';
 @import './main-navigation';
+@import './breadcrumb';
 
 body {
   background-color: var(--color-bg-default);

lib/breadcrumb.js

@@ -0,0 +1,27 @@
+const url = require('url')
+
+module.exports = (modifier) => {
+  return (req, res, next) => {
+    const baseUrl = url.format({ protocol: req.protocol, host: req.get('host') })
+    const parts = url.parse(req.url).pathname.split('/').filter(Boolean)
+    let items = []
+
+    items.push({ label: 'Home', url: baseUrl })
+    items = items.concat(parts.map((part, i, array) => {
+      const path = array.slice(0, i + 1).join('/')
+      return {
+        label: part.replace(/-/g, ' '),
+        url: url.resolve(baseUrl, path),
+        path: path
+      }
+    })
+    )
+    if (modifier) {
+      items = items.map(modifier)
+    }
+    // make it global
+    req.app.locals.breadcrumb = items
+    // next operation
+    next()
+  }
+}

public/stylesheets/style.css

@@ -1464,6 +1464,46 @@ display: flex;
   color: #536171;
 }
 
+.breadcrumb {
+  margin-bottom: 11px;
+}
+
+.breadcrumb ul {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  list-style: none;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+  margin: 0;
+  padding: 0;
+}
+
+.breadcrumb ul li {
+  margin: 0;
+}
+
+.breadcrumb ul li + li {
+  margin-left: 5.5px;
+}
+
+.breadcrumb ul li:after {
+  content: ' >';
+}
+
+.breadcrumb ul li:last-child:after {
+  content: '';
+}
+
+.breadcrumb ul li a {
+  display: inline-block;
+  text-transform: capitalize;
+}
+
+.breadcrumb ul li a:hover {
+  color: #3c80cf;
+}
+
 body {
   background-color: #fff;
   color: #536171;

views/layout.pug

@@ -38,7 +38,6 @@ html
               .header__logo
                 a.header__logo-link(href='/')
                   img(src='/images/logo.svg' alt='Contentful Example App')
-
               nav.header__navigation.main-navigation
                 ul
                   li
@@ -49,7 +48,14 @@ html
                     a(href=`/about${queryString}` class=(currentPath.startsWith('/about') ? 'active' : '')) About
                   li
                     a(href=`/settings${queryString}` class=(currentPath.startsWith('/settings') ? 'active' : '')) Settings
-
+      if currentPath !== '/'
+        .main__breadcrumb
+          .layout-centered
+            nav.breadcrumb
+              ul
+                each item in breadcrumb
+                  li
+                    a(href=`${item.url}${queryString}`) #{item.label}
       .main__content
         block content