about summary refs log tree commit diff
path: root/web/tvl
diff options
context:
space:
mode:
authorsterni <sternenseemann@systemli.org>2021-05-12T14·00+0200
committersterni <sternenseemann@systemli.org>2021-05-12T15·36+0000
commit040416b3eb6525af6dcd8fb3ae813a2e3e9006c9 (patch)
tree6607ee4592c00cde5d33a3b11c17d29a63da4e4e /web/tvl
parenta989a91f9f13950f50a12c1374bbdccb42cac8c8 (diff)
refactor(web): common template for index pages of tvl and atward r/2585
Use simple string interpolation based approach to templating and allow
changing the main body, the title and to inject extra HTML into the head
element. Additionally we can use `https://tvl.fyi/` instead of `/` when
referring to assets.

One limitation currently is that the template only works for index pages
(it link to self using `href="/"`), but this should be easy to fix.

For atward, instead of using the `onload` attribute of `body`, we now
register an event listener in JavaScript which makes the template code
less complicated. When building the derivation the template is rendered
to HTML and injected into the source.

Change-Id: I2ea0c5bf5f6286e781285ade7751a348bab3bdc8
Reviewed-on: https://cl.tvl.fyi/c/depot/+/3112
Tested-by: BuildkiteCI
Reviewed-by: tazjin <mail@tazj.in>
Diffstat (limited to 'web/tvl')
-rw-r--r--web/tvl/default.nix51
-rw-r--r--web/tvl/template/default.nix52
2 files changed, 65 insertions, 38 deletions
diff --git a/web/tvl/default.nix b/web/tvl/default.nix
index 2321f2e00a0d..e79c47b53162 100644
--- a/web/tvl/default.nix
+++ b/web/tvl/default.nix
@@ -9,28 +9,9 @@ let
     ${graphviz}/bin/neato -Tsvg ${./tvl.dot} > $out
   '';
 
-  homepage = writeText "index.html" ''
-    <!DOCTYPE html>
-    <head>
-      <meta charset="utf-8">
-      <meta name="viewport" content="width=device-width, initial-scale=1">
-      <meta name="description" content="The Virus Lounge">
-      <link rel="stylesheet" type="text/css" href="/static/tazjin.css" media="all">
-      <link rel="icon" type="image/webp" href="/static/favicon.webp">
-      <title>The Virus Lounge</title>
-      <style>
-        svg {
-          max-width: inherit;
-          height: auto;
-        }
-      </style>
-    </head>
-    <body class="light">
-      <header>
-        <h1><a class="blog-title" href="/">The Virus Lounge</a> </h1>
-        <hr>
-      </header>
-
+  homepage = depot.web.tvl.template {
+    title = "The Virus Lounge";
+    content = ''
       <main>
         <img alt="The Virus Lounge" src="/static/virus_lounge.webp">
       </main>
@@ -49,22 +30,16 @@ let
         It's pretty straightforward. Feel free to click on people, too.
       </p>
       ${builtins.readFile tvlGraph}
-
-      <hr>
-      <footer>
-        <p class="footer">
-          <a class="uncoloured-link" href="https://cs.tvl.fyi/depot/-/blob/README.md">code</a>
-          |
-          <a class="uncoloured-link" href="https://cl.tvl.fyi/">reviews</a>
-          |
-          <a class="uncoloured-link" href="https://b.tvl.fyi/">bugs</a>
-          |
-          <a class="uncoloured-link" href="https://todo.tvl.fyi/">todos</a>
-        </p>
-        <p class="lod">ಠ_ಠ</p>
-      </footer>
-    </body>
-  '';
+    '';
+    extraHead = ''
+      <style>
+        svg {
+          max-width: inherit;
+          height: auto;
+        }
+      </style>
+    '';
+  };
 in runCommandNoCC "website" {} ''
   mkdir -p $out/static
   cp ${homepage} $out/index.html
diff --git a/web/tvl/template/default.nix b/web/tvl/template/default.nix
new file mode 100644
index 000000000000..26efef6de32f
--- /dev/null
+++ b/web/tvl/template/default.nix
@@ -0,0 +1,52 @@
+{ depot, pkgs, ... }:
+
+{ # content of the <title> tag
+  title
+  # main part of the page, usually wrapped with <main>
+, content
+  # optional extra html to inject into <head>
+, extraHead ? null
+  # whether to use global URLs instead of absolute paths
+, useUrls ? false
+}@args:
+
+let
+  inherit (pkgs) writeText lib;
+
+  baseUrl = lib.optionalString useUrls "https://tvl.fyi";
+in
+
+writeText "index.html" (''
+  <!DOCTYPE html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="description" content="The Virus Lounge">
+    <link rel="stylesheet" type="text/css" href="${baseUrl}/static/tazjin.css" media="all">
+    <link rel="icon" type="image/webp" href="${baseUrl}/static/favicon.webp">
+    <title>${title}</title>
+'' + lib.optionalString (args ? extraHead) extraHead + ''
+  </head>
+  <body class="light">
+    <header>
+      <h1><a class="blog-title" href="/">${title}</a> </h1>
+      <hr>
+    </header>
+
+    ${content}
+
+    <hr>
+    <footer>
+      <p class="footer">
+        <a class="uncoloured-link" href="https://cs.tvl.fyi/depot/-/blob/README.md">code</a>
+        |
+        <a class="uncoloured-link" href="https://cl.tvl.fyi/">reviews</a>
+        |
+        <a class="uncoloured-link" href="https://b.tvl.fyi/">bugs</a>
+        |
+        <a class="uncoloured-link" href="https://todo.tvl.fyi/">todos</a>
+      </p>
+      <p class="lod">ಠ_ಠ</p>
+    </footer>
+  </body>
+'')