refactor(web/tvl): translate to markdown r/2866

This is mostly equivalent, but we need to accomodate cheddar a bit:

* cheddar doesn't like markdown inside of HTML, so the <main> tag
  around the image needs to go.

* cheddar messes with a top-level SVG for some reason, so we need to
  wrap it in a <div> in order to prevent that.

Change-Id: If9ed516623e81e24f600ee9f1b6d4d611b5bcedd
Reviewed-on: https://cl.tvl.fyi/c/depot/+/3117
Tested-by: BuildkiteCI
Reviewed-by: tazjin <mail@tazj.in>

1 files changed, 21 insertions, 15 deletions

diff --git a/web/tvl/default.nix b/web/tvl/default.nix
index aa1fc225fe..2a471fadc3 100644
--- a/web/tvl/default.nix
+++ b/web/tvl/default.nix
@@ -12,28 +12,34 @@ let
   homepage = depot.web.tvl.template {
     title = "The Virus Lounge";
     content = ''
-      <main>
-        <img alt="The Virus Lounge" src="/static/virus_lounge.webp">
-      </main>
+      ![The Virus Lounge](/static/virus_lounge.webp)
 
-      <p>
-        Welcome to <b>The Virus Lounge</b>. We're a random group of
-        people who feel undersocialised in these trying times, and
-        we've decided that there isn't enough spontaneous socialising
-        on the internet.
-      </p>
+      Welcome to **The Virus Lounge**. We're a random group of
+      people who feel undersocialised in these trying times, and
+      we've decided that there isn't enough spontaneous socialising
+      on the internet.
 
       <hr>
-      <h2>Where did all these people come from?</h2>
 
-      <p>
-        It's pretty straightforward. Feel free to click on people, too.
-      </p>
-      ${builtins.readFile tvlGraph}
+      ## Where did all these people come from?
+
+      It's pretty straightforward. Feel free to click on people, too.
+
+      <div class="tvl-graph-container">
+        <!--
+          cheddar leaves HTML inside of HTML alone,
+          so wrapping the SVG prevents it from messing it up
+        -->
+        ${builtins.readFile tvlGraph}
+      </div>
     '';
     extraHead = ''
       <style>
-        svg {
+        .tvl-graph-container {
+          max-width: inherit;
+        }
+
+        .tvl-graph-container svg {
           max-width: inherit;
           height: auto;
         }