main.njk
<!DOCTYPE html>
<html>
<head>
<script>
const htmlElem = document.querySelector('html')
const preferred = (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) ? 'dark' : 'light'
const setMode = (mode) => {
if (mode === preferred) {
localStorage.setItem('theme', 'auto')
}
if (mode === 'dark') {
htmlElem.setAttribute('data-bs-theme', mode)
localStorage.setItem('theme', mode)
}
else if (mode === 'light') {
htmlElem.setAttribute('data-bs-theme', mode)
localStorage.setItem('theme', mode)
}
else if (mode === 'auto') {
htmlElem.setAttribute('data-bs-theme', preferred)
localStorage.setItem('theme', preferred)
}
currentTheme = mode === 'auto' ? preferred : mode
}
let currentTheme = localStorage.getItem("theme") || "auto"
setMode(currentTheme)
const toggleDarkMode = (e) => {
const isDark = e.checked
setMode(isDark ? 'dark' : 'light')
setPrismTheme(isDark, linkElem)
}
const setCheckbox = (isDark, element) => {
element.checked = isDark
}
const setPrismTheme = (isDark, linkElement) => {
const link = document.getElementById("prism-theme")
const stylesheet = currentTheme === 'dark' ? "/prism_dark.css" : "/prism.css"
link.href = stylesheet
}
</script>
<link rel="stylesheet" id="prism-theme" type="text/css" href="/prism.css" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-SgOJa3DmI69IUzQ2PVdRZhwQ+dy64/BUtbMJw1MZ8t5HZApcHrRKUc4W0kG879m7" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<link rel="stylesheet" type="text/css" href="/main.css" />
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container-lg">
<div class="row pt-5">
<div class="col">
<header>
<div class="row d-flex justify-content-between">
<div class="col-auto">
<nav class="fs-4 pb-3">
<a href="/" class="text-decoration-none">Darcs Repositories</a>{% if nav.repoName %}<span class="text-secondary mx-2">></span><a href="/repos/{{nav.repoName | slugify}}/branches/{{darcsConfig.repos[nav.repoName].defaultBranch | slugify}}" class="text-decoration-none">{{nav.repoName}}</a>{% endif %}
</nav>
</div>
<div class="col-auto d-flex align-items-center">
<i class="bi bi-brightness-high"></i>
<div class="form-check form-switch mx-1" style="padding-top: 1px;">
<input class="form-check-input" type="checkbox" id="darkModeSwitch" value="dark" onchange="toggleDarkMode(this)" aria-label="Toggle switch for light or dark site theme">
</div>
<i class="bi bi-moon"></i>
</div>
</div>
{% if nav.repoName %}
<div class="row mb-4">
<div class="col pe-0">
<nav class="nav-tabs">
<ul class="nav">
<li class="nav-item">
<a class="nav-link {% if navTab == "landing" %}active{% endif %}" href="/repos/{{nav.repoName | slugify}}/branches/{{nav.branchName}}">Landing Page</a>
</li>
<li class="nav-item">
<a class="nav-link {% if navTab == "files" %}active{% endif %}" href="/repos/{{nav.repoName | slugify}}/branches/{{nav.branchName}}/files">Files</a>
</li>
<li class="nav-item">
<a class="nav-link {% if navTab == "patches" %}active{% endif %}" href="/repos/{{nav.repoName | slugify}}/branches/{{nav.branchName}}/patches/page1">Patches</a>
</li>
<li class="nav-item">
<a class="nav-link {% if navTab == "branches" %}active{% endif %}" href="/repos/{{nav.repoName | slugify}}/branches/{{nav.branchName | slugify}}/list">Branches</a>
</li>
</ul>
</nav>
</div>
<div class="col-auto border-bottom">
<div class="input-group input-group-sm">
<span class="input-group-text">Branch</span>
<select class="form-select" onchange="selectBranch(this)" aria-label="Repository branch selector">
{% for branch in branches %}
<option value="{{branch.repoName | slugify}},{{branch.branchName | slugify}},{{nav.path}}" {% if branch.branchName == nav.branchName %}selected{% endif %}>{{branch.branchName}}</option>
{% endfor %}
</select>
</div>
</div>
</div>
{% endif %}
</header>
</div>
</div>
</div>
<div class="container-{% if width == "full"%}fluid{% else %}lg{% endif %}">
<div class="row">
<div class="col">
{{content | safe}}
</div>
</div>
</div>
<script src="/prism.js"></script>
<script>
const linkElem = document.getElementById('prism-theme')
setCheckbox(currentTheme === 'dark', document.getElementById('darkModeSwitch'))
setPrismTheme(currentTheme === 'dark', linkElem)
const toggleUnifiedMode = (e) => {
const diffs = document.getElementById('diffs')
const afterDiffs = document.querySelectorAll('.diff-right')
if (e.checked) {
diffs.classList.add("unified")
afterDiffs.forEach((elem) => {
elem.classList.remove('border-start', 'ps-2')
})
}
else {
diffs.classList.remove("unified")
afterDiffs.forEach((elem) => {
elem.classList.add('border-start', 'ps-2')
})
}
}
const selectBranch = (e) => {
const values = e.value.split(",")
window.location = `/repos/${values[0]}/branches/${values[1]}/${values[2]}`
}
</script>
</body>
</html>