template.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="generator" content="pandoc" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
$for(author-meta)$
  <meta name="author" content="$author-meta$" />
$endfor$
$if(date-meta)$
  <meta name="dcterms.date" content="$date-meta$" />
$endif$
$if(keywords)$
  <meta name="keywords" content="$for(keywords)$$keywords$$sep$, $endfor$" />
$endif$
$if(description-meta)$
  <meta name="description" content="$description-meta$" />
$endif$
  <title>$if(title-prefix)$$title-prefix$ – $endif$$pagetitle$</title>

  <style>
    $styles.html()$
  </style>

  <style>
@font-face {
    font-family: 'Merriweather';
    src: url('/static/Merriweather-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Merriweather';
    src: url('/static/Merriweather-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Merriweather';
    src: url('/static/Merriweather-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}
  </style>

  <link rel="stylesheet" href="/static/style.css" />
  <link rel="alternate"
    type="application/rss+xml"
    title="RSS Feed for jan.systems"
    href="/feed.xml" />

$for(header-includes)$
  $header-includes$
$endfor$
$if(math)$
$if(mathjax)$
  <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
$endif$
  $math$
$endif$
</head>
<body>
  <div class="header-row">
    <a class="page-title" href="/">jan&#39;s garden</a>
    <div id="dark-mode-btn"></div>
  </div>
  <nav>
    <a href="/archive">archive</a>
    <span aria-hidden="true"> &#x2022; </span>
    <a href="/liked">liked</a>
    <span aria-hidden="true"> &#x2022; </span>
    <a href="/now">now</a>
    <span aria-hidden="true"> &#x2022; </span>
    <a href="/projects">projects</a>
  </nav>

  $if(title)$
  $if(hide-body-title)$
  $else$
  <h1>$title$ $if(date)$<small>($date$)</small>$endif$ $if(kind)$<small>[$kind$]</small>$endif$</h1>
  $endif$
  $endif$
$body$

<script>
const b = document.createElement("button");
b.innerHTML = "🌓";
b.setAttribute("id", "dark-mode-btn");
b.setAttribute("aria-label", "Toggle dark mode");
document.querySelector("#dark-mode-btn").replaceWith(b);

const initialManualColorScheme = localStorage.getItem("colorScheme");
// If null, no manual color scheme is set
if (initialManualColorScheme === "dark") {
  document.body.parentElement.classList.add("dark");
} else if (initialManualColorScheme === "light") {
  document.body.parentElement.classList.add("light");
}

function getCurrentManualColorScheme() {
  if (document.body.parentElement.classList.contains("dark")) return "dark";
  if (document.body.parentElement.classList.contains("light")) return "light";
  return null;
}

document.querySelector("#dark-mode-btn").addEventListener("click", function () {
  const manualColorScheme = getCurrentManualColorScheme();
  const userPreferenceIsDark = (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches);

  const currentColorScheme = manualColorScheme ?? (userPreferenceIsDark ? "dark" : "light");
  const newColorScheme = currentColorScheme === "dark" ? "light" : "dark";

  document.body.parentElement.classList.remove("dark", "light");
  document.body.parentElement.classList.add(newColorScheme);

  localStorage.setItem("colorScheme", newColorScheme);
});
</script>

</body>
</html>