From 476a7a53ff782a25fa4bda06c936fcbff488e28e Mon Sep 17 00:00:00 2001
From: Cory Dransfeldt <hi@coryd.dev>
Date: Mon, 5 Jun 2023 08:45:57 -0700
Subject: [PATCH] feat: add back links to post pages; add tags to post pages

---
 config/filters.js              | 12 ++++++++++++
 src/_includes/post-tags.liquid |  9 +++++++++
 src/_includes/post.liquid      | 10 +++++++---
 tailwind.css                   |  8 ++++++++
 4 files changed, 36 insertions(+), 3 deletions(-)
 create mode 100644 src/_includes/post-tags.liquid

diff --git a/config/filters.js b/config/filters.js
index 47a5b5be..ec6b0ecf 100644
--- a/config/filters.js
+++ b/config/filters.js
@@ -57,4 +57,16 @@ module.exports = {
 
     return data
   },
+  pageNumberOf: (postUrl, collection, pageSize = 10) => {
+    const index = collection.findIndex((p) => p.data.page.url === postUrl)
+    if (index === -1) throw new Error(`${postUrl} not found in collection`)
+    return Math.ceil(collection.length / pageSize) - Math.ceil(index / pageSize)
+  },
+  blogBackLink: (postUrl, collection, pageSize = 10) => {
+    const index = collection.findIndex((p) => p.data.page.url === postUrl)
+    if (index === -1) throw new Error(`${postUrl} not found in collection`)
+    const pageNumber = Math.ceil(collection.length / pageSize) - Math.ceil(index / pageSize)
+    if (pageNumber === 0) return '/'
+    return `/${pageNumber}/`
+  },
 }
diff --git a/src/_includes/post-tags.liquid b/src/_includes/post-tags.liquid
new file mode 100644
index 00000000..d55522d7
--- /dev/null
+++ b/src/_includes/post-tags.liquid
@@ -0,0 +1,9 @@
+<div class="mt-8">
+  {% for tag in tags %}
+    {% if tag != "posts" %}
+      <a href="/tags/{{ tag }}">
+        <span class="tag--button tag--button__small">{{ tag }}</span>
+      </a>
+    {% endif %}
+  {% endfor %}
+</div>
\ No newline at end of file
diff --git a/src/_includes/post.liquid b/src/_includes/post.liquid
index e710afa9..40b5eebc 100644
--- a/src/_includes/post.liquid
+++ b/src/_includes/post.liquid
@@ -1,18 +1,22 @@
 ---
 layout: main
 ---
-
 {% include "header.liquid" %}
 <article class="h-entry">
   <h2 class="p-name text-xl md:text-2xl font-black leading-tight dark:text-gray-200 pt-12">{{ title }}</h2>
   <span class="p-author h-card hidden">{{ site.title }}</span>
-  <div class="mt-2 mb-6 text-sm">
-    <time class="dt-published" datetime="{{ date }}">{{ date | date: "%m.%d.%Y" }}</time>
+  <div class="mt-2 mb-6 text-sm flex flex-row items-center">
+    <a class="flex flex-row items-center mr-1" href="{{ page.url |  blogBackLink: collections.posts }}">
+      {% heroicon "solid" "arrow-left" "Back" "width=14" %}
+      <span class="ml-1">Back</span>
+    </a> •
+    <time class="ml-1 dt-published" datetime="{{ date }}">{{ date | date: "%m.%d.%Y" }}</time>
   </div>
   <div class="p-summary hidden">{{ post_excerpt | markdown }}</div>
   <div class="e-content prose dark:prose-invert hover:prose-a:text-blue-500  max-w-full text-gray-800 dark:text-white">
     {{ content }}
   </div>
 </article>
+{% include "post-tags.liquid" %}
 {% include "webmentions.liquid" %}
 {% include "author.liquid" %}
diff --git a/tailwind.css b/tailwind.css
index 5862be52..d89f0426 100644
--- a/tailwind.css
+++ b/tailwind.css
@@ -105,6 +105,14 @@ pre {
   background: theme(colors.purple.600);
 }
 
+.tag--button.tag--button__small {
+  @apply py-1;
+  @apply px-2;
+  @apply mr-2;
+  @apply mb-2;
+  @apply text-sm;
+}
+
 .dark .tag--button {
   color: theme(colors.gray.900);
   background: theme(colors.purple.400);