blog(nginix): fixes

site.ts

@@ -50,7 +50,7 @@ site.preprocess([".html"], (pages) =>
 
 site.process([".html"], (pages) =>
   pages.forEach((page) => {
-    const document = page.document;
+    const { document } = page;
 
     document.querySelectorAll("table").forEach((element) => {
       const wrapper = document.createElement("div");
@@ -66,36 +66,17 @@ site.process([".html"], (pages) =>
     });
 
     document.querySelectorAll("pre code").forEach((code) => {
-      const matches = code.innerHTML.match(/\(\(\(\d+\)\)\)/g);
+      const element = code.parentElement!;
-      if (matches) { // CALLOUTS
+      const wrapper = document.createElement("div");
-        let newHTML = code.innerHTML;
 
-        matches.forEach((match) => {
+      element.classList.add("transform-[rotateX(180deg)]");
-          console.log(
+      wrapper.classList.add(
-            `<span class="callout">${match.replaceAll(/\(|\)/g, "")}</span>`,
+        "transform-[rotateX(180deg)]",
-          );
+        "overflow-x-auto",
-          newHTML = newHTML.replace(
+      );
-            match,
-            `<span class="callout">${match.replaceAll(/\(|\)/g, "")}</span>`,
-          );
-        });
 
-        code.innerHTML = newHTML;
+      element.parentNode!.insertBefore(wrapper, element);
-      }
+      wrapper.appendChild(element);
-
-      { // ROTATION
-        const element = code.parentElement!;
-        const wrapper = document.createElement("div");
-
-        element.classList.add("transform-[rotateX(180deg)]");
-        wrapper.classList.add(
-          "transform-[rotateX(180deg)]",
-          "overflow-x-auto",
-        );
-
-        element.parentNode!.insertBefore(wrapper, element);
-        wrapper.appendChild(element);
-      }
     });
 
     document
@@ -195,6 +176,30 @@ site.use(codeHighlight({
   },
 }));
 
+site.process([".html"], (pages) =>
+  pages.forEach((page) => {
+    const { document } = page;
+
+    document.querySelectorAll("pre code").forEach((code) => {
+      const matches = code.innerHTML.match(/\(\(\(\d+\)\)\)/g);
+      if (!matches) return;
+
+      let newHTML = code.innerHTML;
+
+      matches.forEach((match) => {
+        console.log(
+          `<span class="callout">${match.replaceAll(/\(|\)/g, "")}</span>`,
+        );
+        newHTML = newHTML.replace(
+          match,
+          `<span class="callout">${match.replaceAll(/\(|\)/g, "")}</span>`,
+        );
+      });
+
+      code.innerHTML = newHTML;
+    });
+  }));
+
 site.use(resolveUrls());
 site.use(slugifyUrls({
   extensions: "*",

site/assets/css/default.css

@@ -284,6 +284,11 @@ body {
       dark:bg-[#111] dark:shadow-[4px_4px_#bbb];
   }
 
+  .callout {
+    @apply px-2.5 py-1 select-none text-white bg-black dark:text-black
+      dark:bg-white;
+  }
+
   .token-addition {
     @apply text-[green] dark:text-[mediumspringgreen];
   }

site/blog/2025-06-09-nginix.md

@@ -82,7 +82,7 @@ change the size of its contents? (more common than you think)
 > derived from its inputs] to `1`, which corresponds to January 1st, 1970,
 > 00:00:01 UTC.
 
-In that case, neither the last modified date or the content length would same.
+In that case, neither the last modified date or the content length would change.
 So the `ETag` header would stay **constant, which would make the client assume
 the asset has not changed**.
 
@@ -212,7 +212,7 @@ The way this works is as follows:
 
 3. Save the current value of `errno` (ugh) to a local.
 
-4. Then try to resolve `clcf->root.data`. `clcf->root.data` is the path
+4. Then we try to resolve `clcf->root.data`. `clcf->root.data` is the path
    specified in the root directive of the Nginx configuration and could be a
    symbolic link (e.g., it could be `/var/www` which might be a symlink to a Nix
    store path[^Please don't do this.]). `ngx_realpath` resolves all symbolic
@@ -230,8 +230,8 @@ The way this works is as follows:
 7. **The main condition:** We check if the `r->headers_out.last_modified_time`
    is `1`, which is what Nix sets file's last modified times to, we then check
    if the canonical path resolution has succeeded (`real != NULL`), if the
-   canonical path starts with the Nix store path (`NIX_STORE_DIR`), and if it
+   canonical path starts with the Nix store path (`NIX_STORE_DIR`), and if the
-   has anything file after it (`@[next] != '/' && @[next + 1] != NULL`).
+   store path has anything after it (`@[next] != '/' && @[next + 1] != NULL`).
 
 8. (If the condition is true) We then extract the hash. A path like
    `/nix/store/6bxcxc6xvg5xv70z55adcwhgik5m41a0-package-1.0.0/bin/package` gets
@@ -261,3 +261,5 @@ unit).] issues.
 
 I hope you learned something in this blog post, and perhaps a new way to
 fingerprint Nginx installs :).
+
+![Nixpkgs built Nginx-served ETag header](/assets/images/nixpkgs-nginx-etag.webp)