feat: add back links to post pages; add tags to post pages

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}/`
+  },
 }

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>

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">
+  <div class="mt-2 mb-6 text-sm flex flex-row items-center">
-    <time class="dt-published" datetime="{{ date }}">{{ date | date: "%m.%d.%Y" }}</time>
+    <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" %}

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);