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

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
This commit is contained in:
Vincent Ambo 2023-06-16 02:18:18 +03:00 committed by clbot
parent 0b2f5510ed
commit d8d0b17823
6 changed files with 113 additions and 116 deletions

View file

@ -46,6 +46,7 @@
date = 1423995834; date = 1423995834;
content = ./posts/sick-in-sweden.md; content = ./posts/sick-in-sweden.md;
oldKey = "1423995834"; oldKey = "1423995834";
listed = false;
} }
{ {
key = "nsa-zettabytes"; key = "nsa-zettabytes";

View file

@ -15,13 +15,18 @@ let
inherit (pkgs) writeFile runCommand; inherit (pkgs) writeFile runCommand;
# The different types of entries on the homepage. # 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. # The definition of a single entry.
entry = struct "entry" { entry = struct "entry" {
class = entryClass; class = entryClass;
title = string; title = option string;
url = string; url = option string;
date = int; # epoch date = int; # epoch
description = option string; description = option string;
}; };
@ -33,28 +38,42 @@ let
title = post.title; title = post.title;
url = "/blog/${post.key}"; url = "/blog/${post.key}";
date = post.date; date = post.date;
description = post.description or "Blog post from ${formatDate post.date}";
}); });
formatDate = defun [ int string ] (date: readFile (runCommand "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 { entryUrl = defun [ entry string ] (entry:
blog = "Blog post from ${formatDate entry.date}"; if entry.class == "note"
project = "Project from ${formatDate entry.date}"; then "#${toString entry.date}"
misc = "Posted on ${formatDate 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: '' entryToDiv = defun [ entry string ] (entry: ''
<a href="${entry.url}" class="entry ${entry.class}"> <a href="${entryUrl entry}" id="${toString entry.date}" class="entry">
<div> ${entryTitle entry}
<p class="entry-title">${escape entry.title}</p>
${ ${
lib.optionalString ((entry ? description) && (entry.description != null)) lib.optionalString (hasDescription entry)
"<p class=\"entry-description\">${escape entry.description}</p>" "<span class=\"entry-description\">${escape entry.description}</span>"
} }
<p class="entry-date">${formatEntryDate entry}</p>
</div>
</a> </a>
''); '');

View file

