Update names of Layouts

2022-08-13 03:02:09 -04:00
parent 316eb0d06a
commit ff7debbfc5
3 changed files with 45 additions and 1 deletions
--- a/src/layouts/Default.astro
+++ b/src/layouts/Default.astro
@ -0,0 +1,62 @@
+---
+import "~/assets/styles/base.css";
+
+import Header from "~/components/astro/headers/BasicHeader.astro";
+import Footer from "~/components/astro/footers/BasicFooter.astro";
+
+const { title = "", description = "", withHeader = true } = Astro.props;
+---
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width" />
+    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+    <title>{title}</title>
+    <meta name="description" content={description} />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;700&display=swap"
+      rel="stylesheet"
+    />
+    <meta
+      name="google-site-verification"
+      content="orcPxI47GSa-cRvY11tUe6iGg2IO_RPvnA1q95iEM3M"
+    />
+  </head>
+
+  <body
+    class="antialiased text-gray-900 dark:text-slate-300 tracking-tight bg-white dark:bg-slate-900 font-ibm-plex-sans"
+  >
+    <Header />
+    <slot />
+    <Footer />
+
+    <script is:inline>
+      function toggleDarkMode() {
+        document.documentElement.classList.toggle("dark");
+        localStorage.theme = document.documentElement.classList.contains("dark")
+          ? "dark"
+          : "light";
+      }
+      window.toggleDarkMode = toggleDarkMode;
+
+      if (
+        localStorage.theme === "dark" ||
+        (!("theme" in localStorage) &&
+          window.matchMedia("(prefers-color-scheme: dark)").matches)
+      ) {
+        document.documentElement.classList.add("dark");
+      } else {
+        document.documentElement.classList.remove("dark");
+      }
+
+      function toggleMenu() {
+        document.getElementById("menu").classList.toggle("hidden");
+      }
+      window.toggleMenu = toggleMenu;
+    </script>
+  </body>
+</html>