Add pagination

assets/css/theme.css

@@ -10,6 +10,16 @@
   --fancy-font-stack: BitBold, monospace;
 }
 
+.sr-only:not(:focus):not(:active) {
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
 html {
   box-sizing: border-box;
 }
@@ -30,7 +40,7 @@ body {
   column-gap: 3rem;
 }
 
-nav,
+body > nav,
 h1,
 h2,
 h3,
@@ -47,39 +57,37 @@ img {
 body > nav {
   align-self: start;
   grid-row: 2;
-}
-nav {
   position: relative;
   margin-bottom: 2rem;
   overflow: auto;
 }
-nav ul {
+body > nav ul {
   list-style-type: none;
   margin: 0;
   padding: 0;
   display: flex;
 }
-nav li {
+body > nav li {
   font-size: 2.5rem;
   margin: 0 1rem;
   white-space: nowrap;
 }
-nav li:first-of-type {
+body > nav li:first-of-type {
   margin: 0;
 }
-nav a {
+body > nav a {
   transition: 0.2s;
 }
-nav a,
-nav a:visited {
+body > nav a,
+body > nav a:visited {
   text-decoration: none;
   color: var(--text);
   text-shadow: 3px 3px 0 black;
 }
-nav a[disabled] {
+body > nav a[disabled] {
   cursor: no-drop;
 }
-nav a:hover:not([disabled]) {
+body > nav a:hover:not([disabled]) {
   color: #fff;
 }
 
@@ -152,10 +160,10 @@ footer img {
   body {
     grid-template-columns: minmax(45rem, 70rem) minmax(18rem, 1fr);
   }
-  nav ul {
+  body > nav ul {
     display: block;
   }
-  nav li {
+  body > nav li {
     margin: 0;
   }
   body > nav {
@@ -182,7 +190,7 @@ footer img {
     grid-row: 4;
     margin-bottom: 3rem;
   }
-  nav a:hover:not([disabled]) {
+  body > nav a:hover:not([disabled]) {
     text-shadow: 0 0 5px var(--accent), 0 0 25px var(--accent),
       0 0 50px var(--accent), 0 0 100px var(--accent);
   }
@@ -265,3 +273,20 @@ p:first-of-type {
   opacity: 0.8;
   margin-bottom: 0.75rem;
 }
+
+.pagination ol {
+  padding: 0;
+  width: 100%;
+  display: grid;
+  list-style-type: none;
+  grid-template-columns: 1fr 1fr;
+  margin: 4rem 0 0 0;
+}
+.pagination .newer-item {
+  grid-column: 1;
+  justify-self: start;
+}
+.pagination .older-item {
+  grid-column: 2;
+  justify-self: end;
+}

src/blog/index.njk

@@ -1,12 +1,17 @@
 ---
 title: Devon's Blog
 layout: article.njk
+pagination:
+  data: collections.post
+  size: 5
+  alias: posts
+  reverse: true
 ---
 
 <p>The posts here are sorted by recently modified. That means that if I update a post, it will float back to the top. I'll try to update the excerpts to reflect the changes made.</p>
 
 <ul class="post-list">
-{%- for post in collections.post -%}
+{%- for post in posts -%}
   <li>
     <h2><a href="{{ post.url }}">{{ post.data.title }}</a></h2>
     <small>Last updated {{ post.date | formatDatetimeForHumans }}</small>
@@ -14,3 +19,15 @@ layout: article.njk
   </li>
 {%- endfor -%}
 </ul>
+
+<nav aria-labelledby="pagination-heading" class="pagination">
+  <h2 id="pagination-heading" class="sr-only">Paging Controls</h2>
+  {% if pagination.href.previous or pagination.href.next %}
+  <ol>
+    {% if pagination.href.previous %}<li class="newer-item"><a href="{{ pagination.href.previous }}">Newer</a></li>{% endif %}
+{%- for pageEntry in pagination.pages %}
+{%- endfor %}
+    {% if pagination.href.next %}<li class="older-item"><a href="{{ pagination.href.next }}">Older</a></li>{% endif %}
+  </ol>
+  {% endif %}
+</nav>