feat: replace asciicast scripts with clickable SVG previews in Nix, Podman, and Ricing posts

Author: bristledev

eleventy.config.js

@@ -17,6 +17,23 @@ const curriculumPath = path.join(process.cwd(), "src", "_data", "curriculum.json
 const curriculum = JSON.parse(fs.readFileSync(curriculumPath, "utf-8"));
 const flatSlugs = curriculum.flatMap(m => m.slugs);
 
+function injectAsciinemaEmbeds(content) {
+  const asciicastLinkPattern = /<a\s+([^>]*?)href="https:\/\/asciinema\.org\/a\/([A-Za-z0-9_-]+)"([^>]*)>\s*<img\s+([^>]*?)alt="asciicast"([^>]*?)>\s*<\/a>/gi;
+
+  return content.replace(asciicastLinkPattern, (match, _preHrefAttrs, castId) => {
+    const scriptPattern = new RegExp(
+      `<script\\s+src="https:\\/\\/asciinema\\.org\\/a\\/${castId}\\.js"\\s+id="asciicast-${castId}"[\\s\\S]*?<\\/script>`,
+      "i"
+    );
+
+    if (scriptPattern.test(content)) {
+      return "";
+    }
+
+    return `<script src="https://asciinema.org/a/${castId}.js" id="asciicast-${castId}" async="true"></script>`;
+  });
+}
+
 export default function(eleventyConfig) {
   eleventyConfig.addPassthroughCopy("src/style.css");
   eleventyConfig.addPassthroughCopy("src/assets");
@@ -119,6 +136,14 @@ export default function(eleventyConfig) {
     return `Next we'll look at **[${nextTitle}](${nextUrl})**!`;
   });
 
+  eleventyConfig.addTransform("asciinemaEmbeds", (content, outputPath) => {
+    if (!outputPath || !outputPath.endsWith(".html")) {
+      return content;
+    }
+
+    return injectAsciinemaEmbeds(content);
+  });
+
   return {
     pathPrefix: "/steam-deck/",
     markdownTemplateEngine: "njk",

src/posts/nix.md

@@ -56,7 +56,7 @@ Nix works a bit differently than other package managers. The easiest way to use
 ## 🎥 See it in Action
 Want to see Nix magic in real-time? Check out this demo of running an app without installing it:
 
-<script src="https://asciinema.org/a/zu1z4m8iLeSZiaRv.js" id="asciicast-zu1z4m8iLeSZiaRv" async="true"></script>
+[![asciicast](https://asciinema.org/a/zu1z4m8iLeSZiaRv.svg)](https://asciinema.org/a/zu1z4m8iLeSZiaRv)
 
 ## Optional Fix: Perl Apps and glibcLocales
 Most people can skip this. You usually only need this if you're running Perl software through Nix (like `cowsay`) and you see locale-related errors.

src/posts/podman.md

@@ -33,7 +33,7 @@ Podman will download a tiny image, run it, and print a message. All without need
 ## 🎥 See it in Action
 Check out how fast Podman starts up and runs a container!
 
-<script src="https://asciinema.org/a/6QpATU4wRtFkFPW0.js" id="asciicast-6QpATU4wRtFkFPW0" async="true"></script>
+[![asciicast](https://asciinema.org/a/6QpATU4wRtFkFPW0.svg)](https://asciinema.org/a/6QpATU4wRtFkFPW0)
 
 ## Cool Things to do with Podman
 While most gamers won't need Podman daily, it opens up some amazing possibilities. The best example? **Hosting your own game servers directly on your Deck.**
@@ -56,7 +56,7 @@ podman run -d -it -p 25565:25565 -e EULA=TRUE -v ~/minecraft-data:/data --name m
 
 To stop the server later, just type `podman stop mc-server`. To start it again, `podman start mc-server`. It’s that easy!
 
-<script src="https://asciinema.org/a/qo924SpN5D5TBh68.js" id="asciicast-qo924SpN5D5TBh68" async="true"></script>
+[![asciicast](https://asciinema.org/a/qo924SpN5D5TBh68.svg)](https://asciinema.org/a/qo924SpN5D5TBh68)
 
 ### More Awesome Game Servers for Podman
 

src/posts/ricing.md

@@ -80,7 +80,7 @@ fastfetch
 
 **[btop](https://github.com/aristocratos/btop)** is a system monitor that looks like it belongs on the bridge of a starship. It shows CPU, memory, disk, network, and running processes — all in real time with beautiful graphs and color themes.
 
-<script src="https://asciinema.org/a/SigmzvU4M4mT4nYl.js" id="asciicast-SigmzvU4M4mT4nYl" async="true"></script>
+[![asciicast](https://asciinema.org/a/SigmzvU4M4mT4nYl.svg)](https://asciinema.org/a/SigmzvU4M4mT4nYl)
 
 Good news — **btop is already installed on SteamOS!** Just open Konsole and run:
 ```bash