Add breadcrumbs to each page

src/core/database.js

@@ -3,20 +3,19 @@ const { getContent } = require('./filesystem')
 async function generateDatabase (manifest) {
   const db = []
 
-  const _recursive = async ({ items, ...item }, bc = []) => {
+  const _recursive = async ({ items, ...item }) => {
     if (item.input) {
       db.push({
         url: item.url,
-        breadcrumb: bc,
         title: item.title,
+        breadcrumb: item.breadcrumb,
         content: await getContent(item.input),
       })
     }
 
     if (items) {
-      const breadcrumb = bc.concat(item.title)
       await Promise.all(
-        items.map(i => _recursive(i, breadcrumb))
+        items.map(i => _recursive(i))
       )
     }
   }

src/core/hydrate.js

@@ -140,6 +140,22 @@ async function hydrateTree (tree, config, onRegenerate) {
         throw new Error(`Duplicated URL was found: ${duplicated.join('\n\t- ')}`)
       }
 
+      // continue the breadcrumb from parent
+      if (config.breadcrumbs && metaData.breadcrumbs !== false) {
+        const breadcrumbs = []
+        const breadcrumbsParent = itemParent.breadcrumbs || []
+
+        breadcrumbsParent
+          .concat({ title: hydratedItem.title, url: hydratedItem.url })
+          // only add unique urls to the breadcrumb
+          .forEach(crumb =>
+            breadcrumbs.findIndex(i => i.url === crumb.url) === -1 &&
+            breadcrumbs.push(crumb)
+          )
+
+        hydratedItem.breadcrumbs = breadcrumbs
+      }
+
       // pull in source items if one exists
       if (metaData.source) {
         const source = await walkSource(config.temp, hoistedItem.path, metaData)

src/core/output.js

@@ -27,6 +27,7 @@ module.exports = async (entrypoints, props) => {
 
       await fs.outputFile(outputHtml, template)
       await fs.outputJson(outputJson, {
+        title: item.title,
         content: item.content,
       })
     }

src/utils/config.js

@@ -28,6 +28,7 @@ const DEFAULT_CONFIG = {
   languages: ['bash', 'json'],
   header_links: [],
   theme: 'default',
+  breadcrumbs: true,
   prefix_titles: false,
   table_of_contents: {
     page: true,

tests/manifest.test.js

@@ -19,13 +19,21 @@ describe('integration: manifest', () => {
     expect(res.toc.folder[0].title).to.equal('The Foo')
     expect(res.toc.folder[0].description).to.equal('This is a test')
     expect(res.toc.folder[0].url).to.equal('/foo/')
+    expect(res.breadcrumbs).to.have.length(1)
+    expect(res.breadcrumbs[0].title).to.equal('Mock')
+    expect(res.breadcrumbs[0].url).to.equal('/')
     expect(res.items).to.have.length(7)
     expect(res.items[0].path).to.equal('foo')
     expect(res.items[0].title).to.equal('The Foo')
     expect(res.items[0].description).to.equal('This is a test')
     expect(res.items[0].url).to.equal('/foo/')
     expect(res.items[0].input).to.equal(syspath.resolve(__dirname, 'mock/foo/index.md'))
     expect(res.items[0].outputDir).to.equal('.gitdocs_build/foo/')
+    expect(res.items[0].breadcrumbs).to.have.length(2)
+    expect(res.items[0].breadcrumbs[0].title).to.equal('Mock')
+    expect(res.items[0].breadcrumbs[0].url).to.equal('/')
+    expect(res.items[0].breadcrumbs[1].title).to.equal('The Foo')
+    expect(res.items[0].breadcrumbs[1].url).to.equal('/foo/')
     expect(res.items[0].items).to.have.length(3)
     expect(res.items[1].title).to.equal('Garply')
     expect(res.items[1].items[1].draft).to.be.true()
@@ -38,11 +46,17 @@ describe('integration: manifest', () => {
     expect(res.items[4].url).to.equal('/gitdocs/')
     expect(res.items[4].input).to.match(/\/@repos\/gitdocs/)
     expect(res.items[4].outputDir).to.equal('.gitdocs_build/gitdocs/')
+    expect(res.items[4].breadcrumbs).to.have.length(2)
+    expect(res.items[4].breadcrumbs[0].title).to.equal('Mock')
+    expect(res.items[4].breadcrumbs[0].url).to.equal('/')
+    expect(res.items[4].breadcrumbs[1].title).to.equal('GitDocs')
+    expect(res.items[4].breadcrumbs[1].url).to.equal('/gitdocs/')
     expect(res.items[4].items).to.have.length(1)
     expect(res.items[4].items[0].path).to.equal('externals.md')
     expect(res.items[4].items[0].title).to.equal('Externals')
     expect(res.items[4].items[0].url).to.equal('/gitdocs/externals/')
     expect(res.items[5].component).to.equal('Divider')
     expect(res.items[6].title).to.equal('The Quux')
+    expect(res.items[6].items[1].breadcrumbs).to.be.undefined()
   })
 })

tests/mock/qux/corge.md

@@ -1 +1,4 @@
+---
+breadcrumbs: false
+---
 # The Corge

themes/default/breadcrumbs/index.js

@@ -0,0 +1,36 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import {
+  Wrapper,
+  CrumbWrapper,
+  Crumb,
+  Seperator,
+} from './styles'
+
+const Breadcrumbs = (props) => {
+  // don't show breadcrumbs if there is only one item
+  if (props.items.length < 2) {
+    return <div />
+  }
+
+  return (
+    <Wrapper>
+      {props.items.map((item, i) => item.url && (
+        <CrumbWrapper key={`breadcrumbs-${item.title}`}>
+          {i > 0 && <Seperator size={14} />}
+          <Crumb to={item.url}>{item.title}</Crumb>
+        </CrumbWrapper>
+      ))}
+    </Wrapper>
+  )
+}
+
+Breadcrumbs.propTypes = {
+  items: PropTypes.array,
+}
+
+Breadcrumbs.defaultProps = {
+  items: [],
+}
+
+export default Breadcrumbs

themes/default/breadcrumbs/styles.js

@@ -0,0 +1,31 @@
+import styled from 'react-emotion'
+import { Link } from 'react-router-dom'
+import { ChevronRight } from 'react-feather'
+
+export const Wrapper = styled('nav')`
+  margin-bottom: 20px;
+`
+
+export const CrumbWrapper = styled('div')`
+  display: inline-block;
+`
+
+export const Crumb = styled(Link)`
+  color: #848B8E;
+  font-weight: 600;
+  font-size: 1rem;
+  text-decoration: none;
+  opacity: .5;
+  transition: opacity .1s;
+  &:hover {
+    opacity: 1;
+  }
+`
+
+export const Seperator = styled(ChevronRight)`
+  display: inline-block;
+  opacity: .2;
+  padding: 0 5px;
+  position: relative;
+  top: 2px;
+`

themes/default/page/index.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react'
 import Helmet from 'react-helmet'
 import axios from 'axios'
 import Markdown from '../markdown'
+import Breadcrumbs from '../breadcrumbs'
 import Loading from '../loading'
 import TocPage from '../toc/page'
 import TocFolder from '../toc/folder'
@@ -90,6 +91,9 @@ export default class Page extends Component {
               <title>{route.title}</title>
             </Helmet>
 
+            {route.breadcrumbs &&
+              <Breadcrumbs items={route.breadcrumbs} />}
+
             {loading
               ? <Loading />
               : (

themes/default/search/index.js

@@ -151,25 +151,21 @@ class Search extends Component {
   }
 
   renderBreadCrumb (result) {
-    return result
-      .breadcrumb
+    return result.breadcrumb
       .slice(1, result.breadcrumb.length)
-      .concat(result.title)
-      .map((b, i) => (
-        <span key={`${b}-${i}`}>
-          {
-            i !== 0 &&
-            <ChevronRight
-              size={14}
-              style={{
-                display: 'inline-block',
-                padding: '0 .25rem',
-                position: 'relative',
-                top: 2,
-              }}
-            />
-          }
-          {b}
+      .map(({ title }, i) => (
+        <span key={`${title}-${i}`}>
+          {i !== 0 && <ChevronRight
+            size={14}
+            style={{
+              display: 'inline-block',
+              padding: '0 .25rem',
+              position: 'relative',
+              top: 2,
+            }}
+          />}
+
+          {title}
         </span>
       ))
   }
@@ -181,7 +177,7 @@ class Search extends Component {
     // Map over search results and create links
     const items = results.map((r, i) =>
       <Result
-        key={r.input}
+        key={r.url}
         selected={i === selectedIndex}
         innerRef={ref => i === selectedIndex ? this.activeItem = ref : null}
         onClick={this.clearSearch}