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>
This commit is contained in:
sterni
parent
a989a91f9f
commit
040416b3eb
7 changed files with 216 additions and 152 deletions
50
web/atward/build.rs
Normal file
50
web/atward/build.rs
Normal file
|
|
@ -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());
|
||||
}
|
||||
|
|
@ -2,4 +2,7 @@
|
|||
|
||||
depot.third_party.naersk.buildPackage {
|
||||
src = ./.;
|
||||
override = x: {
|
||||
ATWARD_INDEX_HTML = depot.web.atward.indexHtml;
|
||||
};
|
||||
}
|
||||
|
|
|
|||
97
web/atward/indexHtml/default.nix
Normal file
97
web/atward/indexHtml/default.nix
Normal file
|
|
@ -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">
|
||||
'';
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
52
web/tvl/template/default.nix
Normal file
52
web/tvl/template/default.nix
Normal file
|
|
@ -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>
|
||||
'')
|
||||
Loading…
Reference in a new issue