diff options
author | Dan Allen <dan.j.allen@gmail.com> | 2017-10-13 01:56:29 -0600 |
---|---|---|
committer | Dan Allen <dan@opendevise.com> | 2017-10-13 14:58:47 -0600 |
commit | e42d04b327bae4cc0aadacee1c478ced536c3932 (patch) | |
tree | 655118371368a50b6ca6bb069952397f27a0c953 | |
parent | aef538753a4468af7e5e0a9970df2da467952325 (diff) | |
download | alpine-antora-theme-e42d04b327bae4cc0aadacee1c478ced536c3932.tar.bz2 alpine-antora-theme-e42d04b327bae4cc0aadacee1c478ced536c3932.tar.xz |
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
-rw-r--r-- | preview-site-src/404.html | 0 | ||||
-rw-r--r-- | preview-site-src/ui-model.yml | 90 | ||||
-rw-r--r-- | src/helpers/and.js | 3 | ||||
-rw-r--r-- | src/helpers/eq.js | 3 | ||||
-rw-r--r-- | src/helpers/has-versions.js | 3 | ||||
-rw-r--r-- | src/helpers/inc.js | 3 | ||||
-rw-r--r-- | src/helpers/or.js | 3 | ||||
-rw-r--r-- | src/helpers/page-versions.js | 17 | ||||
-rw-r--r-- | src/layouts/404.hbs | 21 | ||||
-rw-r--r-- | src/layouts/default.hbs | 32 | ||||
-rw-r--r-- | src/partials/article.hbs | 4 | ||||
-rw-r--r-- | src/partials/breadcrumbs.hbs | 16 | ||||
-rw-r--r-- | src/partials/footer-content.hbs | 4 | ||||
-rw-r--r-- | src/partials/footer-scripts.hbs | 2 | ||||
-rw-r--r-- | src/partials/footer.hbs | 2 | ||||
-rw-r--r-- | src/partials/head.hbs | 1 | ||||
-rw-r--r-- | src/partials/header-content.hbs | 46 | ||||
-rw-r--r-- | src/partials/header.hbs | 1 | ||||
-rw-r--r-- | src/partials/main.hbs | 7 | ||||
-rw-r--r-- | src/partials/navigation-domain.hbs | 5 | ||||
-rw-r--r-- | src/partials/navigation-explore.hbs | 20 | ||||
-rw-r--r-- | src/partials/navigation-tree.hbs | 17 | ||||
-rw-r--r-- | src/partials/navigation.hbs | 9 | ||||
-rw-r--r-- | src/partials/page-versions.hbs | 10 | ||||
-rw-r--r-- | src/partials/toolbar.hbs | 9 | ||||
-rw-r--r-- | tasks/build-preview.js | 2 |
26 files changed, 315 insertions, 15 deletions
diff --git a/preview-site-src/404.html b/preview-site-src/404.html new file mode 100644 index 0000000..e69de29 --- /dev/null +++ b/preview-site-src/404.html diff --git a/preview-site-src/ui-model.yml b/preview-site-src/ui-model.yml index 9ab35c3..b7dfc21 100644 --- 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 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 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 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 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 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 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 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 --- 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 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 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 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 --- 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 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 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 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 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 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 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 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 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 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 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 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 --- 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') |