fnordig/blog
1
Fork 0
Code Activity

Compare commits

...

13 commits
1099dbdd8b ... 71d551c305

Author SHA1 Message Date
Jan-Erik Rediger
71d551c305 Updated posts list for posts by tag 2025-03-30 12:24:13 +02:00
Jan-Erik Rediger
261ddc6f6a ensure there's less newlines 2025-03-30 12:15:57 +02:00
Jan-Erik Rediger
804953cbd1 small border in between 2025-03-30 12:15:57 +02:00
Jan-Erik Rediger
42961957c5 add correct datetime 2025-03-30 12:15:57 +02:00
Jan-Erik Rediger
1454973f77 better coloring for the bars 2025-03-30 12:15:57 +02:00
Jan-Erik Rediger
a963c3896b Post lists with date below 2025-03-30 12:15:57 +02:00
Jan-Erik Rediger
2537faf77c maybe better with sans-serif now? 2025-03-30 12:15:57 +02:00
Jan-Erik Rediger
1b3ea99b50 global font spec 2025-03-30 12:15:57 +02:00
Jan-Erik Rediger
533c506eea set link color for these links 2025-03-30 12:15:57 +02:00
Jan-Erik Rediger
8939e7e02a link id 2025-03-30 12:15:57 +02:00
Jan-Erik Rediger
a3f5ecc475 Revert "add an arrow to jump to the top" 
This reverts commit 6c4504e766b5bed6e9c12c7f20e3a3adf9b19346.
 2025-03-30 12:15:57 +02:00
Jan-Erik Rediger
7f2b61fb1f add an arrow to jump to the top 2025-03-30 12:15:57 +02:00
Jan-Erik Rediger
23657a4629 Add an archive chart 
based on https://blog.jim-nielsen.com/archive/
 2025-03-30 12:15:57 +02:00
6 changed files with 165 additions and 39 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 %}

71
posts.liquid
View file

@ -8,23 +8,60 @@ 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: ", " %}
<table>
{% 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 -%}
<tr>
<td>&nbsp;</td>
<td><h2>{{year}}</h2></td>
</tr>
{% 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 -%}
{%- for post in collections.posts.pages %}
{%- assign postyear = post.published_date | date: "%Y" %}
{%- if postyear == year %}
<tr>
<td>{{ post.published_date | date: "%d. %b"}}</td>
<td><a href="/{{post.permalink }}">{{post.title}}</a></td>
</tr>
{%- endif %}
{%- endfor %}
<p>A count of all posts by year — {{ years|size }} years running!</p>
{%- endfor %}
</table>
<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>
{% for year in years -%}
<h2 id="{{year}}">{{year}}</h2>
<ul class="posts-list">
{%- for post in collections.posts.pages -%}
{% assign postyear = post.published_date | date: "%Y" -%}
{% if postyear == year %}
<li>
<a href="/{{post.permalink }}">
<span>{{post.title}}</span>
<span>
<time datetime="{{ post.published_date | date: "%FT%T%z" }}">{{ post.published_date | date: "%Y-%m-%d"}}</time>
</span>
</a>
</li>
{% endif -%}
{% endfor -%}
</ul>
{% endfor -%}

83
style.css
View file

