style: remove draft property

config.toml

@@ -3,7 +3,7 @@ base_url = "https://www.aldofunes.com"
 
 # The site title and description; used in feeds by default.
 title = "Aldo Funes"
-description = "YOUR_SITE_DESCRIPTION"
+description = "Welcome to my personal blog!"
 
 # The default language; used in feeds.
 default_language = "en"

content/blog/2018-04-01-why-i-quit-social-networks.md

@@ -1,10 +1,14 @@
 +++
 title = "Why I quit social networks"
 description = "I deleted all my social network accounts 4 months ago. It feels oddly liberating."
-date = "2018-04-01"
+date = 2018-04-01
 updated = 2025-03-12
+
+[taxonomies]
 tags = ["Social Networks", "Life Decisions"]
-draft = false
+
+[extra]
+social_media_card = "img/social_cards/blog_why_i_quit_social_networks.jpg"
 +++
 
 There was a smart guy called _Dunbar_. He studied some animals and came to the conclusion that a person's social circle is limited to its

content/blog/2018-07-05-expedition-to-peru.md

@@ -1,9 +1,10 @@
 +++
 title = "Chronicles of an Expedition to Peru"
 description = ""
-date = "2018-07-05"
+date = 2018-07-05
+
+[taxonomies]
 tags = ["alpinism", "expeditions"]
-draft = true
 +++
 
 Nuestro vuelo salió de México el miércoles. Hicimos una escala de unas dos horas en el aeropuerto de

content/blog/2021-02-07-infrastructure-as-code.md

@@ -1,7 +1,10 @@
 +++
 title = "Infrastructure as Code"
 description = "Notes from the book"
-date = "2021-02-07"
+date = 2021-02-07
+updated = 2025-03-12
+
+[taxonomies]
 tags = ["Infrastructure", "Automation", "Quality"]
 +++
 
@@ -12,9 +15,10 @@ me.
 
 # What is Infrastructure as Code?
 
-Organizations are becoming increasingly "digital" [^1 "short for 'software systems are essential for our business'], and as they do, the IT
-infrastructure becomes more and more complex: more services, more users, more business activities, suppliers, products, customers,
-stakeholders... and the list goes on and on.
+Organizations are becoming increasingly "digital" [^1], and as they do, the IT infrastructure becomes more and more complex: more services,
+more users, more business activities, suppliers, products, customers, stakeholders... and the list goes on and on.
+
+[^1]: short for 'software systems are essential for our business'
 
 Infrastructure automation tools help manage this complexity by keeping the entire infrastructure as code. This will help by optimizing for
 change. People say: we don’t make changes often enough to justify automating them; we should build first, automate later; we must choose

content/blog/2025-02-17-gitea-open-source-github-alternative.md

@@ -3,8 +3,9 @@ title = "Gitea - Open Source GitHub Alternative"
 description = "Self-hosting Gitea, a lightweight GitHub alternative written in Go."
 date = 2025-02-17
 updated = 2025-03-12
+
+[taxonomies]
 tags = ["Self-Hosting", "CI/CD", "Linux", "Gitea", "Go"]
-draft = false
 +++
 
 ## Introduction

content/blog/2025-03-12-self-hosting-a-blog-in-2025.md

@@ -3,8 +3,12 @@ title = "Self-Hosting a Website in 2025"
 description = "A step-by-step guide to hosting your own website using Zola, Caddy, and Gitea."
 date = 2025-03-12
 updated = 2025-03-12
+
+[taxonomies]
 tags = ["Self-Hosting", "CI/CD", "Linux", "Caddy", "Zola"]
-draft = false
+
+[extra]
+social_media_card = "img/social_cards/blog_self_hosting_a_blog_in_2025.jpg"
 +++
 
 ## Introduction

public/code/social-cards-zola

@@ -0,0 +1,230 @@
+#!/usr/bin/env bash
+set -eo pipefail
+
+# This script takes a markdown post, crafts the corresponding URL, checks if it's accessible,
+# takes a screenshot, and saves it to a specified location.
+# It can update the front matter of the post with the path to the generated image (-u | --update-front-matter option).
+# It's meant to be used as a pre-commit hook to generate social media cards for Zola sites using the tabi theme.
+# More details: https://osc.garden/blog/automating-social-media-cards-zola/
+
+function help_function(){
+    echo "This script automates the creation of social media cards for Zola websites."
+    echo "It takes a Markdown post and saves its live screenshot to a specified location."
+    echo ""
+    echo "IMPORTANT! It needs to be run from the root of the Zola site."
+    echo ""
+    echo "Usage: social-cards-zola [OPTIONS]"
+    echo ""
+    echo "Options:"
+    echo "  -h, --help                  Show this help message and exit."
+    echo "  -b, --base_url URL          The base URL where the Zola site is hosted. Default is http://127.0.0.1:1111."
+    echo "  -i, --input INPUT_PATH      The relative path to the markdown file of the post/section you want to capture. Should be in the format 'content/blog/post_name.language.md'."
+    echo "  -k, --key KEY               The front matter key to update. Default is 'social_media_card'."
+    echo "  -o, --output_path PATH      The directory where the generated image will be saved."
+    echo "  -p, --print_output          Print the path to the resulting screenshot at the end."
+    echo "  -u, --update-front-matter   Update or add the 'social_media_card' key in the front matter of the Markdown file."
+    echo
+    echo "Examples:"
+    echo "  social-cards-zola --base_url https://example.com --input content/blog/my_post.md --output_path static/img/social_cards"
+    echo "  social-cards-zola -u -b http://127.0.0.1:1025 -i content/archive/_index.es.md -o static/img"
+    exit 0
+}
+
+function convert_filename_to_url() {
+    # Remove .md extension.
+    local post_name="${1%.md}"
+
+    # Remove "content/" prefix.
+    local url="${post_name#content/}"
+
+    # Extract language code.
+    local lang_code="${url##*.}"
+    if [[ "$lang_code" == "$url" ]]; then
+        lang_code=""  # No language code.
+    else
+        lang_code="${lang_code}/"  # Add trailing slash.
+        url="${url%.*}"  # Remove the language code from the URL.
+    fi
+
+    # Handle co-located index.md by stripping it and using the directory as the URL.
+    if [[ "$url" == */index ]]; then
+        url="${url%/*}"  # Remove the /index suffix.
+    fi
+
+    # Remove "_index" suffix.
+    if [[ "$url" == *"_index"* ]]; then
+        url="${url%%_index*}"
+    fi
+
+    url=$(echo "$url" | sed -r 's/([0-9]{4}-[0-9]{2}-[0-9]{2}-)//')  # Replace datetime.
+
+    # Return the final URL with a single trailing slash.
+    full_url="${lang_code}${url}"
+    echo "${full_url%/}/"
+}
+
+function error_exit() {
+    echo "ERROR: $1" >&2
+    exit "${2:-1}"
+}
+
+function validate_input_params() {
+    missing_params=()
+    if [[ -z "$base_url" ]]; then
+        missing_params+=("base_url")
+    fi
+    if [[ -z "$input" ]]; then
+        missing_params+=("input")
+    fi
+    if [[ -z "$output_path" ]]; then
+        missing_params+=("output_path")
+    fi
+
+    if [ ${#missing_params[@]} -ne 0 ]; then
+        error_exit "The following required settings are missing: ${missing_params[*]}. Use -h or --help for usage."
+    fi
+}
+
+function check_dependencies() {
+    for cmd in "curl" "shot-scraper"; do
+        if ! command -v $cmd &> /dev/null; then
+            error_exit "$cmd could not be found. Please install it."
+        fi
+    done
+}
+
+function fetch_status() {
+    local retry_count=0
+    local max_retries=5
+    local status
+    while [[ $retry_count -lt $max_retries ]]; do
+        status=$(curl -s -o /dev/null -I -w "%{http_code}" "${base_url}${post_url}")
+        if [[ "$status" -eq "200" ]]; then
+            return
+        fi
+        retry_count=$((retry_count + 1))
+        sleep 2
+    done
+    error_exit "Post $input is not accessible. Max retries ($max_retries) reached."
+}
+
+function capture_screenshot() {
+    temp_file=$(mktemp /tmp/social-zola.XXXXXX)
+    trap 'rm -f "$temp_file"' EXIT
+    shot-scraper --silent "${base_url}/${post_url}" -w 700 -h 400 --retina --quality 60 -o "$temp_file"
+}
+
+function move_file() {
+    local safe_filename=$(echo "${post_url%/}" | sed 's/[^a-zA-Z0-9]/_/g')
+
+    # Create the output directory if it doesn't exist.
+    mkdir -p "$output_path"
+
+    image_filename="${output_path}/${safe_filename:-index}.jpg"  # If the filename is empty, use "index".
+    mv "$temp_file" "$image_filename" || error_exit "Failed to move the file to $image_filename"
+}
+
+function update_front_matter {
+    local md_file_path="$1"
+    local image_output="${2#static/}"
+    # Temporary file for awk processing
+    temp_awk=$(mktemp /tmp/frontmatter.XXXXXX)
+
+    awk -v card_path="$image_output" '
+    # Initialize flags for tracking state.
+    BEGIN { in_extra=done=front_matter=extra_exists=0; }
+
+    # Function to insert the social_media_card path.
+    function insert_card() { print "social_media_card = \"" card_path "\""; done=1; }
+
+    {
+        # If card has been inserted, simply output remaining lines.
+        if (done) { print; next; }
+
+        # Toggle front_matter flag at its start, denoted by +++
+        if (/^\+\+\+/ && front_matter == 0) {
+            front_matter = 1;
+            print "+++";
+            next;
+        }
+
+        # Detect [extra] section and set extra_exists flag.
+        if (/^\[extra\]/) { in_extra=1; extra_exists=1; print; next; }
+
+        # Update existing social_media_card.
+        if (in_extra && /^social_media_card =/) { insert_card(); in_extra=0; next; }
+
+        # End of front matter or start of new section.
+        if (in_extra && (/^\[[a-zA-Z_-]+\]/ || (/^\+\+\+/ && front_matter == 1))) {
+            insert_card();  # Add the missing social_media_card.
+            in_extra=0;
+        }
+
+        # Insert missing [extra] section.
+        if (/^\+\+\+/ && front_matter == 1 && in_extra == 0 && extra_exists == 0) {
+            print "\n[extra]";
+            insert_card();
+            in_extra=0;
+            front_matter = 0;
+            print "+++";
+            next;
+        }
+
+        # Print all other lines as-is.
+        print;
+    }' "$md_file_path" > "$temp_awk"
+
+    # Move the temporary file back to the original markdown file.
+    mv "$temp_awk" "$md_file_path"
+}
+
+function main() {
+    while [[ "$#" -gt 0 ]]; do
+        case "$1" in
+            -h|--help)
+                help_function;;
+            -b|--base_url)
+                base_url="$2"
+                shift 2;;
+            -i|--input)
+                input="$2"
+                shift 2;;
+            -o|--output_path)
+                output_path="$2"
+                shift 2;;
+            -k|--key)
+                front_matter_key="$2"
+                shift 2;;
+            -u|--update-front-matter)
+                update="true"
+                shift 1;;
+            -p|--print_output)
+                print_output="true"
+                shift 1;;
+            *)
+                error_exit "Unknown option: $1";;
+        esac
+    done
+
+    validate_input_params
+    check_dependencies
+
+    : "${base_url:="http://127.0.0.1:1111"}"
+    : "${front_matter_key:="social_media_card"}"
+    base_url="${base_url%/}/"  # Ensure one trailing slash.
+    post_url="$(convert_filename_to_url "$input")"
+
+    fetch_status
+    capture_screenshot
+    move_file
+
+    if [[ "$update" == "true" ]]; then
+        update_front_matter "$input" "$image_filename"
+    fi
+
+    if [[ "$print_output" == "true" ]]; then
+        echo "$image_filename"
+    fi
+}
+
+main "$@"

