Files
jacoblenz/src/layouts/base.njk
2023-02-04 19:13:19 +01:00

204 lines
7.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="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");
} else {
// button.style.display = "none";
button.style.pointerEvents = "none";
button.classList.add("hidden");
}
}
}
// Scripts for filtering lists
let dictionary = [];
function createIndex(id, searchable){
$("#" + id + " " + searchable).each( (ind, el) => {
dictionary.push({
category: $(el).parents(".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;
};
})
}
$(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);
let found = dictionary;
let sw = "";
let swl = 0;
$("input[name='keyword']").keyup(function() {
var term = $(this).val().trim() || '';
if( term ) {
// Hide everything tagged hideifseaching
$(".hideifsearching").each( (ind, el) => {
$(el).hide();
});
$(".ueberschrift-gruppe").each( (ind, el) => {
$(el).hide();
});
// Unmark everything previously marked
if (sw.length > 0) {
for (let item of found) {
$(item.element).unmark();
}
}
// 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 );
}
// Hide all categories by default
requestAnimationFrame(function() {
$("#list .category").hide();
});
for (let item of dictionary) {
if (found.indexOf(item) !== -1) {
requestAnimationFrame(function() {
$(item.category).addClass("search-expanded").show();
$(item.element).show();
if (term.length >= 3) {
$(item.element).mark(term, {
"separateWordSearch": false,
"acrossElements": true
});
}
});
} else {
requestAnimationFrame(function() {
$(item.element).hide();
});
}
}
sw = term;
swl = term.length;
}
else {
$("#list .category").show().removeClass("search-expanded").unmark();
$("#list " + searchable).show();
found = dictionary;
sw = "";
swl = 0;
$(".hideifsearching").each( (ind, el) => {
$(el).show();
});
}
});
}
});
</script>
</body>
</html>