achat-maison-albi-fr/src/layouts/MainLayout.astro

75 lines
2.3 KiB
Text
Raw Normal View History

---
// 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";
2025-01-05 15:05:22 +01:00
import type { Thing, WithContext } from "schema-dts";
// Setting expected props
const { title = SITE.title, meta, structuredData, lang = "en" } = Astro.props;
// Interface to type-check the properties
interface Props {
title?: string;
meta?: string;
2025-01-05 15:05:22 +01:00
structuredData?: WithContext<Thing>;
lang?: string;
}
---
<!--
This is the main structure for the page.
We set the language of the page to English and add classes for scrollbar and scroll behavior.
-->
<html lang={lang} class="scrollbar-hide lenis lenis-smooth scroll-pt-16">
<head>
<!-- Adding metadata to the HTML document -->
<Meta meta={meta} structuredData={structuredData} />
<!-- 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>
2025-01-05 02:50:58 +01:00
<script defer data-domain="achat-maison-albi.fr" src="https://plausible.io/js/script.outbound-links.js"></script>
</head>
<body
class="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 max-w-screen-2xl px-4 sm:px-6 lg:px-8">
<Navbar />
<main>
<slot />
</main>
</div>
<FooterSection />
<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>