public/css/syntax.css

@@ -0,0 +1,250 @@
+/*
+ * theme "Dracula" generated by syntect
+ */
+
+.z-code {
+ color: #f8f8f2;
+ background-color: #282a36;
+}
+
+.z-comment {
+ color: #6272a4;
+}
+.z-string {
+ color: #f1fa8c;
+}
+.z-constant.z-numeric {
+ color: #bd93f9;
+}
+.z-constant.z-language {
+ color: #bd93f9;
+}
+.z-constant.z-character, .z-constant.z-other {
+ color: #bd93f9;
+}
+.z-variable {
+}
+.z-variable.z-other.z-readwrite.z-instance {
+ color: #ffb86c;
+}
+.z-constant.z-character.z-escaped, .z-constant.z-character.z-escape, .z-string .z-source, .z-string .z-source.z-ruby {
+ color: #ff79c6;
+}
+.z-source.z-ruby .z-string.z-regexp.z-classic.z-ruby, .z-source.z-ruby .z-string.z-regexp.z-mod-r.z-ruby {
+ color: #ff5555;
+}
+.z-keyword {
+ color: #ff79c6;
+}
+.z-storage {
+ color: #ff79c6;
+}
+.z-storage.z-type {
+ color: #8be9fd;
+font-style: italic;
+}
+.z-storage.z-type.z-namespace {
+ color: #8be9fd;
+font-style: italic;
+}
+.z-storage.z-type.z-class {
+ color: #ff79c6;
+font-style: italic;
+}
+.z-entity.z-name.z-class {
+ color: #8be9fd;
+text-decoration: underline;
+}
+.z-meta.z-path {
+ color: #66d9ef;
+text-decoration: underline;
+}
+.z-entity.z-other.z-inherited-class {
+ color: #8be9fd;
+text-decoration: underline;
+font-style: italic;
+}
+.z-entity.z-name.z-function {
+ color: #50fa7b;
+}
+.z-variable.z-parameter {
+ color: #ffb86c;
+font-style: italic;
+}
+.z-entity.z-name.z-tag {
+ color: #ff79c6;
+}
+.z-entity.z-other.z-attribute-name {
+ color: #50fa7b;
+}
+.z-support.z-function {
+ color: #8be9fd;
+}
+.z-support.z-constant {
+ color: #6be5fd;
+}
+.z-support.z-type, .z-support.z-class {
+ color: #66d9ef;
+font-style: italic;
+}
+.z-support.z-other.z-variable {
+}
+.z-support.z-other.z-namespace {
+ color: #66d9ef;
+font-style: italic;
+}
+.z-invalid {
+ color: #f8f8f0;
+ background-color: #ff79c6;
+}
+.z-invalid.z-deprecated {
+ color: #f8f8f0;
+ background-color: #bd93f9;
+}
+.z-meta.z-structure.z-dictionary.z-json .z-string.z-quoted.z-double.z-json {
+ color: #cfcfc2;
+}
+.z-meta.z-diff, .z-meta.z-diff.z-header {
+ color: #6272a4;
+}
+.z-markup.z-deleted {
+ color: #ff79c6;
+}
+.z-markup.z-inserted {
+ color: #50fa7b;
+}
+.z-markup.z-changed {
+ color: #e6db74;
+}
+.z-constant.z-numeric.z-line-number.z-find-in-files {
+ color: #bd93f9;
+}
+.z-entity.z-name.z-filename {
+ color: #e6db74;
+}
+.z-message.z-error {
+ color: #f83333;
+}
+.z-punctuation.z-definition.z-string.z-begin.z-json, .z-punctuation.z-definition.z-string.z-end.z-json {
+ color: #eeeeee;
+}
+.z-meta.z-structure.z-dictionary.z-json .z-string.z-quoted.z-double.z-json {
+ color: #8be9fd;
+}
+.z-meta.z-structure.z-dictionary.z-value.z-json .z-string.z-quoted.z-double.z-json {
+ color: #f1fa8c;
+}
+.z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta.z-structure.z-dictionary.z-value .z-string {
+ color: #50fa7b;
+}
+.z-meta .z-meta .z-meta .z-meta .z-meta .z-meta.z-structure.z-dictionary.z-value .z-string {
+ color: #ffb86c;
+}
+.z-meta .z-meta .z-meta .z-meta .z-meta.z-structure.z-dictionary.z-value .z-string {
+ color: #ff79c6;
+}
+.z-meta .z-meta .z-meta .z-meta.z-structure.z-dictionary.z-value .z-string {
+ color: #bd93f9;
+}
+.z-meta .z-meta .z-meta.z-structure.z-dictionary.z-value .z-string {
+ color: #50fa7b;
+}
+.z-meta .z-meta.z-structure.z-dictionary.z-value .z-string {
+ color: #ffb86c;
+}
+.z-markup.z-strike {
+ color: #ffb86c;
+font-style: italic;
+}
+.z-markup.z-bold {
+ color: #ffb86c;
+font-weight: bold;
+}
+.z-markup.z-italic {
+ color: #ffb86c;
+font-style: italic;
+}
+.z-markup.z-heading {
+ color: #8be9fd;
+}
+.z-punctuation.z-definition.z-list_item.z-markdown {
+ color: #ff79c6;
+}
+.z-markup.z-quote {
+ color: #6272a4;
+font-style: italic;
+}
+.z-punctuation.z-definition.z-blockquote.z-markdown {
+ color: #6272a4;
+ background-color: #6272a4;
+font-style: italic;
+}
+.z-meta.z-separator {
+ color: #6272a4;
+}
+.z-text.z-html.z-markdown .z-markup.z-raw.z-inline {
+ color: #50fa7b;
+}
+.z-markup.z-underline {
+ color: #bd93f9;
+text-decoration: underline;
+}
+.z-markup.z-raw.z-block {
+ color: #cfcfc2;
+}
+.z-markup.z-raw.z-block.z-fenced.z-markdown .z-source {
+ color: #f8f8f2;
+}
+.z-punctuation.z-definition.z-fenced.z-markdown, .z-variable.z-language.z-fenced.z-markdown {
+ color: #6272a4;
+font-style: italic;
+}
+.z-variable.z-language.z-fenced.z-markdown {
+ color: #6272a4;
+font-style: italic;
+}
+.z-punctuation.z-accessor {
+ color: #ff79c6;
+}
+.z-meta.z-function.z-return-type {
+ color: #ff79c6;
+}
+.z-punctuation.z-section.z-block.z-begin {
+ color: #ffffff;
+}
+.z-punctuation.z-section.z-block.z-end {
+ color: #ffffff;
+}
+.z-punctuation.z-section.z-embedded.z-begin {
+ color: #ff79c6;
+}
+.z-punctuation.z-section.z-embedded.z-end {
+ color: #ff79c6;
+}
+.z-punctuation.z-separator.z-namespace {
+ color: #ff79c6;
+}
+.z-variable.z-function {
+ color: #50fa7b;
+}
+.z-variable.z-other {
+ color: #ffffff;
+}
+.z-variable.z-language {
+ color: #bd93f9;
+}
+.z-entity.z-name.z-module.z-ruby {
+ color: #8be9fd;
+}
+.z-entity.z-name.z-constant.z-ruby {
+ color: #bd93f9;
+}
+.z-support.z-function.z-builtin.z-ruby {
+ color: #ffffff;
+}
+.z-storage.z-type.z-namespace.z-cs {
+ color: #ff79c6;
+}
+.z-entity.z-name.z-namespace.z-cs {
+ color: #8be9fd;
+}

