feat: old posts banners

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) => {

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": {

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 %}

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>

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

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;
+}

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" }}