From 7242b2e55d0fd86236900b80e100c860e0b31294 Mon Sep 17 00:00:00 2001
From: "Florine W. Dekker" <florine@fwdekker.com>
Date: Sun, 20 Nov 2022 23:13:24 +0100
Subject: [PATCH] Upgrade to template v3

---
 .eleventy.js                                  |  23 ++++++++++-
 package-lock.json                             | Bin 341438 -> 356493 bytes
 package.json                                  |   9 +++--
 src/main/_includes/default.njk                |  19 ++++-----
 src/main/_includes/home.njk                   |  24 ++++++------
 src/main/_includes/post.njk                   |  28 +++++++-------
 src/main/_posts/2017-03-01-raspi.md           |   4 +-
 .../_posts/2021-07-18-rimworld-timelapse.md   |  36 ++++++++----------
 ...2-04-17-remember-us-state-abbreviations.md |   2 +-
 src/main/css/main.css                         |  21 ++--------
 10 files changed, 86 insertions(+), 80 deletions(-)

diff --git a/.eleventy.js b/.eleventy.js
index af50c81..4ef4482 100644
--- a/.eleventy.js
+++ b/.eleventy.js
@@ -1,8 +1,27 @@
+const externalLinks = require("eleventy-plugin-external-links");
+const markdownIt = require("markdown-it");
+
 module.exports = (eleventyConfig) => {
-    eleventyConfig.addFilter("isoDate", dateObj => {
-        return dateObj.toISOString().substr(0, 10);
+    // Format date
+    eleventyConfig.addFilter("isoDate", dateObj => dateObj.toISOString().substring(0, 10));
+
+    // Extract excerpts
+    eleventyConfig.setFrontMatterParsingOptions({
+        excerpt: true,
+        excerpt_separator: "<!-- excerpt -->",
     });
 
+    // Make external links go `target="_blank"`
+    eleventyConfig.addPlugin(externalLinks, {
+        name: "external-links",
+        regex: /^(?!https:\/\/.*fwdekker.com|\/.*)/i,
+        rel: null,
+        includeDoctype: true,
+    });
+
+    // Convert string to HTML
+    eleventyConfig.addFilter("toHTML", str => new markdownIt({}).renderInline(str));
+
     return {
         pathPrefix: "/blog/",
         dir: {
diff --git a/package-lock.json b/package-lock.json
index 0fc55353600a9f51b11b0b56d217c749bce13281..3b3261a7c552724797a7f9920ea50db5dba17150 100644
GIT binary patch
delta 7632
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

delta 2313
zcmciCS!`5g6bJBp_udY60j8xbw31Rnk-`=3%$?;<YglIQES-JnjL|sLSvq@X?MxL@
z2ti+f)?0d_fRxZgDbZpEy;h0AL}S1g9z;zVDZFS9qm2<0S)Eo*#KcGX^u3+`Isbh5
z9lFu<$*soGPB72mHDmPt#kYaI*hq|B?t<xW@g{Z>Rh9Q6H3Ikw6R@Lec;zkl2!e${
zLdMP$ZSXY@-|D18dR3205wm54b_JtMD}u$Llra!7Yn^IAh^Eb?E+}+3D2+}k>9cy>
z*@1A6%R5|1cteStp<s23(>b4#(&Y78(NJ$O))xxK8SvF26ML!Z8+a{+H^S<k%4T2i
zj<a-i6WlqA*Fowo_A@4Khx#_u3?oyBfSD=8t9rg`he*o$I+|gAC#qpTe4-N$=<&6%
z=K@+?=2f>KaM)23Y<PhE4kOpFma?*T94}MNK^4351_|wPysCWXS@rI6+lfnc<@vL`
zx-vJry@oy4MZmQUm9yJFYb?+5x1;j(=lNH-gC-O<0HMP8?84Db*!%`+0PML+DKe{E
z<;rIL8BH`&=y6+}j3L$=9?WSSaj9G0Zx6)%3X4aaH)+U(J0n$T`wf|bhaM7Ztol@6
z{{TaV4875)AYjWF8A%}~iqRr7q(8;%P&<ZbuKO4|$%9cDK|uRUxD4L06YI)*8`dD$
za~f?yA{MoF!&WEJjENXFJ-yADRz<ra5mP`xT1{SuO&l>qBi7+mk2T?ATryp*C`oy>
zlvinCiqW8dKxovFS&2?ddp%BnRwy@`r2~rLgj*!F<N`9AO&m-O<W+DggPvaMk$ZUx
zJy{P&zr?%293c2?;6CZ>jmxc8SFdJ38xy;oa%p%llr0IYrT(PBA|Oq1r9y9W*-VyV
z(XR7HGfKZzDoJJr^(v9ZRnnWh#=KsTPo<3#rWBMa5-Lx)$7g4e+76c6n25Xi0kYsQ
zk5~T3l@PHFZiR^!*hS#$V1z<VWl!T(1pJRsEqCGq>T8GYBWS~4jr}o7oQKIyw24dI
zLM<3K@(X%>BXsm(GN_&*I^ee>MB~y7XGkhFl!iQ7DJd5DLSZ!}i&END#8fJUW0XIc
zQu+t8Bq>s7Y=*4P6Vqz*gQbFivC-z3B+(U-GP-m>>7c{Hpxmi-T87;N9!Ck@6JdKe
zQ3J+*6^`vAWN>5xtATr)tJ?mRoHK?J>Y;x1P%>_H6g3Ja8u1&cG)<;ufw;>$92M&W
zHlv<$Q(7UZ$#=QzMP*TFOp!@pPob}9NcK`xz?oMGis6Wy$yq}Z#+BqY9>Y`!&L6_M
zU~~ejUJP9iryLmR%#nV9-A?L?TE<o!4)|!bt58yS{RNFhp^WNNrJlT6V4*0+EYF%~
zkye)*R@nk>pHyxvdUce{CMkstOjK@@<^;5i8YUUKO9GWVGaR14dGN5aYVSm}((uAj
zjNuNvi8Xka#gY0MT>n@d`GH;7(!}lN;e*dWsYKMXZ8uu~aiki-$O^oTqg40_DR=ut
z{6aPN(?Ptm2D;B+D?vAnwU)2V)*yKM9#IG1zeTKv>nfs~8yLrvD;_b2o#mf|i>L5r
zZtggKGsVrVBow=r5uO-Eb8CAE?|;o<_cpw{bR)cg<LzMiv7+&rDO3xF(`fy&F_d0h
z?^h?WY1Og_G$x?A`XF%}`(J!mPvgG7Yx%g+0@XAQSK>qm`=GHJ?swv=ILkw9JA%o>
z_$HX1BkH&vG2(Iy+*J^3*y|=fR}pF_#+@4{HnuLGORUd8bKlJnSM!T3@nQ6RT=1w(
bLg(XQY4WKm!E&;cuEz~aEO8Z<4r~7e+Ncz=

diff --git a/package.json b/package.json
index 9f5a8b2..a49e8d3 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "blog",
-    "version": "1.3.1",
+    "version": "1.4.0",
     "description": "Florine's personal blog.",
     "author": "Florine W. Dekker",
     "browser": "dist/bundle.js",
@@ -16,7 +16,9 @@
         "deploy": "grunt deploy"
     },
     "devDependencies": {
-        "@11ty/eleventy": "^1.0.1",
+        "@11ty/eleventy": "^1.0.2",
+        "eleventy-plugin-external-links": "^1.1.2",
+        "gray-matter": "^4.0.3",
         "grunt": "^1.5.3",
         "grunt-cli": "^1.4.3",
         "grunt-contrib-clean": "^2.0.1",
@@ -24,6 +26,7 @@
         "grunt-contrib-watch": "^1.1.0",
         "grunt-exec": "^3.0.0",
         "grunt-focus": "^1.0.0",
-        "grunt-text-replace": "^0.4.0"
+        "grunt-text-replace": "^0.4.0",
+        "markdown-it": "^13.0.1"
     }
 }
diff --git a/src/main/_includes/default.njk b/src/main/_includes/default.njk
index e7a3c58..20c6044 100644
--- a/src/main/_includes/default.njk
+++ b/src/main/_includes/default.njk
@@ -16,14 +16,13 @@
 
     <title>{% if title %}{{ title }} | {% endif %}Blog | FWDekker</title>
 
-    <link rel="stylesheet" href="https://static.fwdekker.com/fonts/roboto/roboto.css" />
-    <link rel="stylesheet" href="https://static.fwdekker.com/lib/template/2.x.x/template.css" />
+    <link rel="stylesheet" href="https://static.fwdekker.com/lib/template/3.x.x/template.css?v=%%VERSION_NUMBER%%" />
     <link rel="stylesheet" href="{{ '/main.css?v=%%VERSION_NUMBER%%' | url }}" />
     <script async src="https://stats.fwdekker.com/count.js"
             data-goatcounter="https://stats.fwdekker.com/count"></script>
 </head>
 <body>
-<noscript>
+<noscript class="fwd-js-notice">
     <img src="https://stats.fwdekker.com/count?p=/blog{{ page.url }}" alt="Counting pixel" />
 
     <p>
@@ -32,16 +31,14 @@
         instructions on how to enable JavaScript in your web browser</a>.
     </p>
 </noscript>
-<main>  <!-- No need to hide if JS disabled -->
-    <div id="nav"></div>
-    <div id="contents">
-        <section class="container">
-            {{ content | safe }}
-        </section>
+<nav id="nav"></nav>
+<main class="container">  <!-- No need to hide if JS disabled -->
+    <div role="document">
+        {{ content | safe }}
     </div>
-    <div id="footer"></div>
+    <footer id="footer"></footer>
 </main>
 
-<script src="https://static.fwdekker.com/lib/template/2.x.x/template.js"></script>
+<script src="https://static.fwdekker.com/lib/template/3.x.x/template.js?v=%%VERSION_NUMBER%%"></script>
 </body>
 </html>
diff --git a/src/main/_includes/home.njk b/src/main/_includes/home.njk
index baf1058..3eb89be 100644
--- a/src/main/_includes/home.njk
+++ b/src/main/_includes/home.njk
@@ -3,15 +3,17 @@ layout: default
 ---
 
 {% for post in collections.post | reverse %}
-<div class="row">
-    <div class="column">
-        {% if post %}
-            <h2 class="inline-header"><a href="{{ post.url | url }}">{{ post.data.title }}</a></h2>
-            {% if post.data.date %}<u>{{ post.data.date | isoDate }}</u>{% endif %}
-            {% if post.data.excerpt %}
-                <p>{{ post.data.excerpt }}</p>
-            {% endif %}
-        {% endif %}
-    </div>
-</div>
+    {% if post %}
+        <article>
+            <header>
+                <hgroup>
+                    <a href="{{ post.url | url }}"><h2 class="inline-header">{{ post.data.title }}</h2></a>
+                    {% if post.data.date %}<h3><time>{{ post.data.date | isoDate }}</time></h3>{% endif %}
+                </hgroup>
+            </header>
+            <p>{% if post.data.page.excerpt %}{{ post.data.page.excerpt | toHTML | safe }}{% endif %}</p>
+
+            <p><a class="read-more" href="{{ post.url | url }}">read more &rarr;</a></p>
+        </article>
+    {% endif %}
 {% endfor %}
diff --git a/src/main/_includes/post.njk b/src/main/_includes/post.njk
index 66bb882..0168480 100644
--- a/src/main/_includes/post.njk
+++ b/src/main/_includes/post.njk
@@ -2,17 +2,19 @@
 layout: default
 ---
 
-<div class="row">
-    <div class="column">
-        <p><a href="{{ '/' | url }}">&larr; home</a></p>
-
-        <h2 class="inline-header">{{ title }}</h2>
-        {% if date %}<u>{{ date | isoDate }}</u>{% endif %}
-
-        {{ content | safe }}
-
-        <hr />
-
-        <a href="{{ '/' | url }}">&larr; home</a><br />
-    </div>
+<div class="go-home">
+    <a href="{{ '/' | url }}">&larr; home</a>
+    <hr />
 </div>
+
+<section>
+    <hgroup>
+        <h2>{{ title }}</h2>
+        {% if date %}<h3><time>{{ date | isoDate }}</time></h3>{% endif %}
+    </hgroup>
+
+    {{ content | safe }}
+</section>
+
+<hr />
+<a href="{{ '/' | url }}">&larr; home</a>
diff --git a/src/main/_posts/2017-03-01-raspi.md b/src/main/_posts/2017-03-01-raspi.md
index d8ba743..dea8884 100644
--- a/src/main/_posts/2017-03-01-raspi.md
+++ b/src/main/_posts/2017-03-01-raspi.md
@@ -4,12 +4,12 @@ tags: post
 layout: post
 date: 2017-03-01
 permalink: mount-a-raspi-with-ubuntu/
-excerpt: How to connect to your Raspberry Pi over an Ethernet cable.
 ---
 
 This post describes how to connect to your Raspberry Pi using the SSHFS (SSH File System) protocol over an Ethernet
 cable.
 This will allow you to edit files on the Raspberry Pi from a text editor in Ubuntu.
+<!-- excerpt -->
 
 All instructions are to be executed from your computer, not from your Raspi, unless noted otherwise.
 
@@ -76,7 +76,7 @@ Example output will be given directly after it in a separate code block.
 
 3. Enjoy!
 
-### Disconnecting
+### 2.1 Disconnecting
 To unmount the Raspi:
 
     $ umount /mnt/raspi
diff --git a/src/main/_posts/2021-07-18-rimworld-timelapse.md b/src/main/_posts/2021-07-18-rimworld-timelapse.md
index 5ca022d..7ff55db 100644
--- a/src/main/_posts/2021-07-18-rimworld-timelapse.md
+++ b/src/main/_posts/2021-07-18-rimworld-timelapse.md
@@ -4,22 +4,20 @@ tags: post
 layout: post
 date: 2021-07-18
 permalink: creating-a-rimworld-timelapse/
-excerpt: How to create a timelapse of your Rimworld colony using FFmpeg.
 ---
 
-You may have seen some beautiful timelapses of [&#9099;&nbsp;Rimworld](https://rimworldgame.com/) colonies, including
-[&#9099;one](https://www.reddit.com/r/RimWorld/comments/igy7am/)
-[&#9099;of](https://www.reddit.com/r/RimWorld/comments/jxoo49/)
-[&#9099;these](https://www.reddit.com/r/RimWorld/comments/ewjruc/).
-I recently did a
-[timelapse of my 20-year-old medieval colony](https://www.reddit.com/r/RimWorld/comments/omnsg1/), and want to share how
-I created the video.
+You may have seen some beautiful timelapses of [Rimworld](https://rimworldgame.com/) colonies, including
+[one](https://www.reddit.com/r/RimWorld/comments/igy7am/) [of](https://www.reddit.com/r/RimWorld/comments/jxoo49/)
+[these](https://www.reddit.com/r/RimWorld/comments/ewjruc/).
+I recently did a [timelapse of my 20-year-old medieval colony](https://www.reddit.com/r/RimWorld/comments/omnsg1/), and
+want to share how I created the video.
+<!-- excerpt -->
 
 
 ## 1 Creating screenshots
 This is the easy part.
-Just install the [&#9099;&nbsp;Progress Renderer](https://steamcommunity.com/sharedfiles/filedetails/?id=2010777010) mod
-in Rimworld and play your game.
+Just install the [Progress Renderer](https://steamcommunity.com/sharedfiles/filedetails/?id=2010777010) mod in Rimworld
+and play your game.
 By default, a screenshot will be taken every day at 08:00.
 I recommend going to the settings and disabling _designations_, _thing icons_, _game conditions_, and _weather_ in the
 settings.
@@ -31,26 +29,24 @@ the changes in your colony!
 
 ## 2 Combining screenshots
 After you've played the game for a while and had the screenshots created for you, you can combine them into a video.
-I used [&#9099;&nbsp;FFmpeg](https://ffmpeg.org/) for this, which is a
-[&#9099;&nbsp;well-known](https://en.wikipedia.org/wiki/FFmpeg) command-line tool for processing video and audio.
+I used [FFmpeg](https://ffmpeg.org/) for this, which is a [well-known](https://en.wikipedia.org/wiki/FFmpeg)
+command-line tool for processing video and audio.
 It's an extremely powerful tool if you know how to use it, but it's certainly more difficult than other, visual tools.
 I think it's a much better alternative than importing all your screenshots into Adobe Premiere though, primarily because
 FFmpeg is made to do one thing, and it does it well.
-I've seen some people who wrote that they used
-[&#9099;&nbsp;RimworldRender](https://github.com/Epicguru/RimworldRender).
+I've seen some people who wrote that they used [RimworldRender](https://github.com/Epicguru/RimworldRender).
 I don't have any experience with RimworldRender, but I suppose the advantage of FFmpeg is that you can easily combine it
 in a whole pipeline of tools and libraries to add music, scaling, zooming, panning, and much more.
 
 ### 2.1 Installing FFmpeg
 * **Windows:**
-  You can download
-  [&#9099;&nbsp;FFmpeg for Windows from gyan.dev](https://www.gyan.dev/ffmpeg/builds/ffmpeg-git-full.7z),
-  or you can check the [&#9099;&nbsp;FFmpeg download page](https://ffmpeg.org/download.html) for more download options.
+  You can download [FFmpeg for Windows from gyan.dev](https://www.gyan.dev/ffmpeg/builds/ffmpeg-git-full.7z), or you can
+  check the [FFmpeg download page](https://ffmpeg.org/download.html) for more download options.
   Simply extract the downloaded archive anywhere you want;
   let's say you extracted it to `C:\Users\FWDekker\Downloads\ffmpeg\` so you have the executable
   `C:\Users\FWDekker\Downloads\ffmpeg\ffmpeg.exe`.
 * **Linux/macOS:**
-  Follow the download instructions on the [&#9099;&nbsp;FFmpeg download page](https://ffmpeg.org/download.html).
+  Follow the download instructions on the [FFmpeg download page](https://ffmpeg.org/download.html).
   If you're running a Debian-based distro (including Ubuntu) you can just run `sudo apt install ffmpeg`.
   In the instruction below you should replace `C:\Users\FWDekker\Downloads\ffmpeg\ffmpeg.exe` with a simple `ffmpeg`.
 
@@ -60,9 +56,9 @@ FFmpeg expects the images to have names like `1.png`, `2.png`, etc.
 The best way to rename your files depends on your operating system.
 
 #### 2.2.1 Windows
-The easiest option on Windows is probably to use [&#9099;&nbsp;Ant Renamer](http://www.antp.be/software/renamer).
+The easiest option on Windows is probably to use [Ant Renamer](http://www.antp.be/software/renamer).
 Let's say that your screenshots from Progress Renderer are stored in `C:\Users\FWDekker\Rimworld\`.
-1. [&#9099;&nbsp;Download](http://www.antp.be/software/renamer/download) and run Ant Renamer.
+1. [Download](http://www.antp.be/software/renamer/download) and run Ant Renamer.
 2. Click the `Add folders...` button, and select the screenshot folder.
 3. Press `Actions` in the top left.
 4. Go to `Enumeration`.
diff --git a/src/main/_posts/2022-04-17-remember-us-state-abbreviations.md b/src/main/_posts/2022-04-17-remember-us-state-abbreviations.md
index ee7e24d..8203041 100644
--- a/src/main/_posts/2022-04-17-remember-us-state-abbreviations.md
+++ b/src/main/_posts/2022-04-17-remember-us-state-abbreviations.md
@@ -4,7 +4,6 @@ tags: post
 layout: post
 date: 2022-04-17
 permalink: remember-us-state-abbreviations/
-excerpt: A set of consistent rules to follow for determining the U.S. postal code abbreviation for any state.
 ---
 
 I like maps and recently learnt the U.S. state abbreviations by heart for no particular reason.
@@ -12,6 +11,7 @@ The abbreviations are highly irregular, both for logical reasons and historical
 hard to learn.
 I created a set of rules that may help you remember the abbreviations more easily.
 The rules are very straightforward, as my goal was to avoid creating rules that have multiple levels of exceptions.
+<!-- excerpt -->
 
 There are eight rules divided into three categories.
 Firstly, states that consist of two words have one very simple rule.
diff --git a/src/main/css/main.css b/src/main/css/main.css
index 1a1c7bf..5406d3d 100644
--- a/src/main/css/main.css
+++ b/src/main/css/main.css
@@ -1,19 +1,6 @@
-#contents .container {
-    max-width: 80rem;
-}
+.go-home {
+    position: sticky;
+    top: 0;
 
-p {
-    text-align: justify !important;
-    text-justify: inter-word !important;
-}
-
-ol {
-    list-style: decimal outside !important;
-}
-
-.inline-header {
-    display: inline-block;
-
-    margin-bottom: 0;
-    padding-right: 19px;
+    background-color: white;
 }