From 598e7abdfbde7facc65e5a812144d9111964fdc7 Mon Sep 17 00:00:00 2001 From: Gabriel Augendre Date: Sun, 21 May 2023 09:52:29 +0200 Subject: [PATCH] Add admonitions --- .../index.md | 5 +- .../automate-bug-findings-with-git/index.md | 8 +-- content/posts/blog-statistics-part-2/index.md | 5 +- .../index.md | 5 +- .../index.md | 20 +++--- content/posts/how-use-pipx-pyenv/index.md | 5 +- .../index.md | 5 +- .../index.md | 5 +- content/posts/pi-hole/index.md | 5 +- content/posts/raspberry-pi/index.md | 5 +- .../index.md | 5 +- .../index.md | 5 +- content/posts/sourcehut/index.md | 5 +- layouts/partials/extend_head.html | 1 + layouts/shortcodes/note.html | 4 ++ static/admonitions.css | 65 +++++++++++++++++++ 16 files changed, 119 insertions(+), 34 deletions(-) create mode 100644 layouts/partials/extend_head.html create mode 100644 layouts/shortcodes/note.html create mode 100644 static/admonitions.css diff --git a/content/posts/adding-time-to-my-blogs-statistics/index.md b/content/posts/adding-time-to-my-blogs-statistics/index.md index e0ac484..46f4c1d 100644 --- a/content/posts/adding-time-to-my-blogs-statistics/index.md +++ b/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" - I now use [my own blog platform]({{< ref "blog-platform-update-quick-note/" >}}) with [Plausible Analytics]({{< ref "about-me/#analytics" >}}). +{{< 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 diff --git a/content/posts/automate-bug-findings-with-git/index.md b/content/posts/automate-bug-findings-with-git/index.md index 0bf31c6..3c145ac 100644 --- a/content/posts/automate-bug-findings-with-git/index.md +++ b/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" - 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. +{{< 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. +{{< /note >}} diff --git a/content/posts/blog-statistics-part-2/index.md b/content/posts/blog-statistics-part-2/index.md index be3c8a9..5117620 100644 --- a/content/posts/blog-statistics-part-2/index.md +++ b/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" - I now use [my own blog platform]({{< ref "blog-platform-update-quick-note/" >}}) with [Goatcounter]({{< ref "about-me/#analytics" >}}). +{{< 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) diff --git a/content/posts/chowning-files-dockerfile-can-take-lot-space/index.md b/content/posts/chowning-files-dockerfile-can-take-lot-space/index.md index 3c11995..f171741 100644 --- a/content/posts/chowning-files-dockerfile-can-take-lot-space/index.md +++ b/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" - Of course this also works with "simple" `COPY` and `ADD` instructions. It's not reserved to copying files from other stages. +{{< 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 🙂 diff --git a/content/posts/example-should-never-be-published/index.md b/content/posts/example-should-never-be-published/index.md index d068fb1..70c8b46 100644 --- a/content/posts/example-should-never-be-published/index.md +++ b/content/posts/example-should-never-be-published/index.md @@ -32,17 +32,21 @@ Here's a button * Inline code * Alt + F4 -!!! info "Info" - This is an info admonition. +{{< note class="info" title="Info" >}} +This is an info admonition. +{{< /note >}} -!!! success "Success" - This is a success admonition. +{{< note class="success" title="Success" >}} +This is a success admonition. +{{< /note >}} -!!! warning "Warning" - This is a warning admonition. +{{< note class="warning" title="Warning" >}} +This is a warning admonition. +{{< /note >}} -!!! danger "Danger" - This is a danger admonition. +{{< note class="danger" title="Danger" >}} +This is a danger admonition. +{{< /note >}} ```python hl_lines="1 3" # main.py diff --git a/content/posts/how-use-pipx-pyenv/index.md b/content/posts/how-use-pipx-pyenv/index.md index fd2ccbe..c97674f 100644 --- a/content/posts/how-use-pipx-pyenv/index.md +++ b/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" - 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 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 >}} diff --git a/content/posts/i-needed-a-budget-with-four-rules/index.md b/content/posts/i-needed-a-budget-with-four-rules/index.md index a67944b..7907d88 100644 --- a/content/posts/i-needed-a-budget-with-four-rules/index.md +++ b/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" - I recently discovered a free software and open source alternative: [Firefly III](https://www.firefly-iii.org/). I haven't tried it though. +{{< 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. diff --git a/content/posts/lighten-your-python-image-docker-multi-stage-builds/index.md b/content/posts/lighten-your-python-image-docker-multi-stage-builds/index.md index fedfdec..e651ecb 100644 --- a/content/posts/lighten-your-python-image-docker-multi-stage-builds/index.md +++ b/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 diff --git a/content/posts/pi-hole/index.md b/content/posts/pi-hole/index.md index 67f2141..0a617dc 100644 --- a/content/posts/pi-hole/index.md +++ b/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" - 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 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) diff --git a/content/posts/raspberry-pi/index.md b/content/posts/raspberry-pi/index.md index e2dcb81..1c9b54c 100644 --- a/content/posts/raspberry-pi/index.md +++ b/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" - This post has grown old and I now don't use my Raspberry Pi like this anymore. +{{< 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. diff --git a/content/posts/reduce-your-page-load-time-with-htmx-in-less-than-an-hour/index.md b/content/posts/reduce-your-page-load-time-with-htmx-in-less-than-an-hour/index.md index 1d77438..8781776 100644 --- a/content/posts/reduce-your-page-load-time-with-htmx-in-less-than-an-hour/index.md +++ b/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 ``` -!!! info "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 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. diff --git a/content/posts/replacing-my-synology-nas-with-a-self-built-server/index.md b/content/posts/replacing-my-synology-nas-with-a-self-built-server/index.md index a3735d3..a425211 100644 --- a/content/posts/replacing-my-synology-nas-with-a-self-built-server/index.md +++ b/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" - I don't use TrueNAS anymore but I still have this machine and I even upgraded the RAM to a more comfortable 56GB. +{{< 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! diff --git a/content/posts/sourcehut/index.md b/content/posts/sourcehut/index.md index 913620b..bfeb8dc 100644 --- a/content/posts/sourcehut/index.md +++ b/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" - 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 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! diff --git a/layouts/partials/extend_head.html b/layouts/partials/extend_head.html new file mode 100644 index 0000000..81f255b --- /dev/null +++ b/layouts/partials/extend_head.html @@ -0,0 +1 @@ + diff --git a/layouts/shortcodes/note.html b/layouts/shortcodes/note.html new file mode 100644 index 0000000..35383cf --- /dev/null +++ b/layouts/shortcodes/note.html @@ -0,0 +1,4 @@ +
+
{{ .Get "title" | default "Note" }}
+
{{ printf "%s" .Inner | markdownify }}
+
diff --git a/static/admonitions.css b/static/admonitions.css new file mode 100644 index 0000000..e1a90dd --- /dev/null +++ b/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); +}