summaryrefslogtreecommitdiffstats
path: root/templates
diff options
context:
space:
mode:
authorJan T <jan@jantuomi.fi>2026-01-02 14:19:40 +0000
committerJan Tuomi <jan@jantuomi.fi>2026-01-02 16:21:02 +0200
commit6d7e34af89ef1038d213ff8ea325bb84d4a00d4a (patch)
tree9f2a716794f3469e0af3c414556feeafa2219b40 /templates
Initial commit
Diffstat (limited to 'templates')
-rw-r--r--templates/base.html159
-rw-r--r--templates/index.html64
-rw-r--r--templates/page.html56
-rw-r--r--templates/section.html8
4 files changed, 287 insertions, 0 deletions
diff --git a/templates/base.html b/templates/base.html
new file mode 100644
index 0000000..c000c1b
--- /dev/null
+++ b/templates/base.html
@@ -0,0 +1,159 @@
+<!doctype html>
+<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
+ <head>
+ <meta charset="utf-8" />
+ <meta name="generator" content="pandoc" />
+ <meta
+ name="viewport"
+ content="width=device-width, initial-scale=1.0, user-scalable=yes"
+ />
+ <link rel="shortcut icon" type="image/png" href="/favicon.png" />
+ <meta
+ name="author"
+ content="{{ page.author | default(value=config.author) }}"
+ />
+ {% if page.date %}
+ <meta name="dcterms.date" content="{{ page.date }}" />
+ {% endif %} {% if page.extra.keywords %}
+ <meta
+ name="keywords"
+ content="{{ page.extra.keywords | join(sep=', ') }}"
+ />
+ {% endif %} {% block title %} {% if page.title %}
+ <title>{{ page.title }} β€” {{ config.title }}</title>
+ {% else %}
+ <title>{{ config.title }}</title>
+ {% endif %} {% endblock %} {% block description %} {% if
+ page.description %}
+ <meta name="description" content="{{ page.description }}" />
+ {% elif page.summary %}
+ <meta name="description" content="{{ page.summary | striptags }}" />
+ {% else %}
+ <meta name="description" content="{{ config.description }}" />
+ {% endif %} {% endblock %}
+
+ <style>
+ @font-face {
+ font-family: "PT Sans";
+ src: url("/PTSans-Regular.ttf") format("truetype");
+ font-weight: normal;
+ font-style: normal;
+ }
+
+ @font-face {
+ font-family: "PT Sans";
+ src: url("/PTSans-Bold.ttf") format("truetype");
+ font-weight: bold;
+ font-style: normal;
+ }
+
+ @font-face {
+ font-family: "PT Sans";
+ src: url("/PTSans-Italic.ttf") format("truetype");
+ font-weight: normal;
+ font-style: italic;
+ }
+
+ @font-face {
+ font-family: "PT Sans";
+ src: url("/PTSans-BoldItalic.ttf") format("truetype");
+ font-weight: bold;
+ font-style: italic;
+ }
+ </style>
+
+ <link rel="stylesheet" href="/style.css" />
+ <link
+ rel="alternate"
+ type="application/atom+xml"
+ title="Atom Feed for jan.systems"
+ href="/atom.xml"
+ />
+
+ <link rel="authorization_endpoint" href="https://indieauth.com/auth" />
+ </head>
+ <body>
+ <div class="header-row">
+ <a class="page-title" href="/">Jan Tuomi</a>
+ <div id="dark-mode-btn"></div>
+ </div>
+ <nav>
+ <a href="/posts">posts</a>
+ <span aria-hidden="true"> &#x2022; </span>
+ <a href="/linklog">linklog</a>
+ <span aria-hidden="true"> &#x2022; </span>
+ <a href="/now">now</a>
+ <span aria-hidden="true"> &#x2022; </span>
+ <a href="/projects">projects</a>
+ </nav>
+
+ <main>{% block content %}{% endblock %}</main>
+
+ <script>
+ const b = document.createElement("button");
+ b.innerHTML = "πŸŒ“";
+ b.setAttribute("id", "dark-mode-btn");
+ b.setAttribute("aria-label", "Toggle dark mode");
+ document.querySelector("#dark-mode-btn").replaceWith(b);
+
+ const initialManualColorScheme =
+ localStorage.getItem("colorScheme");
+ // If null, no manual color scheme is set
+ if (initialManualColorScheme === "dark") {
+ document.body.parentElement.classList.add("dark");
+ } else if (initialManualColorScheme === "light") {
+ document.body.parentElement.classList.add("light");
+ }
+
+ function getCurrentManualColorScheme() {
+ if (document.body.parentElement.classList.contains("dark"))
+ return "dark";
+ if (document.body.parentElement.classList.contains("light"))
+ return "light";
+ return null;
+ }
+
+ document
+ .querySelector("#dark-mode-btn")
+ .addEventListener("click", function () {
+ const manualColorScheme = getCurrentManualColorScheme();
+ const userPreferenceIsDark =
+ window.matchMedia &&
+ window.matchMedia("(prefers-color-scheme: dark)")
+ .matches;
+
+ const currentColorScheme =
+ manualColorScheme ??
+ (userPreferenceIsDark ? "dark" : "light");
+ const newColorScheme =
+ currentColorScheme === "dark" ? "light" : "dark";
+
+ document.body.parentElement.classList.remove(
+ "dark",
+ "light",
+ );
+ document.body.parentElement.classList.add(newColorScheme);
+
+ localStorage.setItem("colorScheme", newColorScheme);
+ });
+ </script>
+
+ <div style="display: none" class="h-card">
+ <a class="u-url" href="https://jan.systems">jan.systems</a>
+ <a class="u-url" href="https://github.com/jantuomi" rel="me"
+ >GitHub</a
+ >
+ <p class="p-note">
+ Minimalist, digital gardener, senior software engineer.
+ </p>
+ <img
+ class="u-photo"
+ src="https://jan.systems/files/Jan_Tuomi_headshot.jpg"
+ loading="lazy"
+ />
+ <p class="p-name">Jan Tuomi</p>
+ <p class="p-nickname">@jantuomi</p>
+ <p class="p-country-name">Finland</p>
+ </div>
+ </body>
+</html>
diff --git a/templates/index.html b/templates/index.html
new file mode 100644
index 0000000..fdcd433
--- /dev/null
+++ b/templates/index.html
@@ -0,0 +1,64 @@
+{% extends "base.html" %}
+{% block content %}
+
+<p><br>
+ <a href="/files/Jan_Tuomi_headshot.jpg"><img src="/files/Jan_Tuomi_headshot_220.jpg" style="float: right; width: 175px; margin: 0 0 0 20px;"></a>
+ Hi! My name is Jan. I am a senior software engineer based in Finland. Welcome to my personal blog and digital garden<a href="#footnote-digital-garden">ΒΉ</a>.
+</p>
+<p>I like keeping things simple and pragmatic. I'm a life-long learner, but I don't go chasing trends.</p>
+<p>I enjoy spending time with my fiancΓ©e and our dog, tinkering with computer hardware and software, games of all kinds but mostly video-, tabletop and role-playing, electronics, music, language learning and linguistics.</p>
+<p>I created this site<a href="#footnote-site">Β²</a> as a creative outlet for expressing myself and sharing my experiences.</p>
+
+{% set posts = get_section(path="posts/_index.md") %}
+<section class="latest-posts">
+<h2>Latest posts</h2>
+<ul class="archive-list">
+{% for page in posts.pages %}
+<li class="archive-entry">
+ <a href="{{ page.path }}">{{ page.title }}</a>
+ <small>({{ page.date | date(format="%Y-%m-%d") }})</small>
+</li>
+{% endfor %}
+</section>
+
+<p>The <a href="/posts">posts</a> page is a listing of my posts. I post sporadically about various subjects and with varying levels of effort.</p>
+<p>The <a href="/linklog">linklog</a> page contains a curated aggregation of bookmarks, saved blog posts and essays, books, series, papers or anything else that I feel like sharing or recommending, stored in <a href="https://ln.ht/~jant">Linkhut</a>.</p>
+<p>On the <a href="/now">now</a> page I write what's currently going on in my life. Stuff that some would write onto their social media page.</p>
+<p>The <a href="/projects">projects</a> page contains info about my hobby projects.</p>
+
+<div style="display: flex; flex-flow: row wrap; justify-content: space-between; margin: 0 -16px;">
+<div style="flex: 1; margin: 0 16px; min-width: 300px;">
+<h2>Contact</h2>
+<ul>
+<li><a href="https://fi.linkedin.com/in/jantuomi">LinkedIn</a> (jantuomi)</li>
+<li><a href="https://dice.camp/@kal_jan">Mastodon</a> (dice.camp/@kal_jan)</li>
+<li>Email (jan <i>at</i> jantuomi <i>dot</i> fi)</li>
+<li><a href="https://kal-jan.itch.io/">itch.io</a> (kal_jan)</li>
+<li><a href="https://github.com/jantuomi" rel="me">Github</a> (jantuomi)</li>
+</ul>
+</div>
+<div style="flex: 1; margin: 0 16px; min-width: 300px;" class="webrings">
+<h2>Webrings</h2>
+<a href="https://xn--sr8hvo.ws/previous">←</a>
+An <a href="https://xn--sr8hvo.ws">IndieWeb Webring</a> <span style="font-family: initial">πŸ’</span>
+<a href="https://xn--sr8hvo.ws/next">β†’</a>
+<br>
+<a href="https://fediring.net/previous?host=jan.systems">←</a>
+<a href="https://fediring.net/">Fediring</a>
+<a href="https://fediring.net/next?host=jan.systems">β†’</a>
+
+</div>
+</div>
+
+<hr>
+
+<p id="footnote-digital-garden">
+[1] <em>The phrase "digital garden" is a metaphor for thinking about writing and creating that focuses less on the resulting "showpiece" and more on the process, care, and craft it takes to get there. β€” <a href="https://joelhooks.com/digital-garden/">Joel Hooks</a></em>
+</p>
+
+<p id="footnote-site">
+[2] This site is written using the <a href="https://www.getzola.org/">Zola</a> static site generator. <a href="/posts/deploying-the-garden">At first</a>, the site was automatically deployed after every Markdown edit, but nowadays I use a more traditional manual deploy mechanism.
+</p>
+
+
+{% endblock %}
diff --git a/templates/page.html b/templates/page.html
new file mode 100644
index 0000000..19f42a7
--- /dev/null
+++ b/templates/page.html
@@ -0,0 +1,56 @@
+{% extends "base.html" %} {% block content %}
+
+<h1>
+ {{ page.title }}<br />
+ <small>{{ page.date }}</small>
+ <small>[{{ page.extra.kind }}]</small>
+</h1>
+
+{% block lede %}
+<p>{{ page.description }}</p>
+{% endblock %}
+
+{% block toc %}
+<ul>
+ {% for h1 in page.toc %}
+ <li><a href="#{{ h1.id }}">{{ h1.title }}</a></li>
+ <ul>
+ {% for h2 in h1.children %}
+ <li><a href="#{{ h2.id }}">{{ h2.title }}</a></li>
+ <ul>
+ {% for h3 in h2.children %}
+ <li><a href="#{{ h3.id }}">{{ h3.title }}</a></li>
+ {% endfor %}
+ </ul>
+ {% endfor %}
+ </ul>
+ {% endfor %}
+</ul>
+{% endblock %}
+
+{{ page.content | safe }}
+
+<nav class="post-nav" aria-label="Post navigation">
+ {% if page.lower %}
+ <div class="post-nav-left"><a class="post-nav-link" href="{{ page.lower.permalink }}">← {{ page.lower.title }}</a></div>
+ {% endif %}
+ {% if page.higher %}
+ <div class="post-nav-right"><a class="post-nav-link" href="{{ page.higher.permalink }}">{{ page.higher.title }} β†’</a></div>
+ {% endif %}
+</nav>
+
+<div style="display: none" class="h-entry">
+ <div class="e-content p-name">{{ page.title }}</div>
+ <a rel="author" class="p-author h-card" href="https://jan.systems">
+ <img
+ class="u-photo"
+ src="https://jan.systems/files/Jan_Tuomi_headshot.jpg"
+ loading="lazy"
+ />
+ Jan Tuomi
+ </a>
+ <a class="u-url" href="https://jan.systems/{{ page.path }}">
+ Published <time class="dt-published">{{ page.date }}</time>
+ </a>
+</div>
+{% endblock %}
diff --git a/templates/section.html b/templates/section.html
new file mode 100644
index 0000000..c9ed8b1
--- /dev/null
+++ b/templates/section.html
@@ -0,0 +1,8 @@
+{% extends "base.html" %} {% block content %}
+
+<h1>{{ section.title }}</h1>
+{% for page in section.pages %}
+<ul>
+ <li><a href="{{ page.path }}">{{ page.title }}</a></li>
+</ul>
+{% endfor %} {% endblock %}

Want to contribute? Host your changes somewhere and send me the link: jan (at) sydanviita.fi. Also, check out my website.


forge.jan.systems — powered by cgit