feat: implement barebone zola templates

2024-11-10 21:45:59 +00:00 · 2024-11-10 21:45:59 +00:00 · f99a9ae2ac
commit f99a9ae2ac
parent 9c20f5ed2e
198 changed files with 2434 additions and 227991 deletions
--- a/_src/layouts/Layout.astro
+++ b/_src/layouts/Layout.astro
@ -0,0 +1,82 @@
+---
+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>