Add a blog

author: Ruben Beltran del Rio <jj@r.bdr.sh> 2026-01-26 16:13:52 +0100
committer: Ruben Beltran del Rio <jj@r.bdr.sh> 2026-01-27 16:20:37 +0100
commit: c4be3181b6f9dc02f6b659506706445c11d9db45 (patch)
tree: a6e386e7f0e92a008bbdf80cfbb55bc75dcbe4d6 /templates
parent: 5737068b4153ba6173206bdb05e504a41ee87d3b (diff)
11 files changed, 172 insertions, 14 deletions
diff --git a/templates/base.html b/templates/base.html
index 5cc8b33..62629ff 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -1,3 +1,5 @@
+{% import "header_macros.html" as header_macros %}
+
 <!DOCTYPE HTML>
 
 <html lang="en">
@@ -5,11 +7,11 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="author" content="Rubén Beltrán del Río">
-    <meta name="description" content="{{ section.description }}">
+    <meta name="description" content="{{ config.description }}">
     <meta name="theme-color" content="#0000f5">
     <meta name="fediverse:creator" content="@ruben@friendship.quest" />
 
-    <title>Rubén Beltrán del Río &mdash; {{ section.title }}</title>
+    <title>Rubén Beltrán del Río &mdash; {{ config.title }}</title>
 
     <link rel="canonical" href="{{current_url | safe}}">
 
@@ -19,22 +21,19 @@
     <link rel="preload" href="/font/LibreCaslonText-Italic[wght].woff2" as="font" type="font/woff2" crossorigin>
 
     <link rel="stylesheet" type="text/css" href="/css/style.css">
+    <link href="//fastly-cloud.typenetwork.com/projects/8926/fontface.css?6977e213" rel="stylesheet" type="text/css">
     <link rel="author" href="humans.txt">
 
     <link rel="icon" href="/img/favicon.png" />
 
+    <link rel="alternate" href="/atom.xml" hreflang="en" title="Atom feed, all posts.">
+
     <script type="module" src="/js/animation.js"></script>
   </head>
   <body>
-    <header>
-      <h1>
-        <canvas width="75" height="75" aria-hidden="true"></canvas>
-        <a href="/">Rubén Beltrán del Río</a>
-      </h1>
-      <p>✷ Holistic
-             tech
-                services ✷</p>
-    </header>
+    {% block header %}
+    {{ header_macros::main_header() }}
+    {% endblock %}
     <main>
       {% block content %}{% endblock %}
     </main>
@@ -43,10 +42,10 @@
         <ul>
           <li><a href="/impressum">Impressum</a></li>
           <li><a href="/privacy-policy">Privacy Policy</a></li>
+          <li><a href="/blog">Blog</a></li>
           <li>Check out <a href="https://r.bdr.sh">my personal website.</a></li>
         </ul>
       </menu>
     </footer>
   </body>
 </html>
