feat(wpcarro/blog): Add a blog index page r/3476

TL;DR:
- Create an index page to list blog posts
- Drop blog.wpcarro.dev -> wpcarro.dev/blog
- Create fragments directory to host reusable static website components
- Consume fragments in wpcarro.dev and wpcarro.dev/blog for brand consistency

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

7 files changed, 173 insertions, 12 deletions

diff --git a/users/wpcarro/website/blog/default.nix b/users/wpcarro/website/blog/default.nix
index df5502330c..0f9527edb8 100644
--- a/users/wpcarro/website/blog/default.nix
+++ b/users/wpcarro/website/blog/default.nix
@@ -3,8 +3,10 @@
 with depot.nix.yants;
 
 let
-  inherit (builtins) hasAttr filter;
+  inherit (builtins) hasAttr filter readFile;
   inherit (depot.web.blog) post includePost renderPost;
+  inherit (depot.users) wpcarro;
+  inherit (pkgs) runCommandNoCC;
 
   config = {
     name = "wpcarro's blog";
@@ -14,7 +16,7 @@ let
 
   posts = filter includePost (list post (import ./posts.nix));
 
-  rendered = pkgs.runCommandNoCC "wpcarros-blog" {} ''
+  rendered = runCommandNoCC "wpcarros-blog" {} ''
     mkdir -p $out
 
     ${lib.concatStringsSep "\n" (map (post:
@@ -22,6 +24,41 @@ let
     ) posts)}
   '';
 
+  formatDate = date: readFile (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>
+  '';
 in {
   inherit posts rendered config;
+
+  root = runCommandNoCC "wpcarros-blog" {} ''
+    mkdir -p $out
+
+    cat ${wpcarro.website.header} \
+        ${postsList} \
+        ${wpcarro.website.addendum} > $out/index.html
+  '';
 }
diff --git a/users/wpcarro/website/default.nix b/users/wpcarro/website/default.nix
index 9480c38e9f..60d8dc19e7 100644
--- a/users/wpcarro/website/default.nix
+++ b/users/wpcarro/website/default.nix
@@ -1,13 +1,27 @@
 { pkgs, depot, ... }:
 
-pkgs.stdenv.mkDerivation {
-  name = "wpcarro.dev";
-  src = builtins.path { path = ./.; name = "website"; };
-  installPhase = ''
-    mkdir -p $out
-    cp $src/index.html $out
-
-    mkdir -p $out/habits
-    cp -r ${depot.users.wpcarro.website.habit-screens} $out/habits/index.html
-  '';
+rec {
+  inherit (depot.users) wpcarro;
+
+  header = "${./fragments/header.html}";
+  footer = "${./fragments/footer.html}";
+  addendum = "${./fragments/addendum.html}";
+
+  root = pkgs.stdenv.mkDerivation {
+    name = "wpcarro.dev";
+    src = builtins.path { path = ./.; name = "website"; };
+    installPhase = ''
+      mkdir -p $out
+
+      cat ${header} \
+          ${./fragments/homepage.html} \
+          ${footer} \
+          ${addendum} > $out/index.html
+
+      mkdir -p $out/habits
+      cp -r ${wpcarro.website.habit-screens} $out/habits/index.html
+
+      cp -r ${wpcarro.website.blog.root} $out/blog
+    '';
+  };
 }
diff --git a/users/wpcarro/website/fragments/.skip-subtree b/users/wpcarro/website/fragments/.skip-subtree
new file mode 100644
index 0000000000..e69de29bb2
--- /dev/null
+++ b/users/wpcarro/website/fragments/.skip-subtree
diff --git a/users/wpcarro/website/fragments/addendum.html b/users/wpcarro/website/fragments/addendum.html
new file mode 100644
index 0000000000..9623db9bf9
--- /dev/null
+++ b/users/wpcarro/website/fragments/addendum.html
@@ -0,0 +1,13 @@
+    </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
new file mode 100644
index 0000000000..c0c9a3d7cc
--- /dev/null
+++ b/users/wpcarro/website/fragments/footer.html
@@ -0,0 +1,20 @@
+<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/header.html
new file mode 100644
index 0000000000..42230ded1e
--- /dev/null
+++ b/users/wpcarro/website/fragments/header.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>wpcarro.dev</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">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+      tailwind.config = {
+        theme: {
+          extend: {
+            fontFamily: {
+                mono: ["JetBrains Mono", "normal"]
+            },
+          },
+        },
+      };
+    </script>
+  </head>
+  <body class="font-mono bg-gray-100">
+    <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">
+            <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>
+            </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">
+                Habits
+              </a>
+            </li>
+            <li>
+              <a class="hover:underline" href="https://wpcarro.dev/blog">
+                Blog
+              </a>
+            </li>
+            <li>
+              <a class="hover:underline" href="https://github.com/wpcarro">
+                GitHub
+              </a>
+            </li>
+            <li>
+              <a class="hover:underline" href="https://linkedin.com/in/williampatrickcarroll">
+                LinkedIn
+              </a>
+            </li>
+          </ul>
+        </nav>
+      </div>
+    </header>
+    <div class="max-w-sm px-2 md:px-0 md:max-w-prose mx-auto">
diff --git a/users/wpcarro/website/fragments/homepage.html b/users/wpcarro/website/fragments/homepage.html
new file mode 100644
index 0000000000..54e38b990e
--- /dev/null
+++ b/users/wpcarro/website/fragments/homepage.html
@@ -0,0 +1,20 @@
+<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>
+  </p>
+  <p class="pb-4">
+    I write software. Currently I work as a <b>Site Reliability Engineer</b> for
+    <a class="text-blue-600 font-bold hover:underline" href="https://drive.google.com">Google Drive</a>.
+  </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>
+    (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>.
+  </p>
+  <p class="pb-4">
+    If I'm not coding, I'm likely meditating, training Jiu Jitsu, or
+    fumbling around on the piano or drums.
+  </p>
+</section>