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>

5 files changed, 151 insertions, 114 deletions

diff --git a/web/atward/build.rs b/web/atward/build.rs
new file mode 100644
index 000000000000..5dadba3bf352
--- /dev/null
+++ b/web/atward/build.rs
@@ -0,0 +1,50 @@
+//! Build script that can be used outside of Nix builds to inject the
+//! ATWARD_INDEX_HTML variable when building in development mode.
+//!
+//! Note that this script assumes that atward is in a checkout of the
+//! TVL depot.
+
+use std::process::Command;
+
+static ATWARD_INDEX_HTML: &str = "ATWARD_INDEX_HTML";
+static ERROR_MESSAGE: &str = r#"Failed to build index page.
+
+When building during development, atward expects to be in a checkout
+of the TVL depot. This is required to automatically build the index
+page that is needed at compile time.
+
+As atward can not automatically detect the location of the page,
+you must set the `ATWARD_INDEX_HTML` environment variable to the
+right path.
+
+The expected page is build using the files in //web/atward/indexHtml
+in the depot."#;
+
+fn main() {
+    // Do nothing if the variable is already set (e.g. via Nix)
+    if let Ok(_) = std::env::var(ATWARD_INDEX_HTML) {
+        return;
+    }
+
+    // Otherwise ask Nix to build it and inject the result.
+    let output = Command::new("nix-build")
+        .arg("-A").arg("web.atward.indexHtml")
+        // ... assuming atward is at //web/atward ...
+        .arg("../..")
+        .output()
+        .expect(ERROR_MESSAGE);
+
+    if !output.status.success() {
+        eprintln!("{}\nNix output: {}", ERROR_MESSAGE, String::from_utf8_lossy(&output.stderr));
+        return;
+    }
+
+    let out_path = String::from_utf8(output.stdout)
+        .expect("Nix returned invalid output after building index page");
+
+    // Return an instruction to Cargo that will set the environment
+    // variable during rustc calls.
+    //
+    // https://doc.rust-lang.org/cargo/reference/build-scripts.html#cargorustc-envvarvalue
+    println!("cargo:rustc-env={}={}", ATWARD_INDEX_HTML, out_path.trim());
+}
diff --git a/web/atward/default.nix b/web/atward/default.nix
index e50ac32be452..f3ed04345c32 100644
--- a/web/atward/default.nix
+++ b/web/atward/default.nix
@@ -2,4 +2,7 @@
 
 depot.third_party.naersk.buildPackage {
   src = ./.;
+  override = x: {
+    ATWARD_INDEX_HTML = depot.web.atward.indexHtml;
+  };
 }
