initial
This commit is contained in:
147
theme/templates/base.html
Normal file
147
theme/templates/base.html
Normal file
@@ -0,0 +1,147 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user