public/feed_style.xsl

@@ -0,0 +1,119 @@
+<?xml version="1.0" encoding="utf-8"?>
+<xsl:stylesheet version="3.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
+  xmlns:atom="http://www.w3.org/2005/Atom" xmlns:tabi="https://github.com/welpo/tabi">
+  <xsl:output method="html" version="1.0" encoding="UTF-8" indent="yes"/>
+  <xsl:template match="/">
+    <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
+      <xsl:attribute name="data-theme">
+        <xsl:value-of select="/atom:feed/tabi:metadata/tabi:default_theme"/>
+      </xsl:attribute>
+      <head>
+        <title>
+          <xsl:value-of select="/atom:feed/atom:title"/> • Feed
+        </title>
+        <meta charset="utf-8"/>
+        <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+        <meta name="viewport" content="width=device-width, initial-scale=1"/>
+        <xsl:variable name="baseUrl" select="/atom:feed/tabi:metadata/tabi:base_url"/>
+        <link rel="stylesheet" href="{$baseUrl}/main.css"/>
+        <link rel="stylesheet" href="{/atom:feed/atom:link[@rel='extra-stylesheet']/@href}" />
+
+      </head>
+      <body dir="auto">
+        <div class="content">
+          <main>
+            <div class="info-box">
+              <!-- This block replaces the text "About Feeds" with a hyperlink in the translated string -->
+              <xsl:choose>
+                <xsl:when test="contains(/atom:feed/tabi:metadata/tabi:about_feeds, 'About Feeds')">
+                  <xsl:value-of select="substring-before(/atom:feed/tabi:metadata/tabi:about_feeds, 'About Feeds')"/>
+                  <a href="https://aboutfeeds.com/" target="_blank">About Feeds</a>
+                  <xsl:value-of select="substring-after(/atom:feed/tabi:metadata/tabi:about_feeds, 'About Feeds')"/>
+                </xsl:when>
+                <xsl:otherwise>
+                  <xsl:value-of select="/atom:feed/tabi:metadata/tabi:about_feeds"/>
+                </xsl:otherwise>
+              </xsl:choose>
+            </div>
+            <section id="banner-home-subtitle">
+              <div class="padding-top home-title">
+                <xsl:value-of select="/atom:feed/atom:title"/>
+              </div>
+              <p>
+                <xsl:value-of select="/atom:feed/atom:subtitle"/>
+              </p>
+              <a class="readmore">
+                <xsl:attribute name="href">
+                  <xsl:value-of select="/atom:feed/atom:link[@rel='alternate']/@href"/>
+                </xsl:attribute>
+                <xsl:value-of select="/atom:feed/tabi:metadata/tabi:visit_the_site" />
+                <xsl:if test="/atom:feed/tabi:metadata/tabi:current_section != /atom:feed/atom:title">
+                  <xsl:text>: </xsl:text>
+                  <xsl:value-of select="/atom:feed/tabi:metadata/tabi:current_section" />
+                </xsl:if>
+                <span class="arrow"> →</span>
+              </a>
+              <p></p>
+            </section>
+            <div class="padding-top listing-title bottom-divider">
+              <h1><xsl:value-of select="/atom:feed/tabi:metadata/tabi:recent_posts" /></h1>
+            </div>
+            <xsl:variable name="post_listing_date" select="/atom:feed/tabi:metadata/tabi:post_listing_date"/>
+            <div class="bloglist-container">
+              <xsl:for-each select="/atom:feed/atom:entry">
+                <section class="bloglist-meta bottom-divider">
+                  <ul>
+                    <xsl:variable name="show_date" select="$post_listing_date = 'date' or $post_listing_date = 'both'"/>
+                    <xsl:variable name="show_updated" select="$post_listing_date = 'updated' or $post_listing_date = 'both'"/>
+
+                    <xsl:if test="$show_date">
+                      <li class="date">
+                        <xsl:value-of select="substring(atom:published, 0, 11)"/>
+                      </li>
+                    </xsl:if>
+
+                    <xsl:if test="$show_date and $show_updated">
+                      <li class="mobile-only">
+                        <xsl:value-of select="/atom:feed/tabi:metadata/tabi:separator"/>
+                      </li>
+                    </xsl:if>
+
+                    <xsl:if test="$show_updated">
+                      <li class="date">
+                        <xsl:variable name="update_string" select="/atom:feed/tabi:metadata/tabi:last_updated_on"/>
+                        <xsl:variable name="update_date" select="substring(atom:updated, 0, 11)"/>
+                        <xsl:value-of select="substring-before($update_string, '$DATE')"/>
+                        <xsl:value-of select="$update_date"/>
+                        <xsl:value-of select="substring-after($update_string, '$DATE')"/>
+                      </li>
+                    </xsl:if>
+                  </ul>
+                </section>
+                <section class="bloglist-content bottom-divider">
+                  <div>
+                    <div class="bloglist-title">
+                      <a>
+                        <xsl:attribute name="href">
+                          <xsl:value-of select="atom:link/@href"/>
+                        </xsl:attribute>
+                        <xsl:value-of select="atom:title"/>
+                      </a>
+                    </div>
+                    <div class="description">
+                      <xsl:value-of select="atom:summary"/>
+                    </div>
+                    <a class="readmore" href="">
+                      <xsl:attribute name="href">
+                        <xsl:value-of select="atom:link/@href"/>
+                      </xsl:attribute>
+                    </a>
+                  </div>
+                </section>
+              </xsl:for-each>
+            </div>
+          </main>
+        </div>
+      </body>
+    </html>
+  </xsl:template>
+</xsl:stylesheet>

public/isso.css

