148 lines
5.6 KiB
HTML
148 lines
5.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="{{ config.language }}">
|
|
<head>
|
|
{% block head %}
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<meta name="generator" content="Norgolith" />
|
|
|
|
{# Dynamic meta tags #}
|
|
{% if metadata.description and not metadata.description == "nil" %}
|
|
<meta name="description" content="{{ metadata.description }}" />
|
|
{% endif %}
|
|
{% if metadata.authors %}
|
|
<meta name="author" content="{{ metadata.authors | join(sep=", ") }}" />
|
|
{% endif %}
|
|
{% if metadata.categories %}
|
|
<meta name="keywords" content="{{ metadata.categories | join(sep=", ") }}" />
|
|
{% endif %}
|
|
|
|
{# SEO Meta Tags #}
|
|
{% block seo_tags %}{% endblock seo_tags %}
|
|
|
|
{# Syntax highlighter #}
|
|
{% if config.highlighter is defined and config.highlighter.enable %}
|
|
{# If highlighter is enabled but the engine is not defined then fallback to prismjs #}
|
|
{% if config.highlighter.engine is not string or config.highlighter.engine == "prism" %}
|
|
{# PrismJS #}
|
|
{# Themes from automadcms:
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://unpkg.com/automad-prism-themes@0.3.1/dist/prism-catppuccin-frappe.light-dark.css"
|
|
/>
|
|
#}
|
|
<link rel="stylesheet" href="/assets/css/prism-sweetie.min.css" />
|
|
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
|
|
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>
|
|
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.js"></script>
|
|
{% elif config.highlighter.engine is defined
|
|
and config.highlighter.engine == "hljs" %}
|
|
{# Highlight.js #}
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css">
|
|
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
|
|
<script>hljs.highlightAll();</script> #}
|
|
{# Enable this one instead if you want all the `<code>` tags to be highlighted
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", (event) => {
|
|
document.querySelectorAll("code").forEach((block) => {
|
|
hljs.highlightBlock(block);
|
|
});
|
|
});
|
|
</script>
|
|
#}
|
|
{% elif config.highlighter.engine is string
|
|
and config.highlighter.engine not in ["prism", "hljs"] %}
|
|
<script>
|
|
window.alert("Warning: highlighter is enabled in the site configuration but its engine is not 'prism' nor 'hljs'");
|
|
</script>
|
|
{% endif %}
|
|
{% endif %}
|
|
|
|
{# AlpineJS #}
|
|
<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/collapse@3.x.x/dist/cdn.min.js"></script>
|
|
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
|
<script>
|
|
document.addEventListener("alpine:init", () => {
|
|
Alpine.data("menu", () => ({
|
|
currentPage: window.location.pathname,
|
|
|
|
openMobile: false,
|
|
|
|
toggleMobile() {
|
|
this.openMobile = !this.openMobile;
|
|
}
|
|
}));
|
|
|
|
Alpine.data("toc", () => ({
|
|
open: false,
|
|
|
|
toggle() {
|
|
this.open = !this.open;
|
|
document.querySelector("#toc-toggle-icon").classList.toggle("rotate-90");
|
|
}
|
|
}));
|
|
|
|
Alpine.data("theme", () => ({
|
|
// Defaults to dark theme
|
|
current: "dark",
|
|
|
|
init() {
|
|
const storedTheme = localStorage.getItem("theme");
|
|
if (storedTheme === "dark") {
|
|
this.current = "dark";
|
|
} else if (storedTheme === "light") {
|
|
this.current = "light";
|
|
} else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
|
|
this.current = "dark";
|
|
}
|
|
localStorage.setItem("theme", this.current);
|
|
if (this.current === "dark") {
|
|
document.documentElement.classList.add("dark");
|
|
}
|
|
},
|
|
|
|
toggle() {
|
|
this.current = this.current === "dark" ? "light" : "dark";
|
|
document.documentElement.classList.toggle("dark", this.current === "dark");
|
|
localStorage.setItem("theme", this.current);
|
|
}
|
|
}));
|
|
});
|
|
</script>
|
|
|
|
{# MermaidJS #}
|
|
{% if config.extra.enable_mermaid %}
|
|
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/11.9.0/mermaid.min.js"></script>
|
|
{% endif %}
|
|
|
|
{# Icons #}
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tabler-icons/3.28.1/tabler-icons.min.css">
|
|
|
|
{# Styling and favicon #}
|
|
<link rel="stylesheet" href="/assets/css/styles.min.css" />
|
|
{% if config.extra.favicon_path is defined and config.extra.favicon_path is string %}
|
|
<link rel="icon" href={{ config.extra.favicon_path }} />
|
|
{% else %}
|
|
<link rel="icon" href="/assets/norgolith.svg" />
|
|
{% endif %}
|
|
|
|
<title>{% block title %}{% endblock title %} - {{ config.title | title }}</title>
|
|
{% endblock head %}
|
|
</head>
|
|
<body>
|
|
<div class="transition-colors duration-150 ease-linear">
|
|
<header class="relative shadow-sm">
|
|
{% include "partials/nav.html" %}
|
|
</header>
|
|
|
|
<main class="container mx-auto min-h-screen pt-8 px-4 md:px-0">
|
|
{% block content %}{% endblock content %}
|
|
</main>
|
|
|
|
<footer class="mt-8 py-4 px-6 w-full font-mono">
|
|
{% include "partials/footer.html" %}
|
|
</footer>
|
|
</div>
|
|
</body>
|
|
</html>
|