From 132788934f2476f38c2a40cf26fe019ef2ea706f Mon Sep 17 00:00:00 2001
From: prototypa <prototypearea.dev@gmail.com>
Date: Sun, 3 Dec 2023 12:12:49 -0500
Subject: [PATCH] Add support for View Transitions. Fix issue #290

---
 src/components/common/BasicScripts.astro | 59 +++++++++++++++---------
 src/layouts/Layout.astro                 | 19 +++++---
 2 files changed, 48 insertions(+), 30 deletions(-)

diff --git a/src/components/common/BasicScripts.astro b/src/components/common/BasicScripts.astro
index 28aa1b1..b24b0eb 100644
--- a/src/components/common/BasicScripts.astro
+++ b/src/components/common/BasicScripts.astro
@@ -3,6 +3,12 @@ import { UI } from '~/utils/config';
 ---
 
 <script is:inline define:vars={{ defaultTheme: UI.theme }}>
+  if (window.basic_script) {
+    return;
+  }
+
+  window.basic_script = true;
+
   function applyTheme(theme) {
     if (theme === 'dark') {
       document.documentElement.classList.add('dark');
@@ -31,28 +37,28 @@ import { UI } from '~/utils/config';
     }
   }
 
-  window.onload = function () {
+  const onLoad = function () {
     let lastKnownScrollPosition = window.scrollY;
     let ticking = true;
 
     attachEvent('#header nav', 'click', function () {
-      document.querySelector("[data-aw-toggle-menu]")?.classList.remove("expanded");
-      document.body.classList.remove("overflow-hidden");
-      document.getElementById("header")?.classList.remove("h-screen");
-      document.getElementById("header")?.classList.remove("expanded");
-      document.getElementById("header")?.classList.remove("bg-page");
-      document.querySelector("#header nav")?.classList.add("hidden");
-      document.querySelector("#header > div > div:last-child")?.classList.add("hidden");
+      document.querySelector('[data-aw-toggle-menu]')?.classList.remove('expanded');
+      document.body.classList.remove('overflow-hidden');
+      document.getElementById('header')?.classList.remove('h-screen');
+      document.getElementById('header')?.classList.remove('expanded');
+      document.getElementById('header')?.classList.remove('bg-page');
+      document.querySelector('#header nav')?.classList.add('hidden');
+      document.querySelector('#header > div > div:last-child')?.classList.add('hidden');
     });
 
     attachEvent('[data-aw-toggle-menu]', 'click', function (_, elem) {
-      elem.classList.toggle("expanded");
-      document.body.classList.toggle("overflow-hidden");
-      document.getElementById("header")?.classList.toggle("h-screen");
-      document.getElementById("header")?.classList.toggle("expanded");
-      document.getElementById("header")?.classList.toggle("bg-page");
-      document.querySelector("#header nav")?.classList.toggle("hidden");
-      document.querySelector("#header > div > div:last-child")?.classList.toggle("hidden");
+      elem.classList.toggle('expanded');
+      document.body.classList.toggle('overflow-hidden');
+      document.getElementById('header')?.classList.toggle('h-screen');
+      document.getElementById('header')?.classList.toggle('expanded');
+      document.getElementById('header')?.classList.toggle('bg-page');
+      document.querySelector('#header nav')?.classList.toggle('hidden');
+      document.querySelector('#header > div > div:last-child')?.classList.toggle('hidden');
     });
 
     attachEvent('[data-aw-toggle-color-scheme]', 'click', function () {
@@ -97,7 +103,7 @@ import { UI } from '~/utils/config';
     });
 
     function appyHeaderStylesOnScroll() {
-      const header = document.querySelector("#header[data-aw-sticky-header]");
+      const header = document.querySelector('#header[data-aw-sticky-header]');
       if (lastKnownScrollPosition > 60 && !header.classList.contains('scroll')) {
         document.getElementById('header').classList.add('scroll');
       } else if (lastKnownScrollPosition <= 60 && header.classList.contains('scroll')) {
@@ -118,16 +124,23 @@ import { UI } from '~/utils/config';
       }
     });
   };
-
-  window.onpageshow = function () {
+  const onPageShow = function () {
     document.documentElement.classList.add('motion-safe:scroll-smooth');
     const elem = document.querySelector('[data-aw-toggle-menu]');
     if (elem) {
       elem.classList.remove('expanded');
     }
-    document.body.classList.remove("overflow-hidden");
-    document.getElementById("header")?.classList.remove("h-screen");
-    document.getElementById("header")?.classList.remove("expanded");
-    document.querySelector("#header nav")?.classList.add("hidden");
-  };
+    document.body.classList.remove('overflow-hidden');
+    document.getElementById('header')?.classList.remove('h-screen');
+    document.getElementById('header')?.classList.remove('expanded');
+    document.querySelector('#header nav')?.classList.add('hidden');
+  }
+
+  window.onload = onLoad;
+  window.onpageshow = onPageShow;
+
+  document.addEventListener('astro:after-swap', () => {
+    onLoad();
+    onPageShow();
+  });
 </script>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 76134cb..341cf10 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -1,17 +1,20 @@
 ---
 import '~/assets/styles/tailwind.css';
 
-import { I18N } from "~/utils/config";
+import { I18N } from '~/utils/config';
 
 import CommonMeta from '~/components/common/CommonMeta.astro';
 import Favicons from '~/components/Favicons.astro';
-import CustomStyles from "~/components/CustomStyles.astro"
-import ApplyColorMode from "~/components/common/ApplyColorMode.astro"
+import CustomStyles from '~/components/CustomStyles.astro';
+import ApplyColorMode from '~/components/common/ApplyColorMode.astro';
 import Metadata from '~/components/common/Metadata.astro';
-import SiteVerification  from "~/components/common/SiteVerification.astro"
-import Analytics  from "~/components/common/Analytics.astro"
+import SiteVerification from '~/components/common/SiteVerification.astro';
+import Analytics from '~/components/common/Analytics.astro';
 import BasicScripts from '~/components/common/BasicScripts.astro';
 
+// Uncomment line below to activate View Transitions
+// import { ViewTransitions } from 'astro:transitions';
+
 import type { MetaData as MetaDataType } from '~/types';
 
 export interface Props {
@@ -22,9 +25,8 @@ const { metadata = {} } = Astro.props;
 const { language, textDirection } = I18N;
 ---
 
-<!DOCTYPE html>
+<!doctype html>
 <html lang={language} dir={textDirection} class="2xl:text-[20px]">
-
   <head>
     <CommonMeta />
     <Favicons />
@@ -33,6 +35,9 @@ const { language, textDirection } = I18N;
     <Metadata {...metadata} />
     <SiteVerification />
     <Analytics />
+
+    <!-- Uncomment line below to activate View Transitions -->
+    <!-- <ViewTransitions fallback="swap" /> -->
   </head>
 
   <body class="antialiased text-default bg-page tracking-tight">