Components folder refactoring

src/components/core/BasicScripts.astro

@@ -0,0 +1,25 @@
+---
+const {} = Astro.props;
+---
+
+<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>

src/components/core/MetaTags.astro

@@ -0,0 +1,57 @@
+---
+import { getImage } from "@astrojs/image";
+
+const { src: defaultImage } = await getImage({
+  src: import("~/assets/images/default.png"),
+  width: 1200,
+  height: 628,
+});
+
+const {
+  title = "AstroWind",
+  description = "",
+  image = defaultImage,
+  canonical,
+} = Astro.props;
+
+const absoluteImageUrl = new URL(image, Astro.site);
+---
+
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<link rel="icon" type="image/x-icon" href="/favicon.ico" />
+
+<title>{title}</title>
+<meta name="description" content={description} />
+{canonical && <link rel="canonical" href={canonical} />}
+
+<!-- Google / Search Engine Tags -->
+<meta itemprop="name" content={title} />
+<meta itemprop="description" content={description} />
+<meta itemprop="image" content={absoluteImageUrl} />
+
+<!-- Facebook Meta Tags -->
+{canonical && <meta property="og:url" content={canonical} />}
+<meta property="og:type" content="website" />
+<meta property="og:title" content={title} />
+<meta property="og:description" content={description} />
+<meta property="og:image" content={absoluteImageUrl} />
+
+<!-- Twitter Meta Tags -->
+{canonical && <meta name="twitter:url" content={canonical} />}
+<meta name="twitter:card" content="summary_large_image" />
+<meta name="twitter:title" content={title} />
+<meta name="twitter:description" content={description} />
+<meta name="twitter:image" content={absoluteImageUrl} />
+
+<!-- Fonts -->
+<link
+  href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;700&display=swap"
+  rel="stylesheet"
+/>
+
+<!-- Google Site Verification -->
+<meta
+  name="google-site-verification"
+  content="orcPxI47GSa-cRvY11tUe6iGg2IO_RPvnA1q95iEM3M"
+/>

src/components/core/Picture.astro

@@ -0,0 +1,41 @@
+---
+import { getPicture } from "@astrojs/image";
+
+const {
+  src,
+  alt,
+  sizes,
+  widths,
+  aspectRatio,
+  formats = ["avif", "webp"],
+  loading = "lazy",
+  decoding = "async",
+  class: className = "",
+  ...attrs
+} = Astro.props;
+
+const { image, sources = [] } =
+  !src ? { image: {}}
+    : (typeof src === "string"
+      ? { image: { src } }
+      :
+      await getPicture({
+        src,
+        widths,
+        formats,
+        aspectRatio,
+      }))
+---
+
+{ (src || !image) &&
+<picture {...attrs}>
+  {sources.map((attrs) => <source {...attrs} {sizes} />)}
+  <img {...image} {loading} {decoding} {alt} class={className} />
+</picture>
+}
+
+<style>
+  img {
+    content-visibility: auto;
+  }
+</style>