Files
jacoblenz/src/layouts/base.njk
2023-02-07 12:59:17 +01:00

245 lines
8.1 KiB
Plaintext

<!DOCTYPE html>
<html lang="de" dir="ltr" class="h-full">
<head>
<link rel="canonical" href="{{ config.url }}{{ page.url }}">
<link rel="stylesheet" href="/css/output.css" >
<title>
{% if title and title != 'Home' %}{{title}} - {% endif %}{{ config.title }}</title>
<!-- Icons -->
<!-- Enable if favicons installed into the static/img/ directory -->
{# <link rel="shortcut icon" type="image/png" href="/images/x16-favicon.png" sizes="16x16" />
<link rel="shortcut icon" type="image/png" href="/images/x32-favicon.png" sizes="32x32" />
<link rel="shortcut icon" type="image/png" href="/images/x64-favicon.png" sizes="64x64" />#}
<link rel="shortcut icon" type="image/png" href="/favicon.png"/>
<link rel="apple-touch-icon" type="image/png" href="/favicon.png"/>
<script src="/js/jquery.min.js"></script>
<script src="/js/jquery.mark.min.js"></script>
<!-- Meta -->
<meta name="description" content="{% if description %}{{ description }}{% else %}{{ config.description }}{% endif %}">
<meta name="keywords" content="{% if keywords %}{{ keywords }}{% else %}{{ config.keywords }}{% endif %}">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Language" content="en">
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- Facebook -->
<meta property="og:title" content="{% if (title != 'Home') %}{{title}} - {% endif %}{{ config.title }}">
<meta property="og:type" content="website">
<meta property="og:description" content="{% if description %}{{ description }}{% else %}{{ config.description }}{% endif %}">
<meta property="og:url" content="{{ config.url }}{{ page.url }}">
<meta property="og:image" content="{% if image %}{{ image }}{% else %}{{ config.image }}{% endif %}">
<!-- Twitter -->
<meta name="twitter:card" content="{{ card }}">
<meta name="twitter:site" content="{{ twitter }}">
<meta name="twitter:title" content="{% if (title != 'Home') %}{{title}} - {% endif %}{{ config.title }}">
<meta name="twitter:description" content="{% if description %}{{ description }}{% else %}{{ config.description }}{% endif %}">
<meta name="twitter:creator" content="{{ twitter }}">
<meta name="twitter:image" content="{{ config.url }}{{ page.url }}">
<meta name="twitter:domain" content="{% if image %}{{ image }}{% else %}{{ config.image }}{% endif %}">
</head>
<body class="bg-slate-50 w-full h-full">
<div class="
px-12
max-w-screen-2xl
mx-auto
flex flex-row">
<aside class="shrink-0 grow-0 basis-[26rem] sticky top-0 max-h-screen min-h-screen flex flex-col bg-slate-50">
{% include "sidebar.njk" %}
</aside>
<main class="px-8 pt-[7.5rem] min-h-full max-w-[1120px]">
<div>
<h2 class="text-3xl font-bold pb-4">
{{ title | safe }}
</h2>
{{ content | safe }}
</div>
</main>
{# <div class="row-start-3 col-span-6 self-end">
{% include "footer.njk" %}
</div> #}
</div>
<script>
// Script for showing and acting upon the "scroll to top button"
const scrollFunction = function () {
button = document.getElementById("scrollbutton");
if (button !== null) {
if (document.body.scrollTop > 400 || document.documentElement.scrollTop > 400) {
// button.style.display = "block";
button.style.pointerEvents = "auto";
button
.classList
.remove("hidden-important");
} else {
// button.style.display = "none";
button.style.pointerEvents = "none";
button
.classList
.add("hidden-important");
}
}
}
// Scripts for filtering lists
let dictionary = [];
let categories = document
.getElementById("list")
.getElementsByClassName("category");
let found = dictionary;
let sw = "";
let swl = 0;
$(".showifsearching").each((ind, el) => {
$(el).hide();
});
function createIndex(id, searchable) {
$("#" + id + " " + searchable).each((ind, el) => {
dictionary.push({
category: el.closest(".category"), element: el, searchitem: $(el)
.text()
.toLowerCase()
});
});
}
function findWord(word, d) {
var sw = word
.trim()
.toLowerCase();
return d.filter(function (e) {
if (e.searchitem.indexOf(sw) !== -1) {
return true;
} else {
return false;
};
})
}
const search = function () {
term = $("input[name='keyword']")
.val()
.trim() || '';
// Unmark everything previously marked
for (let item of found) {
$(item.element).unmark();
}
if (term) {
// Hide everything tagged hideifseaching
$(".hideifsearching").each((ind, el) => {
$(el).hide();
});
$(".showifsearching").each((ind, el) => {
$(el).show();
});
$(".ueberschrift-gruppe").each((ind, el) => {
$(el).hide();
});
// Hide all categories by default
for (let cat of categories) {
cat
.classList
.add("hidden-important");
cat
.classList
.remove("search-expanded");
}
// Only search in prior found elements if word starts the same
if (term.length > swl && term.startsWith(sw)) {
found = findWord(term, found);
} else {
found = findWord(term, dictionary);
}
for (let item of dictionary) {
if (found.indexOf(item) !== -1) {
item
.category
.classList
.add("search-expanded");
item
.category
.classList
.remove("hidden-important");
item
.element
.classList
.remove("hidden-important");
if (term.length >= 2) {
$(item.element).mark(term, {
"separateWordSearch": false,
"acrossElements": true
});
}
} else {
item
.element
.classList
.add("hidden-important");
}
}
sw = term;
swl = term.length;
} else {
var hidden = document
.getElementById("list")
.querySelectorAll(".hidden-important");
for (let item of hidden) {
item
.classList
.remove("hidden-important");
}
found = dictionary;
sw = "";
swl = 0;
$(".hideifsearching").each((ind, el) => {
$(el).show();
});
$(".showifsearching").each((ind, el) => {
$(el).hide();
});
}
}
$(document).ready(function () {
// Scroll button
if (document.getElementById("scrollbutton") !== null) {
scrollFunction();
document
.getElementById("scrollbutton")
.addEventListener("click", () => {
document.body.scrollTop = 0; // For Safari
document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
})
window.addEventListener("scroll", scrollFunction);
}
// List filtering
if (document.getElementById("list")) {
var searchable = "";
if (document.getElementsByClassName("searchable").length > 0) {
searchable = ".searchable";
} else if (document.getElementsByClassName("handschrift").length > 0) {
searchable = ".handschrift";
}
createIndex("list", searchable);
{# $("input[name='keyword']").focus(); #}
$("input[name='keyword']").keyup(search);
}
});
</script>
</body>
</html>