129 lines
4.8 KiB
Plaintext
129 lines
4.8 KiB
Plaintext
---
|
|
import { defaultLang } from '@/i18n/ui';
|
|
import { getLangFromUrl } from '@/i18n/utils';
|
|
import type { Head } from '@/types/Head';
|
|
|
|
interface Props {
|
|
title: string
|
|
head?: Head
|
|
}
|
|
|
|
const { title, head } = Astro.props;
|
|
|
|
const lang = getLangFromUrl(Astro.url) || defaultLang;
|
|
---
|
|
|
|
<!doctype html>
|
|
<html lang={lang}>
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>{title} — Leim Wiki</title>
|
|
|
|
<script is:inline src="/leaflet/leaflet.js" />
|
|
<script is:inline type="text/javascript" src="/js/leaflet-measure.min.js"></script>
|
|
<script is:inline type="text/javascript" src="/js/leaflet-zoomify.min.js"></script>
|
|
<script>
|
|
import { setLang } from "@/i18n/store";
|
|
import { defaultLang, type Language } from "@/i18n/ui";
|
|
import { getLangFromUrl } from "@/i18n/utils";
|
|
|
|
const currentLang: Language = getLangFromUrl(new URL(window.location.href)) || defaultLang;
|
|
setLang(currentLang || defaultLang);
|
|
</script>
|
|
|
|
<link rel="stylesheet" href="/leaflet/leaflet.css" rel="preload" />
|
|
<link rel="stylesheet" href="/leaflet-measure/leaflet-measure.css" rel="preload" />
|
|
|
|
<meta name="author" content="Alexis Pelé" />
|
|
<meta property="og:author" content="Alexis Pelé" />
|
|
<meta property="og:locale" content={lang}>
|
|
<meta name="application-name" content="leim-maps">
|
|
<meta name="format-detection" content="telephone=no">
|
|
<meta name="msapplication-config" content="none">
|
|
|
|
{head?.description && (
|
|
<meta name="description" content={head.description} />
|
|
<meta property="og:description" content={head.description} />
|
|
)}
|
|
<meta name="generator" content={Astro.generator} />
|
|
|
|
<link rel="canonical" href={Astro.url}>
|
|
|
|
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon.png">
|
|
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
|
|
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
|
|
<link rel="manifest" href="/site.webmanifest">
|
|
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#6595b4">
|
|
<meta name="msapplication-TileColor" content="#00aba9">
|
|
<meta name="theme-color" content="#a9d1eb">
|
|
<meta name="color-scheme" content="dark light">
|
|
|
|
<meta property="og:title" content={title} />
|
|
<meta property="og:type" content="website" />
|
|
<meta property="og:url" content={Astro.url} />
|
|
|
|
{head?.description && <meta name="twitter:description" content={head.description} /> }
|
|
{head?.image && (
|
|
<meta property="og:image" content={`${Astro.site?.origin}${head.image}`} />
|
|
<meta name="twitter:image" content={`${Astro.site?.origin}${head.image}`} />
|
|
<meta name="twitter:card" content="summary_large_image" />
|
|
)}
|
|
</head>
|
|
<body>
|
|
<script is:inline>
|
|
let initialTheme = localStorage.getItem("theme");
|
|
const darkModeMq = window.matchMedia("(prefers-color-scheme: dark)");
|
|
|
|
// Initial paint from localstorage
|
|
switch (initialTheme) {
|
|
case "light":
|
|
enableLightTheme();
|
|
break;
|
|
case "system":
|
|
resetTheme();
|
|
break;
|
|
case "dark":
|
|
default:
|
|
enableDarkTheme();
|
|
break;
|
|
}
|
|
|
|
// Enables dark theme and updates preferences
|
|
function enableDarkTheme() {
|
|
document.documentElement.classList.add('dark');
|
|
document.documentElement.classList.remove('light');
|
|
localStorage.setItem("theme", "dark");
|
|
}
|
|
|
|
// Enables light theme and updates preferences
|
|
function enableLightTheme() {
|
|
document.documentElement.classList.add('light');
|
|
document.documentElement.classList.remove('dark');
|
|
localStorage.setItem("theme", "light");
|
|
}
|
|
|
|
// Reset theme to OS values
|
|
function resetTheme() {
|
|
const prefersDark = darkModeMq.matches;
|
|
|
|
if (prefersDark) {
|
|
document.documentElement.classList.add('dark');
|
|
document.documentElement.classList.remove('light');
|
|
} else {
|
|
document.documentElement.classList.add('light');
|
|
document.documentElement.classList.remove('dark');
|
|
}
|
|
|
|
localStorage.setItem("theme", "system");
|
|
}
|
|
</script>
|
|
|
|
<slot />
|
|
</body>
|
|
</html>
|
|
|
|
<style lang="scss" is:global>
|
|
@use '../assets/scss/theme.scss';
|
|
</style>
|