@@ -0,0 +1,375 @@
+/* ========================================================================== */
+/* Generic styling                                                            */
+/* ========================================================================== */
+#isso-thread * {
+    /* Reset */
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+/* ========================================================================== */
+/* Thread heading area                                                        */
+/* ========================================================================== */
+#isso-thread {
+    margin: 0 auto;
+    padding: 0;
+    width: 100%;
+    color: var(--text-color);
+    font-size: 0.9em;
+    font-family: var(--sans-serif-font);
+}
+
+h4.isso-thread-heading {
+    padding-bottom: 0.2em;
+    color: var(--text-color);
+    font-size: 1.2rem;
+}
+
+.isso-feedlink {
+    float: inline-end;
+    padding-inline-start: 1em;
+}
+
+.isso-feedlink a {
+    vertical-align: bottom;
+    font-size: 0.8em;
+}
+
+/* ========================================================================== */
+/* Comments                                                                   */
+/* ========================================================================== */
+
+.isso-comment {
+    margin: 0 auto;
+    max-width: 68em;
+}
+
+.isso-preview .isso-comment {
+    margin: 0;
+    padding-top: 0;
+}
+
+.isso-comment:not(:first-of-type),
+.isso-follow-up .isso-comment {
+    margin-block-end: 0.5em;
+    border-top: 1px solid var(--divider-color);
+}
+
+.isso-avatar {
+    display: block;
+    float: inline-start;
+    margin: 0.95em 0.95em 0;
+}
+
+.isso-avatar svg {
+    border: 1px solid var(--divider-color);
+    border-radius: 3px;
+    width: 100%;
+    max-width: 48px;
+    height: 100%;
+    max-height: 48px;
+}
+
+.isso-text-wrapper {
+    display: block;
+    padding: 0.3em;
+}
+
+.isso-follow-up {
+    padding-inline-start: calc(7% + 20px);
+}
+
+.isso-comment-footer {
+    font-size: 0.95em;
+}
+
+.isso-comment-header {
+    font-size: 0.85em;
+}
+
+.isso-comment-header a {
+    text-decoration: none;
+}
+
+/* Only for comment header, spacer between up-/downvote should have no padding */
+.isso-comment-header .isso-spacer {
+    padding-inline: 6px;
+}
+
+.isso-spacer,
+.isso-permalink,
+.isso-note,
+.isso-parent {
+    color: var(--meta-color);
+    font-weight: normal;
+    text-shadow: none;
+}
+
+.isso-permalink:hover,
+.isso-note:hover,
+.isso-parent:hover {
+    color: var(--hover-color);
+}
+
+.isso-note {
+    float: inline-end;
+}
+
+.isso-author {
+    color: var(--text-color);
+    font-weight: 500;
+}
+
+.isso-page-author-suffix {
+    color: var(--text-color-high-contrast);
+    font-weight: bold;
+}
+
+/* Style author comments and replies */
+.isso-is-page-author>.isso-text-wrapper {
+    background-color: var(--bg-1);
+}
+
+.isso-textarea,
+.isso-preview {
+    background-color: var(--bg-2);
+    padding: 10px;
+    width: 100%;
+    color: var(--text-color);
+    font-size: 0.8em;
+    font-family: var(--sans-serif-font);
+}
+
+.isso-text p {
+    margin-top: -0.4em;
+}
+
+.isso-text p:last-child {
+    margin-block-end: 0.2em;
+}
+
+.isso-text h1,
+.isso-text h2,
+.isso-text h3,
+.isso-text h4,
+.isso-text h5,
+.isso-text h6 {
+    font-weight: bold;
+    font-size: 130%;
+}
+
+.isso-comment-footer {
+    clear: left;
+    color: var(--meta-color);
+    font-size: 0.80em;
+}
+
+.isso-feedlink,
+.isso-comment-footer a {
+    margin: 0.4em;
+    padding: 0.1em;
+    font-weight: bold;
+    text-decoration: none;
+}
+
+.isso-comment-footer .isso-votes {
+    color: var(--meta-color);
+}
+
+.isso-upvote svg,
+.isso-downvote svg {
+    position: relative;
+    top: .2em;
+}
+
+.isso-upvote:hover svg,
+.isso-downvote:hover svg {
+    fill: var(--hover-color);
+}
+
+/* Reply postbox under existing comment */
+.isso-comment .isso-postbox {
+    margin-top: 0.8em;
+}
+
+.isso-comment.isso-no-votes>*>.isso-comment-footer .isso-votes {
+    display: none;
+}
+
+/* ========================================================================== */
+/* Postbox                                                                    */
+/* ========================================================================== */
+.isso-postbox {
+    clear: right;
+    margin: 0 auto 2em;
+}
+
+.isso-form-wrapper {
+    display: flex;
+    flex-direction: column;
+}
+
+.isso-textarea,
+.isso-preview {
+    margin-top: 0.2em;
+    border: 1px solid var(--divider-color);
+    border-radius: 5px;
+    width: 100%;
+}
+
+.isso-textarea {
+    outline: 0;
+    width: 100%;
+    resize: none;
+}
+
+.isso-form-wrapper input[type=checkbox] {
+    position: relative;
+    bottom: 1px;
+    vertical-align: middle;
+    margin-inline-end: 0;
+}
+
+.isso-notification-section {
+    display: none;
+    padding-top: .3em;
+    padding-bottom: 10px;
+    font-size: 0.90em;
+}
+
+.isso-auth-section {
+    display: flex;
+    flex-direction: row;
+}
+
+.isso-input-wrapper,
+.isso-post-action {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    align-items: center;
+    margin: 0 auto;
+    max-width: 35%;
+    font-size: 0.8em;
+    font-family: var(--sans-serif-font);
+    text-align: center;
+}
+
+.isso-input-wrapper {
+    margin-inline-end: 0.5em;
+}
+
+.isso-input-wrapper input,
+.isso-post-action input {
+    margin-top: auto;
+}
+
+.isso-input-wrapper label {
+    display: inline-block;
+    margin-top: auto;
+    height: auto;
+    line-height: 1.4em;
+}
+
+.isso-input-wrapper input {
+    border: 1px solid var(--divider-color);
+    border-radius: 5px;
+    background-color: var(--bg-2);
+    padding: 0.3em;
+    width: 100%;
+    color: var(--text-color);
+    line-height: 1.2em;
+    font-family: var(--sans-serif-font);
+}
+
+.isso-post-action input {
+    cursor: pointer;
+    margin: 0.1em;
+    border: none;
+    border-radius: 5px;
+    background-color: var(--primary-color);
+    padding-inline: 1em;
+    padding-block: 0.6em;
+    color: var(--background-color);
+    font-size: 0.8rem;
+}
+
+.isso-post-action {
+    display: block;
+    align-self: flex-end;
+    margin: 0 auto;
+}
+
+.isso-post-action>input:hover {
+    opacity: 0.8;
+}
+
+/* ========================================================================== */
+/* Postbox (preview mode)                                                     */
+/* ========================================================================== */
+.isso-preview,
+.isso-post-action input[name="edit"],
+.isso-postbox.isso-preview-mode>.isso-form-wrapper input[name="preview"],
+.isso-postbox.isso-preview-mode>.isso-form-wrapper .isso-textarea {
+    display: none;
+}
+
+.isso-postbox.isso-preview-mode>.isso-form-wrapper .isso-preview {
+    display: block;
+}
+
+.isso-postbox.isso-preview-mode>.isso-form-wrapper input[name="edit"] {
+    display: inline;
+}
+
+.isso-preview {
+    background: repeating-linear-gradient(-45deg,
+            var(--bg-0),
+            var(--bg-0) 10px,
+            var(--bg-2) 10px,
+            var(--bg-2) 20px);
+    background-color: var(--bg-0);
+}
+
+/* ========================================================================== */
+/* Animations                                                                 */
+/* ========================================================================== */
+
+/* "target" means the comment that's being linked to, for example:
+ * https://example.com/blog/example/#isso-15
+ */
+.isso-target {
+    animation: isso-target-fade 5s ease-out;
+}
+
+@keyframes isso-target-fade {
+    0% {
+        background-color: var(--divider-color)
+    }
+}
+
+/* ========================================================================== */
+/* Media queries                                                              */
+/* ========================================================================== */
+@media screen and (max-width:600px) {
+    .isso-auth-section {
+        flex-direction: column;
+        text-align: center;
+    }
+
+    .isso-input-wrapper {
+        display: block;
+        margin: 0 0 .4em;
+        max-width: 100%;
+    }
+
+    .isso-input-wrapper input {
+        width: 100%;
+    }
+
+    .isso-post-action {
+        margin: 0.4em auto;
+        width: 60%;
+    }
+}

public/isso.min.css

