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

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>

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
+  '';
 }