aboutsummaryrefslogtreecommitdiff
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
parenta989a91f9f13950f50a12c1374bbdccb42cac8c8 (diff)
refactor(web): common template for index pages of tvl and atward
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>
-rw-r--r--web/atward/build.rs50
-rw-r--r--web/atward/default.nix3
-rw-r--r--web/atward/indexHtml/default.nix97
-rw-r--r--web/atward/src/index.html113
-rw-r--r--web/atward/src/main.rs2
-rw-r--r--web/tvl/default.nix51
-rw-r--r--web/tvl/template/default.nix52
7 files changed, 216 insertions, 152 deletions
diff --git a/web/atward/build.rs b/web/atward/build.rs
new file mode 100644
index 000000000..5dadba3bf
--- /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 e50ac32be..f3ed04345 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 000000000..acb7b6acc
--- /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 a62d168bd..000000000
--- 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 b29877c6c..7d6ded16e 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
diff --git a/web/tvl/default.nix b/web/tvl/default.nix
index 2321f2e00..e79c47b53 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 000000000..26efef6de
--- /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>
+'')