@@ -0,0 +1 @@
+.isso-avatar svg,.isso-preview,.isso-textarea{border:1px solid var(--divider-color);width:100%}#isso-thread *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}#isso-thread{margin:0 auto;padding:0;width:100%;color:var(--text-color);font-size:.9em;font-family:var(--sans-serif-font)}h4.isso-thread-heading{padding-bottom:.2em;color:var(--text-color);font-size:1.2rem}.isso-feedlink,.isso-note{float:right}.isso-feedlink a{vertical-align:bottom;font-size:.8em}.isso-comment{margin:0 auto;max-width:68em}.isso-preview .isso-comment{margin:0;padding-top:0}.isso-comment:not(:first-of-type),.isso-follow-up .isso-comment{margin-bottom:.5em;border-top:1px solid var(--divider-color)}.isso-avatar{display:block;float:left;margin:.95em .95em 0}.isso-avatar svg{border-radius:3px;max-width:48px;height:100%;max-height:48px}.isso-text-wrapper{display:block;padding:.3em}.isso-follow-up{padding-inline-start:calc(7% + 20px)}.isso-comment-header{font-size:.85em}.isso-comment-header a{text-decoration:none}.isso-comment-header .isso-spacer{padding:0 6px}.isso-note,.isso-parent,.isso-permalink,.isso-spacer{color:var(--meta-color);font-weight:400;text-shadow:none}.isso-note:hover,.isso-parent:hover,.isso-permalink:hover{color:var(--hover-color)}.isso-author{color:var(--text-color);font-weight:500}.isso-page-author-suffix{color:var(--text-color-high-contrast);font-weight:700}.isso-input-wrapper input,.isso-preview,.isso-textarea{background-color:var(--bg-2);color:var(--text-color);font-family:var(--sans-serif-font)}.isso-is-page-author>.isso-text-wrapper{background-color:var(--bg-1)}.isso-preview,.isso-textarea{padding:10px;font-size:.8em}.isso-comment-footer,.isso-comment-footer .isso-votes{color:var(--meta-color)}.isso-text p{margin-top:-.4em}.isso-text p:last-child{margin-bottom:.2em}.isso-text h1,.isso-text h2,.isso-text h3,.isso-text h4,.isso-text h5,.isso-text h6{font-weight:700;font-size:130%}.isso-comment-footer{clear:left;font-size:.8em}.isso-comment-footer a,.isso-feedlink{margin:.4em;padding:.1em;font-weight:700;text-decoration:none}.isso-downvote svg,.isso-upvote svg{position:relative;top:.2em}.isso-downvote:hover svg,.isso-upvote:hover svg{fill:var(--hover-color)}.isso-comment .isso-postbox{margin-top:.8em}.isso-comment.isso-no-votes>*>.isso-comment-footer .isso-votes,.isso-post-action input[name=edit],.isso-postbox.isso-preview-mode>.isso-form-wrapper .isso-textarea,.isso-postbox.isso-preview-mode>.isso-form-wrapper input[name=preview],.isso-preview{display:none}.isso-postbox{clear:right;margin:0 auto 2em}.isso-form-wrapper{display:flex;flex-direction:column}.isso-preview,.isso-textarea{margin-top:.2em;border-radius:5px}.isso-textarea{outline:0;width:100%;resize:none}.isso-form-wrapper input[type=checkbox]{position:relative;bottom:1px;vertical-align:middle;margin-inline-end:0}.isso-notification-section{display:none;padding-top:.3em;padding-bottom:10px;font-size:.9em}.isso-auth-section{display:flex;flex-direction:row}.isso-input-wrapper,.isso-post-action{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;margin:0 auto;max-width:35%;font-size:.8em;font-family:var(--sans-serif-font);text-align:center}.isso-input-wrapper{margin-inline-end:.5em}.isso-input-wrapper input,.isso-post-action input{margin-top:auto}.isso-input-wrapper label{display:inline-block;margin-top:auto;height:auto;line-height:1.4em}.isso-input-wrapper input{border:1px solid var(--divider-color);border-radius:5px;padding:.3em;width:100%;line-height:1.2em}.isso-post-action input{cursor:pointer;margin:.1em;border:none;border-radius:5px;background-color:var(--primary-color);padding:.6em 1em;color:var(--background-color);font-size:.8rem}.isso-post-action{display:block;align-self:flex-end;margin:0 auto}.isso-post-action>input:hover{opacity:.8}.isso-postbox.isso-preview-mode>.isso-form-wrapper .isso-preview{display:block}.isso-postbox.isso-preview-mode>.isso-form-wrapper input[name=edit]{display:inline}.isso-preview{background:repeating-linear-gradient(-45deg,var(--bg-0),var(--bg-0) 10px,var(--bg-2) 10px,var(--bg-2) 20px);background-color:var(--bg-0)}.isso-target{animation:5s ease-out isso-target-fade}@keyframes isso-target-fade{0%{background-color:var(--divider-color)}}@media screen and (max-width:600px){.isso-auth-section{flex-direction:column;text-align:center}.isso-input-wrapper{display:block;margin:0 0 .4em;max-width:100%}.isso-input-wrapper input{width:100%}.isso-post-action{margin:.4em auto;width:60%}}

public/js/codeBlockNameLinks.js

@@ -0,0 +1,36 @@
+document.addEventListener("DOMContentLoaded", function() {
+    // Convert URLs in data-name to links.
+    document.querySelectorAll('code[data-name]').forEach(function(code) {
+        const name = code.getAttribute('data-name');
+        if (name.startsWith('http')) {
+            const link = document.createElement('a');
+            link.href = name;
+            link.className = 'source-path';
+            link.textContent = name;
+            code.insertBefore(link, code.firstChild);
+            // Remove data-name to avoid overlap with Zola's native display.
+            code.removeAttribute('data-name');
+            code.parentElement?.removeAttribute('data-name');
+        }
+    });
+
+    // Legacy support for old shortcode. https://github.com/welpo/tabi/pull/489
+    document.querySelectorAll('.code-source').forEach(function(marker) {
+        const sourceUrl = marker.getAttribute('data-source');
+        const nextPre = marker.nextElementSibling;
+        if (nextPre?.tagName === 'PRE') {
+            const code = nextPre.querySelector('code');
+            if (code) {
+                if (sourceUrl.startsWith('http')) {
+                    const link = document.createElement('a');
+                    link.href = sourceUrl;
+                    link.className = 'source-path';
+                    link.textContent = sourceUrl;
+                    code.insertBefore(link, code.firstChild);
+                } else {
+                    code.setAttribute('data-name', sourceUrl);
+                }
+            }
+        }
+    });
+});

public/js/codeBlockNameLinks.min.js

@@ -0,0 +1 @@
+document.addEventListener("DOMContentLoaded",function(){document.querySelectorAll("code[data-name]").forEach(function(e){var t,a=e.getAttribute("data-name");a.startsWith("http")&&((t=document.createElement("a")).href=a,t.className="source-path",t.textContent=a,e.insertBefore(t,e.firstChild),e.removeAttribute("data-name"),e.parentElement?.removeAttribute("data-name"))}),document.querySelectorAll(".code-source").forEach(function(e){var t,a=e.getAttribute("data-source");"PRE"===(e=e.nextElementSibling)?.tagName&&(e=e.querySelector("code"))&&(a.startsWith("http")?((t=document.createElement("a")).href=a,t.className="source-path",t.textContent=a,e.insertBefore(t,e.firstChild)):e.setAttribute("data-name",a))})});

public/js/copyCodeToClipboard.js

@@ -0,0 +1,47 @@
+const copiedText = document.getElementById('copy-success').textContent;
+const initCopyText = document.getElementById('copy-init').textContent;
+
+const changeIcon = (copyDiv, className) => {
+    copyDiv.classList.add(className);
+    copyDiv.setAttribute('aria-label', copiedText);
+    setTimeout(() => {
+        copyDiv.classList.remove(className);
+        copyDiv.setAttribute('aria-label', initCopyText);
+    }, 2500);
+};
+
+const addCopyEventListenerToDiv = (copyDiv, block) => {
+    copyDiv.addEventListener('click', () => copyCodeAndChangeIcon(copyDiv, block));
+};
+
+const copyCodeAndChangeIcon = async (copyDiv, block) => {
+    const code = block.querySelector('table')
+        ? getTableCode(block)
+        : getNonTableCode(block);
+    try {
+        await navigator.clipboard.writeText(code);
+        changeIcon(copyDiv, 'checked');
+    } catch (error) {
+        changeIcon(copyDiv, 'error');
+    }
+};
+
+const getNonTableCode = (block) => {
+    return [...block.querySelectorAll('code')].map((code) => code.textContent).join('');
+};
+
+const getTableCode = (block) => {
+    return [...block.querySelectorAll('tr')]
+        .map((row) => row.querySelector('td:last-child')?.innerText ?? '')
+        .join('');
+};
+
+document.querySelectorAll('pre:not(.mermaid)').forEach((block) => {
+    const copyDiv = document.createElement('div');
+    copyDiv.setAttribute('role', 'button');
+    copyDiv.setAttribute('aria-label', initCopyText);
+    copyDiv.setAttribute('title', initCopyText);
+    copyDiv.className = 'copy-code';
+    block.prepend(copyDiv);
+    addCopyEventListenerToDiv(copyDiv, block);
+});

public/js/copyCodeToClipboard.min.js

