fnordig/blog
1
Fork 0
Code Activity

Add an archive chart

Browse source 
based on https://blog.jim-nielsen.com/archive/
This commit is contained in:
Jan-Erik Rediger 2025-03-11 15:50:48 +01:00
parent 1099dbdd8b
commit 23657a4629
3 changed files with 70 additions and 1 deletions

2
_layouts/post.liquid
View file

@ -6,7 +6,7 @@
<body>
{% include "_menu.liquid" %}
<main>
<main id="top">
<article>
<h1>{{ page.title }}</h1>
{% assign reading_wpm = 200 %}

36
posts.liquid
View file

@ -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>

33
style.css
View file

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