add HTML page templates

- add HTML page templates
- fill in UI model to activate all parts of templates
- add helpers for use in templates
- update build:preview task to apply 404 template to 404 page

diff --git a/preview-site-src/404.html b/preview-site-src/404.html
new file mode 100644 (file)
index 0000000..e69de29

diff --git a/preview-site-src/ui-model.yml b/preview-site-src/ui-model.yml
index 9ab35c3..b7dfc21 100644 (file)
--- a/preview-site-src/ui-model.yml
+++ b/preview-site-src/ui-model.yml
@@ -1,4 +1,90 @@
 site:
   url: http://localhost:5252
-  title: Preview Site
-title: Home
+  title: Brand Docs
+  domains:
+  - name: abc
+    title: Project ABC
+    versions:
+    - url: '#' 
+      string: '1.1'
+      latest: true
+    - url: '#' 
+      string: '1.0'
+  - name: xyz
+    title: Project XYZ
+    selected: true
+    versions: &domain_versions
+    - url: '#'
+      string: '6.0'
+      latest: true
+      selected: true
+    - url: '#' 
+      string: '5.2'
+    - url: '#' 
+      string: '5.1'
+    - url: '#' 
+      string: '5.0'
+  - name: 123
+    title: Project 123
+    versions:
+    - url: '#' 
+      string: '2.2'
+      latest: true
+    - url: '#' 
+      string: '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
+    url: '#'
+    currentPath: true
+    items:
+    - title: Hardware and Software Requirements
+      url: '#'
+      currentPage: true
+      items: []
+    - title: IDE Integration
+      url: '#'
+      items: []
+  - title: Application Tutorial
+    url: '#'
+    items: []
+  - title: Reference
+    url: '#'
+    items:
+    - title: Keyboard Shortcuts
+      url: '#'
+      items: []
+    - title: Importing and Exporting
+      url: '#'
+      items: []

diff --git a/src/helpers/and.js b/src/helpers/and.js
new file mode 100644 (file)
index 0000000..2ad2237
--- /dev/null
+++ b/src/helpers/and.js
@@ -0,0 +1,3 @@
+'use strict'
+
+module.exports = (a, b) => a && b

diff --git a/src/helpers/eq.js b/src/helpers/eq.js
new file mode 100644 (file)
index 0000000..16dc287
--- /dev/null
+++ b/src/helpers/eq.js
@@ -0,0 +1,3 @@
+'use strict'
+
+module.exports = (a, b) => a === b

diff --git a/src/helpers/has-versions.js b/src/helpers/has-versions.js
new file mode 100644 (file)
index 0000000..5b83db0
--- /dev/null
+++ b/src/helpers/has-versions.js
@@ -0,0 +1,3 @@
+'use strict'
+
+module.exports = (domain) => domain.versioned && domain.versions.length > 1

diff --git a/src/helpers/inc.js b/src/helpers/inc.js
new file mode 100644 (file)
index 0000000..bb8f7e1
--- /dev/null
+++ b/src/helpers/inc.js
@@ -0,0 +1,3 @@
+'use strict'
+
+module.exports = (value) => (value || 0) + 1

diff --git a/src/helpers/or.js b/src/helpers/or.js
new file mode 100644 (file)
index 0000000..354612b
--- /dev/null
+++ b/src/helpers/or.js
@@ -0,0 +1,3 @@
+'use strict'
+
+module.exports = (a, b) => a || b