@@ -0,0 +1 @@
+const copiedText=document.getElementById("copy-success").textContent,initCopyText=document.getElementById("copy-init").textContent,changeIcon=(e,t)=>{e.classList.add(t),e.setAttribute("aria-label",copiedText),setTimeout(()=>{e.classList.remove(t),e.setAttribute("aria-label",initCopyText)},2500)},addCopyEventListenerToDiv=(e,t)=>{e.addEventListener("click",()=>copyCodeAndChangeIcon(e,t))},copyCodeAndChangeIcon=async(t,e)=>{e=(e.querySelector("table")?getTableCode:getNonTableCode)(e);try{await navigator.clipboard.writeText(e),changeIcon(t,"checked")}catch(e){changeIcon(t,"error")}},getNonTableCode=e=>[...e.querySelectorAll("code")].map(e=>e.textContent).join(""),getTableCode=e=>[...e.querySelectorAll("tr")].map(e=>e.querySelector("td:last-child")?.innerText??"").join("");document.querySelectorAll("pre:not(.mermaid)").forEach(e=>{var t=document.createElement("div");t.setAttribute("role","button"),t.setAttribute("aria-label",initCopyText),t.setAttribute("title",initCopyText),t.className="copy-code",e.prepend(t),addCopyEventListenerToDiv(t,e)});

public/js/decodeMail.js

@@ -0,0 +1,44 @@
+(function () {
+    'use strict';
+
+    // Utility function: Base64 Decoding.
+    function decodeBase64(encodedString) {
+        try {
+            // Can't use atob() directly because it doesn't support non-ascii characters.
+            // And non-ascii characters are allowed in email addresses and domains.
+            // See https://en.wikipedia.org/wiki/Email_address#Internationalization
+            // Code below adapted from Jackie Han: https://stackoverflow.com/a/64752311
+            const byteString = atob(encodedString);
+
+            // Convert byteString to an array of char codes.
+            const charCodes = [...byteString].map((char) => char.charCodeAt(0));
+
+            // Use TypedArray.prototype.set() to copy the char codes into a Uint8Array.
+            const bytes = new Uint8Array(charCodes.length);
+            bytes.set(charCodes);
+
+            const decoder = new TextDecoder('utf-8');
+            return decoder.decode(bytes);
+        } catch (e) {
+            console.error('Failed to decode Base64 string: ', e);
+            return null;
+        }
+    }
+
+    // Utility function: Update href of an element with a decoded email.
+    function updateEmailHref(element) {
+        const encodedEmail = element.getAttribute('data-encoded-email');
+        const decodedEmail = decodeBase64(encodedEmail);
+
+        if (decodedEmail) {
+            element.setAttribute('href', `mailto:${decodedEmail}`);
+        } else {
+            // If the decoding fails, hide the email link.
+            element.style.display = 'none';
+        }
+    }
+
+    // Fetch and process email elements with the "data-encoded-email" attribute.
+    const encodedEmailElements = document.querySelectorAll('[data-encoded-email]');
+    encodedEmailElements.forEach(updateEmailHref);
+})();

public/js/decodeMail.min.js

@@ -0,0 +1 @@
+!function(){"use strict";document.querySelectorAll("[data-encoded-email]").forEach(function(e){var t=function(e){try{var t=[...atob(e)].map(e=>e.charCodeAt(0)),r=new Uint8Array(t.length);return r.set(t),new TextDecoder("utf-8").decode(r)}catch(e){return console.error("Failed to decode Base64 string: ",e),null}}(e.getAttribute("data-encoded-email"));t?e.setAttribute("href","mailto:"+t):e.style.display="none"})}();

public/js/filterCards.js

@@ -0,0 +1,99 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const cards = document.querySelectorAll('.card');
+    const filterLinks = document.querySelectorAll('.filter-controls a');
+    const allProjectsFilter = document.querySelector('#all-projects-filter');
+    if (!cards.length || !filterLinks.length) return;
+    allProjectsFilter.style.display = 'block';
+
+    // Create a Map for O(1) lookups of links by filter value.
+    const linkMap = new Map(
+        Array.from(filterLinks).map(link => [link.dataset.filter, link])
+    );
+
+    // Pre-process cards data for faster filtering.
+    const cardData = Array.from(cards).map(card => ({
+        element: card,
+        tags: card.dataset.tags?.toLowerCase().split(',').filter(Boolean) ?? []
+    }));
+
+    function getTagSlugFromUrl(url) {
+        return url.split('/').filter(Boolean).pop();
+    }
+
+    function getFilterFromHash() {
+        if (!window.location.hash) return 'all';
+        const hash = decodeURIComponent(window.location.hash.slice(1));
+        const matchingLink = Array.from(filterLinks).find(link =>
+            getTagSlugFromUrl(link.getAttribute('href')) === hash
+        );
+        return matchingLink?.dataset.filter ?? 'all';
+    }
+
+    function setActiveFilter(filterValue, updateHash = true) {
+        if (updateHash) {
+            if (filterValue === 'all') {
+                history.pushState(null, '', window.location.pathname);
+            } else {
+                const activeLink = linkMap.get(filterValue);
+                if (activeLink) {
+                    const tagSlug = getTagSlugFromUrl(activeLink.getAttribute('href'));
+                    history.pushState(null, '', `#${tagSlug}`);
+                }
+            }
+        }
+        const isAll = filterValue === 'all';
+        const display = isAll ? '' : 'none';
+        const ariaHidden = isAll ? 'false' : 'true';
+        requestAnimationFrame(() => {
+            filterLinks.forEach(link => {
+                const isActive = link.dataset.filter === filterValue;
+                link.classList.toggle('active', isActive);
+                link.setAttribute('aria-pressed', isActive);
+            });
+            if (isAll) {
+                cardData.forEach(({ element }) => {
+                    element.style.display = display;
+                    element.setAttribute('aria-hidden', ariaHidden);
+                });
+            } else {
+                cardData.forEach(({ element, tags }) => {
+                    const shouldShow = tags.includes(filterValue);
+                    element.style.display = shouldShow ? '' : 'none';
+                    element.setAttribute('aria-hidden', !shouldShow);
+                });
+            }
+        });
+    }
+
+    const filterContainer = filterLinks[0].parentElement.parentElement;
+    filterContainer.addEventListener('click', e => {
+        const link = e.target.closest('a');
+        if (!link) return;
+        e.preventDefault();
+        const filterValue = link.dataset.filter;
+        if (filterValue) setActiveFilter(filterValue);
+    });
+
+    filterContainer.addEventListener('keydown', e => {
+        const link = e.target.closest('a');
+        if (!link) return;
+        if (e.key === ' ' || e.key === 'Enter') {
+            e.preventDefault();
+            link.click();
+        }
+    });
+
+    filterLinks.forEach(link => {
+        link.setAttribute('role', 'button');
+        link.setAttribute('aria-pressed', link.classList.contains('active'));
+    });
+
+    window.addEventListener('popstate', () => {
+        setActiveFilter(getFilterFromHash(), false);
+    });
+
+    const initialFilter = getFilterFromHash();
+    if (initialFilter !== 'all') {
+        setActiveFilter(initialFilter, false);
+    }
+});

public/js/filterCards.min.js

@@ -0,0 +1 @@
+document.addEventListener("DOMContentLoaded",()=>{var t=document.querySelectorAll(".card");const l=document.querySelectorAll(".filter-controls a");var e=document.querySelector("#all-projects-filter");if(t.length&&l.length){e.style.display="block";const s=new Map(Array.from(l).map(t=>[t.dataset.filter,t])),i=Array.from(t).map(t=>({element:t,tags:t.dataset.tags?.toLowerCase().split(",").filter(Boolean)??[]}));function o(t){return t.split("/").filter(Boolean).pop()}function a(){if(!window.location.hash)return"all";const e=decodeURIComponent(window.location.hash.slice(1));return Array.from(l).find(t=>o(t.getAttribute("href"))===e)?.dataset.filter??"all"}function r(a,t=!0){t&&("all"===a?history.pushState(null,"",window.location.pathname):(t=s.get(a))&&(t=o(t.getAttribute("href")),history.pushState(null,"","#"+t)));const e="all"===a,r=e?"":"none",n=e?"false":"true";requestAnimationFrame(()=>{l.forEach(t=>{var e=t.dataset.filter===a;t.classList.toggle("active",e),t.setAttribute("aria-pressed",e)}),e?i.forEach(({element:t})=>{t.style.display=r,t.setAttribute("aria-hidden",n)}):i.forEach(({element:t,tags:e})=>{e=e.includes(a),t.style.display=e?"":"none",t.setAttribute("aria-hidden",!e)})})}(e=l[0].parentElement.parentElement).addEventListener("click",t=>{var e=t.target.closest("a");e&&(t.preventDefault(),t=e.dataset.filter)&&r(t)}),e.addEventListener("keydown",t=>{var e=t.target.closest("a");!e||" "!==t.key&&"Enter"!==t.key||(t.preventDefault(),e.click())}),l.forEach(t=>{t.setAttribute("role","button"),t.setAttribute("aria-pressed",t.classList.contains("active"))}),window.addEventListener("popstate",()=>{r(a(),!1)}),"all"!==(t=a())&&r(t,!1)}});

