82 lines
2.4 KiB
Text
82 lines
2.4 KiB
Text
---
|
|
import { ViewTransitions } from 'astro:transitions';
|
|
import i18next, { t } from 'i18next';
|
|
import { HeadHrefLangs } from 'astro-i18next/components';
|
|
export interface Props {
|
|
title: string;
|
|
}
|
|
|
|
import '../assets/style/style.scss';
|
|
import Navbar from '@components/Navbar.astro';
|
|
import Spinner from '@components/Spinner.astro';
|
|
|
|
const { title } = Astro.props;
|
|
---
|
|
|
|
<!DOCTYPE html>
|
|
<html lang={i18next.language}>
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="description" content="Astro description" />
|
|
<meta name="viewport" content="width=device-width" />
|
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
|
<meta name="generator" content={Astro.generator} />
|
|
<HeadHrefLangs />
|
|
<title>{title}</title>
|
|
<ViewTransitions />
|
|
|
|
<!-- Reset and normilize styles -->
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gardevoir" />
|
|
</head>
|
|
<body transition:animate="fade">
|
|
<header class="position-sticky py-1 py-lg-3">
|
|
<Navbar />
|
|
</header>
|
|
<main>
|
|
<div id="layout-loading-spinner" class="d-none">
|
|
<Spinner />
|
|
</div>
|
|
<slot />
|
|
</main>
|
|
<style lang="scss">
|
|
body {
|
|
header {
|
|
background-color: var(--prj-bg);
|
|
border-radius: 0 0 var(--prj-border-radius) var(--prj-border-radius);
|
|
}
|
|
}
|
|
|
|
/* Position spinner in the center of the screen instead of the center of it's parent */
|
|
/* This is because the height of the main div can change */
|
|
/* but we still want the background to hide the content */
|
|
#layout-loading-spinner :global(.spinner) :global(svg) {
|
|
position: fixed;
|
|
width: 200px;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
</style>
|
|
|
|
<script is:inline>
|
|
document.addEventListener('astro:before-preparation', (ev) => {
|
|
const originalLoader = ev.loader;
|
|
ev.loader = async function () {
|
|
const spinner = document.querySelector('#layout-loading-spinner');
|
|
|
|
// Only show the animation if page load is > than timeout seconds
|
|
const timeoutId = setTimeout(
|
|
() => spinner.classList.remove('d-none'),
|
|
200,
|
|
);
|
|
|
|
await originalLoader();
|
|
|
|
// cancel timeout if is not run yet
|
|
clearTimeout(timeoutId);
|
|
// spinner.classList.add('d-none');
|
|
};
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|