refactor(wpcarro/website): Prefer substituteAll r/3483

`substituteAll` supports templating with @variables@, which I think really
cleans things up.

Change-Id: Icfad15ac9e174495ba02260d817f7330f1616c6f
Reviewed-on: https://cl.tvl.fyi/c/depot/+/4722
Reviewed-by: wpcarro <wpcarro@gmail.com>
Autosubmit: wpcarro <wpcarro@gmail.com>
Tested-by: BuildkiteCI

8 files changed, 91 insertions, 82 deletions

diff --git a/users/wpcarro/website/blog/default.nix b/users/wpcarro/website/blog/default.nix
index bef06cad7457..713c42a83b33 100644
--- a/users/wpcarro/website/blog/default.nix
+++ b/users/wpcarro/website/blog/default.nix
@@ -6,16 +6,16 @@ let
   inherit (builtins) hasAttr filter readFile;
   inherit (depot.web.blog) post includePost renderPost;
   inherit (depot.users) wpcarro;
-  inherit (pkgs) runCommandNoCC;
 
   config = {
     name = "wpcarro's blog";
     baseUrl = "https://wpcarro.dev/blog";
+    footer = "";
   };
 
   posts = filter includePost (list post (import ./posts.nix));
 
-  rendered = runCommandNoCC "wpcarros-blog" {} ''
+  rendered = pkgs.runCommandNoCC "wpcarros-blog-posts" {} ''
     mkdir -p $out
 
     ${lib.concatStringsSep "\n" (map (post:
@@ -23,41 +23,26 @@ let
     ) posts)}
   '';
 
