commit 584d65d8be6b5848ab341614963a118676d263aa
from: Omar Polo <op@omarpolo.com>
date: Wed Aug 24 14:17:45 2022 UTC

use nested list for the threading

more idiomatic and works better on text browsers too!

commit - e588f9d0bf1075d57cc3210767e066bfc76b3c41
commit + 584d65d8be6b5848ab341614963a118676d263aa
blob - 725f605f6ba88ebd61e5d2a49f24619b9d8f258f
blob + 797e5aa6783dea7190e7121cf4810a8f8bcafdd6
--- mkindex
+++ mkindex
@@ -11,6 +11,8 @@ die 'Set $OUTDIR' unless defined $outdir;
 mkdir $outdir;
 
 my $tfh;
+my $threads_seen = 0;
+my $last_level = 0;
 
 my $logo = <<EOF;
 <img srcset='/got-tiny.png, /got-tiny@2x.png 2x'
@@ -55,23 +57,39 @@ sub nextthread {
 	print $tfh $logo;
 	print $tfh "<a href='/'>‹ Back to the index</a>";
 	print $tfh "</p>";
-	print $tfh "<dl><dt>Thread:</dt><dd>$subj</dd>";
+	print $tfh "<dl><dt>Thread:</dt><dd>$subj</dd></dl>";
 	print $tfh "</header>\n";
-	print $tfh "<div class='thread'>\n";
+	# print $tfh "<div class='thread'><ul class='mails'>\n";
 }
 
 sub endthread {
-	print $tfh "</div>\n";
+	say $tfh "</ul></li>" x $last_level;
+	say $tfh "</ul></div>\n";
 	endpage($tfh);
 	close($tfh);
+
+	$last_level = 0;
 }
 
 sub entry_raw {
-	my ($fh, $mid, $level, $date, $from, $subj) = @_;
+	my ($fh, $sep, $mid, $level, $date, $from, $subj) = @_;
+	my $new_thread = $level == 0;
 
-	my $class = "";
-	$class = "reply indent-$level" unless $level == 0;
-	print $fh "<div id='$mid' class='mail $class'>";
+	say $fh "</ul>\n</li>" x ($last_level - $level) if $last_level > $level;
+	say $fh "</ul>\n</div>$sep" if $threads_seen && $new_thread;
+
+	if ($new_thread) {
+		nextthread($mid, $subj);
+		say $fh "<div class='thread'>";
+	}
+
+	if ($last_level < $level) {
+		say $fh "<li>\n<ul>";
+	} elsif ($last_level == 0) {
+		say $fh "<ul class='mails'>";
+	}
+
+	print $fh "<li id='$mid' class='mail'>";
 	print $fh "<p class='mail-meta'>";
 	print $fh "<time>$date</time> ";
 	print $fh "<span class='from'>$from</span>";
@@ -83,12 +101,12 @@ sub entry_raw {
 	print $fh "<p class='subject'>";
 	print $fh "<a href='/$mid.html'>$subj</a>";
 	print $fh "</p>";
-	print $fh "</div>\n";
+	print $fh "</li>\n";
 }
 
 sub entry {
-	entry_raw(\*STDOUT, @_);
-	entry_raw($tfh, @_);
+	entry_raw(\*STDOUT, "<hr />", @_);
+	entry_raw($tfh, "", @_);
 }
 
 initpage(\*STDOUT, "Game of Trees Mail Archive");
@@ -104,7 +122,6 @@ print <<EOF;
 <main>
 EOF
 
-my $threads_seen = 0;
 while (<>) {
 	chomp;
 	m/^[^ ]+ <([^>]+)> (.+)(\d{4}-\d{2}-\d{2} \d{2}:\d{2}) <([^>]+)> (.*)/;
@@ -124,20 +141,14 @@ while (<>) {
 	$subj =~ s/\s+/ /g;
 	$subj =~ s/\s+$//g;
 
-	my $new_thread = $indent eq " ";
-	say "</section> <hr />" if $threads_seen && $new_thread;
-	if ($new_thread) {
-		nextthread($mid, $subj);
-		say "<section class='thread'>";
-	}
-
-	$threads_seen = 1;
-
 	entry($mid, $level, $date, $from, $subj);
+	$last_level = $level;
+	$threads_seen = 1;
 }
 
 if ($threads_seen) {
-	say "</section>" ;
+	say "</ul></li>" x $last_level;
+	say "</ul></div>";
 	endthread();
 }
 
blob - 08feda81eeeffe5cb75954085b5ef040ad19f188
blob + d320d6b334a2a74fedb869a86a7bb53c275594e0
--- style.css
+++ style.css
@@ -65,7 +65,7 @@ hr {
 }
 
 .thread {
-    margin: 2rem 0;
+    margin: 1rem 0;
 }
 
 .thread p {
@@ -80,6 +80,15 @@ hr {
     text-decoration: underline;
 }
 
+.thread ul {
+    padding-left: 1rem;
+    list-style: none;
+}
+
+.thread > ul ul {
+    border-left: 1px dashed #cacaca;
+}
+
 .mail {
     padding: 0.5rem 5px;
 }
@@ -98,18 +107,6 @@ hr {
     white-space: pre;
 }
 
-.mail.indent-1  { padding-left: 15px; }
-.mail.indent-2  { padding-left: 25px; }
-.mail.indent-3  { padding-left: 35px; }
-.mail.indent-4  { padding-left: 45px; }
-.mail.indent-5  { padding-left: 55px; }
-.mail.indent-6  { padding-left: 65px; }
-.mail.indent-7  { padding-left: 75px; }
-.mail.indent-8  { padding-left: 85px; }
-.mail.indent-9  { padding-left: 95px; }
-.mail.indent-10 { padding-left: 105px; }
-
-
 footer {
     margin-top: 70px;
     border-top: 1px solid #333;