add pagination nav to bottom of page

diff --git a/preview-src/ui-model.yml b/preview-src/ui-model.yml
index 0062b61..6ed5cfc 100644 (file)
--- a/preview-src/ui-model.yml
+++ b/preview-src/ui-model.yml
@@ -63,6 +63,14 @@ page:
   editUrl: http://example.com/project-xyz/blob/master/index.adoc
   origin:
     private: false
+  previous:
+    content: Quickstart
+    url: '#'
+    urlType: 'internal'
+  next:
+    content: Liber Recusabo
+    url: '#'
+    urlType: 'internal'
   breadcrumbs:
   - content: Quickstart
     url: '#'

diff --git a/src/css/pagination.css b/src/css/pagination.css
new file mode 100644 (file)
index 0000000..e3f2d49
--- /dev/null
+++ b/src/css/pagination.css
@@ -0,0 +1,63 @@
+nav.pagination {
+  display: flex;
+  border-top: 1px solid var(--toolbar-border-color);
+  line-height: 1;
+  margin: 2rem -1rem -1rem;
+  padding: 0.75rem 1rem 0;
+}
+
+nav.pagination span {
+  display: flex;
+  flex: 50%;
+  flex-direction: column;
+}
+
+nav.pagination .prev {
+  padding-right: 0.5rem;
+}
+
+nav.pagination .next {
+  margin-left: auto;
+  padding-left: 0.5rem;
+  text-align: right;
+}
+
+nav.pagination span::before {
+  color: var(--toolbar-muted-color);
+  font-size: 0.75em;
+  padding-bottom: 0.1em;
+}
+
+nav.pagination .prev::before {
+  content: "Prev";
+}
+
+nav.pagination .next::before {
+  content: "Next";
+}
+
+nav.pagination a {
+  font-weight: var(--body-font-weight-bold);
+  line-height: 1.3;
+  position: relative;
+}
+
+nav.pagination a::before,
+nav.pagination a::after {
+  color: var(--toolbar-muted-color);
+  font-weight: normal;
+  font-size: 1.5em;
+  line-height: 0.75;
+  position: absolute;
+  top: 0;
+  width: 1rem;
+}
+
+nav.pagination .prev a::before {
+  content: "\2039";
+  transform: translateX(-100%);
+}
+
+nav.pagination .next a::after {
+  content: "\203a";
+}

diff --git a/src/css/site.css b/src/css/site.css
index e73f175..36e1767 100644 (file)
--- a/src/css/site.css
+++ b/src/css/site.css
@@ -10,6 +10,7 @@
 @import "page-versions.css";
 @import "toc.css";
 @import "doc.css";
+@import "pagination.css";
 @import "header.css";
 @import "footer.css";
 @import "highlight.css";

diff --git a/src/partials/article.hbs b/src/partials/article.hbs
index edd5a08..55167ca 100644 (file)
--- a/src/partials/article.hbs
+++ b/src/partials/article.hbs
@@ -14,4 +14,5 @@ If you typed the URL of this page manually, please double check that you entered
 {{/with}}
 {{{page.contents}}}
 {{/if}}
+{{> pagination}}
 </article>

diff --git a/src/partials/pagination.hbs b/src/partials/pagination.hbs
new file mode 100644 (file)
index 0000000..0c3be30
--- /dev/null
+++ b/src/partials/pagination.hbs
@@ -0,0 +1,10 @@
+{{#if (or page.previous page.next)}}
+<nav class="pagination">
+  {{#with page.previous}}
+  <span class="prev"><a href="{{{relativize ./url}}}">{{{./content}}}</a></span>
+  {{/with}}
+  {{#with page.next}}
+  <span class="next"><a href="{{{relativize ./url}}}">{{{./content}}}</a></span>
+  {{/with}}
+</nav>
+{{/if}}