From 2a73a5899124fa15c3962b9bd385ebd415a0ccf9 Mon Sep 17 00:00:00 2001 From: Akshay Nair Date: Tue, 10 Jun 2025 13:06:48 +0530 Subject: Add dashboard for linking services --- modules/dashboard/dashboard-template.nix | 114 +++++++++++++++++++++++++++++++ 1 file changed, 114 insertions(+) create mode 100644 modules/dashboard/dashboard-template.nix (limited to 'modules/dashboard/dashboard-template.nix') diff --git a/modules/dashboard/dashboard-template.nix b/modules/dashboard/dashboard-template.nix new file mode 100644 index 0000000..a1df813 --- /dev/null +++ b/modules/dashboard/dashboard-template.nix @@ -0,0 +1,114 @@ +{ title, links, ... }: +with builtins; +let + withLinkAttr = link: attr: def: value: + if hasAttr attr link then value else def; + + linkHTML = link: '' +
+ + ${link.title} ${if hasAttr "key" link then "(${link.key})" else ""} +
${link.url}
+ +
+ ''; + + script = '' + window.addEventListener('keydown', (event) => { + const noMod = !event.ctrlKey && !event.altKey; + ${concatStringsSep "\n" (map (link: + withLinkAttr link "key" "" '' + if (event.key.toLowerCase() == ${toJSON link.key} && noMod) { + event.preventDefault(); + if (event.shiftKey) + window.open(${toJSON link.url}); + else + window.location.href = ${toJSON link.url}; + return; + } + '' + ) links)} + }); + ''; + + styles = '' + :root { + font-size: 16px; + color: #dbe0f9; + font-family: JetBrains Mono, monospace; + } + html, body { + background-color: #0f0c19; + padding: 0; + margin: 0; + } + body * { box-sizing: border-box; } + header { + padding: 1rem 2rem; + background-color: #000; + } + .links-container { + display: grid; + gap: 1rem; + grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); + padding: 0 1rem; + width: 100%; + margin: 1rem auto; + max-width: 1200px + } + .card { + --color-card-accent: #8e7ae3; + display: block; + padding: 1rem 1.5rem; + font-size: 1.2rem; + color: var(--color-card-accent); + text-decoration: none; + border: 2px solid #1a1824; + position: relative; + } + .card::before { + content: " "; + position: absolute; + left: 0; top: 0; + width: 4px; height: 100%; + background-color: var(--color-card-accent); + } + .card:hover { + border-color: var(--color-card-accent); + background-color: rgba(255,255,255,0.05); + } + .card:focus { + border-color: var(--color-card-accent); + outline: none; + } + .card-link { + font-size: 0.5em; + padding-top: 1em; + color: gray; + } + ''; + + headerHTML = '' +
+ ${title} +
+ ''; +in +'' + + + + + + ${title} + + + + ${headerHTML} +
+ ${concatStringsSep "" (map linkHTML links)} +
+ + + +'' -- cgit v1.3.1