From 0a55d89c7c0e7471511e05f6978a305c5a243da1 Mon Sep 17 00:00:00 2001
From: Leyla Becker <git@jan-leila.com>
Date: Fri, 20 Feb 2026 12:16:13 -0600
Subject: [PATCH] feat: added next and last post links

---
 _includes/base.njk |  2 ++
 _includes/post.njk | 38 ++++++++++++++++++++++++++++++++++++-
 css/style.css      | 47 ++++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 86 insertions(+), 1 deletion(-)

diff --git a/_includes/base.njk b/_includes/base.njk
index f3fa797..770935e 100644
--- a/_includes/base.njk
+++ b/_includes/base.njk
@@ -15,6 +15,7 @@
       --color-text-heading: #2c3e50;
       --color-text-muted: #666;
       --color-text-link: #3498db;
+      --color-text-link-muted: #999;
       /* Backgrounds */
       --color-bg-page: #fff;
       --color-bg-surface: #f5f5f5;
@@ -65,6 +66,7 @@
         --color-text-heading: #f0f0f0;
         --color-text-muted: #a0a0a0;
         --color-text-link: #5dade2;
+        --color-text-link-muted: #777;
         --color-bg-page: #1a1a1a;
         --color-bg-surface: #2d2d2d;
         --color-bg-warning: #3d3520;
diff --git a/_includes/post.njk b/_includes/post.njk
index 1050c2f..03e44d2 100644
--- a/_includes/post.njk
+++ b/_includes/post.njk
@@ -28,9 +28,45 @@ pageType: post
     <h2>Tags</h2>
     <ul class="tag-list">
       {% for tag in postTags %}
-        <li><a href="/tags/{{ tag | lower }}/">#{{ tag }}</a></li>
+        <li><a href="/tags/{{ tag | lower }}/\">#{{ tag }}</a></li>
       {% endfor %}
     </ul>
   </section>
   {% endif %}
+
+  {% set currentIndex = -1 %}
+  {% for post in collections.posts %}
+    {% if post.url == page.url %}
+      {% set currentIndex = loop.index0 %}
+    {% endif %}
+  {% endfor %}
+
+  {% if currentIndex >= 0 %}
+    {% set prevPost = collections.posts[currentIndex - 1] if currentIndex > 0 else null %}
+    {% set nextPost = collections.posts[currentIndex + 1] if currentIndex < collections.posts.length - 1 else null %}
+
+    <nav class="post-navigation" aria-label="Post navigation">
+      {% if prevPost %}
+        <a href="{{ prevPost.url }}" class="post-nav-link post-nav-prev">
+          <span class="post-nav-label">← Previous Post</span>
+          <span class="post-nav-title">{{ prevPost.data.title }}</span>
+        </a>
+      {% else %}
+        <span class="post-nav-link post-nav-prev post-nav-disabled">
+          <span class="post-nav-label">← Previous Post</span>
+        </span>
+      {% endif %}
+
+      {% if nextPost %}
+        <a href="{{ nextPost.url }}" class="post-nav-link post-nav-next">
+          <span class="post-nav-label">Next Post →</span>
+          <span class="post-nav-title">{{ nextPost.data.title }}</span>
+        </a>
+      {% else %}
+        <span class="post-nav-link post-nav-next post-nav-disabled">
+          <span class="post-nav-label">Next Post →</span>
+        </span>
+      {% endif %}
+    </nav>
+  {% endif %}
 </article>
\ No newline at end of file
diff --git a/css/style.css b/css/style.css
index 4dd619e..da40982 100644
--- a/css/style.css
+++ b/css/style.css
@@ -331,6 +331,53 @@ footer {
   font-size: var(--font-size-small);
 }
 
+/* Post Navigation */
+nav.post-navigation {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  padding-top: var(--space-element);
+  width: 100%;
+}
+
+.post-nav-link {
+  display: flex;
+  flex-direction: column;
+  text-decoration: none;
+}
+
+.post-nav-link:hover:not(.post-nav-disabled) .post-nav-title {
+  text-decoration: underline;
+}
+
+.post-nav-prev {
+  align-items: flex-start;
+  text-align: left;
+}
+
+.post-nav-next {
+  align-items: flex-end;
+  text-align: right;
+}
+
+.post-nav-label {
+  font-size: var(--font-size-small);
+  color: var(--color-text-muted);
+}
+
+.post-nav-title {
+  color: var(--color-text-link);
+  font-weight: var(--font-weight-medium);
+}
+
+.post-nav-disabled {
+  cursor: not-allowed;
+}
+
+.post-nav-disabled .post-nav-label {
+  color: var(--color-text-link-muted);
+}
+
 /* Icon utilities */
 .icon-invertible {
   transition: filter 0.2s;