refactor(tazjin/homepage): long overdue entry list rework r/6322

The entry list is now much more condensed. It's maybe a little *too*
condensed, but already closer to what I'm looking for.

Note: A new "note" post type has snuck in and can now be used for
random musings or comments on previous entries. Notes do not show up
in the Atom feed.

Change-Id: I920c0c7650937474b8a5f30cba78416554d523ce
Reviewed-on: https://cl.tvl.fyi/c/depot/+/8806
Reviewed-by: tazjin <tazjin@tvl.su>
Autosubmit: tazjin <tazjin@tvl.su>
Tested-by: BuildkiteCI

6 files changed, 113 insertions, 116 deletions

diff --git a/users/tazjin/blog/posts.nix b/users/tazjin/blog/posts.nix
index f7f50d6f1a18..60ce82f6204f 100644
--- a/users/tazjin/blog/posts.nix
+++ b/users/tazjin/blog/posts.nix
@@ -46,6 +46,7 @@
     date = 1423995834;
     content = ./posts/sick-in-sweden.md;
     oldKey = "1423995834";
+    listed = false;
   }
   {
     key = "nsa-zettabytes";
diff --git a/users/tazjin/homepage/default.nix b/users/tazjin/homepage/default.nix
index 15f4d787c0b5..b46f9d4917f4 100644
--- a/users/tazjin/homepage/default.nix
+++ b/users/tazjin/homepage/default.nix
@@ -15,13 +15,18 @@ let
   inherit (pkgs) writeFile runCommand;
 
   # The different types of entries on the homepage.
-  entryClass = enum "entryClass" [ "blog" "project" "misc" ];
+  entryClass = enum "entryClass" [
+    "blog"
+    "project"
+    "note"
+    "misc"
+  ];
 
   # The definition of a single entry.
   entry = struct "entry" {
     class = entryClass;
-    title = string;
-    url = string;
+    title = option string;
+    url = option string;
     date = int; # epoch
     description = option string;
   };
@@ -33,28 +38,42 @@ let
     title = post.title;
     url = "/blog/${post.key}";
     date = post.date;
+    description = post.description or "Blog post from ${formatDate post.date}";
   });
 
   formatDate = defun [ int string ] (date: readFile (runCommand "date" { } ''
-    date --date='@${toString date}' '+%Y-%m-%d' > $out
+    date --date='@${toString date}' '+%Y-%m-%d' | tr -d '\n' > $out
   ''));
 
-  formatEntryDate = defun [ entry string ] (entry: entryClass.match entry.class {
-    blog = "Blog post from ${formatDate entry.date}";
-    project = "Project from ${formatDate entry.date}";
-    misc = "Posted on ${formatDate entry.date}";
-  });
+  entryUrl = defun [ entry string ] (entry:
+    if entry.class == "note"
+    then "#${toString entry.date}"
+    else entry.url
+  );
+
+  hasDescription = defun [ entry bool ] (entry:
+    ((entry ? description) && (entry.description != null))
+  );
+
+  entryTitle = defun [ entry string ] (entry:
+    let
+      optionalColon = lib.optionalString (hasDescription entry) ":";
+      titleText =
+        if (!(entry ? title) && (entry.class == "note"))
+        then "[${formatDate entry.date}]"
+        else lib.optionalString (entry ? title) ((escape entry.title) + optionalColon);
+    in
+    lib.optionalString (titleText != "")
+      ''<span class="entry-title ${entry.class}">${titleText}</span>''
+  );
 
   entryToDiv = defun [ entry string ] (entry: ''
-    <a href="${entry.url}" class="entry ${entry.class}">
-      <div>
-        <p class="entry-title">${escape entry.title}</p>
-        ${
-          lib.optionalString ((entry ? description) && (entry.description != null))
-          "<p class=\"entry-description\">${escape entry.description}</p>"
-        }
-        <p class="entry-date">${formatEntryDate entry}</p>
-      </div>
+    <a href="${entryUrl entry}" id="${toString entry.date}" class="entry">
+      ${entryTitle entry}
+      ${
+        lib.optionalString (hasDescription entry)
+        "<span class=\"entry-description\">${escape entry.description}</span>"
+      }
     </a>
   '');
 
