Add inter-post navigation to the end of post pages

Author: lexi-lambda

blog/build.rkt

@@ -156,14 +156,15 @@
                       (post-dep-info-path dep)
                       #:xref-out (post-dep-xref-path dep))]))
 
-(define (build-post-page dep info)
+(define (build-post-page info #:older older-info #:newer newer-info)
   (define site-path (rendered-post-path info #:file? #t))
   (define out-path (reroot-path site-path output-dir))
   (eprintf "~a rendering <output>~a\n" (timestamp-string) site-path)
   (make-parent-directory* out-path)
-  (call-with-output-file* #:exists 'truncate/replace
-                          out-path
-                          (λ~>> (write-html (post-page info)))))
+  (call-with-output-file*
+   #:exists 'truncate/replace
+   out-path
+   (λ~>> (write-html (post-page info #:older older-info #:newer newer-info)))))
 
 (define (build-index-page total-pages page-number posts #:tag [tag #f])
   (define site-path (index-path page-number #:tag tag #:file? #t))
@@ -210,11 +211,14 @@
 (define (build-all)
   (make-directory* build-dir)
   (make-directory* output-dir)
+
   (define all-posts
     (for/list ([dep (in-list all-post-deps)])
-      (define info (build-post-body dep))
-      (build-post-page dep info)
-      info))
+      (build-post-body dep)))
+  (for ([post (in-list all-posts)]
+        [older-post (in-list (cons #f all-posts))]
+        [newer-post (in-list (append (rest all-posts) (list #f)))])
+    (build-post-page post #:older older-post #:newer newer-post))
 
   (define total-pages (ceiling (/ (length all-post-deps) num-posts-per-page)))
   (for ([posts (in-slice num-posts-per-page (reverse all-posts))]

blog/build/render/page.rkt

@@ -16,7 +16,9 @@
 (provide (contract-out
           [page (->* [#:title string? #:body xexpr/c] [#:tag (or/c string? #f)] xexpr/c)]
           [standalone-page (-> #:title string? #:body (listof xexpr/c) xexpr/c)]
-          [post-page (-> rendered-post? xexpr/c)]
+          [post-page (-> rendered-post?
+                         #:older (or/c rendered-post? #f)
+                         #:newer (or/c rendered-post? #f) xexpr/c)]
           [index-page-title (->* [] [#:tag (or/c string? #f)] string?)]
           [index-page (->i ([total-pages exact-positive-integer?]
                             [page-number (total-pages) (and/c exact-positive-integer? (<=/c total-pages))]
@@ -62,13 +64,22 @@
         #:body `(div ([class "content"])
                   (article ([class "main"]) ,@body))))
 
-(define (post-page info)
+(define (post-page info #:older older-info #:newer newer-info)
   (match-define (rendered-post title-str title date tags body) info)
   (page #:title title-str
         #:body `(div ([class "content"])
                   (article ([class "main"])
                     ,(build-post-header title date tags)
-                    ,@body))))
+                    ,@body
+                    (ul ([class "post-navigation"])
+                      (li ([class "previous"])
+                        ,@(when/list newer-info
+                           `(a ([href ,(rendered-post-path newer-info)])
+                              "←" nbsp (span ([class "post-title"]) ,@(rendered-post-title newer-info)))))
+                      (li ([class "next"])
+                        ,@(when/list older-info
+                            `(a ([href ,(rendered-post-path older-info)])
+                               (span ([class "post-title"]) ,@(rendered-post-title older-info)) nbsp "→"))))))))
 
 (define (index-page-title #:tag [tag #f])
   (~a (if tag (~a "Posts tagged ‘" tag "’ | ") "")

scss/application.scss

@@ -132,11 +132,6 @@ body > section[role=main] {
       }
     }
 
-    // TODO: Reimplement end-of-post navigation links.
-    // &.main > footer {
-    //   max-width: $content-width-large;
-    // }
-
     // Code blocks and tables can also spill into the margins.
     & > pre, & > .table-wrapper {
       max-width: 100%;
@@ -154,6 +149,11 @@ body > section[role=main] {
         max-width: $content-width-max;
       }
     }
+
+    // End-of-post navigation links can spill far into the margins.
+    & > .post-navigation {
+      max-width: $content-width-max;
+    }
   }
 
   // Subscripts and superscripts should not disrupt line spacing.
@@ -406,6 +406,30 @@ article.main > footer {
   }
 }
 
+.post-navigation {
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: 4em;
+  padding: 0;
+
+  li {
+    flex: 1 1 auto;
+    list-style: none;
+    margin-bottom: 1em;
+  }
+
+  .previous {
+    text-align: left;
+  }
+  .next {
+    text-align: right;
+  }
+
+  .post-title {
+    font-style: italic;
+  }
+}
+
 div.figure, article.main > p > a {
   & > img {
     max-width: 100%;