mdebray/tvl-depot
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor(web): common template for index pages of tvl and atward

Browse source 
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 2021-05-12 16:00:39 +02:00
parent a989a91f9f
commit 040416b3eb
7 changed files with 216 additions and 152 deletions
Download patch file Download diff file Expand all files Collapse all files

52
web/tvl/template/default.nix Normal file
View 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>
'')