@ -24,8 +24,12 @@
font-weight: bold;
}
:root {
--font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
}
html{
font-family:Crimson,Palatino,Georgia,Lucida Bright,Book Antiqua,serif;
font-family: var(--font);
font-size:16px;
line-height:1.5rem
}
@ -37,6 +41,7 @@ html[data-theme='light'] {
--alt-text-color: black;
--code-bg: rgba(0,0,0,.05);;
--border-color: rgba(0,0,0,.05);
--bar-color: rgba(0,0,0,.05);
--link-color: #00e;
--link-color-visited: #60b;
--inline-code: #111;
@ -48,6 +53,7 @@ html[data-theme='dark'] {
--alt-text-color: #999999;
--code-bg: #ccc;
--border-color: #414141;
--bar-color: #232b34;
--link-color: #478be6;
--link-color-visited: #c988ff;
--inline-code: #323232;
@ -285,11 +291,11 @@ blockquote p {
}
h2 {
font: 600 30px "Crimson", Georgia, serif;
font: 600 30px var(--font);
}
h3 {
font: 600 20px "Crimson", Georgia, serif;
font: 600 20px var(--font);
}
.clearfix:after {
@ -326,3 +332,74 @@ h3 {
table { margin: 0; }
table, tr, td { border: none; }
.archive-chart {
display: flex;
flex-direction: column;
list-style: none;
margin: 0;
padding: 0;
gap: calc(2rem / 18);
}
.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;
color: var(--link-color);
}
.archive-chart li a:hover span:first-child {
text-decoration: underline;
}
.archive-chart li a span:last-child {
color: var(--text-color);
font-size: .8rem;
}
.archive-chart-bar {
position: absolute;
top: 0;
left: 0;
height: 100%;
background-color: var(--bar-color);
pointer-events: none;
z-index: 1;
}
ol.archive-chart,
ul.posts-list {
padding-left: 0;
}
.posts-list li {
list-style: none;
}
.posts-list li:not(:last-child) {
border-bottom: 1px solid var(--border-color);
}
.posts-list li a {
display: flex;
flex-direction: column;
text-decoration: none;
padding: calc(12rem / 18) 0px;
}
.posts-list li a:hover span:first-child {
text-decoration: underline;
}
.posts-list span:first-child {
font-size: 1.1rem;
}
.posts-list span:last-child {
font-size: 0.8rem;
}

16
tagged/mozilla.liquid
View file

@ -8,14 +8,18 @@ data:
<a href="/tagged/mozilla.xml">RSS Feed</a>
<table>
<ul class="posts-list">
{%- for post in collections.posts.pages %}
{%- assign postyear = post.published_date | date: "%Y" %}
{%- if post.tags and post.tags contains "mozilla" -%}
<tr>
<td>{{ post.published_date | date: "%d. %b %Y"}}</td>
<td><a href="/{{post.permalink }}">{{post.title}}</a></td>
</tr>
<li>
<a href="/{{post.permalink }}">
<span>{{post.title}}</span>
<span>
<time datetime="{{ post.published_date | date: "%FT%T%z" }}">{{ post.published_date | date: "%Y-%m-%d"}}</time>
</span>
</a>
</li>
{%- endif %}
{%- endfor %}
</table>
</ul>

16
tagged/nix.liquid
View file

@ -8,14 +8,18 @@ data:
<a href="/tagged/nix.xml">RSS Feed</a>
<table>
<ul class="posts-list">
{%- for post in collections.posts.pages %}
{%- assign postyear = post.published_date | date: "%Y" %}
{%- if post.tags and post.tags contains "nix" -%}
<tr>
<td>{{ post.published_date | date: "%d. %b %Y"}}</td>
<td><a href="/{{post.permalink }}">{{post.title}}</a></td>
</tr>
<li>
<a href="/{{post.permalink }}">
<span>{{post.title}}</span>
<span>
<time datetime="{{ post.published_date | date: "%FT%T%z" }}">{{ post.published_date | date: "%Y-%m-%d"}}</time>
</span>
</a>
</li>
{%- endif %}
{%- endfor %}
</table>
</ul>

16
tagged/rust.liquid
View file

@ -8,14 +8,18 @@ data:
<a href="/tagged/rust.xml">RSS Feed</a>
<table>
<ul class="posts-list">
{%- for post in collections.posts.pages %}
{%- assign postyear = post.published_date | date: "%Y" %}
{%- if post.tags and post.tags contains "rust" -%}
<tr>
<td>{{ post.published_date | date: "%d. %b %Y"}}</td>
<td><a href="/{{post.permalink }}">{{post.title}}</a></td>
</tr>
<li>
<a href="/{{post.permalink }}">
<span>{{post.title}}</span>
<span>
<time datetime="{{ post.published_date | date: "%FT%T%z" }}">{{ post.published_date | date: "%Y-%m-%d"}}</time>
</span>
</a>
</li>
{%- endif %}
{%- endfor %}
</table>
</ul>