fix: Ignore tailwindcss' output

.gitignore

@@ -2,3 +2,7 @@ _site
 result
 .direnv
 .envrc
+public/
+
+# Generated using tailwindcss
+static/css/index.css

.woodpecker.yml

@@ -0,0 +1,16 @@
+steps:
+  build:
+    image: alpine:3.19
+    commands:
+      - apk add --no-cache zola npm
+      - npm install -D tailwindcss @tailwindcss/typography
+      - npx tailwindcss -i input.css -o static/css/index.css --minify
+      - zola build
+  deploy:
+    image: git.polynom.me/papatutuwawa/woodpecker-ssg-deploy@sha256:c7e2e8ad5d096ca6a628ffbbfa1026dce21784305f6069985d830c4167abcbda
+    secrets: [ git_push_token ]
+    settings:
+      email: "ci@polynom.me"
+      name: "polynom.me CI system"
+      token_env: "GIT_PUSH_TOKEN"
+      output: "public"

Makefile

@@ -1,27 +0,0 @@
-BUILD_DATE := $(shell date '+%H:%M %d.%m.%Y')
-
-serve:
-	python ../shared-assets/makesite.py \
-		-p params.json \
-		-v page_assets=/assets \
-		-v build_time="${BUILD_DATE}" \
-		--assets ../shared-assets/assets \
-		--assets ./assets \
-		--copy-assets \
-		--ignore ../shared-assets/assets/img \
-		--include robots.txt
-	# A workaround to making the fonts load without the CDN
-	mv _site/assets/fonts _site/fonts
-	cp -r well-known _site/.well-known
-	cd _site/ && python -m http.server 8080
-
-build:
-	python ../shared-assets/makesite.py \
-		-p params.json \
-		-v page_assets=https://cdn.polynom.me \
-		-v build_time="${BUILD_DATE}" \
-		--assets ./assets \
-		--copy-assets \
-		--include robots.txt
-	cp -r well-known _site/.well-known
-	tar -czf blog.tar.gz _site

config.toml

@@ -0,0 +1,46 @@
+base_url = "https://polynom.me"
+
+title = "PapaTutuWawa's Website"
+description = "The personal website of Alexander 'PapaTutuWawa'."
+
+[extra]
+# Code information
+gitea_url = "git.polynom.me"
+gitea_username = "PapaTutuWawa"
+github_username = "PapaTutuWawa"
+codeberg_username = "PapaTutuWawa"
+
+# Contact information
+email_user = "papatutuwawa"
+email_domain = "polynom.me"
+gpg_key_url = "pki.polynom.me/pubkeys/papatutuwawa.pub"
+fediverse_instance = "social.polynom.me"
+fediverse_username = "papatutuwawa"
+
+[[extra.projects]]
+title = "Moxxy"
+description = "A modern XMPP client written in Flutter. Licensed under GPLv3."
+screenshot = "img/moxxy.jpg"
+source_url = "codeberg.org/moxxy/moxxyv2"
+website = "moxxy.org"
+
+[[extra.projects]]
+title = "AniTrack"
+description = "A simple Anime and Manga tracker written in Flutter. Licensed under MIT."
+screenshot = "img/anitrack.jpg"
+source_url = "codeberg.org/PapaTutuWawa/anitrack"
+website = "codeberg.org/PapaTutuWawa/anitrack"
+
+[[extra.projects]]
+title = "xmpp-discord-bridge"
+description = "An XMPP to Discord bridge that attempts to feel as native as possible on each chat platform, written in Python. Licensed under GPLv3."
+screenshot = ""
+source_url = "codeberg.org/PapaTutuWawa/xmpp-discord-bridge.git"
+website = "codeberg.org/PapaTutuWawa/xmpp-discord-bridge.git"
+
+[[extra.projects]]
+title = "mira"
+description = "An XMPP bot framework for persistent subscription services, written in Python. Licensed under GPLv3."
+screenshot = ""
+source_url = "git.polynom.me/PapaTutuWawa/mira"
+website = "git.polynom.me/PapaTutuWawa/mira"

content/_index.md

@@ -0,0 +1,4 @@
++++
+title = "PapaTutuWawa's Website"
+template = "index.html"
++++

content/code.html

