From 57208ea1c8e6e7017e2dfa9bd7c300b30d9bc622 Mon Sep 17 00:00:00 2001
From: Nikolaos Karaolidis <nick@karaolidis.com>
Date: Tue, 9 Sep 2025 11:09:05 +0100
Subject: [PATCH] Add post navigation

Signed-off-by: Nikolaos Karaolidis <nick@karaolidis.com>
---
 assets/sass/common.scss                       |  2 +
 assets/sass/main.scss                         |  3 +-
 assets/sass/postnav.scss                      | 59 +++++++++++++++++++
 layouts/_default/single.html                  |  3 +-
 .../hero/{default.html => index.html}         |  0
 .../partials/components/postnav/index.html    | 22 +++++++
 6 files changed, 87 insertions(+), 2 deletions(-)
 create mode 100644 assets/sass/postnav.scss
 rename layouts/partials/components/hero/{default.html => index.html} (100%)
 create mode 100644 layouts/partials/components/postnav/index.html

diff --git a/assets/sass/common.scss b/assets/sass/common.scss
index 055b410..bff93ef 100644
--- a/assets/sass/common.scss
+++ b/assets/sass/common.scss
@@ -33,6 +33,8 @@ h4,
 h5,
 h6 {
   font-weight: 500;
+  overflow-wrap: break-word;
+  word-break: break-word;
 }
 
 hr {
diff --git a/assets/sass/main.scss b/assets/sass/main.scss
index 53c1c2b..6a2d509 100644
--- a/assets/sass/main.scss
+++ b/assets/sass/main.scss
@@ -16,8 +16,9 @@ $width-wide: 75rem;
 @import "gallery";
 
 @import "header";
-@import "content";
 @import "hero";
+@import "content";
+@import "postnav";
 @import "footer";
 
 @import "photoswipe";
diff --git a/assets/sass/postnav.scss b/assets/sass/postnav.scss
new file mode 100644
index 0000000..0d688f1
--- /dev/null
+++ b/assets/sass/postnav.scss
@@ -0,0 +1,59 @@
+.postnav {
+  max-width: $width-content;
+  margin: 0 auto;
+  padding: 2rem;
+
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+
+  a {
+    flex: 50%;
+    color: inherit;
+  }
+
+  a:hover {
+    color: var(--text-800);
+  }
+
+  p {
+    margin: 0.5rem 0 0.5rem 0;
+  }
+
+  .caption {
+    font-weight: 500;
+  }
+
+  .title {
+    overflow-wrap: break-word;
+    word-break: break-word;
+  }
+
+  .next {
+    text-align: right;
+  }
+
+  .previous .caption::before {
+    content: "‹ ";
+  }
+
+  .next .caption::after {
+    content: " ›";
+  }
+}
+
+.content + .postnav {
+  padding-top: 0;
+}
+
+@media (max-width: $width-mobile) {
+  .postnav {
+    padding: 1rem;
+
+    flex-direction: column;
+
+    a {
+      flex: auto;
+    }
+  }
+}
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 446ae44..30690ad 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -1,8 +1,9 @@
 {{ define "main" }}
   <main>
-    {{ partial "components/hero/default.html" . }}
+    {{ partial "components/hero/index.html" . }}
     <div class="content">
       {{ .Content }}
     </div>
+    {{ partial "components/postnav/index.html" . }}
   </main>
 {{ end }}
diff --git a/layouts/partials/components/hero/default.html b/layouts/partials/components/hero/index.html
similarity index 100%
rename from layouts/partials/components/hero/default.html
rename to layouts/partials/components/hero/index.html
diff --git a/layouts/partials/components/postnav/index.html b/layouts/partials/components/postnav/index.html
new file mode 100644
index 0000000..65bbe3a
--- /dev/null
+++ b/layouts/partials/components/postnav/index.html
@@ -0,0 +1,22 @@
+{{ $pages := .CurrentSection.Pages.ByDate }}
+
+
+<div class="postnav">
+  {{ with $pages.Prev . }}
+    <a href="{{ .RelPermalink }}">
+      <div class="previous">
+        <p class="caption">Previous Post</p>
+        <p class="title">{{ .Title }}</p>
+      </div>
+    </a>
+  {{ end }}
+
+  {{ with $pages.Next . }}
+    <a href="{{ .RelPermalink }}">
+      <div class="next">
+        <p class="caption">Next Post</p>
+        <p class="title">{{ .Title }}</p>
+      </div>
+    </a>
+  {{ end }}
+</div>