Update blog files and details

src/components/core/BasicScripts.astro

@@ -3,23 +3,40 @@ 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)
+    (!("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");
+  function attachEvent(selector, event, fn) {
+    const elem = document.querySelector(selector);
+    if (elem) {
+      elem.addEventListener(
+        event,
+        function () {
+          fn(elem);
+        },
+        false
+      );
+    }
   }
-  window.toggleMenu = toggleMenu;
+
+  window.onload = function () {
+    attachEvent("[data-aw-toggle-menu]", "click", function (elem) {
+      elem.classList.toggle("menu-opened");
+      document.getElementById("menu").classList.toggle("hidden");
+    });
+
+    attachEvent("[data-aw-toggle-color-scheme]", "click", function (elem) {
+      document.documentElement.classList.toggle("dark");
+      localStorage.theme = document.documentElement.classList.contains("dark")
+        ? "dark"
+        : "light";
+    });
+  };
 </script>

src/components/core/Picture.astro

@@ -6,7 +6,7 @@ const {
   alt,
   sizes,
   widths,
-  aspectRatio,
+  aspectRatio = 1,
   formats = ["avif", "webp"],
   loading = "lazy",
   decoding = "async",
@@ -14,22 +14,32 @@ const {
   ...attrs
 } = Astro.props;
 
-const { image, sources = [] } =
-  !src ? { image: {}}
-    : (typeof src === "string"
-      ? { image: { src } }
-      :
-      await getPicture({
-        src,
-        widths,
-        formats,
-        aspectRatio,
-      }))
+// const { image, sources = [] } =
+//   !src ? { image: {}}
+//     : (typeof src === "string"
+//       ? { image: { src } }
+//       :
+
+let picture = null;
+try {
+  picture = await getPicture({
+    src,
+    widths,
+    formats,
+    aspectRatio,
+  })
+}
+catch (e) {
+  console.log(e);
+}
+
+const { image = {}, sources = [] } = picture || {}
 ---
 
-{ (src || !image) &&
+{ (src && image?.src) &&
 <picture {...attrs}>
-  {sources.map((attrs) => <source {...attrs} {sizes} />)}
+  {sources.map((attrs) =>
+  <source {...attrs} {sizes} />)}
   <img {...image} {loading} {decoding} {alt} class={className} />
 </picture>
 }