Add admonitions

content/posts/adding-time-to-my-blogs-statistics/index.md

@@ -8,8 +8,9 @@ aliases: ["/adding-time-to-my-blogs-statistics"]
 
 Recently I added some statistics to my blog. I wanted to do that with minimum effort and without serving any crappy proprietary JavaScript to my users.
 
-!!! info "Update 2020-01-03"
+{{< note class="info" title="Update 2020-01-03" >}}
 I now use [my own blog platform]({{< ref "blog-platform-update-quick-note/" >}}) with [Plausible Analytics]({{< ref "about-me/#analytics" >}}).
+{{< /note >}}
 
 #100DaysToOffload No. 11
 <!--more-->

content/posts/automate-bug-findings-with-git/index.md

@@ -26,7 +26,7 @@ It takes a command that should exit with 0 if the commit is good and anything el
 
 Git will then do all the heavy lifting for you, running your test script after each checkout and swiftly find the culprit.
 
-!!! Info "☝️ Pro tip"
+{{< note class="info" title="☝️ Pro tip" >}}
 If the script you want to run is versioned, then when git checks out previous commits your test script might change.  
-
-    In order to avoid that, a possible workaround is to run a non-versioned copy of the script so it's not changed when git switches to an earlier version of your repository.
+In order to avoid that, a possible workaround is to run a non-versioned copy of the script, so it's not changed when git switches to an earlier version of your repository.
+{{< /note >}}

content/posts/blog-statistics-part-2/index.md

