Reset history

Upgrade to parcel 2

Block game@

Fix overflow

refactor: convert landing page into static html

fix: add missing CNAME

feat: add links to apps

feat: apps

chore: cleanup

feat: separate list items if they have sub items

feat: manifest.json

refactor: papers look like apps now

chore: improve lighthouse results

fix: accessibility report by making links bold

feat: gh pages action & jinja2

fix: correct jinja cli

fix: installing optional yaml support for jinja2

fix: upgrade deploy-pages action

fix: job permissions

fix: upgrade upload-pages-artifact version

fix: align capitalisation

feat: minify html build

fix: make minhtml executable

fix: am I drunk? why was my content outside of the body tag!?

chore: only fetch fonts actually used

chore: only get Noto Sans in weight 500

chore: preload fonts 🤷

feat: bachelor's cert

fix: redact pia

.github/workflows/build-and-deploy.yaml

@@ -0,0 +1,48 @@
+name: Build and Deploy
+
+on:
+  push:
+    branches:
+      - master
+
+permissions:
+  id-token: write
+  pages: write
+
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Set up Python
+        uses: actions/setup-python@v2
+        with:
+          python-version: "3.x"
+
+      - name: Install Jinja2
+        run: pip install jinja2-cli "jinja2-cli[yaml]"
+
+      - name: Build
+        run: make all
+
+      - name: Minify HTML and CSS
+        run: |
+          curl -L https://github.com/wilsonzlin/minify-html/releases/download/v0.15.0/minhtml-0.15.0-x86_64-unknown-linux-gnu > minhtml
+          chmod +x minhtml
+          ./minhtml --keep-closing-tags --minify-css dist/*.html dist/*.css
+
+      - name: Setup Pages
+        id: pages
+        uses: actions/configure-pages@v3
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: dist/
+
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

.gitignore

@@ -0,0 +1,2 @@
+.DS_Store
+minhtml

Makefile

@@ -0,0 +1,10 @@
+files := dist/index.html dist/main.css
+all: $(files)
+
+clean:
+	rm -rf $(files)
+
+.PHONY: all clean
+
+dist/%: data.yaml src/%.jinja2 src/base.html.jinja2
+	jinja2 $(patsubst dist/%,src/%,$@).jinja2 data.yaml > $@

data.yaml

@@ -0,0 +1,105 @@
+theme:
+  color:
+    background: "#2a0a2a"
+index:
+  parts:
+    - title: links
+      type: links-only
+      description: ""
+      links:
+        - title: GitHub
+          url: https://github.com/mtib
+        - title: LinkedIn
+          url: https://www.linkedin.com/in/mtib/
+        - title: CV
+          url: /assets/cv.pdf
+    - title: posts
+      type: links-only
+      description: |
+        WIP - migrating from client-side rendered markdown to static HTML. Check my
+        <a href="https://github.com/mtib?tab=repositories" target="_blank" rel="noopener noreferrer">
+            GitHub repositories</a> for what I am working on.
+      links: []
+    - title: apps
+      type: apps
+      apps:
+        - title: no-bs countdown
+          description: |
+            A fully client-side, static HTML countdown timer, with no ads or accounts or price. All data is
+            stored in the URL.
+          links:
+            - title: website
+              url: https://blog.mtib.dev/no-bs-countdown/
+            - title: repository
+              url: https://github.com/mtib/no-bs-countdown
+        - title: no-bs spinner
+          description: |
+            A fully client-side, static HTML spinner, with no ads or accounts or price. All data is
+            stored in the URL.
+          links:
+            - title: website
+              url: https://blog.mtib.dev/no-bs-spinner/
+            - title: repository
+              url: https://github.com/mtib/no-bs-spinner
+        - title: esc.pos
+          description: |
+            A fully client-side, static HTML ESC/POS (thermal printer) UI. Using WebUSB to print on connected
+            hardware without requiring any drivers.
+            Prints any markdown (rendered in browser to ESC/POS bitmap commands).
+          links:
+            - title: website
+              url: https://esc.pos.mtib.dev/
+            - title: repository
+              url: https://github.com/mtib/esc-pos-generator
+        - title: void
+          description: |
+            Web application to store, view and share markdown documents in a mostly write-only style, with
+            powerful search and privacy (local encryption).
+          links:
+            - title: website
+              url: https://void.mtib.dev/
+            - title: front-end repository
+              url: https://github.com/mtib/void-frontend
+            - title: back-end repository
+              url: https://github.com/mtib/void-backend
+    - title: papers
+      type: apps
+      apps:
+        - title: "SplitBFT: Improving Byzantine Fault Tolerance Safety Using Trusted Compartments"
+          links:
+            - title: paper (ACM)
+              url: https://dl.acm.org/doi/abs/10.1145/3528535.3531516
+        - title: Resilient Byzantine Fault-Tolerance using Multiple Trusted Execution Environments
+          links:
+            - title: paper
+              url: /assets/papers/splitbft_resilient_consensus.pdf
+            - title: slides
+              url: /assets/slides/splitbft_resilient_consensus_slides.pdf
+            - title: presentation
+              url: https://www.youtube.com/watch?v=6fuUlrk3IDg
+        - title: Microsecond Replication for Microsecond Applications
+          links:
+            - title: paper
+              url: /assets/papers/ms_consensus.pdf
+            - title: slides
+              url: /assets/slides/ms_consensus_slides.pdf
+        - title: Low Latency Byzantine Agreement using RDMA
+          links:
+            - title: paper
+              url: /assets/papers/rdma_consensus.pdf
+            - title: slides
+              url: /assets/slides/rdma_consensus_slides.pdf
+    - title: certifications
+      type: links-only
+      description: ""
+      links:
+        - title: Master of Science in Computer Science (Minor Mathematics)
+          url: /assets/certs/ma_cert.pdf
+        - title: Bachelor of Science in Computer Science
+          url: /assets/certs/ba_cert.pdf
+        - title: TT38 Talent Test
+          url: /assets/certs/tt38_talent_test.pdf
+        - title: "Predictive Index: Behaviour"
+          url: /assets/certs/pi_behaviour.pdf
+        - title: "Predictive Index: Cognitive"
+          url: /assets/certs/pi_cognitive.pdf

dist/.gitignore

@@ -0,0 +1,2 @@
+index.html
+main.css

dist/CNAME

@@ -0,0 +1 @@
+blog.mtib.dev

dist/assets/manifest.json

@@ -0,0 +1,15 @@
+{
+    "short_name": "mtib",
+    "name": "blog.mtib.dev",
+    "icons": [
+        {
+            "src": "/assets/m.png",
+            "sizes": "256x256",
+            "type": "image/png"
+        }
+    ],
+    "start_url": "/",
+    "display": "standalone",
+    "theme_color": "#2a0a2a",
+    "background_color": "#2a0a2a"
+}

src/base.html.jinja2

@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{% block title %}blog.mtib.dev{% endblock %}</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@500&display=swap" rel="preload" as="style"
+        onload="this.onload=null;this.rel='stylesheet'">
+    <noscript>
+        <link href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@500&display=swap" rel="stylesheet">
+    </noscript>
+    <link rel="stylesheet" href="./main.css">
+    <link rel="icon" href="/assets/m.png">
+    <meta name="application-name" content="blog.mtib.dev">
+    <meta name="theme-color" content="#2a0a2a">
+    <link rel="manifest" href="/assets/manifest.json" />
+    <meta name="description"
+        content="A personal blog of Markus Horst Becker aka mtib, linking to academic resources and open-source apps.">
+    <meta name="robots" content="index,follow">
+    <meta name="subject" content="software development">
+    <meta name="rating" content="General">
+    <meta name="referrer" content="no-referrer">
+    <meta name="ICBM" content="55.681389, 12.455">
+    <meta name="geo.position" content="55.681389;12.455">
+    <meta name="geo.region" content="DK">
+    <meta name="geo.placename" content="Copenhagen">
+</head>
+
+<body>
+
+    <div class="noto-sans-default">
+        <div style="
+        display: flex;
+        flex-direction: column;
+        gap: 50px;
+        align-items: center;
+        padding: 10px 0 50px 0;">
+            <div class="item">
+                {% block heading %}
+                <h1>blog.mtib.dev</h1>
+                {% endblock %}
+            </div>
+            {% block content %}
+            FILL ME
+            {% endblock %}
+        </div>
+    </div>
+
+    <style>
+        .item {
+            width: min(calc(100vw - 20px), 800px);
+        }
+
+        .item h2 {
+            margin-bottom: 8px;
+        }
+
+        .app {
+            padding-top: 20px;
+        }
+
+        div.item>div.app:nth-of-type(1) {
+            padding-top: 0px;
+        }
+    </style>
+
+</body>
+
+
+</html>

src/index.html.jinja2

@@ -0,0 +1,44 @@
+{% extends "base.html.jinja2" %}
+{% block content %}
+{% for part in index.parts %}
+<div class="item">
+    <h2>{{part.title}}</h2>
+    {% if part.description %}
+    <p>{{part.description}}</p>
+    {% endif %}
+    {% if part.type == "links-only" %}
+    {% if part.links | length > 0 %}
+    <ul>
+        {% for link in part.links %}
+        <li>
+            <a href="{{ link.url }}" target="_blank" rel="noopener noreferrer">
+                {{ link.title }}
+            </a>
+        </li>
+        {% endfor %}
+    </ul>
+    {% endif %}
+    {% elif part.type == "apps" %}
+    {% for app in part.apps %}
+    <div class="app">
+        <h3>{{ app.title }}</h3>
+        <ul class="inline">
+            {% for link in app.links %}
+            <li>
+                <a href="{{ link.url }}" target="_blank" rel="noopener noreferrer">{{ link.title }}</a>
+            </li>
+            {% endfor %}
+        </ul>
+        {% if app.description %}
+        <p>
+            {{ app.description }}
+        </p>
+        {% endif %}
+    </div>
+    {% endfor %}
+    {% else %}
+    Unknown part type: {{ part.type }}
+    {% endif %}
+</div>
+{% endfor %}
+{% endblock %}