-
diff --git a/templates/blog.html b/templates/blog.html
new file mode 100644
index 0000000..cd3c104
--- /dev/null
+++ b/templates/blog.html
@@ -0,0 +1,18 @@
+{% extends "base.html" %}
+{% import "post_macros.html" as post_macros %}
+{% import "header_macros.html" as header_macros %}
+{% import "pagination_macros.html" as pagination_macros %}
+
+{% block header %}
+  {{ header_macros::small_header() }}
+{% endblock %}
+
+{% block content %}
+  <section class="blog-index single-column">
+    <h1>Articles.</h1>
+    {% for page in paginator.pages %}
+    {{ post_macros::summary(post=page) }}
+    {% endfor %}
+    {{ pagination_macros::index_pages() }}
+  </section>
+{% endblock %}
diff --git a/templates/blog_post.html b/templates/blog_post.html
new file mode 100644
index 0000000..82850c6
--- /dev/null
+++ b/templates/blog_post.html
@@ -0,0 +1,19 @@
+{% extends "base.html" %}
+{% import "header_macros.html" as header_macros %}
+{% import "post_macros.html" as post_macros %}
+{% import "pagination_macros.html" as pagination_macros %}
+
+{% block header %}
+  {{ header_macros::small_header() }}
+{% endblock %}
+
+{% block content %}
+<article class="blog-post single-column">
+  <h1>
+    <a href="{{ page.permalink }}">{{ page.title }}</a>
+  </h1>
+  {{ post_macros::meta(post=page) }}
+  {{ page.content | safe }}
+  {{ pagination_macros::page_pages() }}
+</article>
+{% endblock %}
diff --git a/templates/header_macros.html b/templates/header_macros.html
new file mode 100644
index 0000000..efe286c
--- /dev/null
+++ b/templates/header_macros.html
@@ -0,0 +1,19 @@
+{% macro main_header() %}
+  <header>
+    <h1>
+      <canvas width="75" height="75" aria-hidden="true"></canvas>
+      <a href="/">Rubén Beltrán del Río</a>
+    </h1>
+    <p>✷ Holistic
+           tech
+              services ✷</p>
+  </header>
+{% endmacro post_summary %}
+
+{% macro small_header() %}
+  <header class="small">
+    <canvas width="75" height="75" aria-hidden="true"></canvas>
+    <p><a href="/">✷ Holistic tech services ✷</a></p>
+  </header>
+{% endmacro post_summary %}
+
diff --git a/templates/pagination_macros.html b/templates/pagination_macros.html
new file mode 100644
index 0000000..89e8c98
--- /dev/null
+++ b/templates/pagination_macros.html
@@ -0,0 +1,25 @@
+{% macro index_pages() %}
+  <nav class="pager">
+  {% if paginator.next or paginator.previous%}
+    {% if paginator.previous %}
+    <article class="newer"><a href="{{ paginator.previous }}"> 〈〈 Newer</a></article>
+    {% endif %}
+    {% if paginator.next %}
+    <article class="older"><a href="{{ paginator.next }}"> Older 〉〉</a></article>
+    {% endif %}
+  {% endif %}
+  </nav>
+{% endmacro index_pages %}
+
+{% macro page_pages() %}
+  <nav class="pager">
+  {% if page.lower or page.higher %}
+    {% if page.lower %}
+    <article class="newer"><a href="{{ page.lower.permalink }}"> 〈〈 {{ page.lower.title }}</a></article>
+    {% endif %}
+    {% if page.higher %}
+    <article class="older"><a href="{{ page.higher.permalink }}"> {{ page.higher.title }} 〉〉</a></article>
+    {% endif %}
+  {% endif %}
+  </nav>
+{% endmacro page_pages %}
diff --git a/templates/post_macros.html b/templates/post_macros.html
new file mode 100644
index 0000000..c128bc5
--- /dev/null
+++ b/templates/post_macros.html
@@ -0,0 +1,42 @@
+{% macro meta(post) %}
+  <hr>
+  <aside class="meta">
+    <time datetime="{{ post.date }}">{{ post.date | date(format="%e %B %Y") }}</time>
+    {% if post.taxonomies.categories %}
+      <article class="category">
+        §
+        {% for category in post.taxonomies.categories %}
+        <a href="{{ get_taxonomy_url(kind="categories", name=category) }}">{{ category }}</a>
+        {% endfor %}
+      </article>
+    {% endif %}
+    {% if post.taxonomies.categories %}
+      <article class="tags">
+        ∈
+        <menu>
+        {% for tag in post.taxonomies.tags %}
+        <li><a href="{{ get_taxonomy_url(kind="tags", name=tag) }}">{{ tag }}</a></li>
+        {% endfor %}
+        </menu>
+      </article>
+    {% endif %}
+  </aside>
+{% endmacro meta %}
+
+{% macro summary(post) %}
+<article class="post-summary">
+  <h2>
+    <a href="{{ post.permalink }}">{{ post.title }}</a>
+  </h2>
+  {{ post_macros::meta(post=post) }}
+  {% if post.extra.visual_aid_src and post.extra.visual_aid_alt %}
+  <section class="hero-summary">
+    {% set resized_image =  resize_image(path=post.extra.visual_aid_src, width=100, height=75) %}
+    <img src="{{ resized_image.url }}" alt="{{post.extra.visual_aid_alt}}" title="{{post.extra.visual_aid_alt}}">
+    <p>{{ post.summary | safe }}</p>
+  </section>
+  {% else %}
+  <p>{{ post.summary | safe }}</p>
+  {% endif %}
+</article>
+{% endmacro summary %}
diff --git a/templates/shortcodes/hero.html b/templates/shortcodes/hero.html
new file mode 100644
index 0000000..09c6d6f
--- /dev/null
+++ b/templates/shortcodes/hero.html
@@ -0,0 +1 @@
+<img title="{{ page.extra.visual_aid_alt }}" alt="{{ page.extra.visual_aid_alt }}" src="{{ page.extra.visual_aid_src }}">
diff --git a/templates/shortcodes/window.html b/templates/shortcodes/window.html
index 3fe8b50..6fe4a90 100644
--- a/templates/shortcodes/window.html
+++ b/templates/shortcodes/window.html
@@ -1,4 +1,4 @@
-<section class="window cutoff-corners">
+<section class="window cutoff-corners {% if classes %}{{classes}}{% endif %}">
   <header class="titlebar">
     <span class="label">{{title}}</span>
   </header>
