diff options
| author | sterni <sternenseemann@systemli.org> | 2021-05-12T14·00+0200 |
|---|---|---|
| committer | sterni <sternenseemann@systemli.org> | 2021-05-12T15·36+0000 |
| commit | 040416b3eb6525af6dcd8fb3ae813a2e3e9006c9 (patch) | |
| tree | 6607ee4592c00cde5d33a3b11c17d29a63da4e4e /web/tvl | |
| parent | a989a91f9f13950f50a12c1374bbdccb42cac8c8 (diff) | |
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>
Diffstat (limited to 'web/tvl')
| -rw-r--r-- | web/tvl/default.nix | 51 | ||||
| -rw-r--r-- | web/tvl/template/default.nix | 52 |
2 files changed, 65 insertions, 38 deletions
diff --git a/web/tvl/default.nix b/web/tvl/default.nix index 2321f2e00a0d..e79c47b53162 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 000000000000..26efef6de32f --- /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> +'') |