Okay, done!

footer.html

@@ -1,6 +1,7 @@
+		</main>
 		<footer>
-			<div>Last updated $lastupdated</div>
-			<div>Created with love by Zeus WPI</div>
+			<p>Last updated $lastupdated</p>
+			<p>Created with ♥ by Zeus WPI · <a href="https://git.zeus.gent/midgard/mattermost-channels">Source code</a></p>
 		</footer>
 	</body>
 </html>

gen.sh

@@ -1,7 +1,10 @@
 #!/bin/sh
 set -euo pipefail
 
-export MM_SERVER=zeus.mattermost.gent
+if [ -z "$MM_SERVER" ]; then
+	echo "Set environment variable MM_SERVER to e.g. mattermost.example.com"
+	exit 1
+fi
 mattermost_name="Zeus Mattermost"
 team_name="zeus"
 
@@ -10,6 +13,9 @@ dir="$(dirname "$0")"
 out="$dir/dist/channels/index.html"
 mkdir -p "$(dirname "$out")"
 
+cp go_to_channel.png dist/
+cp main.css dist/
+
 custom_emoji_file="$(mktemp --tmpdir custom_emoji.XXXXXXXXXX.json)"
 mmcli listcustomemoji | jq -s > "$custom_emoji_file"
 
@@ -30,11 +36,20 @@ emoji() {
 
 markdown() {
 	htmlescape | \
-		{ pandoc --from=markdown --to=html || printf "Markdown conversion failed\n" >&2; } | \
-		sed 's/src="\(.*\)"/src=""/g' | \
+		{ pandoc --from=markdown+autolink_bare_uris+emoji --to=html || printf "Markdown conversion failed\n" >&2; } | \
+		sed -E '
+			s|<(h[0-6])[^>]*>|<div class="\1">|g
+			s|</(h[0-6])>|</div>|g
+			s/src="\(.*\)"/src=""/g
+			' | \
+		sed -f "$channels_sed_file" | \
 		emoji
 }
 
+format_number() {
+	awk '{printf "%'\''d\n", $1}'
+}
+
 format_timestamp() {
 	format_str="$1"
 	xargs -Ixxx date --date "@xxx" "+$format_str"
@@ -42,6 +57,9 @@ format_timestamp() {
 
 channels="$(mmcli ls "$team_name" | jq -cs 'sort_by(- .last_post_at) | .[]')"
 channel_count="$(jqo "$channels" -s 'length')"
+channels_sed_file="$(mktemp --tmpdir "mattermost_channels.XXXXXXXXX.sed")"
+jqo "$channels" -s 'map(.name) | sort_by(length) | reverse | .[]' | sed 's|.*|s/~&/<a href=\"#channel_&\">CHANNEL[&]<\\/a>/g|' > "$channels_sed_file"
+printf 's/CHANNEL\\[\\([^]]*\\)\\]/~\\1/g\n' >> "$channels_sed_file"
 
 substitute_vars() {
 	sed '
@@ -63,28 +81,48 @@ printf '%s\n' "$channels" | while IFS="" read -r chan || [ -n "$chan" ]; do
 	header="$(jqo "$chan" '.header' | markdown)"
 	create_at="$(jqo "$chan" '.create_at / 1000' | format_timestamp '%Y-%m-%d')"
 	last_post_at="$(jqo "$chan" '.last_post_at / 1000' | format_timestamp '%Y-%m-%d %H:%M')"
-	total_msg_count="$(jqo "$chan" '.total_msg_count')"
+	total_msg_count="$(jqo "$chan" '.total_msg_count' | format_number)"
 
 	cat >> "$out" <<HERE
-		<div class="channel" id="channel_$name">
-			<h3><a href="https://mattermost.zeus.gent/zeus/$name">$display_name</a></h3>
-			<dl>
-				<dt>Channel purpose</dt>
-				<dd class="purpose">$purpose</dd>
-
-				<dt>Channel header</dt>
-				<dd class="header">$header</dd>
-
-				<dt>Channel created on</dt>
-				<dd class="create_at">$create_at</dd>
-
-				<dt>Last message</dt>
-				<dd class="last_post_at">$last_post_at</dd>
-
-				<dt>Total amount of messages</dt>
-				<dd class="total_msg_count">$total_msg_count</dd>
-			</dl>
+<div class="channel" id="channel_$name">
+	<h2>$display_name <a href="https://mattermost.zeus.gent/zeus/$name"><img src="../go_to_channel.png" alt="Go to channel" class="go_to_channel" /></a></h2>
+	<dl>
+HERE
+	if [ -n "$purpose" ]; then
+		cat >> "$out" <<HERE
+		<div class="purpose">
+			<dt>Purpose</dt>
+			<dd>$purpose</dd>
 		</div>
+
+HERE
+	fi
+	if [ -n "$header" ]; then
+		cat >> "$out" <<HERE
+		<div class="header">
+			<dt>Header</dt>
+			<dd>$header</dd>
+		</div>
+
+HERE
+	fi
+	cat >> "$out" <<HERE
+		<div class="stats">
+			<div class="create_at">
+				<dt>Created on</dt>
+				<dd>$create_at</dd>
+			</div>
+			<div class="last_post_at">
+				<dt>Last message</dt>
+				<dd>$last_post_at</dd>
+			</div>
+			<div class="total_msg_count">
+				<dt>Amount of messages</dt>
+				<dd>$total_msg_count</dd>
+			</div>
+		</div>
+	</dl>
+</div>
 HERE
 	done
 

header.html

@@ -4,14 +4,11 @@
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width">
 		<title>$mattermost_name channels</title>
-<style>
-img.emoji {
-	width: 1em;
-	height: 1em;
-	vertical-align: center;
-}
-</style>
+		<link href="../main.css" rel="stylesheet" />
 	</head>
 	<body>
-		<h1>$mattermost_name channels</h1>
-		<p>A list of all $channel_count public channels in the team $team_name on $mattermost_name, as of $lastupdated</p>
+		<header>
+			<h1>$mattermost_name channels</h1>
+			<p>A list of all $channel_count public channels in the team <tt>$team_name</tt> on $mattermost_name, as of $lastupdated</p>
+		</header>
+		<main>

main.css

@@ -0,0 +1,102 @@
+* {
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
+}
+
+body {
+	font-family: sans-serif;
+	background-color: #121212; /* Dark background */
+	color: #c9c2c0; /* Light text color */
+	line-height: 1.6;
+	padding: 20px;
+}
+
+@media (max-width: 600px) {
+	body {
+		padding: 10px;
+	}
+}
+
+h1 { font-size: 125%; }
+
+h2 { font-size: 110%; }
+
+h3 { font-size: 105%; }
+
+.h1, .h2, .h3, .h4, .h5, .h6 {
+	font-weight: bold;
+}
+
+a {
+	color: #ff7000;
+	text-decoration: none;
+	transition: color 0.3s;
+}
+a:hover {
+	color: #efa76f;
+}
+
+dl {
+	margin-left: 0.4em;
+}
+
+dt {
+	font-weight: bold;
+	color: #8f6254;
+	margin-top: 0.625em;
+	text-transform: uppercase;
+	font-size: 75%;
+}
+
+dd {
+	margin-left: 0.4em;
+}
+
+@media (min-width: 590px) {
+	.stats {
+		display: flex;
+	}
+	.stats > * {
+		flex-grow: 1;
+	}
+}
+
+header, footer {
+	text-align: center;
+	margin: 1em 0;
+}
+
+/* Card Style */
+.channel {
+	background-color: #1E1E1E; /* Card background */
+	border-radius: 1em;
+	padding: 0.7em 1em 1em;
+	margin: 1em auto;
+	max-width: 75em;
+	box-shadow: 0 0.3em 0.5em rgba(0, 0, 0, 1);
+}
+
+@media (min-width: 1000px) {
+	header, footer {
+		margin: 3em 0;
+		font-size: 125%;
+	}
+
+	.channel {
+		margin-bottom: 2em;
+	}
+}
+
+img.emoji {
+	width: 1em;
+	height: 1em;
+	vertical-align: text-bottom;
+}
+
+img.go_to_channel {
+	margin-left: 0.3em;
+	width: 0.8em;
+	height: 0.8em;
+	vertical-align: baseline;
+}