From 23657a4629b9065ede7ebe0c448650f1bf0c96b2 Mon Sep 17 00:00:00 2001
From: Jan-Erik Rediger <janerik@fnordig.de>
Date: Tue, 11 Mar 2025 15:50:48 +0100
Subject: [PATCH] Add an archive chart
based on https://blog.jim-nielsen.com/archive/
---
_layouts/post.liquid | 2 +-
posts.liquid | 36 ++++++++++++++++++++++++++++++++++++
style.css | 33 +++++++++++++++++++++++++++++++++
3 files changed, 70 insertions(+), 1 deletion(-)
diff --git a/_layouts/post.liquid b/_layouts/post.liquid
index 5251101..8d511bb 100644
--- a/_layouts/post.liquid
+++ b/_layouts/post.liquid
@@ -6,7 +6,7 @@
<body>
{% include "_menu.liquid" %}
- <main>
+ <main id="top">
<article>
<h1>{{ page.title }}</h1>
{% assign reading_wpm = 200 %}
diff --git a/posts.liquid b/posts.liquid
index a077de7..bf7930e 100644
--- a/posts.liquid
+++ b/posts.liquid
@@ -9,6 +9,42 @@ data:
<a href="/tagged/">Post by tag</a>
{% assign years = "2025, 2024, 2023, 2022, 2021, 2020, 2019, 2018, 2017, 2016, 2015, 2014, 2013, 2012, 2011" | split: ", " %}
+{% assign maxcount = 0 %}
+{% for year in years -%}
+ {% assign count = 0 %}
+ {%- for post in collections.posts.pages %}
+ {%- assign postyear = post.published_date | date: "%Y" %}
+ {%- if postyear == year %}
+ {% assign count = count | plus: 1 %}
+ {% endif %}
+ {% endfor %}
+ {% if count > maxcount %}
+ {% assign maxcount = count %}
+ {% endif %}
+{% endfor %}
+
+<p>A count of all posts by year — {{ years|size }} years running!</p>
+
+<ol class="archive-chart">
+{% for year in years -%}
+ {% assign count = 0 %}
+ {%- for post in collections.posts.pages %}
+ {%- assign postyear = post.published_date | date: "%Y" %}
+ {%- if postyear == year %}
+ {% assign count = count | plus: 1 %}
+ {% endif %}
+ {% endfor %}
+ <li>
+ <a href="#{{year}}">
+ <span>{{year}}</span>
+ <span>{{count}}</span>
+ </a>
+ {% assign u = count | times: 100 %}
+ {% assign w = u | divided_by: maxcount %}
+ <span class="archive-chart-bar" style="width:{{w}}%"></span>
+ </li>
+{% endfor %}
+</ol>
<table>
{% for year in years -%}
<tr>
diff --git a/style.css b/style.css
index f4c4a60..ea00cfd 100644
--- a/style.css
+++ b/style.css
@@ -326,3 +326,36 @@ h3 {
table { margin: 0; }
table, tr, td { border: none; }
+
+.archive-chart li {
+ list-style: none;
+}
+
+.archive-chart li {
+ position: relative;
+}
+
+.archive-chart li a {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: calc(6rem / 18);
+ position: relative;
+ z-index: 2;
+ text-decoration: none;
+}
+
+.archive-chart li a span:last-child {
+ color: var(--c-text-light);
+ font-size: .77777rem;
+}
+
+.archive-chart-bar {
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 100%;
+ background: rgba(0,0,0,.05);
+ pointer-events: none;
+ z-index: 1;
+}