diff --git a/web/atward/indexHtml/default.nix b/web/atward/indexHtml/default.nix
new file mode 100644
index 000000000000..acb7b6acc792
--- /dev/null
+++ b/web/atward/indexHtml/default.nix
@@ -0,0 +1,97 @@
+{ depot, ... }:
+
+depot.web.tvl.template {
+  useUrls = true;
+  title = "atward";
+  content = ''
+    <p>
+      <b>atward</b> is <a href="https://tvl.fyi/">TVL's</a> search
+      service. It can be configured as a browser search engine for easy
+      access to TVL bugs, code reviews, code paths and more.
+    </p>
+
+    <h3>Setting up atward</h3>
+    <p>
+      To configure atward, add a search engine to your browser with the
+      following search string:
+      <pre>  https://at.tvl.fyi/?q=%s</pre>
+      Consider setting a shortcut, for example <b>t</b> or <b>tvl</b>.
+      You can now quickly access TVL resources by typing something
+      like <kbd>t b/42</kbd> in your URL bar to get to the bug with ID
+      42.
+    </p>
+
+    <h3>Supported queries</h3>
+    <p>
+      The following query types are supported in atward:
+      <ul>
+        <li><kbd>b/42</kbd> - access bugs with ID 42</li>
+        <li><kbd>cl/3087</kbd> - access changelist with ID 3087</li>
+        <li><kbd>//web/atward</kbd> - open the <b>//web/atward</b> path in TVLs monorepo</li>
+      </ul>
+    </p>
+
+    <h3>Configuration</h3>
+    <p>
+      Some behaviour of atward can be configured by adding query
+      parameters to the search string:
+      <ul>
+        <li><kbd>cs=true</kbd> - use Sourcegraph instead of cgit to view code</li>
+      </ul>
+    </p>
+    <p>
+      In some browsers (like Firefox) users can not edit query
+      parameters for search engines. As an alternative configuration can
+      be supplied via cookies with the same names as the configuration
+      parameters.
+    </p>
+    <p>
+      The form below can set this configuration:
+      <form class="cheddar-callout cheddar-todo">
+        <input type="checkbox"
+               id="cs-setting"
+               onchange="saveSetting(this, 'cs');"
+               > Use Sourcegraph instead of cgit</input>
+      </form>
+    </p>
+    <noscript>
+      <p class="cheddar-callout cheddar-warning">
+        The form above only works with Javascript enabled. Only a few
+        lines of Javascript are used, and they are licensed under a
+        free-software license (MIT).
+      </p>
+    </noscript>
+
+    <h3>Source code</h3>
+    <p>
+      atward's source code lives
+      at <a href="https://atward.tvl.fyi/?q=%2F%2Fweb%2Fatward">//web/atward</a>.
+    </p>
+    '';
+  extraHead = ''
+    <script>
+      /* Initialise the state of all settings. */
+      function loadSettings() {
+          loadSetting(document.getElementById('cs-setting'), 'cs');
+      }
+
+      /* Initialise the state of a setting from a cookie. */
+      function loadSetting(checkbox, name) {
+          if (document.cookie.split(';').some(function(cookie) {
+              return cookie.indexOf(`''${name}=true`) >= 0;
+          })) {
+              checkbox.checked = true;
+          }
+      }
+
+      /* Persist the state of a checkbox in a cookie */
+      function saveSetting(checkbox, name) {
+          console.log(`setting atward parameter '''''${name}' to ''${checkbox.checked.toString()}`);
+          document.cookie = `''${name}=''${checkbox.checked.toString()};`;
+      }
+
+      document.addEventListener('DOMContentLoaded', loadSettings);
+    </script>
+    <link rel="search" type="application/opensearchdescription+xml" title="TVL Search" href="https://at.tvl.fyi/opensearch.xml">
+  '';
+}
diff --git a/web/atward/src/index.html b/web/atward/src/index.html
deleted file mode 100644
index a62d168bda0e..000000000000
--- a/web/atward/src/index.html
+++ /dev/null
@@ -1,113 +0,0 @@
-<!DOCTYPE html>
-<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="https://tvl.fyi/static/tazjin.css" media="all">
-<link rel="icon" type="image/webp" href="https://tvl.fyi/static/favicon.webp">
-<link rel="search" type="application/opensearchdescription+xml" title="TVL Search" href="https://at.tvl.fyi/opensearch.xml">
-<title>TVL Search</title>
-<script>
-  /* Initialise the state of all settings. */
-  function loadSettings() {
-      loadSetting(document.getElementById('cs-setting'), 'cs');
-  }
-
-  /* Initialise the state of a setting from a cookie. */
-  function loadSetting(checkbox, name) {
-      if (document.cookie.split(';').some(function(cookie) {
-          return cookie.indexOf(`${name}=true`) >= 0;
-      })) {
-          checkbox.checked = true;
-      }
-  }
-
-  /* Persist the state of a checkbox in a cookie */
-  function saveSetting(checkbox, name) {
-      console.log(`setting atward parameter '${name}' to ${checkbox.checked.toString()}`);
-      document.cookie = `${name}=${checkbox.checked.toString()};`;
-  }
-</script>
-<body class="light" onload="loadSettings();">
-  <header>
-    <h1><a class="blog-title" href="/">atward</a></h1>
-    <hr/>
-  </header>
-
-  <p>
-    <b>atward</b> is <a href="https://tvl.fyi/">TVL's</a> search
-    service. It can be configured as a browser search engine for easy
-    access to TVL bugs, code reviews, code paths and more.
-  </p>
-
-  <h3>Setting up atward</h3>
-  <p>
-    To configure atward, add a search engine to your browser with the
-    following search string:
-    <pre>  https://at.tvl.fyi/?q=%s</pre>
-    Consider setting a shortcut, for example <b>t</b> or <b>tvl</b>.
-    You can now quickly access TVL resources by typing something
-    like <kbd>t b/42</kbd> in your URL bar to get to the bug with ID
-    42.
-  </p>
-
-  <h3>Supported queries</h3>
-  <p>
-    The following query types are supported in atward:
-    <ul>
-      <li><kbd>b/42</kbd> - access bugs with ID 42</li>
-      <li><kbd>cl/3087</kbd> - access changelist with ID 3087</li>
-      <li><kbd>//web/atward</kbd> - open the <b>//web/atward</b> path in TVLs monorepo</li>
-    </ul>
-  </p>
-
-  <h3>Configuration</h3>
-  <p>
-    Some behaviour of atward can be configured by adding query
-    parameters to the search string:
-    <ul>
-      <li><kbd>cs=true</kbd> - use Sourcegraph instead of cgit to view code</li>
-    </ul>
-  </p>
-  <p>
-    In some browsers (like Firefox) users can not edit query
-    parameters for search engines. As an alternative configuration can
-    be supplied via cookies with the same names as the configuration
-    parameters.
-  </p>
-  <p>
-    The form below can set this configuration:
-    <form class="cheddar-callout cheddar-todo">
-      <input type="checkbox"
-             id="cs-setting"
-             onchange="saveSetting(this, 'cs');"
-             > Use Sourcegraph instead of cgit</input>
-    </form>
-  </p>
-  <noscript>
-    <p class="cheddar-callout cheddar-warning">
-      The form above only works with Javascript enabled. Only a few
-      lines of Javascript are used, and they are licensed under a
-      free-software license (MIT).
-    </p>
-  </noscript>
-
-  <h3>Source code</h3>
-  <p>
-    atward's source code lives
-    at <a href="https://atward.tvl.fyi/?q=%2F%2Fweb%2Fatward">//web/atward</a>.
-  </p>
-
-  <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>
diff --git a/web/atward/src/main.rs b/web/atward/src/main.rs
index b29877c6c00e..7d6ded16e459 100644
--- a/web/atward/src/main.rs
+++ b/web/atward/src/main.rs
@@ -144,7 +144,7 @@ fn opensearch() -> Response {
 /// Render the atward index page which gives users some information
 /// about how to use the service.
 fn index() -> Response {
-    Response::html(include_str!("index.html"))
+    Response::html(include_str!(env!("ATWARD_INDEX_HTML")))
 }
 
 /// Render the fallback page which informs users that their query is