22.2

[til]
- new entry: certs-renewal
- correctly sort entries and tags
- better content styling
- new shortcode for the addition of formatted images

[treemap]
- fix duplicated nodes

[general]
- other minor changes and fixes

Author: miermontoto

.eleventy.js

@@ -1,4 +1,3 @@
-
 const { EleventyRenderPlugin } = require("@11ty/eleventy");
 const eleventyNavigationPlugin = require("@11ty/eleventy-navigation");
 const Nunjucks = require("nunjucks");
@@ -12,47 +11,52 @@ const { qka, quizButtons, quizQuestions } = require('./src/static/js/building/qu
 const { buildVersionTag, buildKeywords } = require("./src/static/js/building/package.js");
 
 module.exports = function (eleventyConfig) {
-    eleventyConfig.addPlugin(EleventyRenderPlugin);
-    eleventyConfig.addPlugin(eleventyNavigationPlugin);
-
-    eleventyConfig.addPassthroughCopy("./src/static/js");
-    eleventyConfig.addPassthroughCopy("./assets");
-    eleventyConfig.addPassthroughCopy("**.json");
-    eleventyConfig.setDataFileSuffixes([".data", ""]);
-    eleventyConfig.setQuietMode(true);
-    eleventyConfig.setServerOptions({ watch: ["src/static/css/**"], port: 8088 });
-
-    eleventyConfig.addShortcode("breadcrumbs", function (navPages) { return buildBreadcrumbs(navPages, this.page) });
-    eleventyConfig.addShortcode("treemap", function (navPages) { return buildTreemap(navPages) });
-    eleventyConfig.addShortcode("changelog", (data, pkg) => buildChangelog(data, pkg));
-
-    eleventyConfig.addShortcode("tilTags", (data) => buildTagWall(data));
-    eleventyConfig.addShortcode("tilRecents", (data) => getRecents(data));
-    eleventyConfig.addShortcode("tilRelated", (data, current) => getRelated(data, current));
-    eleventyConfig.addShortcode("tilTimestamps", buildTimestamps);
-
-    eleventyConfig.addShortcode("qka", (data) => qka(data));
-    eleventyConfig.addShortcode("quizButtons", (json) => quizButtons(json));
-    eleventyConfig.addShortcode("quizQuestions", (json) => quizQuestions(json));
-
-    eleventyConfig.addShortcode("addScript", (filename) => addAsset("script", filename));
-    eleventyConfig.addShortcode("addStyle", (filename) => addAsset("style", filename));
-
-    eleventyConfig.addShortcode("keywords", (pkg) => buildKeywords(pkg));
-    eleventyConfig.addShortcode("version", (pkg) => buildVersionTag(pkg));
-
-    eleventyConfig.addShortcode("reference", (url, num) => `<a href="${url}" class="reference" target="_blank" rel="noopener noreferrer">[${num}]</a>`);
-
-    eleventyConfig.setLibrary("njk", new Nunjucks.Environment(
-        new Nunjucks.FileSystemLoader("./"),
-        { lstripBlocks: true, trimBlocks: true }
-    ));
-
-    return {
-        dir: {
-            input: "src",
-            includes: "templates",
-            data: "content/data"
-        }
-    };
+  eleventyConfig.addPlugin(EleventyRenderPlugin);
+  eleventyConfig.addPlugin(eleventyNavigationPlugin);
+
+  eleventyConfig.addPassthroughCopy("./src/static/js");
+  eleventyConfig.addPassthroughCopy("./assets");
+  eleventyConfig.addPassthroughCopy("**.json");
+
+  eleventyConfig.setDataFileSuffixes([".data", ""]);
+  eleventyConfig.setQuietMode(true);
+  eleventyConfig.setServerOptions({ watch: ["src/static/css/**"], port: 8088 });
+
+  eleventyConfig.addShortcode("breadcrumbs", buildBreadcrumbs);
+  eleventyConfig.addShortcode("treemap", buildTreemap);
+  eleventyConfig.addShortcode("changelog", buildChangelog);
+
+  eleventyConfig.addShortcode("tilTags", buildTagWall);
+  eleventyConfig.addShortcode("tilRecents", getRecents);
+  eleventyConfig.addShortcode("tilRelated", getRelated);
+  eleventyConfig.addShortcode("tilTimestamps", buildTimestamps);
+
+  eleventyConfig.addShortcode("qka", qka);
+  eleventyConfig.addShortcode("quizButtons", quizButtons);
+  eleventyConfig.addShortcode("quizQuestions", quizQuestions);
+
+  eleventyConfig.addShortcode("addScript", (filename) => addAsset("script", filename));
+  eleventyConfig.addShortcode("addStyle", (filename) => addAsset("style", filename));
+
+  eleventyConfig.addShortcode("keywords", buildKeywords);
+  eleventyConfig.addShortcode("version", buildVersionTag);
+
+  eleventyConfig.addShortcode("ref", (url, num) => `<a href="${url}" class="ref" target="_blank" rel="noopener noreferrer">[${num}]</a>`);
+  eleventyConfig.addShortcode("tilImg", (file, alt) => `<figure class="til-img">
+    <img src="/assets/media/projects/til/${file}" alt="${alt}" />
+    <figcaption class="til-img-alt">${alt}</figcaption>
+  </figure>`);
+
+  eleventyConfig.setLibrary("njk", new Nunjucks.Environment(
+    new Nunjucks.FileSystemLoader("./"),
+    { lstripBlocks: true, trimBlocks: true }
+  ));
+
+  return {
+    dir: {
+      input: "src",
+      includes: "templates",
+      data: "content/data"
+    }
+  };
 };

assets/media/projects/til/email.png

@@ -42,6 +42,11 @@ the github repo is connected to firebase hosting through CI/CD using github acti
 - the [**treemap**](/treemap/) is generated in a similar way to the breadcrumbs,
   using the eleventy collections and processed with javascript to generate the
   html treemap.
+- the [**quizzes**](/quizzes/) are generated using a json file and processed
+  with javascript to generate the html quiz, including listeners and animations.
+- the [**til**](/til/) (today i learned) posts are handled using markdown files
+  and processed with custom javascript. the tagging system, related posts and
+  timedates need this processing to be displayed correctly.
 
 <br>
 
@@ -58,7 +63,6 @@ from December 1st to January 7th every year, there is snow falling
 several other inspirations:
 - [mschf](https://mschf.com/)
 - [crlf.link](https://crlf.link/)
-- [stacksorted](https://stacksorted.com/)
 - [dmaorg / clancy's blog](http://dmaorg.info/)
 - [ramsus' portfolio](https://rsms.me/)
 - [eduardorl's portfolio](https://eduardorl.vercel.app/)

assets/media/projects/til/fixed.png

@@ -0,0 +1,48 @@
+---
+title: "wait, how did I use to manage certs for this service?"
+tags: ["docker", "certs", "services", "nginx"]
+eleventyNavigation:
+  key: "certs-renewal"
+keywords: ["certificates", "certbot", "sonarqube", "services", "docker", "nginx"]
+created: 2024-08-25
+---
+
+oops, the certificates for this service are about to expire.
+
+{% tilImg 'kuma.png', 'dashboard showing the expiration date of the certificates' %}
+<br>
+{% tilImg 'email.png', 'Let\'s Encrypt certification expiration notice' %}
+
+yeah, I probably should set up alerts for that, but I'll do that later.
+for now, let's just fix this quickly.
+if I remember correctly, I used `certbot` to manage the certs, so it should be
+a couple of commands
+{% ref 'https://stackoverflow.com/questions/42591165/how-to-renew-only-one-domain-with-certbot', '1' %}
+and we're done.
+
+```sh
+sudo su
+certbot renew
+```
+
+{% tilImg 'success.png', 'success message from certbot' %}
+
+alright, that was easy. now I just need to restart the nginx container and
+we're good to go.
+
+{% tilImg 'invalid.png', 'firefox warning for invalid certificates' %}
+
+wait, the certs aren't updated yet... oh, right, I need to copy the certs to the
+path mounted by the container so that it has the proper certs.
+
+```sh
+sudo su
+cd /etc/letsencrypt/live/<domain>/
+cp *.pem <container-certs-dir>/ # do not use mv
+chown 1000:1000 <container-certs-dir>/*.pem
+docker restart <container-name>
+```
+
+and that's it. the service should be up and running with the new certificates :D
+
+{% tilImg 'fixed.png', 'certs are now fixed and the downtime is over!' %}

assets/media/projects/til/invalid.png

@@ -31,8 +31,8 @@ sections.forEach(({ button, section }) => {
 ```
 
 after some investigation
-{% reference 'https://www.quirksmode.org/blog/archives/2010/09/click_event_delegation.html', '1' %}
-{% reference 'https://www.sitepoint.com/community/t/handling-click-in-the-safari-browser/417837', '2' %}
+{% ref 'https://www.quirksmode.org/blog/archives/2010/09/click_event_delegation.html', '1' %}
+{% ref 'https://www.sitepoint.com/community/t/handling-click-in-the-safari-browser/417837', '2' %}
 (and Claude's help), I found out that the issue was related to
 [*event bubbling*](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#event_bubbling_and_capture).
 By simply moving the event listener from the `window` object to the `document`