@@ -1,30 +0,0 @@
-<!-- title: Code | polynom.me -->
-<!-- description: Alexander 'PapaTutuWawa' 's code repositories. -->
-<!-- render: yes -->
-
-<div class="flex flex-col pt-8 mx-auto">
-  <p class="prose text-white">
-    I keep my code mostly on my private Gitea instance <a class="text-indigo-400"
-      href="https://{{ gitea_url }}/{{ gitea_username }}">here</a>.
-    For purposes of allowing other people to also contribute
-    I try to mirror my code on GitHub and codeberg.
-  </p>
-
-  <div class="pt-8 w-full">
-    <table class="text-white pt-8 w-full">
-      <tr>
-        <td>GitHub</td>
-        <td><a class="text-indigo-400" href="https://github.com/{{ github_username }}">{{ github_username }}</a></td>
-      </tr>
-      <tr>
-        <td>Codeberg</td>
-        <td><a class="text-indigo-400" href="https://codeberg.org/{{ codeberg_username }}">{{ codeberg_username }}</a>
-        </td>
-      </tr>
-      <tr>
-        <td>Gitea</td>
-        <td><a class="text-indigo-400" href="https://{{ gitea_url }}/{{ gitea_username }}">{{ gitea_username }}</a></td>
-      </tr>
-    </table>
-  </div>
-</div>

content/code.md

@@ -0,0 +1,5 @@
++++
+title = "Code | polynom.me"
+description = "Alexander 'PapaTutuWawa' 's code repositories."
+template = "code.html"
++++

content/contact.md

@@ -0,0 +1,5 @@
++++
+title = "Contact | polynom.me"
+description = "Contact details for getting in touch with Alexander 'PapaTutuWawa'."
+template = "contact.html"
++++

content/index.html

@@ -1,19 +0,0 @@
-<!-- title: Home | polynom.me -->
-<!-- description: The personal website of Alexander 'PapaTutuWawa'. -->
-<!-- render: yes -->
-
-<div class="flex flex-col mx-auto">
-  <p class="text-white prose py-8 self-center">
-    Hello! My online pseudonym is <i>PapaTutuWawa</i> and I am
-    just some random person on the Internet who is passionate about
-    topics like XMPP, federated Internet services and privacy. Linux system
-    administration, Linux tinkering and programming are my favourite things to do.
-  </p>
-
-  <h1 class="prose text-2xl text-indigo-400 self-start">Projects</h1>
-  <p class="prose text-white text-left self-start">This is a small selection of my projects. More are available <a
-      class="text-indigo-400" href="code.html">here.</a></p>
-
-{{ for_each projects layout/templates/project.html }}
-
-</div>

flake.nix

