Add manifest page and refine editorial landing pages

src/layouts/SiteLayout.astro

@@ -29,5 +29,107 @@ const canonical = Astro.site
         <BuildStamp />
       </article>
     </main>
+  
+    <script is:inline>
+      (() => {
+        const reveals = document.querySelectorAll("[data-editorial-reveal]");
+
+        const closeReveal = (reveal, instant = false) => {
+          const button = reveal.querySelector(".editorial-reveal__button");
+          const body = reveal.querySelector(".editorial-reveal__body");
+
+          if (!button || !body) return;
+
+          button.setAttribute("aria-expanded", "false");
+          body.setAttribute("aria-hidden", "true");
+
+          if (instant) {
+            reveal.classList.remove("is-open", "is-opening");
+            body.style.height = "0px";
+            return;
+          }
+
+          if (reveal.classList.contains("is-open")) {
+            body.style.height = `${body.scrollHeight}px`;
+
+            requestAnimationFrame(() => {
+              reveal.classList.remove("is-open", "is-opening");
+              body.style.height = "0px";
+            });
+          }
+        };
+
+        const openReveal = (reveal) => {
+          const button = reveal.querySelector(".editorial-reveal__button");
+          const body = reveal.querySelector(".editorial-reveal__body");
+
+          if (!button || !body) return;
+          if (reveal.classList.contains("is-open")) return;
+
+          reveal.classList.add("is-opening");
+          body.setAttribute("aria-hidden", "false");
+          body.style.height = "0px";
+
+          requestAnimationFrame(() => {
+            reveal.classList.add("is-open");
+            button.setAttribute("aria-expanded", "true");
+            body.style.height = `${body.scrollHeight}px`;
+          });
+
+          const onTransitionEnd = (event) => {
+            if (event.propertyName !== "height") return;
+
+            if (reveal.classList.contains("is-open")) {
+              body.style.height = "auto";
+            }
+
+            reveal.classList.remove("is-opening");
+            body.removeEventListener("transitionend", onTransitionEnd);
+          };
+
+          body.addEventListener("transitionend", onTransitionEnd);
+        };
+
+        reveals.forEach((reveal) => {
+          const button = reveal.querySelector(".editorial-reveal__button");
+          const body = reveal.querySelector(".editorial-reveal__body");
+
+          if (!button || !body) return;
+
+          closeReveal(reveal, true);
+
+          button.addEventListener("click", () => {
+            openReveal(reveal);
+          });
+        });
+
+        window.addEventListener(
+          "scroll",
+          () => {
+            if (window.scrollY <= 8) {
+              reveals.forEach((reveal) => closeReveal(reveal));
+            }
+          },
+          { passive: true }
+        );
+
+        window.addEventListener("pageshow", () => {
+          reveals.forEach((reveal) => closeReveal(reveal, true));
+        });
+
+        window.addEventListener("resize", () => {
+          reveals.forEach((reveal) => {
+            const body = reveal.querySelector(".editorial-reveal__body");
+
+            if (!body) return;
+
+            if (reveal.classList.contains("is-open")) {
+              body.style.height = "auto";
+            }
+          });
+        });
+      })();
+    </script>
+
   </body>
 </html>