merge !42

resolves #47 fix 404 layout

9 files changed, 46 insertions, 35 deletions

diff --git a/src/css/navigation-explore.css b/src/css/navigation-explore.css
index ef9042b..d5b634a 100644
--- a/src/css/navigation-explore.css
+++ b/src/css/navigation-explore.css
@@ -7,7 +7,7 @@
   height: inherit;
 }
 
-.navigation-explore .current {
+.navigation-explore .context {
   flex-shrink: 0;
   color: #5d5d5d;
   background-color: #fafafa;
@@ -23,11 +23,11 @@
   height: var(--drawer-height);
 }
 
-.navigation-explore.is-active .current {
+.navigation-explore.is-active .context {
   box-shadow: 0 1px 0 #e1e1e1;
 }
 
-.navigation-explore .current .version {
+.navigation-explore .context .version {
   background-image: url(../img/chevron.svg);
   background-repeat: no-repeat;
   background-position: right 0.5rem top 50%;
diff --git a/src/helpers/relativize.js b/src/helpers/relativize.js
index f9788c0..090ee24 100644
--- a/src/helpers/relativize.js
+++ b/src/helpers/relativize.js
@@ -4,7 +4,7 @@ const { posix: path } = require('path')
 
 // TODO memoize
 module.exports = (from, to) => {
-  if (to.charAt() === '#') return to
+  if (!from || to.charAt() === '#') return to
   let hash = ''
   const hashIdx = to.indexOf('#')
   if (~hashIdx) {
diff --git a/src/js/01-navigation.js b/src/js/01-navigation.js
index 0d0ad0a..3272cf9 100644
--- a/src/js/01-navigation.js
+++ b/src/js/01-navigation.js
@@ -3,30 +3,25 @@
 
   var navContainer = document.querySelector('.navigation-container')
   var navToggle = document.querySelector('.navigation-toggle')
-  var menuPanel = navContainer.querySelector('[data-panel=menu]')
-  var currentPageItem = document.querySelector('.nav-menu .is-current-page')
-  var navState = getNavState()
-  var menuState = getMenuState(navState, navContainer.dataset.component, navContainer.dataset.version)
-
-  navContainer.querySelector('.current').addEventListener('click', function () {
-    var currentPanel = document.querySelector('.navigation .is-active[data-panel]')
-    var selectPanel = currentPanel.dataset.panel === 'menu' ? 'explore' : 'menu'
-    currentPanel.classList.toggle('is-active')
-    document.querySelector('.navigation [data-panel=' + selectPanel + ']').classList.toggle('is-active')
-  })
 
   navToggle.addEventListener('click', toggleNavigation)
   // don't let click events propagate outside of navigation container
   navContainer.addEventListener('click', concealEvent)
 
-  find('.nav-menu').forEach(function (navTree) {
-    var panel = navTree.parentElement.dataset.panel
-    find('.nav-item', navTree).forEach(function (item, idx) {
-      item.setAttribute('data-id', [panel, item.dataset.depth, idx].join('-'))
-    })
+  var menuPanel = navContainer.querySelector('[data-panel=menu]')
+  if (!menuPanel) return
+
+  var navState = getNavState()
+  var menuState = getMenuState(navState, navContainer.dataset.component, navContainer.dataset.version)
+
+  navContainer.querySelector('.context').addEventListener('click', function () {
+    var currentPanel = navContainer.querySelector('.is-active[data-panel]')
+    var activatePanel = currentPanel.dataset.panel === 'menu' ? 'explore' : 'menu'
+    currentPanel.classList.toggle('is-active')
+    navContainer.querySelector('[data-panel=' + activatePanel + ']').classList.toggle('is-active')
   })
 
-  find('.nav-toggle').forEach(function (btn) {
+  find('.nav-toggle', menuPanel).forEach(function (btn) {
     var li = btn.parentElement
     btn.addEventListener('click', function () {
       li.classList.toggle('is-active')
@@ -35,6 +30,10 @@
     })
   })
 
+  find('.nav-item', menuPanel).forEach(function (item, idx) {
+    item.setAttribute('data-id', 'menu-' + item.dataset.depth + '-' + idx)
+  })
+
   var expandedItems = menuState.expandedItems || (menuState.expandedItems = [])
 
   if (expandedItems.length) {
@@ -43,12 +42,14 @@
         .map(function (itemId) {
           return '.nav-item[data-id="' + itemId + '"]'
         })
-        .join(',')
+        .join(','),
+      menuPanel
     ).forEach(function (item) {
       item.classList.add('is-active')
     })
   }
 
+  var currentPageItem = menuPanel.querySelector('.is-current-page')
   if (currentPageItem) {
     activateCurrentPath(currentPageItem).forEach(function (itemId) {
       if (expandedItems.indexOf(itemId) < 0) expandedItems.push(itemId)
@@ -104,7 +105,7 @@
   }
 
   function getExpandedItems () {
-    return find('.nav-menu .is-active').map(function (item) {
+    return find('.is-active', menuPanel).map(function (item) {
       return item.dataset.id
     })
   }
@@ -140,7 +141,6 @@
   }
 
   function find (selector, from) {
-    from = from || document
-    return [].slice.call(from.querySelectorAll(selector))
+    return [].slice.call((from || document).querySelectorAll(selector))
   }
 })()
diff --git a/src/layouts/404.hbs b/src/layouts/404.hbs
index 56405ac..46bc48e 100644
--- a/src/layouts/404.hbs
+++ b/src/layouts/404.hbs
@@ -9,13 +9,7 @@
   </head>
   <body class="status-404">
 {{> header}}
-    <div class="main-wrapper">
-      <main class="main" role="main">
-        <article class="doc">
-          <h1>Page Not Found</h1>
-        </article>
-      </main>
-    </div>
+{{> main}}
 {{> footer}}
   </body>
 </html>
diff --git a/src/partials/article.hbs b/src/partials/article.hbs
index a4c23a0..5b68a72 100644
--- a/src/partials/article.hbs
+++ b/src/partials/article.hbs
@@ -1,6 +1,17 @@
 <article class="doc">
+{{#if (eq page.layout '404')}}
+<h1>{{{or page.title 'Page Not Found'}}}</h1>
+<div class="paragraph">
+<p>The page you're looking for does not exist. It may have been moved.</p>
+</div>
+<div class="paragraph">
+<p>If you arrived on this page by clicking on a link, please notify the owner of the site that the link is broken.
+If you typed the URL of this page manually, please double check that you entered the address correctly.</p>
+</div>
+{{else}}
 {{#if page.title}}
 <h1>{{{page.title}}}</h1>
 {{/if}}
 {{{page.contents}}}
+{{/if}}
 </article>
diff --git a/src/partials/breadcrumbs.hbs b/src/partials/breadcrumbs.hbs
index 0ad0788..a860d34 100644
--- a/src/partials/breadcrumbs.hbs
+++ b/src/partials/breadcrumbs.hbs
@@ -1,4 +1,5 @@
 <nav class="crumbs" role="navigation" aria-label="breadcrumbs">
+  {{#if page.breadcrumbs}}
   <ul>
     {{#with page.componentVersion}}
     {{#if (and ./title (not (or ./root (eq @root.page.breadcrumbs.0.content ./title))))}}
@@ -15,4 +16,5 @@
     </li>
     {{/each}}
   </ul>
+  {{/if}}
 </nav>
diff --git a/src/partials/navigation-explore.hbs b/src/partials/navigation-explore.hbs
index 9b15841..7db70db 100644
--- a/src/partials/navigation-explore.hbs
+++ b/src/partials/navigation-explore.hbs
@@ -1,8 +1,10 @@
-<div class="navigation-explore" data-panel="explore">
-  <div class="current">
+<div class="navigation-explore{{#unless page.navigation}} is-active{{/unless}}" data-panel="explore">
+  {{#if page.component}}
+  <div class="context">
     <span class="title">{{page.component.title}}</span>
     <span class="version">{{page.version}}</span>
   </div>
+  {{/if}}
   <ul class="components">
     {{#each site.components}}
     <li class="component{{#if (eq this @root.page.component)}} is-current{{/if}}">
diff --git a/src/partials/navigation-menu.hbs b/src/partials/navigation-menu.hbs
index bd207b0..296f79a 100644
--- a/src/partials/navigation-menu.hbs
+++ b/src/partials/navigation-menu.hbs
@@ -1,6 +1,8 @@
+{{#if page.navigation}}
 <div class="navigation-menu is-active" data-panel="menu">
   <nav class="nav-menu">
     <h3 class="title"><a href="{{relativize page.url page.componentVersion.url}}">{{page.component.title}}</a></h3>
 {{> navigation-tree navigation=page.navigation}}
   </nav>
 </div>
+{{/if}}
diff --git a/src/partials/navigation.hbs b/src/partials/navigation.hbs
index d69e54a..93a5ce9 100644
--- a/src/partials/navigation.hbs
+++ b/src/partials/navigation.hbs
@@ -1,4 +1,4 @@
-<div class="navigation-container" data-component="{{page.component.name}}" data-version="{{page.version}}">
+<div class="navigation-container"{{#if page.component}} data-component="{{page.component.name}}" data-version="{{page.version}}"{{/if}}>
   <aside class="navigation" role="navigation">
     <div class="panels">
 {{> navigation-menu}}