diff --git a/templates/taxonomy_list.html b/templates/taxonomy_list.html
new file mode 100644
index 0000000..18e53ce
--- /dev/null
+++ b/templates/taxonomy_list.html
@@ -0,0 +1,17 @@
+{% extends "base.html" %}
+{% import "header_macros.html" as header_macros %}
+
+{% block header %}
+  {{ header_macros::small_header() }}
+{% endblock %}
+
+{% block content %}
+<section class="taxonomy single-column">
+  <h1>{{ taxonomy.name | title }}</h1>
+  <ul>
+    {% for term in terms %}
+      <li><a href="{{ term.permalink }}">{{ term.name }}</a></li>
+    {% endfor %}
+  </ul>
+</section>
+{% endblock %}
diff --git a/templates/taxonomy_single.html b/templates/taxonomy_single.html
new file mode 100644
index 0000000..e90c968
--- /dev/null
+++ b/templates/taxonomy_single.html
@@ -0,0 +1,18 @@
+{% extends "base.html" %}
+{% import "header_macros.html" as header_macros %}
+{% import "post_macros.html" as post_macros %}
+{% import "pagination_macros.html" as pagination_macros %}
+
+{% block header %}
+  {{ header_macros::small_header() }}
+{% endblock %}
+
+{% block content %}
+<section class="taxonomy-index single-column">
+  <h1><a href="/{{taxonomy.name | slugify}}">{{ taxonomy.name | title }}</a> / {{ term.name }}</h1>
+  {% for page in paginator.pages %}
+    {{ post_macros::summary(post=page) }}
+  {% endfor %}
+  {{ pagination_macros::index_pages() }}
+</section>
+{% endblock %}
diff --git a/templates/text.html b/templates/text.html
index 9ba2a71..0ca19f4 100644
--- a/templates/text.html
+++ b/templates/text.html
@@ -1,7 +1,7 @@
 {% extends "base.html" %}
 
 {% block content %}
-<section id="text">
+<section class="text single-column">
 
       {{ section.content | safe }}
 </section>
author	Ruben Beltran del Rio <jj@r.bdr.sh>	2026-01-26 16:13:52 +0100
committer	Ruben Beltran del Rio <jj@r.bdr.sh>	2026-01-27 16:20:37 +0100
commit	c4be3181b6f9dc02f6b659506706445c11d9db45 (patch)
tree	a6e386e7f0e92a008bbdf80cfbb55bc75dcbe4d6 /templates
parent	5737068b4153ba6173206bdb05e504a41ee87d3b (diff)