-  formatDate = date: readFile (runCommandNoCC "date" {} ''
+  formatDate = date: readFile (pkgs.runCommandNoCC "date" {} ''
     date --date='@${toString date}' '+%B %e, %Y' > $out
   '');
 
-  postsList = pkgs.writeText "index.html" ''
-    <div class="max-w-sm md:max-w-prose mx-auto">
-      <section class="pt-8 pb-14">
-        <p class="font-bold pb-4">Personal blog by <a class="font-bold text-blue-600 hover:underline" href="https://wpcarro.dev">wpcarro</a>.</p>
-        <p class="text-gray-500">&gt; Half-baked musings lossily encoded.</p>
-        <p class="text-gray-500">&gt; - misc reviewer</p>
-      </section>
-      <ul>
-        ${lib.concatStringsSep "\n" (map (post: ''
-          <li class="pb-10">
-            <h2 class="text-bold font-2xl ">
-              <a class="font-bold text-blue-600 hover:underline" href="${config.baseUrl}/${post.key}.html">
-                ${post.title}
-              </a>
-            </h2>
-            <p class="text-gray-500">
-              ${formatDate post.date}
-            </p>
-          </li>
-        '') posts)}
-      </ul>
-    </div>
-  '';
+  postsHtml = readFile (pkgs.substituteAll {
+    src = ./fragments/posts.html;
+    postsHtml = lib.concatStringsSep "\n" (map toPostHtml posts);
+  });
+
+  toPostHtml = post: readFile (pkgs.substituteAll {
+    src = ./fragments/post.html;
+    postUrl = "${config.baseUrl}/${post.key}.html";
+    postTitle = post.title;
+    postDate = formatDate post.date;
+  });
 in {
   inherit posts rendered config;
 
-  root = runCommandNoCC "wpcarros-blog" {} ''
+  root = pkgs.runCommandNoCC "wpcarros-blog" {} ''
     mkdir -p $out
-
-    cat ${wpcarro.website.header} \
-        ${postsList} \
-        ${wpcarro.website.addendum} > $out/index.html
+    cp ${wpcarro.website.render postsHtml} $out/index.html
   '';
 }
diff --git a/users/wpcarro/website/blog/fragments/.skip-subtree b/users/wpcarro/website/blog/fragments/.skip-subtree
new file mode 100644
index 000000000000..e69de29bb2d1
--- /dev/null
+++ b/users/wpcarro/website/blog/fragments/.skip-subtree
diff --git a/users/wpcarro/website/blog/fragments/post.html b/users/wpcarro/website/blog/fragments/post.html
new file mode 100644
index 000000000000..44593094ecdf
--- /dev/null
+++ b/users/wpcarro/website/blog/fragments/post.html
@@ -0,0 +1,8 @@
+<li class="pb-6 md:pb-10">
+  <h2 class="text-bold text-xl">
+    <a class="font-bold text-blue-600 hover:underline" href="@postUrl@">
+      @postTitle@
+    </a>
+  </h2>
+  <p class="text-gray-500">@postDate@</p>
+</li>
diff --git a/users/wpcarro/website/blog/fragments/posts.html b/users/wpcarro/website/blog/fragments/posts.html
new file mode 100644
index 000000000000..699b28f366c0
--- /dev/null
+++ b/users/wpcarro/website/blog/fragments/posts.html
@@ -0,0 +1,10 @@
+<div class="max-w-sm md:max-w-prose mx-auto">
+  <section class="pt-8 pb-14">
+    <p class="font-bold pb-3 text-xl">
+      Personal blog by <a class="font-bold text-blue-600 hover:underline" href="https://wpcarro.dev">wpcarro</a>.
+    </p>
+    <p class="text-gray-500">&gt; Half-baked musings lossily encoded.</p>
+    <p class="text-gray-500">&gt; - misc reviewer</p>
+  </section>
+  <ul>@postsHtml@</ul>
+</div>
diff --git a/users/wpcarro/website/default.nix b/users/wpcarro/website/default.nix
index 60d8dc19e768..e8f2161792ca 100644
--- a/users/wpcarro/website/default.nix
+++ b/users/wpcarro/website/default.nix
@@ -1,27 +1,27 @@
 { pkgs, depot, ... }:
 
-rec {
+let
+  inherit (builtins) readFile;
   inherit (depot.users) wpcarro;
 
-  header = "${./fragments/header.html}";
-  footer = "${./fragments/footer.html}";
-  addendum = "${./fragments/addendum.html}";
+  render = contentHtml: pkgs.substituteAll {
+    inherit contentHtml;
+    src = ./fragments/template.html;
+  };
+in {
+  inherit render;
 
-  root = pkgs.stdenv.mkDerivation {
-    name = "wpcarro.dev";
-    src = builtins.path { path = ./.; name = "website"; };
-    installPhase = ''
-      mkdir -p $out
+  root = pkgs.runCommandNoCC "wpcarro.dev" {} ''
+    mkdir -p $out
 
-      cat ${header} \
-          ${./fragments/homepage.html} \
-          ${footer} \
-          ${addendum} > $out/index.html
+    # /
+    cp ${render (readFile ./fragments/homepage.html)} $out/index.html
 
-      mkdir -p $out/habits
-      cp -r ${wpcarro.website.habit-screens} $out/habits/index.html
+    # /habits
+    mkdir -p $out/habits
+    cp -r ${wpcarro.website.habit-screens} $out/habits/index.html
 
-      cp -r ${wpcarro.website.blog.root} $out/blog
-    '';
-  };
+    # /blog
+    cp -r ${wpcarro.website.blog.root} $out/blog
+  '';
 }
diff --git a/users/wpcarro/website/fragments/addendum.html b/users/wpcarro/website/fragments/addendum.html
deleted file mode 100644
index 9623db9bf91e..000000000000
--- a/users/wpcarro/website/fragments/addendum.html
+++ /dev/null
@@ -1,13 +0,0 @@
-    </div>
-    <script>
-      const $header = document.querySelector("header");
-      const dropShadow = "drop-shadow-md";
-      const update = () => window.scrollY !== 0 ?
-        $header.classList.add(dropShadow) :
-        $header.classList.remove(dropShadow);
-
-      update();
-      document.addEventListener("scroll", update);
-    </script>
-  </body>
-</html>
diff --git a/users/wpcarro/website/fragments/footer.html b/users/wpcarro/website/fragments/footer.html
deleted file mode 100644
index c0c9a3d7ccf8..000000000000
--- a/users/wpcarro/website/fragments/footer.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<footer class="md:hidden pb-6">
-  <h2 class="text-2xl font-bold pt-4 pb-6">Other Links</h2>
-  <ul>
-    <li class="pb-6">
-      <a class="text-blue-600 font-bold" href="https://wpcarro.dev/blog">
-        Blog <span class="text-blue-300">-></span>
-      </a>
-    </li>
-    <li class="pb-6">
-      <a class="text-blue-600 font-bold" href="https://github.com/wpcarro">
-        GitHub <span class="text-blue-300">-></span>
-      </a>
-    </li>
-    <li class="pb-6">
-      <a class="text-blue-600 font-bold" href="https://linkedin.com/in/williampatrickcarroll">
-        LinkedIn <span class="text-blue-300">-></span>
-      </a>
-    </li>
-  </ul>
-</footer>
diff --git a/users/wpcarro/website/fragments/header.html b/users/wpcarro/website/fragments/template.html
index 42230ded1ec8..96d19e849196 100644
--- a/users/wpcarro/website/fragments/header.html
+++ b/users/wpcarro/website/fragments/template.html
@@ -55,3 +55,42 @@
       </div>
     </header>
     <div class="max-w-sm px-2 md:px-0 md:max-w-prose mx-auto">
+      @contentHtml@
+      <footer class="md:hidden pb-6">
+        <h2 class="text-xl font-bold py-4">More wpcarro?</h2>
+        <ul>
+          <li class="pb-6">
+            <a class="text-blue-600 font-bold" href="https://wpcarro.dev">
+              Home <span class="text-blue-300">-></span>
+            </a>
+          </li>
+          <li class="pb-6">
+            <a class="text-blue-600 font-bold" href="https://wpcarro.dev/blog">
+              Blog <span class="text-blue-300">-></span>
+            </a>
+          </li>
+          <li class="pb-6">
+            <a class="text-blue-600 font-bold" href="https://github.com/wpcarro">
+              GitHub <span class="text-blue-300">-></span>
+            </a>
+          </li>
+          <li class="pb-6">
+            <a class="text-blue-600 font-bold" href="https://linkedin.com/in/williampatrickcarroll">
+              LinkedIn <span class="text-blue-300">-></span>
+            </a>
+          </li>
+        </ul>
+      </footer>
+    </div>
+    <script>
+      const $header = document.querySelector("header");
+      const dropShadow = "drop-shadow-md";
+      const update = () => window.scrollY !== 0 ?
+        $header.classList.add(dropShadow) :
+        $header.classList.remove(dropShadow);
+
+      update();
+      document.addEventListener("scroll", update);
+    </script>
+  </body>
+</html>