refactor: Use WC

assets/css/style.css

@@ -5,68 +5,89 @@
 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,
     "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   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;
 }

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
 
-<img class="cover" src="{{ metadata.cover }}"/>
+<div>
+{% from "component/img.html" import img %}
+</div>
+
+<div>
+{{ img(src=metadata.cover, alt="Nix logo with arrows pointing from it to the Rust logo, and the Docker logo") }}
+</div>
 
 <span class="post-metadata">
   {{ 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)
+<div>
+{{ img(src="/assets/images/posts/create-rust-binaries-and-docker-images-with-nix/maud-dir.png", alt="Screenshot of maud's GitHub repository") }}
+</div>
 
 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)
+<div>
+{{ img(src="/assets/images/posts/create-rust-binaries-and-docker-images-with-nix/no-static-assets.png", alt="Unstyled emojied.net frontpage") }}
+</div>
 
 ## 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)
+<div>
+{{ img(src="/assets/images/posts/create-rust-binaries-and-docker-images-with-nix/has-static-assets.png", alt="STyled emojied.net frontpage") }}
+</div>
 
 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)
+<div>
+{{ 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") }}
+</div>
 
 ## Conclusion
 

blog/posts/deploying-nix-builds-to-fly-io.md → 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 }}
 
-<img class="cover" src="{{ metadata.cover }}"/>
+<div>
+{% from "component/img.html" import img %}
+{% from "component/figure.html" import figure %}
+</div>
+
+<div>
+{{ img(src=metadata.cover, alt="Fly.io, and NixOS logos shaking hands") }}
+</div>
 
 <span class="post-metadata">
   {{ 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" />
+<div>
+{{ img(src="/assets/images/posts/deploying-nix-builds-to-fly-io/webecho_bruh.png", alt="") }}
+</div>
 
-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`
 
-<img src="/assets/images/posts/deploying-nix-builds-to-fly-io/webecho_nix_fixes_this.png" />
+<div>
+{% 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 %}
+</div>
 
 ## 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" />
+<div>
+{{ img(src="/assets/images/posts/deploying-nix-builds-to-fly-io/webecho_dive.png", alt="") }}
+</div>
 
 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" />
+<div>
+{{ img(src="/assets/images/posts/deploying-nix-builds-to-fly-io/webecho_bruh_on_fly.png", alt="") }}
+</div>
 
 > 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" />
+<div>
+{{ img(src="/assets/images/posts/deploying-nix-builds-to-fly-io/webecho_nix_fixes_this_on_fly.png", alt="") }}
+</div>
 
 ## Footnotes
 

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
 
-<img class="cover" src="{{ metadata.cover }}"/>
+<div>
+{% from "component/img.html" import img %}
+{% from "component/figure.html" import figure %}
+</div>
+
+<div>
+{{ img(src=metadata.cover, alt="NixOS logo, and a lock icon") }}
+</div>
 
 <span class="post-metadata">
   {{ 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"/>
+<div>
+{{ img(src="/assets/images/posts/manage-secrets-in-nixos/agenix-edit.png", alt="Screenshot of a text editor showing the secret censored") }}
+</div>
 
 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"/>
+<div>
+{{ img(src="/assets/images/posts/manage-secrets-in-nixos/emojied-leaderboard.png", alt="Screenshot of emojied.net's leaderboard") }}
+</div>

blog/posts/packaging-prebuilt-binaries-with-nix.md

@@ -18,7 +18,13 @@ custom:
 
 # Packaging pre-built binaries with nix
 
-<img class="cover" src="{{ metadata.cover }}"/>
+<div>
+{% from "component/img.html" import img %}
+</div>
+
+<div>
+{{ img(src=metadata.cover, alt="Text \"Packaging prebuilt static binaries with Nix flakes\"")}}
+</div>
 
 <span class="post-metadata">
   {{ metadata.created_at|published_on(format="short") }}