94 lines
2.6 KiB
Plaintext
94 lines
2.6 KiB
Plaintext
---
|
|
import { ClientRouter } from 'astro:transitions';
|
|
import { readSingleton } from '@directus/sdk';
|
|
|
|
import directus from '@lib/directus';
|
|
import BaseHead from '@components/BaseHead.astro';
|
|
import Footer from '@components/Footer.astro';
|
|
import Header from '@components/Header.astro';
|
|
|
|
import '@styles/global.css';
|
|
|
|
interface Props {
|
|
title?: string;
|
|
description?: string;
|
|
ogImage?: any;
|
|
lang?: string;
|
|
structuredData?: object;
|
|
}
|
|
|
|
const { title, description = 'Alex Lebens', ogImage, lang = 'en', structuredData } = Astro.props;
|
|
|
|
const global = await directus.request(readSingleton('site_global'));
|
|
const normalizeTitle = !title ? global.name : `${title} | ${global.name}`;
|
|
---
|
|
|
|
<html lang={lang}>
|
|
<head>
|
|
<title>{normalizeTitle}</title>
|
|
<BaseHead
|
|
title={normalizeTitle}
|
|
description={description}
|
|
ogImage={ogImage}
|
|
ogTitle={title === '' ? global.name : title}
|
|
ogDescription={description}
|
|
structuredData={structuredData}
|
|
/>
|
|
<ClientRouter fallback="swap" />
|
|
<script is:inline>
|
|
const theme = (() => {
|
|
if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) {
|
|
return localStorage.getItem('theme');
|
|
}
|
|
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
|
return 'dark';
|
|
}
|
|
return 'light';
|
|
})();
|
|
|
|
if (theme === 'light') {
|
|
document.documentElement.classList.remove('dark');
|
|
} else {
|
|
document.documentElement.classList.add('dark');
|
|
}
|
|
window.localStorage.setItem('theme', theme);
|
|
</script>
|
|
</head>
|
|
<body class="bg-stone-200 selection:bg-yellow-400 selection:text-neutral-700 dark:bg-stone-700">
|
|
<!-- <div class="fixed inset-0 -z-10">
|
|
<div
|
|
class="bg-grid-pattern absolute inset-0 [mask-image:radial-gradient(white,transparent_85%)] bg-[center_top_-1px]"
|
|
>
|
|
</div>
|
|
</div> -->
|
|
<div class="mx-auto w-full max-w-(--breakpoint-2xl) flex-grow px-4 sm:px-6 lg:px-8">
|
|
<Header />
|
|
<main class="min-h-screen">
|
|
<slot />
|
|
</main>
|
|
</div>
|
|
<Footer />
|
|
<style>
|
|
.scrollbar-hide::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
.scrollbar-hide {
|
|
-ms-overflow-style: none;
|
|
scrollbar-width: none;
|
|
}
|
|
</style>
|
|
</body>
|
|
</html>
|
|
|
|
<style>
|
|
.bg-grid-pattern {
|
|
background-size: 24px 24px;
|
|
background-image: radial-gradient(circle, rgba(0, 0, 0, 0.2) 1px, transparent 1px);
|
|
transition: background-image 0.7s cubic-bezier(0.65, 0, 0.35, 1);
|
|
}
|
|
|
|
:global(.dark) .bg-grid-pattern {
|
|
background-image: radial-gradient(circle, rgba(255, 255, 255, 0.25) 1px, transparent 1px);
|
|
}
|
|
</style>
|