@ -1,3 +1,9 @@
let
note = date: description: {
class = "note";
inherit description date;
};
in
[ [
{ {
class = "misc"; class = "misc";
@ -5,8 +11,7 @@
url = "https://t.me/tazlog"; url = "https://t.me/tazlog";
date = 1643321164; date = 1643321164;
description = '' description = ''
My new channel on Telegram, for occasional updates smaller (and My Telegram channel with occasional random life updates and musings.
more frequent) than what ends up being posted here.
''; '';
} }
{ {
@ -15,8 +20,7 @@
url = "https://changelog.com/shipit/37"; url = "https://changelog.com/shipit/37";
date = 1641819600; date = 1641819600;
description = '' description = ''
Episode #37 of Ship It!, a podcast about systems, featuring me. Podcast episode about TVL, Nix, monorepos and all sorts of related things.
We talk about TVL, Nix, monorepos and related things.
''; '';
} }
{ {
@ -24,9 +28,7 @@
title = "Tvix"; title = "Tvix";
url = "https://tvl.fyi/blog/rewriting-nix"; url = "https://tvl.fyi/blog/rewriting-nix";
date = 1638381387; date = 1638381387;
description = '' description = "TVL is rewriting Nix with funding from NLNet.";
TVL is rewriting Nix with funding from NLNet.
'';
} }
{ {
class = "misc"; class = "misc";
@ -34,8 +36,7 @@
url = "https://www.youtube.com/watch?v=P-2P3MSZrBM"; url = "https://www.youtube.com/watch?v=P-2P3MSZrBM";
date = 1594594800; date = 1594594800;
description = '' description = ''
A fascinating, mind-bending interview by Lex Fridman with Joscha Mind-bending discussion with philosopher Joscha Bach.
Bach about the Nature of the Universe.
''; '';
} }
{ {
@ -43,7 +44,7 @@
title = "The Virus Lounge"; title = "The Virus Lounge";
url = "https://tvl.fyi"; url = "https://tvl.fyi";
date = 1587435629; 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"; class = "project";
@ -71,7 +72,7 @@
title = "dottime"; title = "dottime";
url = "https://dotti.me/"; url = "https://dotti.me/";
date = 1560898800; date = 1560898800;
description = "A universal convention for conveying time (by edef <3)"; description = "A universal convention for conveying time";
} }
{ {
class = "project"; class = "project";
@ -86,18 +87,63 @@
url = "https://principiadiscordia.com/book/1.php"; url = "https://principiadiscordia.com/book/1.php";
date = 1495494000; date = 1495494000;
description = '' description = ''
The Principia is a short book I read as a child, and didn't A short book about everything that everyone should read.
understand until much later. It shaped much of my world view.
''; '';
} }
{ {
class = "misc"; class = "misc";
title = "This Week in Virology"; title = "Nix не только пакетный менеджер";
url = "http://www.microbe.tv/twiv/"; date = 1663923600;
date = 1585517557; url = "https://www.youtube.com/watch?v=0Lhahzs-Wos";
description = '' description = "Двухчасовой (!) разговор с введением в Nix, NixOS и так далее";
Podcast with high-quality information about virology,
epidemiology and so on. Highly relevant to COVID19.
'';
} }
{
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.")
] ]

View file

@ -4,7 +4,7 @@
with depot.nix.yants; with depot.nix.yants;
let let
inherit (builtins) map readFile; inherit (builtins) filter map readFile;
inherit (lib) max singleton; inherit (lib) max singleton;
inherit (pkgs) writeText; inherit (pkgs) writeText;
inherit (depot.web) blog atom-feed; inherit (depot.web) blog atom-feed;
@ -23,7 +23,7 @@ let
}); });
allEntries = (with depot.users.tazjin.blog; map (blog.toFeedEntry config) posts) allEntries = (with depot.users.tazjin.blog; map (blog.toFeedEntry config) posts)
++ (map pageEntryToEntry pageEntries); ++ (map pageEntryToEntry (filter (e: e.class != "note") pageEntries));
feed = { feed = {
id = "https://tazj.in/"; id = "https://tazj.in/";

View file

@ -3,6 +3,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="tazjin&#39;s blog"> <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/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="icon" type="image/webp" href="/static/favicon.webp">
<link rel="alternate" type="application/atom+xml" href="/feed.atom"> <link rel="alternate" type="application/atom+xml" href="/feed.atom">
<title>tazjin&#39;s interblag</title> <title>tazjin&#39;s interblag</title>
@ -15,22 +16,14 @@
<hr> <hr>
</header> </header>
<div class="introduction"> <div class="introduction">
<p>Hi, I'm tazjin.</p>
<p> <p>
I spend a lot of my time hacking on the Below are some of
<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
my <span class="project">projects</span>, <span class="blog">blog my <span class="project">projects</span>, <span class="blog">blog
posts</span> and some <span class="misc">random things</span> by posts</span>, <span class="note">notes</span> and some
me or others. If you'd like to get in touch about anything, send other <span class="misc">random things</span>. If you'd like to
me a mail at mail@[this domain] or ping me on IRC. 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> </p>
<hr>
</div> </div>
<div class="entry-container"> <div class="entry-container">

View file

@ -35,10 +35,6 @@ body {
font-family: jetbrains-mono, monospace; font-family: jetbrains-mono, monospace;
} }
p, a :not(.uncoloured-link) {
color: inherit;
}
h1, h2, h3 { h1, h2, h3 {
line-height: 1.2 line-height: 1.2
} }
@ -54,64 +50,6 @@ article p {
margin: 1.4em auto; 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 */ /* Blog styling */
.light { .light {