public/js/footnoteBacklinks.js

@@ -0,0 +1,33 @@
+// Assign unique IDs to the footnote references based on their hashes.
+function assignReferenceIds() {
+    const references = document.querySelectorAll('.footnote-reference');
+    for (const ref of references) {
+        ref.id = `ref:${ref.children[0].hash.substring(1)}`;
+    }
+}
+
+// Create backlinks for each footnote definition if a corresponding reference exists.
+function createFootnoteBacklinks() {
+    const footnotes = document.querySelectorAll('.footnote-definition');
+    for (const footnote of footnotes) {
+        const backlinkId = `ref:${footnote.id}`;
+
+        // Skip if there's no corresponding reference in the text (i.e. the footnote doesn't reference anything).
+        if (!document.getElementById(backlinkId)) continue;
+
+        const backlink = document.createElement('a');
+        backlink.href = `#${backlinkId}`;
+        backlink.className = 'footnote-backlink';
+        backlink.textContent = '↩';
+        footnote.lastElementChild.appendChild(backlink);
+    }
+}
+
+// Initialise the handlers for the footnote references and definitions.
+function initFootnotes() {
+    assignReferenceIds();
+    createFootnoteBacklinks();
+}
+
+// Wait for the window to load, then execute the main function.
+window.addEventListener('load', initFootnotes);

public/js/footnoteBacklinks.min.js

@@ -0,0 +1 @@
+function assignReferenceIds(){for(const e of document.querySelectorAll(".footnote-reference"))e.id="ref:"+e.children[0].hash.substring(1)}function createFootnoteBacklinks(){for(const n of document.querySelectorAll(".footnote-definition")){var e,t="ref:"+n.id;document.getElementById(t)&&((e=document.createElement("a")).href="#"+t,e.className="footnote-backlink",e.textContent="↩",n.lastElementChild.appendChild(e))}}function initFootnotes(){assignReferenceIds(),createFootnoteBacklinks()}window.addEventListener("load",initFootnotes);

public/js/giscus.js

@@ -0,0 +1,81 @@
+function setGiscusTheme(newTheme) {
+    // Get the giscus iframe.
+    const frame = document.querySelector('iframe.giscus-frame');
+
+    if (frame) {
+        // If the iframe exists, send a message to set the theme.
+        frame.contentWindow.postMessage(
+            { giscus: { setConfig: { theme: newTheme } } },
+            'https://giscus.app'
+        );
+    }
+}
+
+// Function to initialize Giscus. This function is run when the window loads.
+function initGiscus() {
+    // Get the div that will contain the comments.
+    const commentsDiv = document.querySelector('.comments');
+    if (commentsDiv) {
+        // Get the various settings from data attributes on the div.
+        const repo = commentsDiv.getAttribute('data-repo');
+        const repoId = commentsDiv.getAttribute('data-repo-id');
+        const category = commentsDiv.getAttribute('data-category');
+        const categoryId = commentsDiv.getAttribute('data-category-id');
+        const strictTitleMatching = commentsDiv.getAttribute('data-strict');
+        const term = commentsDiv.getAttribute('data-term');
+        const reactionsEnabled = commentsDiv.getAttribute('data-reactions-enabled');
+        const inputPosition = commentsDiv.getAttribute('data-input-position');
+        const lightTheme = commentsDiv.getAttribute('data-light-theme');
+        const darkTheme = commentsDiv.getAttribute('data-dark-theme');
+        const lang = commentsDiv.getAttribute('data-lang');
+        const lazyLoading = commentsDiv.getAttribute('data-lazy-loading');
+
+        // Create a new script tag that will load the Giscus script.
+        const script = document.createElement('script');
+        script.src = 'https://giscus.app/client.js';
+        script.async = true;
+
+        // Set the various settings as data attributes on the script tag.
+        script.setAttribute('data-repo', repo);
+        script.setAttribute('data-repo-id', repoId);
+        script.setAttribute('data-category', category);
+        script.setAttribute('data-category-id', categoryId);
+        script.setAttribute('data-term', term);
+        script.setAttribute('data-strict', strictTitleMatching);
+        script.setAttribute('data-reactions-enabled', reactionsEnabled);
+        script.setAttribute('data-emit-metadata', '0');
+        script.setAttribute('data-input-position', inputPosition);
+        script.setAttribute('data-lang', lang);
+        script.setAttribute('crossorigin', 'anonymous');
+
+        // Set the mapping if it is provided.
+        const mapping = commentsDiv.getAttribute('data-mapping');
+        if (mapping) {
+            script.setAttribute('data-mapping', mapping);
+        }
+
+        // Choose the correct theme based on the current theme of the document.
+        const currentTheme =
+            document.documentElement.getAttribute('data-theme') || 'light';
+        const selectedTheme = currentTheme === 'dark' ? darkTheme : lightTheme;
+        script.setAttribute('data-theme', selectedTheme);
+
+        // Set the loading attribute if lazy loading is enabled.
+        if (lazyLoading === 'true') {
+            script.setAttribute('data-loading', 'lazy');
+        }
+
+        // Add the script tag to the div.
+        commentsDiv.appendChild(script);
+
+        // Listen for theme changes and update the Giscus theme when they occur.
+        window.addEventListener('themeChanged', (event) => {
+            const selectedTheme =
+                event.detail.theme === 'dark' ? darkTheme : lightTheme;
+            setGiscusTheme(selectedTheme);
+        });
+    }
+}
+
+// Initialize Giscus.
+initGiscus();

public/js/giscus.min.js

@@ -0,0 +1 @@
+function setGiscusTheme(t){var e=document.querySelector("iframe.giscus-frame");e&&e.contentWindow.postMessage({giscus:{setConfig:{theme:t}}},"https://giscus.app")}function initGiscus(){var t=document.querySelector(".comments");if(t){var e=t.getAttribute("data-repo"),a=t.getAttribute("data-repo-id"),i=t.getAttribute("data-category"),r=t.getAttribute("data-category-id"),d=t.getAttribute("data-strict"),s=t.getAttribute("data-term"),u=t.getAttribute("data-reactions-enabled"),n=t.getAttribute("data-input-position");const b=t.getAttribute("data-light-theme"),A=t.getAttribute("data-dark-theme");var o=t.getAttribute("data-lang"),c=t.getAttribute("data-lazy-loading"),g=document.createElement("script"),e=(g.src="https://giscus.app/client.js",g.async=!0,g.setAttribute("data-repo",e),g.setAttribute("data-repo-id",a),g.setAttribute("data-category",i),g.setAttribute("data-category-id",r),g.setAttribute("data-term",s),g.setAttribute("data-strict",d),g.setAttribute("data-reactions-enabled",u),g.setAttribute("data-emit-metadata","0"),g.setAttribute("data-input-position",n),g.setAttribute("data-lang",o),g.setAttribute("crossorigin","anonymous"),t.getAttribute("data-mapping")),a=(e&&g.setAttribute("data-mapping",e),document.documentElement.getAttribute("data-theme")||"light"),i="dark"===a?A:b;g.setAttribute("data-theme",i),"true"===c&&g.setAttribute("data-loading","lazy"),t.appendChild(g),window.addEventListener("themeChanged",t=>{setGiscusTheme("dark"===t.detail.theme?A:b)})}}initGiscus();

public/js/hyvortalk.js

@@ -0,0 +1,44 @@
+function initHyvorTalk() {
+    // Get the div that will contain the comments.
+    const commentsDiv = document.querySelector('.comments');
+    if (commentsDiv) {
+        // Get the various settings from data attributes on the div.
+        const websiteId = commentsDiv.getAttribute('data-website-id');
+        const pageId = commentsDiv.getAttribute('data-page-id');
+        const pageLanguage = commentsDiv.getAttribute('data-page-language');
+        const loading = commentsDiv.getAttribute('data-loading');
+        const pageAuthor = commentsDiv.getAttribute('data-page-author');
+
+        // Create a new script tag that will load the Hyvor Talk script.
+        const script = document.createElement('script');
+        script.src = 'https://talk.hyvor.com/embed/embed.js';
+        script.async = true;
+        script.type = 'module';
+        document.head.appendChild(script);
+
+        // Create a new Hyvor Talk comments tag.
+        const comments = document.createElement('hyvor-talk-comments');
+        comments.setAttribute('website-id', websiteId);
+        comments.setAttribute('page-id', pageId);
+        comments.setAttribute('page-language', pageLanguage);
+        comments.setAttribute('loading', loading);
+        comments.setAttribute('page-author', pageAuthor);
+
+        // Choose the correct theme based on the current theme of the document.
+        const currentTheme =
+            document.documentElement.getAttribute('data-theme') || 'light';
+        comments.setAttribute('colors', currentTheme);
+
+        // Add the Hyvor Talk comments tag to the div.
+        commentsDiv.appendChild(comments);
+
+        // Listen for theme changes and update the Hyvor Talk theme when they occur.
+        window.addEventListener('themeChanged', (event) => {
+            const selectedTheme = event.detail.theme;
+            comments.setAttribute('colors', selectedTheme);
+        });
+    }
+}
+
+// Initialize HyvorTalk.
+initHyvorTalk();

