From 4d1ac95d600bcc2892345ee63b36a1a913098379 Mon Sep 17 00:00:00 2001 From: Dan Allen Date: Sun, 31 Dec 2017 19:55:27 -0700 Subject: [PATCH] align templates with UI model - align templates with Antora's UI model - add relativize helper to relativize a root relative URL to the current page - add detag helper to strip HTML tags from content - detag page title in HTML title element - replace the term "domain" with "component" - rename navigation-component to navigation-menu - update navigation JavaScript to activate path to current page in navigation tree - update build preview task to assign correct properties on model - update sample UI model - remove page-versions and has-versions helpers - compare selected/latest/current using equality instead of checking boolean property --- preview-site-src/ui-model.yml | 142 +++++++++++---------- src/css/navigation-explore.css | 22 ++-- .../{navigation-domain.css => navigation-menu.css} | 6 +- src/css/site.css | 2 +- src/helpers/detag.js | 4 + src/helpers/has-versions.js | 3 - src/helpers/page-versions.js | 17 --- src/helpers/relativize.js | 14 ++ src/js/01-navigation.js | 31 +++-- src/layouts/404.hbs | 4 +- src/layouts/default.hbs | 16 +-- src/partials/article.hbs | 4 +- src/partials/breadcrumbs.hbs | 14 +- src/partials/footer-scripts.hbs | 4 +- src/partials/header-content.hbs | 2 +- src/partials/navigation-domain.hbs | 5 - src/partials/navigation-explore.hbs | 14 +- src/partials/navigation-menu.hbs | 5 + src/partials/navigation-tree.hbs | 6 +- src/partials/navigation.hbs | 2 +- src/partials/page-versions.hbs | 8 +- src/partials/toolbar.hbs | 4 +- tasks/build-preview.js | 14 +- 23 files changed, 179 insertions(+), 164 deletions(-) rename src/css/{navigation-domain.css => navigation-menu.css} (94%) create mode 100644 src/helpers/detag.js delete mode 100644 src/helpers/has-versions.js delete mode 100644 src/helpers/page-versions.js create mode 100644 src/helpers/relativize.js delete mode 100644 src/partials/navigation-domain.hbs create mode 100644 src/partials/navigation-menu.hbs diff --git a/preview-site-src/ui-model.yml b/preview-site-src/ui-model.yml index b7dfc21..22bdc87 100644 --- a/preview-site-src/ui-model.yml +++ b/preview-site-src/ui-model.yml @@ -1,90 +1,94 @@ site: url: http://localhost:5252 title: Brand Docs - domains: + components: - name: abc title: Project ABC + url: '#' versions: + - &latest_version_abc + url: '#' + version: '1.1' - url: '#' - string: '1.1' - latest: true - - url: '#' - string: '1.0' - - name: xyz + version: '1.0' + latestVersion: *latest_version_abc + - &component + name: xyz title: Project XYZ - selected: true - versions: &domain_versions - - url: '#' - string: '6.0' - latest: true - selected: true - - url: '#' - string: '5.2' + url: /xyz/6.0/index.html + versions: + - &latest_version_xyz + url: /xyz/6.0/index.html + version: '6.0' + - &component_version + url: '#' + version: '5.2' - url: '#' - string: '5.1' + version: '5.1' - url: '#' - string: '5.0' + version: '5.0' + latestVersion: *latest_version_xyz - name: 123 title: Project 123 + url: '#' versions: + - &latest_version_123 + url: '#' + version: '2.2' - url: '#' - string: '2.2' - latest: true - - url: '#' - string: '2.1' + version: '2.1' - url: '#' - string: '2.0' -title: Hardware and Software Requirements -home: false -siteRootUrl: / -editUrl: http://example.com/project-xyz/blob/master/index.adoc -domain: - name: xyz - title: Project XYZ - type: component - version: - string: '6.0' - versioned: true - versions: *domain_versions -breadcrumbs: -- title: Quickstart - url: '#' - currentPath: true -- title: Hardware and Software Requirements - url: '#' - currentPage: true -versions: -- string: '6.0' - url: '#' -- string: '5.2' - url: '#' -- string: '5.1' - url: '#' -navigation: -- title: Project XYZ - url: '#' - currentPath: true - items: - - title: Quickstart + version: '2.0' + latestVersion: *latest_version_123 +page: + title: Hardware and Software Requirements + url: /xyz/5.2/index.html + component: *component + componentVersion: *component_version + version: '5.2' + module: ROOT + home: false + editUrl: http://example.com/project-xyz/blob/master/index.adoc + breadcrumbs: + - content: Quickstart url: '#' - currentPath: true - items: - - title: Hardware and Software Requirements - url: '#' - currentPage: true - items: [] - - title: IDE Integration - url: '#' - items: [] - - title: Application Tutorial + urlType: fragment + - content: Hardware and Software Requirements + url: /xyz/5.2/index.html + urlType: internal + versions: + - version: '6.0' url: '#' - items: [] - - title: Reference + - version: '5.2' url: '#' + - version: '5.1' + url: '#' + navigation: + - root: true + content: Project XYZ + url: '#' + urlType: fragment items: - - title: Keyboard Shortcuts + - content: Quickstart + url: '#' + urlType: fragment + items: + - content: Hardware and Software Requirements + url: /xyz/5.2/index.html + urlType: internal + - title: IDE Integration + url: '#' + urlType: fragment + - content: Application Tutorial url: '#' - items: [] - - title: Importing and Exporting + urlType: fragment + - content: Reference url: '#' - items: [] + urlType: fragment + items: + - content: Keyboard Shortcuts + url: '#' + urlType: fragment + - content: Importing and Exporting + url: '#' + urlType: fragment diff --git a/src/css/navigation-explore.css b/src/css/navigation-explore.css index f954c90..9389213 100644 --- a/src/css/navigation-explore.css +++ b/src/css/navigation-explore.css @@ -35,7 +35,7 @@ padding: 0 1.5rem 0 0; } -.navigation-explore .domains { +.navigation-explore .components { flex-grow: 1; box-shadow: inset 0 1px 5px #e1e1e1; background-color: #f0f0f0; @@ -46,19 +46,19 @@ display: block; } -.navigation-explore:not(.is-active) .domains { +.navigation-explore:not(.is-active) .components { display: none; } -.navigation-explore .domain { +.navigation-explore .component { display: block; } -.navigation-explore .domain + .domain { +.navigation-explore .component + .component { margin-top: 0.5rem; } -.navigation-explore .domain .title { +.navigation-explore .component .title { font-weight: 500; } @@ -68,29 +68,29 @@ padding-left: 0.5rem; } -.navigation-explore .domain .version { +.navigation-explore .component .version { display: block; font-size: 0.95em; } -.navigation-explore .domain .version a { +.navigation-explore .component .version a { color: #4a4a4a; text-decoration: none; white-space: nowrap; } -.navigation-explore .domain .version.is-current { +.navigation-explore .component .version.is-current { font-weight: 500; } -.navigation-explore .domain .version.is-latest a::after { +.navigation-explore .component .version.is-latest a::after { content: ' (latest)'; } -.navigation-explore .domain .version a:hover { +.navigation-explore .component .version a:hover { text-decoration: underline; } -.navigation-explore .domain .version + .version { +.navigation-explore .component .version + .version { padding-left: 0.5em; } diff --git a/src/css/navigation-domain.css b/src/css/navigation-menu.css similarity index 94% rename from src/css/navigation-domain.css rename to src/css/navigation-menu.css index 31b3a71..d752341 100644 --- a/src/css/navigation-domain.css +++ b/src/css/navigation-menu.css @@ -2,21 +2,21 @@ html.is-clipped--nav { overflow-y: hidden; } -.navigation-domain { +.navigation-menu { flex-grow: 1; overflow-y: auto; display: flex; flex-direction: column; } -.navigation-domain:not(.is-active) { +.navigation-menu:not(.is-active) { display: none; } .nav-menu { flex-grow: 1; min-height: 0; - /* QUESTION move padding to .navigation-domain? */ + /* QUESTION move padding to .navigation-menu? */ /* padding: 0.5rem; */ diff --git a/src/css/site.css b/src/css/site.css index 92a88d4..ed50af4 100644 --- a/src/css/site.css +++ b/src/css/site.css @@ -3,7 +3,7 @@ @import "base.css"; @import "main.css"; @import "navigation.css"; -@import "navigation-domain.css"; +@import "navigation-menu.css"; @import "navigation-explore.css"; @import "toolbar.css"; @import "breadcrumbs.css"; diff --git a/src/helpers/detag.js b/src/helpers/detag.js new file mode 100644 index 0000000..6230d67 --- /dev/null +++ b/src/helpers/detag.js @@ -0,0 +1,4 @@ +'use strict' + +const TAG_ALL_RX = /<[^>]+>/g +module.exports = (html) => html.replace(TAG_ALL_RX, '') diff --git a/src/helpers/has-versions.js b/src/helpers/has-versions.js deleted file mode 100644 index 5b83db0..0000000 --- a/src/helpers/has-versions.js +++ /dev/null @@ -1,3 +0,0 @@ -'use strict' - -module.exports = (domain) => domain.versioned && domain.versions.length > 1 diff --git a/src/helpers/page-versions.js b/src/helpers/page-versions.js deleted file mode 100644 index cb61cd7..0000000 --- a/src/helpers/page-versions.js +++ /dev/null @@ -1,17 +0,0 @@ -'use strict' - -// FIXME the UI model should be prepopulated with this collection -module.exports = (domains, domainName, otherPageVersions) => { - const domain = domains.find((candidate) => candidate.name === domainName) - const pageVersions = [] - domain.versions.forEach((domainVersion) => { - const pageVersion = otherPageVersions.find((candidate) => candidate.string === domainVersion.string) - if (pageVersion) { - pageVersions.push(pageVersion) - } else { - pageVersions.push(Object.assign({ missing: true }, domainVersion)) - } - }) - - return pageVersions -} diff --git a/src/helpers/relativize.js b/src/helpers/relativize.js new file mode 100644 index 0000000..075b31b --- /dev/null +++ b/src/helpers/relativize.js @@ -0,0 +1,14 @@ +'use strict' + +const path = require('path') + +// TODO memoize +module.exports = (from, to) => { + if (to === '#') { + return to + } else if (to.charAt(to.length - 1) === '/') { + return from === to ? './' : path.relative(path.dirname(from + '.'), to) + '/' + } else { + return path.relative(path.dirname(from + '.'), to) + } +} diff --git a/src/js/01-navigation.js b/src/js/01-navigation.js index df8d00f..0a1fcb3 100644 --- a/src/js/01-navigation.js +++ b/src/js/01-navigation.js @@ -3,12 +3,13 @@ var navContainer = document.querySelector('.navigation-container') var navToggle = document.querySelector('.navigation-toggle') - var domainNav = navContainer.querySelector('[data-panel=domain]') + var menuPanel = navContainer.querySelector('[data-panel=menu]') + var currentPageItem = document.querySelector('.nav-menu .is-current-page') var state = getState() || {} navContainer.querySelector('.current').addEventListener('click', function () { var currentPanel = document.querySelector('.navigation .is-active[data-panel]') - var selectPanel = currentPanel.dataset.panel === 'domain' ? 'explore' : 'domain' + var selectPanel = currentPanel.dataset.panel === 'menu' ? 'explore' : 'menu' currentPanel.classList.toggle('is-active') document.querySelector('.navigation [data-panel=' + selectPanel + ']').classList.toggle('is-active') }) @@ -17,6 +18,8 @@ // don't let click events propagate outside of navigation container navContainer.addEventListener('click', concealEvent) + if (currentPageItem) activateCurrentPath(currentPageItem) + find('.nav-menu').forEach(function (navTree) { var panel = navTree.parentElement.dataset.panel find('.nav-item', navTree).forEach(function (item, idx) { @@ -47,12 +50,24 @@ saveState() - scrollItemIntoView(state.scroll || 0, domainNav, document.querySelector('.nav-menu .is-current-page .nav-link')) - domainNav.addEventListener('scroll', function () { - state.scroll = Math.round(domainNav.scrollTop) + scrollItemIntoView(state.scroll || 0, menuPanel, currentPageItem && currentPageItem.querySelector('.nav-link')) + + menuPanel.addEventListener('scroll', function () { + state.scroll = Math.round(menuPanel.scrollTop) saveState() }) + function activateCurrentPath (navItem) { + var ancestorClasses + var ancestor = navItem.parentNode + while (!(ancestorClasses = ancestor.classList).contains('nav-menu')) { + if (ancestor.tagName === 'LI' && ancestorClasses.contains('nav-item')) { + ancestorClasses.add('is-active', 'is-current-path') + } + ancestor = ancestor.parentNode + } + } + function toggleNavigation (e) { if (navToggle.classList.contains('is-active')) { return closeNavigation(e) @@ -85,7 +100,7 @@ }) } - function getState (domain, version) { + function getState (component, version) { var data = window.sessionStorage.getItem('nav-state') if (data) { return JSON.parse(data) @@ -97,9 +112,7 @@ } function scrollItemIntoView (scrollPosition, parent, el) { - if (el === null) { - return (parent.scrollTop = scrollPosition) - } + if (!el) return (parent.scrollTop = scrollPosition) var margin = 10 diff --git a/src/layouts/404.hbs b/src/layouts/404.hbs index c697e1d..1faa906 100644 --- a/src/layouts/404.hbs +++ b/src/layouts/404.hbs @@ -3,8 +3,8 @@ - {{title}}{{#if site.title}} :: {{site.title}}{{/if}} - + {{detag page.title}}{{#if site.title}} :: {{site.title}}{{/if}} + {{> head}} diff --git a/src/layouts/default.hbs b/src/layouts/default.hbs index 4b343a9..02abf47 100644 --- a/src/layouts/default.hbs +++ b/src/layouts/default.hbs @@ -3,17 +3,17 @@ - {{title}}{{#if site.title}} :: {{site.title}}{{/if}} - {{#if canonicalUrl}} - + {{detag page.title}}{{#if site.title}} :: {{site.title}}{{/if}} + {{#if page.canonicalUrl}} + {{/if}} - {{#if description}} - + {{#if page.description}} + {{/if}} - {{#if keywords}} - + {{#if page.keywords}} + {{/if}} - + {{> head}} diff --git a/src/partials/article.hbs b/src/partials/article.hbs index 05c427b..cb552ba 100644 --- a/src/partials/article.hbs +++ b/src/partials/article.hbs @@ -1,4 +1,4 @@
-

{{title}}

-{{{contents}}} +

{{{page.title}}}

+{{{page.contents}}}
diff --git a/src/partials/breadcrumbs.hbs b/src/partials/breadcrumbs.hbs index 472c4da..282b292 100644 --- a/src/partials/breadcrumbs.hbs +++ b/src/partials/breadcrumbs.hbs @@ -1,15 +1,15 @@