diff --git a/users/tazjin/homepage/entries.nix b/users/tazjin/homepage/entries.nix
index 9e43516e5358..fbd67f4d00ac 100644
--- a/users/tazjin/homepage/entries.nix
+++ b/users/tazjin/homepage/entries.nix
@@ -1,3 +1,9 @@
+let
+  note = date: description: {
+    class = "note";
+    inherit description date;
+  };
+in
 [
   {
     class = "misc";
@@ -5,8 +11,7 @@
     url = "https://t.me/tazlog";
     date = 1643321164;
     description = ''
-      My new channel on Telegram, for occasional updates smaller (and
-      more frequent) than what ends up being posted here.
+      My Telegram channel with occasional random life updates and musings.
     '';
   }
   {
@@ -15,8 +20,7 @@
     url = "https://changelog.com/shipit/37";
     date = 1641819600;
     description = ''
-      Episode #37 of Ship It!, a podcast about systems, featuring me.
-      We talk about TVL, Nix, monorepos and related things.
+      Podcast episode about TVL, Nix, monorepos and all sorts of related things.
     '';
   }
   {
@@ -24,9 +28,7 @@
     title = "Tvix";
     url = "https://tvl.fyi/blog/rewriting-nix";
     date = 1638381387;
-    description = ''
-      TVL is rewriting Nix with funding from NLNet.
-    '';
+    description = "TVL is rewriting Nix with funding from NLNet.";
   }
   {
     class = "misc";
@@ -34,8 +36,7 @@
     url = "https://www.youtube.com/watch?v=P-2P3MSZrBM";
     date = 1594594800;
     description = ''
-      A fascinating, mind-bending interview by Lex Fridman with Joscha
-      Bach about the Nature of the Universe.
+      Mind-bending discussion with philosopher Joscha Bach.
     '';
   }
   {
@@ -43,7 +44,7 @@
     title = "The Virus Lounge";
     url = "https://tvl.fyi";
     date = 1587435629;
-    description = "A community around Nix, monorepos, build tooling and the like!";
+    description = "A community around Nix, monorepos, build tooling and more!";
   }
   {
     class = "project";
@@ -71,7 +72,7 @@
     title = "dottime";
     url = "https://dotti.me/";
     date = 1560898800;
-    description = "A universal convention for conveying time (by edef <3)";
+    description = "A universal convention for conveying time";
   }
   {
     class = "project";
@@ -86,18 +87,63 @@
     url = "https://principiadiscordia.com/book/1.php";
     date = 1495494000;
     description = ''
-      The Principia is a short book I read as a child, and didn't
-      understand until much later. It shaped much of my world view.
+      A short book about everything that everyone should read.
     '';
   }
   {
     class = "misc";
-    title = "This Week in Virology";
-    url = "http://www.microbe.tv/twiv/";
-    date = 1585517557;
-    description = ''
-      Podcast with high-quality information about virology,
-      epidemiology and so on. Highly relevant to COVID19.
-    '';
+    title = "Nix — не только пакетный менеджер";
+    date = 1663923600;
+    url = "https://www.youtube.com/watch?v=0Lhahzs-Wos";
+    description = "Двухчасовой (!) разговор с введением в Nix, NixOS и так далее";
+  }
+  {
+    class = "project";
+    title = "yandex-cloud-rs";
+    date = 1650877200;
+    url = "https://docs.rs/yandex-cloud";
+    description = "Простой SDK на Rust для работы с API Yandex Cloud.";
+  }
+  {
+    class = "project";
+    title = "nix-1p";
+    date = 1564650000;
+    url = "https://code.tvl.fyi/about/nix/nix-1p";
+    description = "A (more or less) one-page introduction to the Nix language.";
+  }
+  {
+    class = "misc";
+    title = "Ставим NixOS!";
+    date = 1678784400;
+    url = "https://progmsk.timepad.ru/event/2358560/";
+    description = "Встреча в undef.space для помощи в начале работы с Nix/NixOS";
+  }
+  {
+    class = "misc";
+    title = "Tvix - September '22";
+    date = 1662973200;
+    url = "https://tvl.fyi/blog/tvix-status-september-22";
+    description = "Tvix update blog post over on TVL";
+  }
+  {
+    class = "project";
+    title = "Tvixbolt";
+    date = 1667293200;
+    url = "https://tvixbolt.tvl.su/";
+    description = "In-browser language evaluator for Nix, based on Tvix";
+  }
+  {
+    class = "project";
+    title = "ООО ТВЛ";
+    date = 1609491600;
+    url = "https://tvl.su/ru/";
+    description = "Официальный сайт моей компании по IT-консалтингу.";
   }
+
+  # Notes.
+  (note 1676106000 "If you have a Huawei device that sometimes struggles on public Wi-Fi networks, try enabling MAC-address randomisation. Huawei devices often get pushed onto management networks!")
+  (note 1686868637 "I moved some of my pages (including this one) to a machine in my flat in Moscow. If you end up having access trouble because your ISP blocks Russian resources, please let me know.")
+  (note 1686868636 "Protip: Use the Reddit blackout to click the 'Logout' button, and never come back.")
+  (note 1486550941 "↓ I no longer recommend people to use this. Generate your configuration from a language like Nix instead.")
+  (note 1576800001 "↓ No longer just my projects, it's all of TVL! Go check it out.")
 ]
