Fix page-specific scripts not re-running when returning to that page

Gyanreyer · May 20, 2023 · ab8bd7e · ab8bd7e
1 parent 5216e22
commit ab8bd7e
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 19 deletions.
diff --git a/src/_components/home/homepage-section.webc b/src/_components/home/homepage-section.webc
@@ -87,7 +87,7 @@
 
   h2 {
     font-size: 4rem;
-    font-weight: bold;
+    font-weight: 700;
     margin-bottom: 0.7rem;
     line-height: 1;
   }
@@ -103,7 +103,7 @@
     position: relative;
     display: inline-block;
     font-size: 1.7rem;
-    font-weight: bold;
+    font-weight: 700;
     padding: 0.5rem 2rem;
     border-radius: 2em;
     text-decoration: none;

diff --git a/src/_includes/layouts/base.webc b/src/_includes/layouts/base.webc
@@ -55,13 +55,15 @@
       webc:bucket="transition-persist"
     ></script>
 
-    <!-- Page-specific JS and CSS which should not be persisted -->
+    <!-- Page-specific CSS which should not be persisted -->
     <style @raw="getBundle('css')" webc:keep></style>
-    <script :src="getBundleFileUrl('js')" type="module" webc:keep></script>
   </head>
   <body>
     <template @raw="content" webc:nokeep></template>
     <!-- Element which is animated for page transitions -->
     <div pgtrns:id="trns-anim-element"></div>
+
+    <!-- Page-specific JS which should not be persisted -->
+    <script @raw="getBundle('js')" type="module" webc:keep></script>
   </body>
 </html>
diff --git a/src/css/reset.css b/src/css/reset.css
@@ -1,28 +1,31 @@
 /* Normal font weight */
 @font-face {
   font-family: "Avenir Next";
-  src: url("/fonts/AvenirNext-Medium.woff2");
+  src: url("/fonts/AvenirNext-Medium.woff2") format("woff2");
   font-weight: 400;
   font-style: normal;
   font-display: swap;
+  unicode-range: U+00-7F;
 }
 
 /* Semi-bold font weight */
 @font-face {
   font-family: "Avenir Next";
-  src: url("/fonts/AvenirNext-DemiBold.woff2");
+  src: url("/fonts/AvenirNext-DemiBold.woff2") format("woff2");
   font-weight: 500;
   font-style: normal;
   font-display: swap;
+  unicode-range: U+00-7F;
 }
 
 /* Bold font weight */
 @font-face {
   font-family: "Avenir Next";
-  src: url("/fonts/AvenirNext-Bold.woff2");
+  src: url("/fonts/AvenirNext-Bold.woff2") format("woff2");
   font-weight: 700;
   font-style: normal;
   font-display: swap;
+  unicode-range: U+00-7F;
 }
 
 :root {

diff --git a/src/js/page-transition.mjs b/src/js/page-transition.mjs
@@ -91,18 +91,24 @@
         }
       }
 
-      if (child.tagName === "SCRIPT") {
-        const scriptTag = document.createElement("script");
-        // Transfer over all attributes to the new script tag
-        for (const attr of child.attributes) {
-          scriptTag.setAttribute(attr.name, attr.value);
-        }
-        if (child.textContent) {
-          scriptTag.appendChild(document.createTextNode(child.textContent));
-        }
-        targetElement.appendChild(scriptTag);
-      } else {
-        targetElement.appendChild(child.cloneNode(true));
+      switch (child.tagName) {
+        case "SCRIPT":
+          {
+            const clonedTag = document.createElement(
+              child.tagName.toLowerCase()
+            );
+            // Transfer over all attributes to the new tag
+            for (const attr of child.attributes) {
+              clonedTag.setAttribute(attr.name, attr.value);
+            }
+            if (child.textContent) {
+              clonedTag.appendChild(document.createTextNode(child.textContent));
+            }
+            targetElement.appendChild(clonedTag);
+          }
+          break;
+        default:
+          targetElement.appendChild(child.cloneNode(true));
       }
     }
   };