TenantAtlas/apps/website/src/layouts/MainLayout.astro

104 lines
2.9 KiB
Plaintext

---
// Importing necessary components
import Meta from '@components/Meta.astro';
import Navbar from '@components/sections/navbar&footer/Navbar.astro';
import FooterSection from '@components/sections/navbar&footer/FooterSection.astro';
import { SITE } from '@data/constants';
import { getLocaleFromPath, localeHtmlLang, type Locale } from '@/i18n';
import '@styles/global.css';
// Setting expected props
const {
title = SITE.title,
meta,
structuredData,
lang,
customDescription = null,
customOgTitle = null,
} = Astro.props;
const locale = (lang || getLocaleFromPath(Astro.url.pathname)) as Locale;
const htmlLang = localeHtmlLang[locale] || localeHtmlLang.de;
// Interface to type-check the properties
interface Props {
title?: string;
meta?: string;
structuredData?: object;
lang?: Locale;
customDescription?: string | null;
customOgTitle?: string | null;
}
---
<html lang={htmlLang} class="scrollbar-hide lenis lenis-smooth scroll-pt-16">
<head>
{/* Adding metadata to the HTML document */}
<Meta
meta={meta}
structuredData={structuredData}
locale={locale}
customDescription={customDescription}
customOgTitle={customOgTitle}
/>
{/* Define the title of the page */}
<title>{title}</title>
<script is:inline>
// Script to handle dark mode. It will check if the theme is stored in localStorage or if dark theme is preferred by system settings
if (
localStorage.getItem('hs_theme') === 'dark' ||
(!('hs_theme' in localStorage) &&
window.matchMedia('(prefers-color-scheme: dark)').matches)
) {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
</script>
<script>
import '@scripts/lenisSmoothScroll.js';
</script>
</head>
<body
class="flex min-h-screen flex-col bg-neutral-200 selection:bg-yellow-400 selection:text-neutral-700 dark:bg-neutral-800"
>
{
/*
Setting up the main structure of the page.
The Navbar is placed at the top, with a slot for the main content and FooterSection at the bottom.
*/
}
<div
class="mx-auto w-full max-w-(--breakpoint-2xl) grow px-4 sm:px-6 lg:px-8"
>
<Navbar />
<main>
<slot />
</main>
</div>
<FooterSection />
<script>
// https://preline.co
import 'preline';
const init = () =>
(
window as Window & { HSStaticMethods?: { autoInit?: () => void } }
).HSStaticMethods?.autoInit?.();
if (document.readyState === 'loading')
document.addEventListener('DOMContentLoaded', init);
else init();
</script>
<style>
/* CSS rules for the page scrollbar */
.scrollbar-hide::-webkit-scrollbar {
display: none;
}
.scrollbar-hide {
-ms-overflow-style: none;
scrollbar-width: none;
}
</style>
</body>
</html>