diff --git a/users/tazjin/homepage/feed.nix b/users/tazjin/homepage/feed.nix
index 09bc36341401..8043d7ff308a 100644
--- a/users/tazjin/homepage/feed.nix
+++ b/users/tazjin/homepage/feed.nix
@@ -4,7 +4,7 @@
 with depot.nix.yants;
 
 let
-  inherit (builtins) map readFile;
+  inherit (builtins) filter map readFile;
   inherit (lib) max singleton;
   inherit (pkgs) writeText;
   inherit (depot.web) blog atom-feed;
@@ -23,7 +23,7 @@ let
   });
 
   allEntries = (with depot.users.tazjin.blog; map (blog.toFeedEntry config) posts)
-    ++ (map pageEntryToEntry pageEntries);
+    ++ (map pageEntryToEntry (filter (e: e.class != "note") pageEntries));
 
   feed = {
     id = "https://tazj.in/";
diff --git a/users/tazjin/homepage/header.html b/users/tazjin/homepage/header.html
index 5a22d9eb7b45..320b5ded8c74 100644
--- a/users/tazjin/homepage/header.html
+++ b/users/tazjin/homepage/header.html
@@ -3,6 +3,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="description" content="tazjin&#39;s blog">
   <link rel="stylesheet" type="text/css" href="static/tvl.css" media="all">
+  <link rel="stylesheet" type="text/css" href="static/tazjin.css" media="all">
   <link rel="icon" type="image/webp" href="/static/favicon.webp">
   <link rel="alternate" type="application/atom+xml" href="/feed.atom">
   <title>tazjin&#39;s interblag</title>
@@ -15,22 +16,14 @@
     <hr>
   </header>
   <div class="introduction">
-    <p>Hi, I'm tazjin.</p>
     <p>
-      I spend a lot of my time hacking on the
-      <a class="dark-link" href="https://tvl.fyi">TVL</a> monorepo and
-      doing other computer-related things. Follow me
-      on <a class="dark-link" href="https://t.me/tazlog">Telegram</a>,
-      via the feed here or (occasionally) catch me in-person
-      at <a href="https://undef.club/#about" class="dark-link">
-      undef.club</a>.
-    </p>
-    <p>
-      Below is a collection of
+      Below are some of
       my <span class="project">projects</span>, <span class="blog">blog
-      posts</span> and some <span class="misc">random things</span> by
-      me or others. If you'd like to get in touch about anything, send
-      me a mail at mail@[this domain] or ping me on IRC.
+      posts</span>, <span class="note">notes</span> and some
+      other <span class="misc">random things</span>. If you'd like to
+      get in touch, email me at mail@[this domain] or ping me
+      on <a class="dark-link" href="https://tvl.fyi">TVL</a> IRC.
     </p>
+    <hr>
   </div>
   <div class="entry-container">
diff --git a/web/static/tvl.css b/web/static/tvl.css
index 7cde9d96444b..b28736bce104 100644
--- a/web/static/tvl.css
+++ b/web/static/tvl.css
@@ -35,10 +35,6 @@ body {
     font-family: jetbrains-mono, monospace;
 }
 
-p, a :not(.uncoloured-link) {
-    color: inherit;
-}
-
 h1, h2, h3 {
     line-height: 1.2
 }
@@ -54,64 +50,6 @@ article p {
     margin: 1.4em auto;
 }
 
-/* Homepage styling */
-
-.dark {
-    background-color: #181818;
-    color: #e4e4ef;
-}
-
-.dark-link, .interblag-title {
-    color: #96a6c8;
-}
-
-.entry-container {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: flex-start;
-}
-
-.interblag-title {
-    text-decoration: none;
-}
-
-.entry {
-    width: 42%;
-    margin: 5px;
-    padding-left: 7px;
-    padding-right: 5px;
-    border: 2px solid;
-    border-radius: 5px;
-    flex-grow: 1;
-    text-decoration: none;
-}
-
-.misc {
-    color: #73c936;
-    border-color: #73c936;
-}
-
-.blog {
-    color: #268bd2;
-    border-color: #268bd2;
-}
-
-.project {
-    color: #ff4f58;
-    border-color: #ff4f58;
-}
-
-.entry-title {
-    color: inherit !important;
-    font-weight: bold;
-    text-decoration: none;
-}
-
-.entry-date {
-    font-style: italic;
-}
-
 /* Blog styling */
 
 .light {