chore(wpcarro/website): Templatize website r/3538

Preferring billandhiscomputer.com in lieu of wpcarro.dev. wpcarro is a bit of a
tough username for others to remember and for me to say out-loud (it usually
involves me spelling it and explaining to others why Carroll is missing
2x-Ls). I think it's time for a change.

During the transition, I don't want to deal with stale links to
https://wpcarro.dev, so I'm templatizing more of my website and blog so that
these values can be replaced.

Expect more forthcoming changes.

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

5 files changed, 44 insertions, 31 deletions

diff --git a/users/wpcarro/website/blog/default.nix b/users/wpcarro/website/blog/default.nix
index 7056b026a21a..0eca77d9be3e 100644
--- a/users/wpcarro/website/blog/default.nix
+++ b/users/wpcarro/website/blog/default.nix
@@ -5,17 +5,17 @@ with depot.nix.yants;
 let
   inherit (builtins) hasAttr filter readFile;
   inherit (depot.web.blog) post includePost renderPost;
-  inherit (depot.users) wpcarro;
+  inherit (depot.users.wpcarro.website) domain renderTemplate withBrand;
 
   config = {
-    name = "wpcarro's blog";
-    baseUrl = "https://wpcarro.dev/blog";
+    name = "bill and his blog";
+    baseUrl = "https://${domain}/blog";
     footer = "";
   };
 
   posts = filter includePost (list post (import ./posts.nix));
 