@@ -14,28 +14,17 @@
     supportedSystems = [ "x86_64-linux" ];
     forAllSystems = nixpkgs.lib.attrsets.genAttrs supportedSystems;
   in {
-    packages = forAllSystems (system: let
+    devShell = forAllSystems (system: let
       pkgs = import nixpkgs { inherit system; };
-
       tailwindWithTypography = pkgs.nodePackages.tailwindcss.overrideAttrs (old: {
         plugins = [
           pkgs.nodePackages."@tailwindcss/typography"
         ];
       });
-    in {
-      default = pkgs.callPackage ./pkgs/website.nix {
-        shared-assets = assets.packages.${system}.default;
 
-        inherit tailwindWithTypography;
-      };
-    });
-
-    devShell = forAllSystems (system: let
-      pkgs = import nixpkgs { inherit system; };
-      pythonEnv = pkgs.python3.withPackages (ps: with ps; [ markdown ]);
     in pkgs.mkShell {
       buildInputs = with pkgs; [
-        pythonEnv
+        tailwindWithTypography zola
       ];
     });
   };

layout/page.html

@@ -1,34 +0,0 @@
-<!doctype html>
-<html>
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link href="/assets/css/index.css" rel="stylesheet" />
-    <link rel="shortcut icon" href="/assets/img/favicon.ico" sizes="32x32" />
-    <link href="/feed.xml" type="application/atom+xml" rel="alternate" title="Moxxy Blog" />
-
-	  <meta property="og:title" content="{{ title }}" />
-  	<meta property="og:description" content="{{ description }}" />
-
-  	<title>{{ title }}</title>
-  </head>
-  <body>
-    <div class="flex flex-col p-2 md:p-8 items-start md:w-4/5 mx-auto">
-      <!-- Header -->
-      <div class="flex flex-row self-center">
-        <img class="w-12 h-12 md:w-24 md:h-24 rounded-lg" src="{{ page_assets }}/img/avatar.jpg" alt="Profile picture"/>
-        <div class="ml-4 self-center">
-          <a class="self-center text-2xl font-bold" href="/">PapaTutuWawa's Website</a>
-
-            <ul class="list-none">
-              <li class="inline mr-8"><a href="https://blog.polynom.me">Blog</a></li>
-              <li class="inline mr-8"><a href="/code.html">Code</a></li>
-              <li class="inline mr-8"><a href="/contact.html">Contact</a></li>
-            </ul>
-        </div>
-      </div>
-
-      {{ content }}
-    </div>
-  </body>
-</html>

layout/templates/no_screenshot.html

@@ -1,7 +0,0 @@
-<div class="flex justify-center md:w-48 md:h-48 w-24 h-24 rounded-lg clickable bg-indigo-950">
-  <a class="prose text-white text-5xl" href="https://{{ item.source_url }}">
-    <div class="md:w-48 md:h-48 w-24 h-24 flex flex-col justify-center">
-      <span class="text-center">#</span>
-    </div>
-  </a>
-</div>

layout/templates/project.html

@@ -1,14 +0,0 @@
-<div class="flex flex-row self-start pt-8">
-  {{ template_if_empty item.screenshot layout/templates/no_screenshot.html layout/templates/screenshot.html }}
-  <div class="flex flex-col pl-8">
-    <h2 class="prose text-indigo-400 text-2xl">{{ item.title }}</h2>
-    <p class="prose text-white text-justify">{{ item.description }}</p>
-
-    <div class="pt-4">
-      <ul>
-        {{ template_if_empty item.website layout/templates/empty.html layout/templates/project_website.html }}
-        <li><a class="prose text-indigo-400" href="https://{{ item.source_url }}">Code</a></li>
-      </ul>
-    </div>
-  </div>
-</div>

layout/templates/project_website.html

@@ -1 +0,0 @@
-<li><a class="text-indigo-400" href="https://{{ item.website }}">Website</a></li>

layout/templates/screenshot.html

@@ -1,5 +0,0 @@
-<div>
-  <a href="https://{{ item.source_url }}" target="_blank">
-    <img class="w-24 md:w-48 max-w-none rounded-lg clickable" src="{{ item.screenshot }}" alt="Screenshot of {{ item.title }}" />
-  </a>
-</div>

params.json

@@ -1,42 +0,0 @@
-{
-    "author_name": "Alexander \"PapaTutuWawa\"",
-    "blog_url": "blog.polynom.me",
-
-    "fediverse_instance": "social.polynom.me",
-    "fediverse_username": "papatutuwawa",
-
-    "email_domain": "polynom.me",
-    "email_user": "papatutuwawa",
-    "gpg_key_url": "pki.polynom.me/pubkeys/papatutuwawa.pub",
-
-    "github_username": "PapaTutuWawa",
-    "codeberg_username": "PapaTutuWawa",
-    "gitea_username": "PapaTutuWawa",
-    "gitea_url": "git.polynom.me",
-
-    "projects": [{
-	"title": "Moxxy",
-	"description": "A modern XMPP client written in Flutter. Licensed under GPLv3.",
-	"screenshot": "assets/img/moxxy.jpg",
-	"source_url": "codeberg.org/moxxy/moxxyv2",
-	"website": "codeberg.org/moxxy/moxxyv2"
-    }, {
-	"title": "AniTrack",
-	"description": "A simple Anime and Manga tracker written in Flutter. Licensed under MIT.",
-	"screenshot": "assets/img/anitrack.jpg",
-	"source_url": "codeberg.org/PapaTutuWawa/anitrack",
-	"website": "codeberg.org/PapaTutuWawa/anitrack"
-    }, {
-	"title": "xmpp-discord-bridge",
-	"description": "An XMPP to Discord bridge that attempts to feel as native as possible on each chat platform, written in Python. Licensed under GPLv3.",
-	"screenshot": "",
-	"source_url": "codeberg.org/PapaTutuWawa/xmpp-discord-bridge.git",
-	"website": "codeberg.org/PapaTutuWawa/xmpp-discord-bridge.git"
-    }, {
-	"title": "mira",
-	"description": "An XMPP bot framework for persistent subscription services, written in Python. Licensed under GPLv3.",
-	"screenshot": "",
-	"source_url": "git.polynom.me/PapaTutuWawa/mira",
-	"website": "git.polynom.me/PapaTutuWawa/mira"
-    }]
-}

pkgs/website.nix

@@ -1,44 +0,0 @@
-{
-  lib, stdenv
-, python3
-, shared-assets
-, tailwindWithTypography
-}: let
-  pythonEnv = python3.withPackages (ps: with ps; [
-    markdown pygments
-  ]);
-in stdenv.mkDerivation {
-  pname = "website";
-  version = "20230722";
-
-  src = ../.;
-
-  buildInputs = [ shared-assets python3 ];
-
-  buildPhase = ''
-    ${pythonEnv}/bin/python ${shared-assets}/bin/makesite.py \
-      -v page_assets=https://cdn.polynom.me \
-      --assets ./assets \
-      --copy-assets \
-      --include robots.txt \
-      -p params.json
-
-    # Build Tailwind CSS data
-    ${tailwindWithTypography}/bin/tailwindcss --input ./input.css --output _site/assets/css/index.css
-  '';
-  
-  installPhase = ''
-    mkdir -p $out/srv/www/website
-    cp -vr _site/* $out/srv/www/website
-    cp -vr well-known $out/srv/www/website/.well-known
-  '';
-
-  doCheck = false;
-
-  meta = with lib; {
-    description = "The website hosted at https://polynom.me";
-    homepage = "https://git.polynom.me/polynom.me/website";
-    maintainers = [];
-    license = licenses.gpl3;
-  };
-}

tailwind.config.js

@@ -1,8 +1,6 @@
 module.exports = {
     content: [
-        "./content/*.html",
+        "./templates/*.html",
-        "./layout/*.html",
-        "./layout/templates/*.html",
     ],
     theme: {
     },

templates/base.html

@@ -0,0 +1,42 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link href="{{ get_url(path="css/index.css") }}" rel="stylesheet" />
+    <link href="{{ get_url(path="css/extra.css") }}" rel="stylesheet" />
+
+    {% if page %}
+    <meta property="og:title" content="{{ page.title }}" />
+  	<meta property="og:description" content="{{ page.description }}" />
+  	<title>{{ page.title }}</title>
+    {% else %}
+    <meta property="og:title" content="{{ config.title }}" />
+  	<meta property="og:description" content="{{ config.description }}" />
+  	<title>{{ config.title }}</title>
+    {% endif %}
+  </head>
+  <body>
+    <div class="flex flex-col p-2 md:p-8 items-start md:w-4/5 mx-auto">
+      <!-- Header -->
+      <div class="flex flex-row self-center">
+        <img
+          class="w-12 h-12 md:w-24 md:h-24 rounded-lg"
+          src="/img/avatar.jpg"
+          alt="Profile picture"
+          integrity="sha386-{{ get_hash(path="img/avatar.jpg", sha_type=384, base64=true) | safe }}" />
+        <div class="ml-4 self-center">
+          <a class="self-center text-2xl font-bold" href="/">PapaTutuWawa's Website</a>
+
+            <ul class="list-none">
+              <li class="inline mr-8"><a href="https://blog.polynom.me">Blog</a></li>
+              <li class="inline mr-8"><a href="{{ get_url(path="@/code.md" ) }}">Code</a></li>
+              <li class="inline mr-8"><a href="{{ get_url(path="@/contact.md" ) }}">Contact</a></li>
+            </ul>
+        </div>
+      </div>
+
+      {% block content %}{% endblock %}
+    </div>
+  </body>
+</html>

templates/code.html

@@ -0,0 +1,30 @@
+{% extends "base.html" %}
+
+{% block content %}
+<div class="flex flex-col pt-8 mx-auto">
+    <p class="prose text-white">
+      I keep my code mostly on my private Gitea instance <a class="text-indigo-400"
+        href="https://{{ config.extra.gitea_url }}/{{ config.extra.gitea_username }}">here</a>.
+      For purposes of allowing other people to also contribute
+      I try to mirror my code on GitHub and codeberg.
+    </p>
+  
+    <div class="pt-8 w-full">
+      <table class="text-white pt-8 w-full">
+        <tr>
+          <td>GitHub</td>
+          <td><a class="text-indigo-400" href="https://github.com/{{ config.extra.github_username }}">{{ config.extra.github_username }}</a></td>
+        </tr>
+        <tr>
+          <td>Codeberg</td>
+          <td><a class="text-indigo-400" href="https://codeberg.org/{{ config.extra.codeberg_username }}">{{ config.extra.codeberg_username }}</a>
+          </td>
+        </tr>
+        <tr>
+          <td>Gitea</td>
+          <td><a class="text-indigo-400" href="https://{{ config.extra.gitea_url }}/{{ config.extra.gitea_username }}">{{ config.extra.gitea_username }}</a></td>
+        </tr>
+      </table>
+    </div>
+  </div>
+{% endblock %}

templates/contact.html

@@ -1,6 +1,6 @@
-<!-- title: Contact | polynom.me -->
+{% extends "base.html" %}
-<!-- description: Contact details for getting in touch with Alexander 'PapaTutuWawa'. -->
+
-<!-- render: yes -->
+{% block content %}
 <div class="flex flex-col pt-8 mx-auto">
   <p class="prose text-white">
     If you have any questions about my projects or just want to talk, feel
@@ -11,33 +11,35 @@
     <table class="text-white w-full">
       <tr>
         <td>Fediverse</td>
-        <td><a class="text-indigo-400" href="https://{{ fediverse_instance}}/{{ fediverse_username }}">@{{
+        <td>
-            fediverse_username }}@{{
+            <a class="text-indigo-400" href="https://{{ config.extra.fediverse_instance}}/{{ config.extra.fediverse_username }}">@{{ config.extra.fediverse_username }}@{{ config.extra.fediverse_instance }}</a>
-            fediverse_instance }}</a></td>
+        </td>
       </tr>
       <tr>
         <td>E-Mail</td>
-        <td>{{ email_user }} [a with a circle] {{ email_domain }}</td>
+        <td>{{ config.extra.email_user }} [a with a circle] {{ config.extra.email_domain }}</td>
       </tr>
       <tr>
         <td />
         <td>
-          Please use my <a class="text-indigo-400" href="https://{{ gpg_key_url }}">GPG public key</a>
+          Please use my <a class="text-indigo-400" href="https://{{ config.extra.gpg_key_url }}">GPG public key</a>
         </td>
       </tr>
       <tr>
         <td>GitHub</td>
-        <td><a class="text-indigo-400" href="https://github.com/{{ github_username }}">{{ github_username }}</a></td>
+        <td><a class="text-indigo-400" href="https://github.com/{{ config.extra.github_username }}">{{ config.extra.github_username }}</a></td>
       </tr>
       <tr>
         <td>Codeberg</td>
-        <td><a class="text-indigo-400" href="https://codeberg.org/{{ codeberg_username }}">{{ codeberg_username }}</a>
+        <td><a class="text-indigo-400" href="https://codeberg.org/{{ config.extra.codeberg_username }}">{{ config.extra.codeberg_username }}</a>
         </td>
       </tr>
       <tr>
         <td>Gitea</td>
-        <td><a class="text-indigo-400" href="https://{{ gitea_url }}/{{ gitea_username }}">{{ gitea_username }}</a></td>
+        <td><a class="text-indigo-400" href="https://{{ config.extra.gitea_url }}/{{ config.extra.gitea_username }}">{{ config.extra.gitea_username }}</a></td>
       </tr>
     </table>
   </div>
 </div>
+
+{% endblock %}

templates/index.html

@@ -0,0 +1,57 @@
+{% extends "base.html" %}
+
+{% block content %}
+<div class="flex flex-col mx-auto">
+  <p class="text-white prose py-8 self-center">
+    Hello! My online pseudonym is <i>PapaTutuWawa</i> and I am
+    just some random person on the Internet who is passionate about
+    topics like XMPP, federated Internet services and privacy. Linux system
+    administration, Linux tinkering and programming are my favourite things to do.
+  </p>
+
+  <h1 class="prose text-2xl text-indigo-400 self-start">Projects</h1>
+  <p class="prose text-white text-left self-start">This is a small selection of my projects. More are available <a
+      class="text-indigo-400" href="code.html">here.</a></p>
+
+{% for project in config.extra.projects %}
+<div class="flex flex-row self-start pt-8">
+    {% if project.screenshot != "" %}
+    <div>
+        <a href="https://{{ project.website }}" target="_blank">
+          <img
+            class="w-24 md:w-48 max-w-none rounded-lg clickable"
+            src="{{ project.screenshot }}"
+            alt="Screenshot of {{ project.title }}"
+            integrity="sha386-{{ get_hash(path=project.screenshot, sha_type=384, base64=true) | safe }}" />
+        </a>
+    </div>
+    {% else %}
+    <div class="flex justify-center md:w-48 md:h-48 w-24 h-24 rounded-lg clickable bg-indigo-950">
+        <a class="prose text-white text-5xl" href="https://{{ project.website }}">
+          <div class="md:w-48 md:h-48 w-24 h-24 flex flex-col justify-center">
+            <span class="text-center">#</span>
+          </div>
+        </a>
+      </div>
+    {% endif %}
+    <div class="flex flex-col pl-8">
+      <h2 class="prose text-indigo-400 text-2xl">{{ project.title }}</h2>
+      <p class="prose text-white text-justify">{{ project.description }}</p>
+  
+      <div class="pt-4">
+        <ul>
+            {% if project.website != "" %}
+            <li>
+                <a class="text-indigo-400" href="https://{{ project.website }}">Website</a>
+            </li>
+            {% endif %}
+
+            <li><a class="prose text-indigo-400" href="https://{{ project.source_url }}">Code</a></li>
+        </ul>
+      </div>
+    </div>
+  </div>
+{% endfor %}
+
+</div>
+{% endblock content %}