102 lines
2.8 KiB
Text
102 lines
2.8 KiB
Text
---
|
|
// Importing necessary components
|
|
import Meta from "@/components/Meta.astro";
|
|
import Navbar from "@/components/sections/Navbar.astro";
|
|
import FooterSection from "@/components/sections/FooterSection.astro";
|
|
import { SITE } from "@/data_files/constants";
|
|
|
|
// 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;
|
|
structuredData?: object;
|
|
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 is:inline src="/scripts/vendor/lenis/lenis.js"></script>
|
|
<script is:inline>
|
|
// Script to handle Lenis library settings for smooth scrolling
|
|
const lenis = new Lenis();
|
|
|
|
function raf(time) {
|
|
lenis.raf(time);
|
|
requestAnimationFrame(raf);
|
|
}
|
|
|
|
requestAnimationFrame(raf);
|
|
</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 and scrolling experience with lenis library */
|
|
.scrollbar-hide::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.scrollbar-hide {
|
|
-ms-overflow-style: none;
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
html.lenis,
|
|
html.lenis body {
|
|
height: auto;
|
|
}
|
|
|
|
.lenis.lenis-smooth {
|
|
scroll-behavior: auto !important;
|
|
}
|
|
|
|
.lenis.lenis-smooth [data-lenis-prevent] {
|
|
overscroll-behavior: contain;
|
|
}
|
|
|
|
.lenis.lenis-stopped {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.lenis.lenis-scrolling iframe {
|
|
pointer-events: none;
|
|
}
|
|
</style>
|
|
</body>
|
|
</html>
|