From 2af6d7e5725d03fcc76cf09387737e823a7fa201 Mon Sep 17 00:00:00 2001 From: SEKUN Date: Sat, 19 Oct 2024 22:32:03 +0800 Subject: [PATCH] refactor: Use WC --- assets/css/style.css | 87 ++++++++++--------- ...ust-binaries-and-docker-images-with-nix.md | 29 +++++-- ...o.md => deploying-nix-builds-on-fly-io.md} | 44 +++++++--- blog/posts/manage-secrets-in-nixos.md | 20 +++-- .../packaging-prebuilt-binaries-with-nix.md | 8 +- ...rom-building-a-rust-emoji-url-shortener.md | 12 ++- templates/component/figure.html | 36 ++++++++ templates/component/img.html | 26 ++++++ templates/layout/home.html | 8 +- 9 files changed, 196 insertions(+), 74 deletions(-) rename blog/posts/{deploying-nix-builds-to-fly-io.md => deploying-nix-builds-on-fly-io.md} (90%) create mode 100644 templates/component/figure.html create mode 100644 templates/component/img.html diff --git a/assets/css/style.css b/assets/css/style.css index 02abef2..9ab1b9b 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -5,7 +5,6 @@ body { background-color: #1a1919; color: #fbf1c7; - font-size: 1.25rem; font-size-adjust: 0.45; margin: 0 auto; font-family: Atkinson Hyperlegible Regular, ui-sans-serif, system-ui, sans-serif, @@ -13,60 +12,82 @@ body { font-weight: regular; } -@media (max-width: 768px) { +@media (width <= 768px) { body { width: 85%; + font-size: 1.15rem; + } + + pre { + & > code { + font-size: 1.15rem; + } + } + + .nav { + ul { + li { + font-size: 1.15rem; + } + } + } + + h1, h2, h3, h4, h5, h6 { + font-size: 1.25rem; } } -@media(min-width: 769px) and (max-width: 1023px) { +@media (769px <= width <= 1024px) { body { width: 60%; + font-size: 1.15rem; + } + + pre { + & > code { + font-size: 1.15rem; + } } } -@media(min-width: 1024px) and (max-width: 1215px) { +@media (1024px <= width <= 1215px) { body { width: 65%; + font-size: 1.25rem; + } + + pre { + & > code { + font-size: 1.15rem; + } } } -@media(min-width: 1216px) and (max-width: 1407px) { +@media(1216px <= width <= 1407px) { body { width: 60%; } } -@media(min-width: 1408px) and (max-width: 1919px) { +@media(1408px <= width <= 1919px) { body { width: 50%; } } -@media(min-width: 1920px) { +@media(1920px <= width) { body { - width: 40%; + width: 50%; font-size-adjust: 0.45; + font-size: 1.25rem; margin: 0.5rem auto; } - select { - font-size: 1rem; - } - - section { - &:not(:last-child) { - margin-bottom: 2rem; + pre { + & > code { + font-size: 1.25rem; } } -} - -@media(min-width: 1920px) { - body { - width: 40%; - font-size-adjust: 0.45; - margin: 0.5rem auto; - } select { font-size: 1rem; @@ -114,7 +135,6 @@ pre { & > code { &:before, &:after { content: ""; } font-family: "JetBrains Mono Regular", monospace; - font-size: 1.15rem; font-weight: normal; } @@ -147,7 +167,7 @@ p { .nav { border-bottom: 1.5px dashed #928374; padding-top: 1rem; - padding-bottom: 1.5rem; + padding-bottom: 1rem; & > ul { display: flex; @@ -161,27 +181,12 @@ p { } li > a, li > span { + font-size: 1.15rem; color: #fbf1c7; } } } -img { - max-width: 80%; - display: block; - margin: 1rem auto; -} - -figure { - max-width: 100%; - - figcaption { - color: #a89984; - font-size: 1rem; - text-align: center; - } -} - .post-metadata { color: #bdae93; } diff --git a/blog/posts/create-rust-binaries-and-docker-images-with-nix.md b/blog/posts/create-rust-binaries-and-docker-images-with-nix.md index bbba091..9d0dce4 100644 --- a/blog/posts/create-rust-binaries-and-docker-images-with-nix.md +++ b/blog/posts/create-rust-binaries-and-docker-images-with-nix.md @@ -1,12 +1,11 @@ --- title: "Create Rust binaries, and Docker images with Nix" -created_at: 2022-04-11T06:20:00+00:00 -updated_at: +created_at: 2022-04-11T06:20:00Z +updated_at: 2024-10-19T14:21:52Z tags: ["nix", "emojied", "docker", "rust", "github actions"] cover: "/assets/images/posts/create-rust-binaries-and-docker-images-with-nix/cover.png" aliases: - create-static-binaries-and-docker-images-with-nix - custom: slug: create-rust-binaries-and-docker-images-with-nix summary: | @@ -19,7 +18,13 @@ custom: # Create Rust binaries, and Docker images with Nix - +
+{% from "component/img.html" import img %} +
+ +
+{{ img(src=metadata.cover, alt="Nix logo with arrows pointing from it to the Rust logo, and the Docker logo") }} +
{{ metadata.created_at|published_on(format="short") }} @@ -237,7 +242,9 @@ It's telling me that `cargo` can't resolve the `escape` module for `maud_macros` I took a look at the [source](https://github.com/lambda-fairy/maud/tree/main/maud_macros/src), and initially seemed like it's a submodule: -![A list of directories with the `escape.rs` file being a submodule](/assets/images/posts/create-rust-binaries-and-docker-images-with-nix/maud-dir.png) +
+{{ img(src="/assets/images/posts/create-rust-binaries-and-docker-images-with-nix/maud-dir.png", alt="Screenshot of maud's GitHub repository") }} +
Turns out there's a ticket ([#110](https://github.com/nix-community/naersk/issues/110)) pointing out that submodules isn't supported by `naersk`. Fortunately, by the @@ -277,7 +284,9 @@ PG__DBNAME="emojied_db" PG__HOST="localhost" PG__USER="sekun" PG__PORT="5432" \ ...and I was greeted with this unstyled page: -![screenshot of emojied with no style](/assets/images/posts/create-rust-binaries-and-docker-images-with-nix/no-static-assets.png) +
+{{ img(src="/assets/images/posts/create-rust-binaries-and-docker-images-with-nix/no-static-assets.png", alt="Unstyled emojied.net frontpage") }} +
## Problem 3: Static assets @@ -366,7 +375,9 @@ PG__DBNAME="emojied_db" PG__HOST="localhost" PG__USER="sekun" PG__PORT="5432" \ ./emojied ``` -![screenshot of emojied with style](/assets/images/posts/create-rust-binaries-and-docker-images-with-nix/has-static-assets.png) +
+{{ img(src="/assets/images/posts/create-rust-binaries-and-docker-images-with-nix/has-static-assets.png", alt="STyled emojied.net frontpage") }} +
Beautiful. @@ -690,7 +701,9 @@ as intended now that Nix is handling the important parts, which I can do locally. Not to say that Docker can't do the same thing, but I found that there were some differences with volumes that made it painful to debug. -![A screenshot of a GitHub actions job](/assets/images/posts/create-rust-binaries-and-docker-images-with-nix/sweet-green-gh-actions.png) +
+{{ img(src="/assets/images/posts/create-rust-binaries-and-docker-images-with-nix/sweet-green-gh-actions.png", alt="A screenshot of a GitHub actions job") }} +
## Conclusion diff --git a/blog/posts/deploying-nix-builds-to-fly-io.md b/blog/posts/deploying-nix-builds-on-fly-io.md similarity index 90% rename from blog/posts/deploying-nix-builds-to-fly-io.md rename to blog/posts/deploying-nix-builds-on-fly-io.md index 4b254e3..a2f4b9c 100644 --- a/blog/posts/deploying-nix-builds-to-fly-io.md +++ b/blog/posts/deploying-nix-builds-on-fly-io.md @@ -1,24 +1,31 @@ --- -title: "Deploying Nix builds to Fly.io" -created_at: 2024-10-18T22:48:52Z +title: "Deploying Nix builds on Fly.io" +created_at: 2024-10-18T14:48:52Z updated_at: tags: ["nix", "fly.io"] cover: "/assets/images/posts/deploying-nix-builds-to-fly-io/cover.jpg" - +aliases: + - deploying-nix-builds-to-fly-io custom: - slug: deploying-nix-builds-to-fly-io + slug: deploying-nix-builds-on-fly-io summary: | The current approach Fly.io recommends doing is you write a Dockerfile to build, and run your app on their platform. However, if you've already packaged your application with nix, it would be nice to capitalize on that, and throw it into a docker image somehow instead of having to create a separate build process. - --- # {{ metadata.title }} - +
+{% from "component/img.html" import img %} +{% from "component/figure.html" import figure %} +
+ +
+{{ img(src=metadata.cover, alt="Fly.io, and NixOS logos shaking hands") }} +
{{ metadata.created_at|published_on(format="short") }} @@ -174,12 +181,17 @@ Which we packaged with `nix` like so We can run `webecho` with `nix run .#webecho`, and then visit `http://localhost:8080/echo`. - +
+{{ img(src="/assets/images/posts/deploying-nix-builds-to-fly-io/webecho_bruh.png", alt="") }} +
-and `APP_ECHO_ME="nix fixes this" nix run .#webecho` to imitate the average nixos -user on twitter dot com. +and `APP_ECHO_ME="nix fixes this" nix run .#webecho` - +
+{% call figure(src="/assets/images/posts/deploying-nix-builds-to-fly-io/webecho_nix_fixes_this.png", alt="") %} + now you sound like the average nixos user on twitter dot com +{% endcall %} +
## Building the container image with nix @@ -243,7 +255,9 @@ Loaded image: webecho:latest You can look around the image with `dive webecho:latest`. - +
+{{ img(src="/assets/images/posts/deploying-nix-builds-to-fly-io/webecho_dive.png", alt="") }} +
Then you can run this image as if it were any other image created from a `Dockerfile`! @@ -332,7 +346,9 @@ And deploy! $ flyctl deploy -c fly.toml -a webecho ``` - +
+{{ img(src="/assets/images/posts/deploying-nix-builds-to-fly-io/webecho_bruh_on_fly.png", alt="") }} +
> Your app's URL will vary depending on what they give you. Check your app's > dashboard just to be sure. @@ -343,7 +359,9 @@ Right. Forgot to set the environment variable! $ fly secrets set "APP_ECHO_ME=nix fixes this" -c fly.toml -a webecho ``` - +
+{{ img(src="/assets/images/posts/deploying-nix-builds-to-fly-io/webecho_nix_fixes_this_on_fly.png", alt="") }} +
## Footnotes diff --git a/blog/posts/manage-secrets-in-nixos.md b/blog/posts/manage-secrets-in-nixos.md index e4c5392..5cc150c 100644 --- a/blog/posts/manage-secrets-in-nixos.md +++ b/blog/posts/manage-secrets-in-nixos.md @@ -4,7 +4,6 @@ created_at: 2022-10-27T12:31:00Z updated_at: tags: ["nixos", "agenix"] cover: "/assets/images/posts/manage-secrets-in-nixos/cover.png" - custom: slug: manage-secrets-in-nixos summary: | @@ -17,7 +16,14 @@ custom: # Manage secrets in NixOS - +
+{% from "component/img.html" import img %} +{% from "component/figure.html" import figure %} +
+ +
+{{ img(src=metadata.cover, alt="NixOS logo, and a lock icon") }} +
{{ metadata.created_at|published_on(format="short") }} @@ -140,7 +146,9 @@ $ agenix -e emojiedDBCACert.age This opens a text editor for you to put the secret in. - +
+{{ img(src="/assets/images/posts/manage-secrets-in-nixos/agenix-edit.png", alt="Screenshot of a text editor showing the secret censored") }} +
If you need to add public keys for existing age files, update the `secrets.nix` file accordingly, and run `agenix -r`. Make sure you're in the same directory @@ -149,7 +157,7 @@ as the `secrets.nix`, and age files. It would show you something like this if it succeeds: ``` -sekun@ichi /s/S/d/secrets (main)> agenix -r +$ agenix -r rekeying emojiedDBCACert.age... rekeying emojiedDBPassword.age... ``` @@ -346,4 +354,6 @@ the following new units were started: run-agenix.d.mount Which gives me this beautiful creation: - +
+{{ img(src="/assets/images/posts/manage-secrets-in-nixos/emojied-leaderboard.png", alt="Screenshot of emojied.net's leaderboard") }} +
diff --git a/blog/posts/packaging-prebuilt-binaries-with-nix.md b/blog/posts/packaging-prebuilt-binaries-with-nix.md index 8db0c27..da36f0a 100644 --- a/blog/posts/packaging-prebuilt-binaries-with-nix.md +++ b/blog/posts/packaging-prebuilt-binaries-with-nix.md @@ -18,7 +18,13 @@ custom: # Packaging pre-built binaries with nix - +
+{% from "component/img.html" import img %} +
+ +
+{{ img(src=metadata.cover, alt="Text \"Packaging prebuilt static binaries with Nix flakes\"")}} +
{{ metadata.created_at|published_on(format="short") }} diff --git a/blog/posts/what-i-learned-from-building-a-rust-emoji-url-shortener.md b/blog/posts/what-i-learned-from-building-a-rust-emoji-url-shortener.md index df9c62c..3db6d03 100644 --- a/blog/posts/what-i-learned-from-building-a-rust-emoji-url-shortener.md +++ b/blog/posts/what-i-learned-from-building-a-rust-emoji-url-shortener.md @@ -18,7 +18,13 @@ custom: # What I learned from building an emoji URL shortener in Rust - +
+{% from "component/img.html" import img %} +
+ +
+{{ img(src=metadata.cover, alt="HackerNews URL pointing to a shortened emojied.net URL") }} +
{{ metadata.created_at|published_on(format="short") }} @@ -45,7 +51,9 @@ Some glowing ✨ reviews: > "What is wrong with you?" -- Jeff - +
+{{img(src="/assets/images/posts/what-i-learned-from-building-a-rust-emoji-url-shortener/stats.png", alt="Cloudflare stats page for emojied.net", size="sm")}} +
Here are some of the things I learned from building a simple project. diff --git a/templates/component/figure.html b/templates/component/figure.html new file mode 100644 index 0000000..7e92d93 --- /dev/null +++ b/templates/component/figure.html @@ -0,0 +1,36 @@ +{% macro figure(src='', alt='', size='regular') %} + + + {{ caller() }} + +{% endmacro %} diff --git a/templates/component/img.html b/templates/component/img.html new file mode 100644 index 0000000..0de06af --- /dev/null +++ b/templates/component/img.html @@ -0,0 +1,26 @@ +{% macro img(class="cover", src="", alt="", size="base") %} + + + +{% endmacro %} diff --git a/templates/layout/home.html b/templates/layout/home.html index 0171c81..2fd5ee6 100644 --- a/templates/layout/home.html +++ b/templates/layout/home.html @@ -1,4 +1,5 @@ {% extends "layout/base.html" %} +{% from "component/figure.html" import figure %} {% block title %}Home{% endblock %} {% block content %} @@ -11,10 +12,9 @@

Welcome!

with different languages/tools to gain new perspectives on how to solve problems.

-
- -
Hiro is sleeping! Ssshhh...
-
+ {% call figure(src="/assets/images/hiro.webp", alt="Hiro the shiba inu, sleeping", size="sm") %} + Hiro is sleeping! Ssshhh... + {% endcall %} {% if pages.blog %}