* [PATCH] feat(web/tvl): Make svg graph full width
@ 2020-04-24 15:24 Griffin Smith
0 siblings, 0 replies; only message in thread
From: Griffin Smith @ 2020-04-24 15:24 UTC (permalink / raw)
To: depot; +Cc: Griffin Smith
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
^ permalink raw reply [flat|nested] only message in thread
only message in thread, other threads:[~2020-04-24 15:24 UTC | newest]
Thread overview: (only message) (download: mbox.gz / follow: Atom feed)
-- links below jump to the message on this page --
2020-04-24 15:24 [PATCH] feat(web/tvl): Make svg graph full width Griffin Smith
Code repositories for project(s) associated with this public inbox
https://code.tvl.fyi
This is a public inbox, see mirroring instructions
for how to clone and mirror all data and code used for this inbox;
as well as URLs for read-only IMAP folder(s) and NNTP newsgroup(s).