public/js/hyvortalk.min.js

@@ -0,0 +1 @@
+function initHyvorTalk(){var t=document.querySelector(".comments");if(t){var e=t.getAttribute("data-website-id"),a=t.getAttribute("data-page-id"),i=t.getAttribute("data-page-language"),d=t.getAttribute("data-loading"),r=t.getAttribute("data-page-author"),n=document.createElement("script");n.src="https://talk.hyvor.com/embed/embed.js",n.async=!0,n.type="module",document.head.appendChild(n);const o=document.createElement("hyvor-talk-comments");o.setAttribute("website-id",e),o.setAttribute("page-id",a),o.setAttribute("page-language",i),o.setAttribute("loading",d),o.setAttribute("page-author",r);n=document.documentElement.getAttribute("data-theme")||"light";o.setAttribute("colors",n),t.appendChild(o),window.addEventListener("themeChanged",t=>{t=t.detail.theme;o.setAttribute("colors",t)})}}initHyvorTalk();

public/js/initializeTheme.js

@@ -0,0 +1,25 @@
+(function () {
+    // Get the default theme from the HTML data-theme attribute.
+    const defaultTheme = document.documentElement.getAttribute('data-theme');
+
+    // Set the data-default-theme attribute only if defaultTheme is not null.
+    if (defaultTheme) {
+        document.documentElement.setAttribute('data-default-theme', defaultTheme);
+    }
+
+    // Attempt to retrieve the current theme from the browser's local storage.
+    const storedTheme = localStorage.getItem('theme');
+
+    if (storedTheme) {
+        document.documentElement.setAttribute('data-theme', storedTheme);
+    } else if (defaultTheme) {
+        document.documentElement.setAttribute('data-theme', defaultTheme);
+    } else {
+        // If no theme is found in local storage and no default theme is set, use user's system preference.
+        const isSystemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+        document.documentElement.setAttribute(
+            'data-theme',
+            isSystemDark ? 'dark' : 'light'
+        );
+    }
+})();

public/js/initializeTheme.min.js

@@ -0,0 +1 @@
+!function(){var t=document.documentElement.getAttribute("data-theme"),e=(t&&document.documentElement.setAttribute("data-default-theme",t),localStorage.getItem("theme"));e?document.documentElement.setAttribute("data-theme",e):t?document.documentElement.setAttribute("data-theme",t):(e=window.matchMedia("(prefers-color-scheme: dark)").matches,document.documentElement.setAttribute("data-theme",e?"dark":"light"))}();

public/js/isso.js

@@ -0,0 +1,81 @@
+// Function to initialise Isso.
+function initIsso() {
+    // Get the div that will contain the comments.
+    const commentsDiv = document.querySelector('.comments');
+    if (commentsDiv) {
+        // Get the lazy-loading setting from the div.
+        const lazyLoading = commentsDiv.getAttribute('data-lazy-loading') === 'true';
+
+        // If lazy-loading is enabled, create an Intersection Observer and use it.
+        if (lazyLoading) {
+            const observer = new IntersectionObserver((entries) => {
+                // Loop over the entries.
+                entries.forEach((entry) => {
+                    // If the element is in the viewport, initialize Isso.
+                    if (entry.isIntersecting) {
+                        loadIsso(commentsDiv);
+                        // Once the Isso is loaded, we don't need to observe the element anymore.
+                        observer.unobserve(commentsDiv);
+                    }
+                });
+            });
+
+            // Start observing the comments div.
+            observer.observe(commentsDiv);
+        } else {
+            // If lazy-loading is not enabled, initialise Isso immediately.
+            loadIsso(commentsDiv);
+        }
+    }
+}
+
+// Function to load Isso.
+function loadIsso(commentsDiv) {
+    // Get the various settings from data attributes on the div.
+    const endpointUrl = commentsDiv.getAttribute('data-endpoint-url');
+    const pageId = commentsDiv.getAttribute('data-isso-id');
+    const title = commentsDiv.getAttribute('data-title');
+    const lang = commentsDiv.getAttribute('data-page-language');
+    const maxCommentsTop = commentsDiv.getAttribute('data-max-comments-top');
+    const maxCommentsNested = commentsDiv.getAttribute('data-max-comments-nested');
+    const avatar = commentsDiv.getAttribute('data-avatar');
+    const voting = commentsDiv.getAttribute('data-voting');
+    const hashes = commentsDiv.getAttribute('data-page-author-hashes');
+
+    // Create a new script tag that will load the Isso script.
+    const script = document.createElement('script');
+    script.src = endpointUrl + 'js/embed.min.js';
+    script.async = true;
+
+    // Set the various settings as data attributes on the script tag.
+    script.setAttribute('data-isso', endpointUrl);
+    script.setAttribute('data-isso-lang', lang);
+    script.setAttribute('data-isso-max-comments-top', maxCommentsTop);
+    script.setAttribute('data-isso-max-comments-nested', maxCommentsNested);
+    script.setAttribute('data-isso-avatar', avatar);
+    script.setAttribute('data-isso-vote', voting);
+    script.setAttribute('data-isso-page-author-hashes', hashes);
+    script.setAttribute('data-isso-css', 'false');
+
+    // Set the id and data-isso-id of the Isso thread.
+    const section = document.createElement('section');
+    section.id = 'isso-thread';
+    section.setAttribute('data-isso-id', pageId);
+    section.setAttribute('data-title', title);
+    commentsDiv.appendChild(section);
+
+    // Add the script tag to the div.
+    commentsDiv.appendChild(script);
+
+    // Create a link tag for the Isso CSS.
+    const link = document.createElement('link');
+    link.rel = 'stylesheet';
+    link.type = 'text/css';
+    link.href = '/isso.min.css';
+
+    // Add the CSS link tag to the head of the document.
+    document.head.appendChild(link);
+}
+
+// Initialize Isso.
+initIsso();

public/js/isso.min.js

@@ -0,0 +1 @@
+function initIsso(){const e=document.querySelector(".comments");if(e)if("true"===e.getAttribute("data-lazy-loading")){const a=new IntersectionObserver(t=>{t.forEach(t=>{t.isIntersecting&&(loadIsso(e),a.unobserve(e))})});a.observe(e)}else loadIsso(e)}function loadIsso(t){var e=t.getAttribute("data-endpoint-url"),a=t.getAttribute("data-isso-id"),s=t.getAttribute("data-title"),i=t.getAttribute("data-page-language"),o=t.getAttribute("data-max-comments-top"),r=(t.getAttribute("data-max-comments-nested"),t.getAttribute("data-avatar")),d=t.getAttribute("data-voting"),n=t.getAttribute("data-page-author-hashes"),u=document.createElement("script");u.src=e+"js/embed.min.js",u.async=!0,u.setAttribute("data-isso",e),u.setAttribute("data-isso-lang",i),u.setAttribute("data-isso-max-comments-top",o),u.setAttribute("data-isso-avatar",r),u.setAttribute("data-isso-vote",d),u.setAttribute("data-isso-page-author-hashes",n),u.setAttribute("data-isso-css","false"),(e=document.createElement("section")).id="isso-thread",e.setAttribute("data-isso-id",a),e.setAttribute("data-title",s),t.appendChild(e),t.appendChild(u),(i=document.createElement("link")).rel="stylesheet",i.type="text/css",i.href="/isso.min.css",document.head.appendChild(i)}initIsso();

public/js/loadComments.js

@@ -0,0 +1,26 @@
+// Wait for the full HTML document to be parsed and ready.
+document.addEventListener('DOMContentLoaded', () => {
+    // Retrieve the button element.
+    const loadCommentsButton = document.querySelector('#load-comments');
+
+    // If the button exists…
+    if (loadCommentsButton) {
+        // Add a "click" event listener to the button.
+        loadCommentsButton.addEventListener('click', () => {
+            // Create a new "script" HTML element.
+            const script = document.createElement('script');
+
+            // Set the source of the script to the URL in the button's "data-script-src" attribute.
+            script.src = loadCommentsButton.dataset.scriptSrc;
+
+            // Load asynchronously.
+            script.async = true;
+
+            // Add the script element to the end of the document body, which causes the script to start loading and executing.
+            document.body.appendChild(script);
+
+            // Hide the button after it's clicked.
+            loadCommentsButton.style.display = 'none';
+        });
+    }
+});