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>

1 files changed, 97 insertions, 0 deletions

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">
+  '';
+}