Subject: [PATCH] feat(web/tvl): Make svg graph full width

From: Griffin Smith <[email-masked]>
Date: Fri, 24 Apr 2020 11:24:00 -0400

Use a runCommand with xmlstarlet to pull the width out of the svg, and
then some css calc stuff to make it display full width (per what
graphviz spits out) but wider than the rest of the page and horizontally
centered, except on mobile where it scrolls horizontally.
---
 third_party/default.nix |  1 +
 web/tvl/default.nix     | 27 ++++++++++++++++++++++-----
 2 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/third_party/default.nix b/third_party/default.nix
index f62c125..f3c01c6 100644
--- a/third_party/default.nix
+++ b/third_party/default.nix
@@ -111,6 +111,7 @@ let
       writeShellScriptBin
       writeText
       writeTextFile
+      xmlstarlet
       xz
       zlib
       zstd;
diff --git a/web/tvl/default.nix b/web/tvl/default.nix
index b766090..fe2e201 100644
--- a/web/tvl/default.nix
+++ b/web/tvl/default.nix
@@ -9,6 +9,14 @@ let
     ${graphviz}/bin/neato -Tsvg ${./tvl.dot} > $out
   '';
 
+  graphWidth = builtins.readFile (runCommandNoCC "graphWidth" {
+    nativeBuildInputs = with pkgs; [ xmlstarlet ];
+  } ''
+    xmlstarlet sel -N s=http://www.w3.org/2000/svg -t -v 's:svg/@width' \
+      < ${tvlGraph} \
+      > $out
+  '');
+
   homepage = writeText "index.html" ''
     <!DOCTYPE html>
     <head>
@@ -19,9 +27,16 @@ let
       <link rel="icon" type="image/webp" href="/static/favicon.webp">
       <title>The Virus Lounge</title>
       <style>
-        svg {
-          max-width: inherit;
-          height: auto;
+        .svg-container {
+          margin-left: calc((${graphWidth} - 800px) * -0.5);
+        }
+
+        @media screen and (max-width: 800px) {
+          .svg-container {
+            margin-left: 0;
+            max-width: 100%;
+            overflow-x: scroll;
+          }
         }
       </style>
     </head>
@@ -61,7 +76,9 @@ let
       <p>
         It's pretty straightforward. Feel free to click on people, too.
       </p>
-      ${builtins.readFile tvlGraph}
+      <div class="svg-container">
+        ${builtins.readFile tvlGraph}
+      </div>
 
       <hr>
       <footer>
@@ -76,7 +93,7 @@ let
       </footer>
     </body>
   '';
-in runCommandNoCC "website" {} ''
+in runCommandNoCC "website" { passthru = { inherit tvlGraph; }; } ''
   mkdir -p $out/static
   cp ${homepage} $out/index.html
   cp -r ${./static}/* $out/static
-- 
2.25.3