fwdekker.com
/
blog
1
0
Fork 0
Code Issues Pull Requests Releases Activity

Upgrade to template v3

This commit is contained in:
Florine W. Dekker 2022-11-20 23:13:24 +01:00
parent d5bf6b0752
commit 7242b2e55d
Signed by: FWDekker
GPG Key ID: D3DCFAA8A4560BE0
10 changed files with 86 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
.eleventy.js
View File

@ -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: {

BIN
package-lock.json generated
View File

Binary file not shown.

9
package.json
View File

@ -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"
}
}

19
src/main/_includes/default.njk
View File

@ -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>

24
src/main/_includes/home.njk
View File

@ -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 %}

28
src/main/_includes/post.njk
View File

@ -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>

4
src/main/_posts/2017-03-01-raspi.md
View File

@ -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

36
src/main/_posts/2021-07-18-rimworld-timelapse.md
View File

@ -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`.

2
src/main/_posts/2022-04-17-remember-us-state-abbreviations.md
View File

@ -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.

21
src/main/css/main.css
View File

@ -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;
}