e57a205784
This commit changes all project imports to use absolute paths instead of relative ones. In addition, the 'tsconfig.json' has been updated to recognize new paths, aiding in easier project navigation and improved readability. The implemented changes result in cleaner imports and a more comprehensible project structure.
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/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>
|