-  rendered = pkgs.runCommandNoCC "wpcarros-blog-posts" {} ''
+  rendered = pkgs.runCommandNoCC "blog-posts" {} ''
     mkdir -p $out
 
     ${lib.concatStringsSep "\n" (map (post:
@@ -27,19 +27,17 @@ let
     date --date='@${toString date}' '+%B %e, %Y' > $out
   '');
 
-  postsHtml = readFile (pkgs.substituteAll {
-    src = ./fragments/posts.html;
+  postsHtml = renderTemplate ./fragments/posts.html {
     postsHtml = lib.concatStringsSep "\n" (map toPostHtml posts);
-  });
+  };
 
-  toPostHtml = post: readFile (pkgs.substituteAll {
-    src = ./fragments/post.html;
+  toPostHtml = post: readFile (renderTemplate ./fragments/post.html {
     postUrl = "${config.baseUrl}/posts/${post.key}.html";
     postTitle = post.title;
     postDate = formatDate post.date;
   });
-in pkgs.runCommandNoCC "wpcarros-blog" {} ''
+in pkgs.runCommandNoCC "blog" {} ''
   mkdir -p $out
-  cp ${wpcarro.website.render postsHtml} $out/index.html
+  cp ${withBrand (readFile postsHtml)} $out/index.html
   cp -r ${rendered} $out/posts
 ''
diff --git a/users/wpcarro/website/blog/fragments/posts.html b/users/wpcarro/website/blog/fragments/posts.html
index 699b28f366c0..a85a4b71101e 100644
--- a/users/wpcarro/website/blog/fragments/posts.html
+++ b/users/wpcarro/website/blog/fragments/posts.html
@@ -1,7 +1,7 @@
 <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>.
+      Personal blog by <a class="font-bold text-blue-600 hover:underline" href="@homepage@">Bill</a>.
     </p>
     <p class="text-gray-500">&gt; Half-baked musings lossily encoded.</p>
     <p class="text-gray-500">&gt; - misc reviewer</p>
diff --git a/users/wpcarro/website/default.nix b/users/wpcarro/website/default.nix
index b20de562ab6f..9694aad17d60 100644
--- a/users/wpcarro/website/default.nix
+++ b/users/wpcarro/website/default.nix
@@ -4,18 +4,33 @@ let
   inherit (builtins) readFile;
   inherit (depot.users) wpcarro;
 
-  render = contentHtml: pkgs.substituteAll {
+  domain = "billandhiscomputer.com";
+
+  globalVars = {
+    inherit domain;
+    homepage  = "https://${domain}/";
+    blog      = "https://${domain}/blog";
+    habits    = "https://${domain}/habits";
+    github    = "https://github.com/wpcarro";
+    linkedin  = "https://linkedin.com/in/williampatrickcarroll";
+    depotWork = "https://cs.tvl.fyi/depot/-/blob/users/wpcarro";
+  };
+
+  renderTemplate = src: vars: pkgs.substituteAll (globalVars // vars // {
+    inherit src;
+  });
+
+  withBrand = contentHtml: renderTemplate ./fragments/template.html {
     inherit contentHtml;
-    src = ./fragments/template.html;
   };
 in {
-  inherit render;
+  inherit domain renderTemplate withBrand;
 
   root = pkgs.runCommandNoCC "wpcarro.dev" {} ''
     mkdir -p $out
 
     # /
-    cp ${render (readFile ./fragments/homepage.html)} $out/index.html
+    cp ${withBrand (readFile (renderTemplate ./fragments/homepage.html {}))} $out/index.html
 
     # /habits
     mkdir -p $out/habits
diff --git a/users/wpcarro/website/fragments/homepage.html b/users/wpcarro/website/fragments/homepage.html
index 54e38b990ef1..f515d974001e 100644
--- a/users/wpcarro/website/fragments/homepage.html
+++ b/users/wpcarro/website/fragments/homepage.html
@@ -1,6 +1,6 @@
 <section class="leading-7">
   <p class="relative text-3xl text-center font-bold pt-6 md:pt-14 pb-10">
-    Hey! I'm William.<span class="pl-10 relative"><span class="block absolute right-0 top-0 transition-transform hover:rotate-90">👋</span></span>
+    Hey! I'm Bill.<span class="pl-10 relative"><span class="block absolute right-0 top-0 transition-transform hover:rotate-90">👋</span></span>
   </p>
   <p class="pb-4">
     I write software. Currently I work as a <b>Site Reliability Engineer</b> for
@@ -8,10 +8,10 @@
   </p>
   <p class="pb-4">
     I'm <b>wpcarro</b> on
-    <a class="font-bold text-blue-600 hover:underline" href="https://github.com/wpcarro">GitHub</a>
+    <a class="font-bold text-blue-600 hover:underline" href="@github@">GitHub</a>
     (and elsewhere), but if you're looking for code samples, the majority of
     my open-source work resides in a magical place called the
-    <a class="font-bold text-blue-600 hover:underline" href="https://cs.tvl.fyi/depot/-/tree/users/wpcarro">depot</a>.
+    <a class="font-bold text-blue-600 hover:underline" href="@depotWork@">depot</a>.
   </p>
   <p class="pb-4">
     If I'm not coding, I'm likely meditating, training Jiu Jitsu, or
diff --git a/users/wpcarro/website/fragments/template.html b/users/wpcarro/website/fragments/template.html
index 96d19e849196..381dcad68040 100644
--- a/users/wpcarro/website/fragments/template.html
+++ b/users/wpcarro/website/fragments/template.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <title>wpcarro.dev</title>
+    <title>@domain@</title>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=JetBrains+Mono">
@@ -22,31 +22,31 @@
     <header class="sticky z-10 transition duration-300 bg-gray-100 top-0 py-6">
       <div class="flex max-w-sm md:max-w-3xl mx-auto">
         <div class="flex-1 text-center md:text-left text-xl md:text-base">
-          <a href="https://cs.tvl.fyi/depot/-/blob/users/wpcarro/website/index.html">
+          <a href="@depotWork@/website">
             <h1 class="font-bold">
-              <span class="text-black">(</span><a class="text-purple-600 hover:underline" href="https://cs.tvl.fyi/depot/-/blob/users/wpcarro/website/index.html">def</a>&nbsp;<a class="text-green-600 hover:underline text-bold" href="https://wpcarro.dev">"wpcarro.dev"</a><span class="text-black">)</span>
+              <span class="text-black">(</span><a class="text-purple-600 hover:underline" href="@depotWork@/website">def</a>&nbsp;<a class="text-green-600 hover:underline text-bold" href="@homepage@">"@domain@"</a><span class="text-black">)</span>
             </h1>
           </a>
         </div>
         <nav class="flex-1 hidden md:block">
           <ul class="list-reset flex justify-end space-x-8">
             <li>
-              <a class="hover:underline" href="https://wpcarro.dev/habits">
+              <a class="hover:underline" href="@habits@">
                 Habits
               </a>
             </li>
             <li>
-              <a class="hover:underline" href="https://wpcarro.dev/blog">
+              <a class="hover:underline" href="@blog@">
                 Blog
               </a>
             </li>
             <li>
-              <a class="hover:underline" href="https://github.com/wpcarro">
+              <a class="hover:underline" href="@github@">
                 GitHub
               </a>
             </li>
             <li>
-              <a class="hover:underline" href="https://linkedin.com/in/williampatrickcarroll">
+              <a class="hover:underline" href="@linkedin@">
                 LinkedIn
               </a>
             </li>
@@ -57,25 +57,25 @@
     <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>
+        <h2 class="text-xl font-bold py-4">More Bill?</h2>
         <ul>
           <li class="pb-6">
-            <a class="text-blue-600 font-bold" href="https://wpcarro.dev">
+            <a class="text-blue-600 font-bold" href="@homepage@">
               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">
+            <a class="text-blue-600 font-bold" href="@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">
+            <a class="text-blue-600 font-bold" href="@github@">
               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">
+            <a class="text-blue-600 font-bold" href="@linkedin@">
               LinkedIn <span class="text-blue-300">-></span>
             </a>
           </li>