From: Griffin Smith <griffin@urbint•com>
To: depot@tazj.in
Cc: Griffin Smith <root@gws•fyi>
Subject: [PATCH] feat(web/tvl): Make svg graph full width
Date: Fri, 24 Apr 2020 11:24:00 -0400 [thread overview]
Message-ID: <20200424152400.11761-1-root@gws.fyi> (raw)
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
reply other threads:[~2020-04-24 15:24 UTC|newest]
Thread overview: [no followups] expand[flat|nested] mbox.gz Atom feed
Reply instructions:
You may reply publicly to this message via plain-text email
using any one of the following methods:
* Save the following mbox file, import it into your mail client,
and reply-to-all from there: mbox
Avoid top-posting and favor interleaved quoting:
https://en.wikipedia.org/wiki/Posting_style#Interleaved_style
* Reply using the --to, --cc, and --in-reply-to
switches of git-send-email(1):
git send-email \
--in-reply-to=20200424152400.11761-1-root@gws.fyi \
--to=griffin@urbint$(echo .)com \
--cc=depot@tazj.in \
--cc=root@gws$(echo .)fyi \
/path/to/YOUR_REPLY
https://kernel.org/pub/software/scm/git/docs/git-send-email.html
Be sure your reply has a Subject: header at the top and a blank line
before the message body.
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).