From 7d9d1ca3d29db461a911de2f86852c5bd4b8c28a Mon Sep 17 00:00:00 2001
From: Cory Dransfeldt <hi@coryd.dev>
Date: Wed, 10 Jan 2024 14:08:10 -0800
Subject: [PATCH] feat: old posts banners

---
 config/filters/index.js                       |  3 +++
 package.json                                  |  2 +-
 src/_includes/partials/banner-old-post.liquid | 12 +++++++++++
 src/_includes/post.liquid                     | 12 ++---------
 src/assets/styles/partials/vars.css           |  2 ++
 src/assets/styles/widgets/banner-old-post.css | 20 +++++++++++++++++++
 src/links.html                                |  4 ++--
 7 files changed, 42 insertions(+), 13 deletions(-)
 create mode 100644 src/_includes/partials/banner-old-post.liquid
 create mode 100644 src/assets/styles/widgets/banner-old-post.css

diff --git a/config/filters/index.js b/config/filters/index.js
index e197bda3..2d7d4328 100644
--- a/config/filters/index.js
+++ b/config/filters/index.js
@@ -141,6 +141,9 @@ export default {
     if (!string) return
     return new Date(string)
   },
+  oldPost: (date) => {
+    return DateTime.now().diff(DateTime.fromJSDate(new Date(date)), 'years').years > 3;
+  },
 
   // feeds
   normalizeEntries: (entries) => {
diff --git a/package.json b/package.json
index 5f91c5f8..27aaef3e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "coryd.dev",
-  "version": "4.5.3",
+  "version": "4.6.0",
   "description": "The source for my personal site, blog and portfolio. Built using 11ty and hosted on Netlify.",
   "type": "module",
   "scripts": {
diff --git a/src/_includes/partials/banner-old-post.liquid b/src/_includes/partials/banner-old-post.liquid
new file mode 100644
index 00000000..1d2704a0
--- /dev/null
+++ b/src/_includes/partials/banner-old-post.liquid
@@ -0,0 +1,12 @@
+{% assign isOldPost = date | oldPost %}
+{% if isOldPost %}
+  {% capture css %}
+    {% render "../../assets/styles/widgets/banner-old-post.css" %}
+  {% endcapture %}
+  <style>
+    {{ css | cssmin }}
+  </style>
+  <div class="banner__old-post">
+    <p>{% tablericon "clock-x" "Old post" %} This post is over 3 years old. I've probably changed my mind since then and this <em>could</em> be out of date.</p>
+  </div>
+{% endif %}
\ No newline at end of file
diff --git a/src/_includes/post.liquid b/src/_includes/post.liquid
index 2f149ed4..44e626e5 100644
--- a/src/_includes/post.liquid
+++ b/src/_includes/post.liquid
@@ -12,20 +12,12 @@ schema: blog
 </style>
 <div class="default__wrapper">
   <article class="h-entry" data-pagefind-body>
-    {% if link %}
-      <a class="no-underline" href="{{ link }}">
-        <h2 class="flex--centered" data-pagefind-meta="title">
-          {% tablericon 'link' title %}
-          {{ title }}
-        </h2>
-      </a>
-    {% else %}
-      <h2 class="p-name" data-pagefind-meta="title">{{ title }}</h2>
-    {% endif %}
+    <h2 class="p-name" data-pagefind-meta="title">{{ title }}</h2>
     <span class="p-author h-card hidden">{{ meta.author }}</span>
     <time class="dt-published" datetime="{{ date }}">{{ date | readableDate }}</time>
     <div class="p-summary hidden">{{ post_excerpt }}</div>
     <div class="e-content">
+      {% render "partials/banner-old-post.liquid", date: date %}
       {{ content }}
     </div>
   </article>
diff --git a/src/assets/styles/partials/vars.css b/src/assets/styles/partials/vars.css
index f7159d5b..b9a9a6de 100644
--- a/src/assets/styles/partials/vars.css
+++ b/src/assets/styles/partials/vars.css
@@ -38,6 +38,7 @@
   --accent-color-hover: var(--blue-800);
   --selection-color: var(--accent-color);
   --gray-light: var(--gray-200);
+  --gray-lighter: var(--gray-50);
 
   --brand-github: #333;
   --brand-proton: #6d4aff;
@@ -102,6 +103,7 @@
     --accent-color: var(--blue-400);
     --accent-color-hover: var(--blue-200);
     --gray-light: var(--gray-900);
+    --gray-lighter: var(--gray-950);
     --brand-github: #f5f5f5;
   }
 }
diff --git a/src/assets/styles/widgets/banner-old-post.css b/src/assets/styles/widgets/banner-old-post.css
new file mode 100644
index 00000000..be5c5b5f
--- /dev/null
+++ b/src/assets/styles/widgets/banner-old-post.css
@@ -0,0 +1,20 @@
+.banner__old-post {
+  margin: 1rem 0;
+  padding: .75rem;
+  border: 1px solid var(--gray-light);
+  border-radius: var(--rounded-lg);
+  background-color: var(--gray-lighter);
+}
+
+.banner__old-post p {
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-sm);
+  margin: 0;
+}
+
+.banner__old-post p > svg {
+  display: inline;
+  vertical-align: middle;
+  height: .875rem;
+  width: .875rem;
+}
\ No newline at end of file
diff --git a/src/links.html b/src/links.html
index fdaaba18..8eb73bed 100644
--- a/src/links.html
+++ b/src/links.html
@@ -6,9 +6,9 @@ pagination:
   size: 8
 ---
 {% for link in links %}
-<article class="h-entry">
+<article class="h-entry" data-pagefind-body>
   <a class="no-underline" href="{{ link.url }}">
-    <h2 class="flex--centered">{{ link.title }}</h2>
+    <h2 class="flex--centered" data-pagefind-meta="title">{{ link.title }}</h2>
   </a>
   <time class="dt-published" datetime="{{ link.date }}">
     {{ link.date | date: "%m.%Y" }}