a73x

site/template.html

Ref:   Size: 2.3 KiB   History

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{.Title}}</title>
<meta name="description" content="{{.Description}}">
<link rel="canonical" href="{{.URL}}">
<script>
// Before first paint: a stored choice must not flash the other theme first.
try {
  var t = localStorage.getItem("eitri-theme");
  if (t) document.documentElement.dataset.theme = t;
} catch (e) {}
</script>
<link rel="stylesheet" href="/style.css">
<link rel="icon" href="/favicon.svg">

<!-- What a chat client or a timeline shows when someone pastes the link. -->
<meta property="og:type" content="website">
<meta property="og:site_name" content="eitri">
<meta property="og:title" content="{{.Title}}">
<meta property="og:description" content="{{.Description}}">
<meta property="og:url" content="{{.URL}}">
<meta property="og:image" content="{{.Image}}">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="[E] eitri.sh — the cloud you already own">
<meta name="twitter:card" content="summary_large_image">
</head>
<body>

<nav>
<a href="/"{{if eq .Section "home"}} class="active"{{end}}>home</a>
<a href="/docs/"{{if eq .Section "docs"}} class="active"{{end}}>docs</a>
<a href="/dl/"{{if eq .Section "dl"}} class="active"{{end}}>downloads</a>
<a class="right" href="https://console.eitri.sh">sign in</a>
<span class="sep" hidden>|</span>
<button type="button" class="theme" hidden>theme</button>
</nav>

<script>
// The control only appears where it can work: with no script, the browser's
// own preference still decides and a dead button would be a lie.
(function () {
  var root = document.documentElement, btn = document.querySelector(".theme");
  var sep = document.querySelector(".sep");
  var dark = function () {
    return root.dataset.theme
      ? root.dataset.theme === "dark"
      : matchMedia("(prefers-color-scheme: dark)").matches;
  };
  var label = function () { btn.textContent = dark() ? "light" : "dark"; };
  btn.hidden = false;
  sep.hidden = false;
  label();
  btn.addEventListener("click", function () {
    root.dataset.theme = dark() ? "light" : "dark";
    try { localStorage.setItem("eitri-theme", root.dataset.theme); } catch (e) {}
    label();
  });
})();
</script>

{{.Content}}
</body>
</html>