@@ -8,8 +8,9 @@ In a [recent post]({{< ref "adding-time-to-my-blogs-statistics" >}}), I talked a
 
 Today, I went another way and configured [GoAccess](http://goaccess.io/) to provide me with an HTML report with data extracted from my webserver's logs.
 
-!!! info "Update 2020-01-03"
+{{< note class="info" title="Update 2020-01-03" >}}
 I now use [my own blog platform]({{< ref "blog-platform-update-quick-note/" >}}) with [Goatcounter]({{< ref "about-me/#analytics" >}}).
+{{< /note >}}
 
 ![GoAccess Screenshot](8.png)
 

content/posts/chowning-files-dockerfile-can-take-lot-space/index.md

@@ -66,8 +66,9 @@ There you go! By being smart about when to run the permission changes, we just s
 
 In the specific case I was investigating at [ITSF](https://itsf.io), the image went from ~1.6GB to ~0.95GB just from this `chown` trick. We were copying a bunch of files in a directory and at the end we chowned the whole directory recursively. That directory weighed about 650MB, which counted twice in the final image size.
 
-!!! info "Info"
+{{< note class="info" title="Info" >}}
 Of course this also works with "simple" `COPY` and `ADD` instructions. It's not reserved to copying files from other stages.
+{{< /note >}}
 
 ## 📓 Don't forget history!
 I discovered that the `chown` was taking that much space using the underrated `docker history` command. I already briefly [introduced]({{< ref "docker-images-layers-and-cache/#cache-invalidation" >}}) it previously but now felt like a good time to remind you of its existence 🙂

content/posts/example-should-never-be-published/index.md

@@ -32,17 +32,21 @@ Here's a button
 *  <code>Inline code</code>
 *  <kbd>Alt</kbd> + <kbd>F4</kbd>
 
-!!! info "Info"
+{{< note class="info" title="Info" >}}
 This is an info admonition.
+{{< /note >}}
 
-!!! success "Success"
+{{< note class="success" title="Success" >}}
 This is a success admonition.
+{{< /note >}}
 
-!!! warning "Warning"
+{{< note class="warning" title="Warning" >}}
 This is a warning admonition.
+{{< /note >}}
 
-!!! danger "Danger"
+{{< note class="danger" title="Danger" >}}
 This is a danger admonition.
+{{< /note >}}
 
 ```python hl_lines="1 3"
 # main.py

content/posts/how-use-pipx-pyenv/index.md

@@ -34,5 +34,6 @@ Thankfully, as [documented](https://pipxproject.github.io/pipx/docs/)[^1], `pipx
 
 [^1]: Also available when running `pipx --help`
 
-!!! info "Update"
+{{< note class="info" title="Update" >}}
 I've now [switched]({{< ref "setup-rtx-with-direnv-for-python/" >}}) from `pyenv` to `rtx` but the concept remains the same: install python with `rtx`, then set `PIPX_DEFAULT_PYTHON`.
+{{< /note >}}

content/posts/i-needed-a-budget-with-four-rules/index.md

@@ -14,8 +14,9 @@ At first, I didn't think I needed a budget. After all, I didn't have any "money
 
 YNAB's four rules (that you can apply without using the software at all) brought more visibility and more clarity over what my money could do for me. They have a really nice page on their website that explains everything in detail, you can check it out [here](https://www.youneedabudget.com/the-four-rules/). Here's a quick summary of what these rules mean to me.
 
-!!! info "Edit 2021-01-02"
+{{< note class="info" title="Edit 2021-01-02" >}}
 I recently discovered a free software and open source alternative: [Firefly III](https://www.firefly-iii.org/). I haven't tried it though.
+{{< /note >}}
 
 ## YNAB's four rules
 ### Rule 1: Give Every Dollar a Job.

content/posts/lighten-your-python-image-docker-multi-stage-builds/index.md

@@ -6,8 +6,9 @@ aliases: ["/lighten-your-python-image-docker-multi-stage-builds"]
 ---
 In previous posts we talked about [poetry]({{< ref "poetry-python-dependencies-management" >}}) and [Docker images layers]({{< ref "docker-images-layers-and-cache" >}}) and I promised I would write about Docker multi-stage builds, so here we go!
 
-!!! info "Note"
-    I will explain the basics of Docker multi-stage builds required to understand the post but I won't repeat the documentation (see [further reading](#-further-reading)).
+{{< note >}}
+I will explain the basics of Docker multi-stage builds required to understand the post, but I won't repeat the documentation (see [further reading](#-further-reading)).
+{{< /note >}}
 
 ## ⚙️ Multi-stage builds
 

content/posts/pi-hole/index.md

@@ -4,8 +4,9 @@ tags: ['DNS', 'Raspberry Pi', 'self-hosting']
 date: 2020-05-28T15:54:13+00:00
 aliases: ["/pi-hole"]
 ---
-!!! info "👴 Old post"
+{{< note class="info" title="👴 Old post" >}}
 I don't use Pi Hole anymore but this post should still be relevant. I've switched to [AdGuard](https://adguard.com/en/welcome.html). There is an easy to install Home Assistant addon available and it allows me to easily configure local-only DNS entries.
+{{< /note >}}
 
 
 ![Pi Hole logo](11.svg)

content/posts/raspberry-pi/index.md

@@ -4,8 +4,9 @@ tags: ['Raspberry Pi', 'backup', 'monitoring', 'self-hosting']
 date: 2020-05-16T14:43:38+00:00
 aliases: ["/raspberry-pi"]
 ---
-!!! info "👴 Old post"
+{{< note class="info" title="👴 Old post" >}}
 This post has grown old and I now don't use my Raspberry Pi like this anymore.
+{{< /note >}}
 
 I bought a Raspberry Pi 3 model B+ about a year ago. I had to check the order date because I was pretty sure I had it for longer but I only got it at the end of March 2019.
 

content/posts/reduce-your-page-load-time-with-htmx-in-less-than-an-hour/index.md

@@ -113,8 +113,9 @@ Here's how the template looks like with htmx. I've removed the non-relevant part
 </div>
 ```
 
-!!! info "django-htmx"
+{{< note class="info" title="django-htmx" >}}
 The Django htmx part is not mandatory. It's from [django-htmx](https://django-htmx.readthedocs.io/en/latest/index.html), by [Adam Johnson](https://adamj.eu/). It provides a nicer integration between Django and htmx. I encourage you to check out Adam's works, you'll most likely learn a thing or two.
+{{< /note >}}
 
 I moved the graph generation part from my main view to two separate views which are called after the DOM is loaded. I didn't have to do much: since I was already rendering everything server-side I only had to render a partial template instead of a complete page.
 

content/posts/replacing-my-synology-nas-with-a-self-built-server/index.md

@@ -4,8 +4,9 @@ tags: ['FreeBSD', 'FreeNAS', 'NAS', 'TrueNAS', 'self-hosting', 'server']
 date: 2020-11-11T12:31:38.826817+00:00
 aliases: ["/replacing-my-synology-nas-with-a-self-built-server"]
 ---
-!!! info "👴 Old post"
+{{< note class="info" title="👴 Old post" >}}
 I don't use TrueNAS anymore but I still have this machine and I even upgraded the RAM to a more comfortable 56GB.
+{{< /note >}}
 
 A few weeks ago, I replaced my trusty [Synology DS216play]({{< ref "synology-nas-stream-and-backup/" >}}) with a more powerful station that I built myself. I hadn't built a computer in a long time and it was a lot of fun!
 

content/posts/sourcehut/index.md

@@ -4,8 +4,9 @@ tags: ['GitHub alternative', 'git', 'software forge']
 date: 2020-07-01T20:26:41+00:00
 aliases: ["/sourcehut"]
 ---
-!!! Info "🧓🏻 Old post"
+{{< note class="info" title="🧓🏻 Old post" >}}
 This post is quite old now. Since then, I've moved my git repositories to a self-hosted [gitea](https://gitea.io/) instance and I cancelled my subscription. I still stand behind this post though. Sourcehut is a solid git forge and keeps improving.
+{{< /note >}}
 
 For a few weeks now I've been hosting my new projects at [sourcehut](https://sr.ht/~crocmagnon) instead of my usual GitHub account. So far, the experience has been very pleasant but it also has some drawbacks. Let's talk about it!
 

layouts/partials/extend_head.html

@@ -0,0 +1 @@
+<link rel="stylesheet" href="/admonitions.css">

layouts/shortcodes/note.html

@@ -0,0 +1,4 @@
+<div class='admonition {{ .Get "class" | default "info" }}'>
+    <div class="title">{{ .Get "title" | default "Note" }}</div>
+    <div class="content">{{ printf "%s" .Inner | markdownify }}</div>
+</div>

static/admonitions.css

@@ -0,0 +1,65 @@
+:root {
+    --info-background: #d1ecf1;
+    --info-text: #0c5460;
+    --success-background: #d4edda;
+    --success-text: #155724;
+    --danger-background: #f8d7da;
+    --danger-text: #721c24;
+    --warning-background: #fff3cd;
+    --warning-text: #856404;
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --info-background: #0c5460;
+        --info-text: #d1ecf1;
+        --success-background: #155724;
+        --success-text: #d4edda;
+        --danger-background: #721c24;
+        --danger-text: #f8d7da;
+        --warning-background: #856404;
+        --warning-text: #fff3cd;
+    }
+}
+
+.admonition .title {
+    font-weight: bold;
+    margin-bottom: 0;
+}
+
+.admonition {
+    background-color: var(--nc-bg-2);
+    box-shadow: 0 0 8px -1px var(--nc-bg-3);
+    border: 1px solid var(--nc-bg-3);
+    padding: 1ex;
+    border-radius: 5px;
+    margin-bottom: 1rem;
+}
+
+.admonition > :last-child {
+    margin-bottom: 0;
+}
+
+.admonition.info {
+    --nc-bg-2: var(--info-background);
+    --nc-bg-3: var(--info-text);
+    color: var(--info-text);
+}
+
+.admonition.success {
+    --nc-bg-2: var(--success-background);
+    --nc-bg-3: var(--success-text);
+    color: var(--success-text);
+}
+
+.admonition.warning {
+    --nc-bg-2: var(--warning-background);
+    --nc-bg-3: var(--warning-text);
+    color: var(--warning-text);
+}
+
+.admonition.danger {
+    --nc-bg-2: var(--danger-background);
+    --nc-bg-3: var(--danger-text);
+    color: var(--danger-text);
+}