diff --git a/src/helpers/page-versions.js b/src/helpers/page-versions.js
new file mode 100644 (file)
index 0000000..cb61cd7
--- /dev/null
+++ b/src/helpers/page-versions.js
@@ -0,0 +1,17 @@
+'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/layouts/404.hbs b/src/layouts/404.hbs
new file mode 100644 (file)
index 0000000..c697e1d
--- /dev/null
+++ b/src/layouts/404.hbs
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{{title}}{{#if site.title}} :: {{site.title}}{{/if}}</title>
+    <link rel="stylesheet" href="{{or uiRootPath themeRootPath}}/css/site.css">
+{{> head}}
+  </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>
+{{> footer}}
+  </body>
+</html>

diff --git a/src/layouts/default.hbs b/src/layouts/default.hbs
index f013729..4b343a9 100644 (file)
--- a/src/layouts/default.hbs
+++ b/src/layouts/default.hbs
@@ -1,14 +1,24 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <link rel="stylesheet" href="{{uiRootPath}}/css/site.css">
-  <title>{{title}}{{#if site.title}} // {{site.title}}{{/if}}</title>
-</head>
-<body class="article">
-{{{contents}}}
-{{> footer-scripts}}
-</body>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{{title}}{{#if site.title}} :: {{site.title}}{{/if}}</title>
+    {{#if canonicalUrl}}
+    <link rel="canonical" href="{{canonicalUrl}}">
+    {{/if}}
+    {{#if description}}
+    <meta name="description" content="{{description}}">
+    {{/if}}
+    {{#if keywords}}
+    <meta name="keywords" content="{{keywords}}">
+    {{/if}}
+    <link rel="stylesheet" href="{{or uiRootPath themeRootPath}}/css/site.css">
+{{> head}}
+  </head>
+  <body class="article">
+{{> header}}
+{{> main}}
+{{> footer}}
+  </body>
 </html>

diff --git a/src/partials/article.hbs b/src/partials/article.hbs
new file mode 100644 (file)
index 0000000..05c427b
--- /dev/null
+++ b/src/partials/article.hbs
@@ -0,0 +1,4 @@
+<article class="doc">
+<h1>{{title}}</h1>
+{{{contents}}}
+</article>

diff --git a/src/partials/breadcrumbs.hbs b/src/partials/breadcrumbs.hbs
new file mode 100644 (file)
index 0000000..472c4da
--- /dev/null
+++ b/src/partials/breadcrumbs.hbs
@@ -0,0 +1,16 @@
+<nav class="crumbs" role="navigation" aria-label="breadcrumbs">
+  <ul>
+    {{#if domain.title}}
+    {{#unless (or domain.root (eq domain.title breadcrumbs.0.title))}}
+    <li class="crumb"><a href="{{{domain.url}}}">{{{domain.title}}}</a></li>
+    {{/unless}}
+    {{/if}}
+    {{#each breadcrumbs}}
+    {{#if ./url}}
+    <li class="crumb"><a href="{{{./url}}}">{{{./title}}}</a></li>
+    {{else}}
+    <li class="crumb">{{{./title}}}</li>
+    {{/if}}
+    {{/each}}
+  </ul>
+</nav>

diff --git a/src/partials/footer-content.hbs b/src/partials/footer-content.hbs
new file mode 100644 (file)
index 0000000..dead088
--- /dev/null
+++ b/src/partials/footer-content.hbs
@@ -0,0 +1,4 @@
+<footer class="footer">
+  <p>This page was built using the Antora default UI.</p>
+  <p>The source code for this UI is licensed under the MPL-2.0 license.</p>
+</footer>

diff --git a/src/partials/footer-scripts.hbs b/src/partials/footer-scripts.hbs
index 1aca132..385a43b 100644 (file)
--- a/src/partials/footer-scripts.hbs
+++ b/src/partials/footer-scripts.hbs
@@ -1,2 +1,2 @@
-<script src="{{uiRootPath}}/js/vendor/highlight.js"></script>
+<script src="{{or uiRootPath themeRootPath}}/js/vendor/highlight.js"></script>
 <script>hljs.initHighlighting()</script>

diff --git a/src/partials/footer.hbs b/src/partials/footer.hbs
new file mode 100644 (file)
index 0000000..9d49017
--- /dev/null
+++ b/src/partials/footer.hbs
@@ -0,0 +1,2 @@
+{{> footer-content}}
+{{> footer-scripts}}

diff --git a/src/partials/head.hbs b/src/partials/head.hbs
new file mode 100644 (file)
index 0000000..8036f85
--- /dev/null
+++ b/src/partials/head.hbs
@@ -0,0 +1 @@
+{{! Add additional tags to head here}}

diff --git a/src/partials/header-content.hbs b/src/partials/header-content.hbs
new file mode 100644 (file)
index 0000000..cc648a6
--- /dev/null
+++ b/src/partials/header-content.hbs
@@ -0,0 +1,46 @@
+<header class="header" role="banner">
+  <nav class="navbar">
+    <div class="navbar-brand">
+      <a class="navbar-item" href="{{or site.url siteRootUrl}}">{{site.title}}</a>
+      <button class="navbar-burger" data-target="topbar-nav">
+        <span></span>
+        <span></span>
+        <span></span>
+      </button>
+    </div>
+    <div id="topbar-nav" class="navbar-menu">
+      <div class="navbar-end">
+        <a class="navbar-item" href="#">Home</a>
+        <div class="navbar-item has-dropdown is-hoverable">
+          <a class="navbar-link" href="#">Products</a>
+          <div class="navbar-dropdown">
+            <a class="navbar-item" href="#">Product A</a>
+            <a class="navbar-item" href="#">Product B</a>
+            <a class="navbar-item" href="#">Product C</a>
+          </div>
+        </div>
+        <div class="navbar-item has-dropdown is-hoverable">
+          <a class="navbar-link" href="#">Services</a>
+          <div class="navbar-dropdown">
+            <a class="navbar-item" href="#">Service A</a>
+            <a class="navbar-item" href="#">Service B</a>
+            <a class="navbar-item" href="#">Service C</a>
+          </div>
+        </div>
+        <div class="navbar-item has-dropdown is-hoverable">
+          <a class="navbar-link" href="#">Resources</a>
+          <div class="navbar-dropdown">
+            <a class="navbar-item" href="#">Resource A</a>
+            <a class="navbar-item" href="#">Resource B</a>
+            <a class="navbar-item" href="#">Resource C</a>
+          </div>
+        </div>
+        <div class="navbar-item">
+          <span class="control">
+            <a class="button is-primary" href="#">Download</a>
+          </span>
+        </div>
+      </div>
+    </div>
+  </nav>
+</header>

diff --git a/src/partials/header.hbs b/src/partials/header.hbs
new file mode 100644 (file)
index 0000000..affbeeb
--- /dev/null
+++ b/src/partials/header.hbs
@@ -0,0 +1 @@
+{{> header-content}}

diff --git a/src/partials/main.hbs b/src/partials/main.hbs
new file mode 100644 (file)
index 0000000..80babfa
--- /dev/null
+++ b/src/partials/main.hbs
@@ -0,0 +1,7 @@
+<div class="main-wrapper">
+{{> navigation}}
+  <main class="main" role="main">
+{{> toolbar}}
+{{> article}}
+  </main>
+</div>

diff --git a/src/partials/navigation-domain.hbs b/src/partials/navigation-domain.hbs
new file mode 100644 (file)
index 0000000..0b5f61a
--- /dev/null
+++ b/src/partials/navigation-domain.hbs
@@ -0,0 +1,5 @@
+<div class="navigation-domain is-active" data-panel="domain">
+  <nav class="nav-menu">
+{{> navigation-tree}}
+  </nav>
+</div>

diff --git a/src/partials/navigation-explore.hbs b/src/partials/navigation-explore.hbs
new file mode 100644 (file)
index 0000000..ff2f511
--- /dev/null
+++ b/src/partials/navigation-explore.hbs
@@ -0,0 +1,20 @@
+<div class="navigation-explore" data-panel="explore">
+  <div class="current">
+    <span class="title">{{domain.title}}</span>
+    <span class="version">{{domain.version.string}}</span>
+  </div>
+  <ul class="domains">
+    {{#each site.domains}}
+    <li class="domain{{#if ./selected}} is-current{{/if}}">
+      <span class="title">{{{./title}}}</span>
+      <ul class="versions">
+        {{#each ./versions}}
+        <li class="version{{#if ./selected}} is-current{{/if}}{{#if ./latest}} is-latest{{/if}}">
+          <a href="{{{./url}}}">{{./string}}</a>
+        </li>
+        {{/each}}
+      </ul>
+    </li>
+    {{/each}}
+  </ul>
+</div>

diff --git a/src/partials/navigation-tree.hbs b/src/partials/navigation-tree.hbs
new file mode 100644 (file)
index 0000000..ca576d4
--- /dev/null
+++ b/src/partials/navigation-tree.hbs
@@ -0,0 +1,17 @@
+{{#if navigation.length}}
+<ul class="nav-list">
+  {{#each navigation}}
+  <li class="nav-item{{#if ./currentPath}} is-active is-current-path{{/if}}{{#if ./currentPage}} is-current-page{{/if}}" data-depth="{{#if ../level}}{{../level}}{{else}}0{{/if}}">
+    {{#if (and ../level ./items.length)}}
+    <button class="nav-toggle"></button>
+    {{/if}}
+    {{#if ./url}}
+    <a class="nav-link" href="{{{./url}}}">{{{./title}}}</a>
+    {{else}}
+    <span class="nav-text">{{{./title}}}</span>
+    {{/if}}
+{{> navigation-tree navigation=./items level=(inc ../level)}}
+  </li>
+  {{/each}}
+</ul>
+{{/if}}

diff --git a/src/partials/navigation.hbs b/src/partials/navigation.hbs
new file mode 100644 (file)
index 0000000..5540601
--- /dev/null
+++ b/src/partials/navigation.hbs
@@ -0,0 +1,9 @@
+<div class="navigation-container">
+  <aside class="navigation" role="navigation">
+    <button class="navigation-close"></button>
+    <div class="panels">
+{{> navigation-domain}}
+{{> navigation-explore}}
+    </div>
+  </aside>
+</div>

diff --git a/src/partials/page-versions.hbs b/src/partials/page-versions.hbs
new file mode 100644 (file)
index 0000000..de57d1b
--- /dev/null
+++ b/src/partials/page-versions.hbs
@@ -0,0 +1,10 @@
+{{#if (has-versions domain)}}
+<div class="page-versions">
+  <button class="versions-menu-toggle" title="Other versions of page">{{domain.version.string}}</button>
+  <div class="versions-menu">
+    {{#each (page-versions site.domains domain.name versions)}}
+    <a class="version{{#if (eq ./string ../domain.version.string)}} is-current{{/if}}{{#if ./missing}} is-missing{{/if}}" href="{{{./url}}}">{{./string}}</a>
+    {{/each}}
+  </div>
+</div>
+{{/if}}

diff --git a/src/partials/toolbar.hbs b/src/partials/toolbar.hbs
new file mode 100644 (file)
index 0000000..6898c1f
--- /dev/null
+++ b/src/partials/toolbar.hbs
@@ -0,0 +1,9 @@
+<div class="toolbar" role="navigation">
+  <button class="navigation-open"></button>
+  {{#if siteRootUrl}}
+  <a href="{{siteRootUrl}}" class="home-link{{#if home}} is-current{{/if}}"></a>
+  {{/if}}
+{{> breadcrumbs}}
+{{> page-versions}}
+  <div class="edit-this-page"><a href="{{editUrl}}">Edit this Page</a></div>
+</div>

diff --git a/tasks/build-preview.js b/tasks/build-preview.js
index 31db775..74fa03b 100644 (file)
--- a/tasks/build-preview.js
+++ b/tasks/build-preview.js
@@ -17,7 +17,7 @@ module.exports = async (src, dest, siteSrc, siteDest) => {
     .src('**/*.html', { base: siteSrc, cwd: siteSrc })
     .pipe(
       map((file, next) => {
-        const compiledLayout = layouts['default.hbs']
+        const compiledLayout = layouts[file.stem === '404' ? '404.hbs' : 'default.hbs']
         const siteRootPath = path.relative(path.dirname(file.path), path.resolve(siteSrc))
         mockUIModel['siteRootPath'] = siteRootPath
         mockUIModel['siteRootUrl'] = path.join(siteRootPath, 'index.html')