Add links to older/newer sections of archive.

scripts/blog.py

@@ -282,7 +282,9 @@ def summarize(doc):
 def render_index(docs, dest_top):
     docs = sorted(docs.values(), key=lambda x: x[1]['date'], reverse=True)
 
-    for off in range(0, len(docs), BLOG_INDEX_PAGE_SIZE):
+    index_ranges = range(0, len(docs), BLOG_INDEX_PAGE_SIZE)
+
+    for off in index_ranges:
         page = docs[off: off + BLOG_INDEX_PAGE_SIZE]
 
         posts = [
@@ -297,8 +299,17 @@ def render_index(docs, dest_top):
             for (doc, front_matter, out_path) in page
         ]
 
+        prev_index_num = None
+        next_index_num = off // BLOG_INDEX_PAGE_SIZE + 1
+        if off > 0:
+            prev_index_num = off // BLOG_INDEX_PAGE_SIZE - 1
+        if next_index_num >= len(index_ranges):
+            next_index_num = None
+
         result = BLOG_INDEX_TEMPLATE.render(
             posts=posts,
+            prev_index_num=prev_index_num,
+            next_index_num=next_index_num,
         )
 
         if off == 0:

static/blog_index.tmpl.html

@@ -48,5 +48,18 @@
         </div>
         {% endfor %}
       </div>
+      <div class="index-pages">
+        {% if prev_index_num != None %}
+          {% if prev_index_num == 0 %}
+            <a class="newer-posts" href="index.html">Newer posts</a>
+          {% else %}
+            <a class="newer-posts" href="index-{{ prev_index_num }}.html">Newer posts</a>
+          {% endif %}
+            {% endif %}
+
+        {% if next_index_num %}
+          <a class="older-posts" href="index-{{ next_index_num }}.html">Older posts</a>
+        {% endif %}
+      </div>
     </body>
 </html>

static/style.css

@@ -466,6 +466,24 @@ article.post {
     margin-bottom: 1em;
     padding-bottom: 1em;
     border-bottom: #000 1px dashed;
+.index-pages {
+    display: block;
+    margin: 0 auto;
+    width: fit-content;
+}
+.index-pages a {
+    padding: 1ex;
+    display: inline-block;
+    background-color: #024;
+    color: #fff;
+    border-radius: 4px;
+}
+
+.older-posts::after {
+  content: ' >';
+}
+.newer-posts::before {
+  content: '< ';
 }
 
 /* Tables. */
@@ -485,6 +503,7 @@ tr.__table-separator {
     height: auto;
 }
 
+
 .connections svg #graph0 > polygon {
   /* Main box */
   fill: transparent;