update FFG to remove inline script attributes

unicorn-utterances · Feb 28, 2024 · 7699916 · 7699916
1 parent 7b8c5e9
commit 7699916
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 18 deletions.
diff --git a/src/pages/collections/framework-field-guide/index.astro b/src/pages/collections/framework-field-guide/index.astro
@@ -82,3 +82,14 @@ import { unicorns } from "utils/data";
 	import { enableParallaxScrolling } from "../../../views/collections/framework-field-guide/scripts/parallax-scrolling";
 	enableParallaxScrolling();
 </script>
+<script>
+	document.querySelectorAll("[data-scroll-to]").forEach((element) => {
+		element.addEventListener("click", (e) => {
+			e.preventDefault();
+			const scrollToElement = document.querySelector(
+				element.getAttribute("data-scroll-to"),
+			);
+			scrollToElement.scrollIntoView({ behavior: "smooth", block: "start" });
+		});
+	});
+</script>
diff --git a/src/views/collections/framework-field-guide/segments/ecosystem.astro b/src/views/collections/framework-field-guide/segments/ecosystem.astro
@@ -57,10 +57,7 @@ const tags: TagList = [
 				performant, stable, and easier to maintain.
 			</p>
 			<div class="book-ctas">
-				<BigFilledButton
-					href="#signup-form"
-					onclick="event.preventDefault();var title=document.getElementById('signup-form');title.scrollIntoView({behavior: 'smooth', block: 'start'})"
-				>
+				<BigFilledButton href="#signup-form" data-scroll-to="#signup-form">
 					Sign up for updates
 				</BigFilledButton>
 				<!-- <BigOutlinedButton>Learn more</BigOutlinedButton> -->

diff --git a/src/views/collections/framework-field-guide/segments/fundamentals.astro b/src/views/collections/framework-field-guide/segments/fundamentals.astro
@@ -58,10 +58,7 @@ const tags: TagList = [
 				using these frameworks.
 			</p>
 			<div class="book-ctas">
-				<BigFilledButton
-					href="#signup-form"
-					onclick="event.preventDefault();var title=document.getElementById('signup-form');title.scrollIntoView({behavior: 'smooth', block: 'start'})"
-				>
+				<BigFilledButton href="#signup-form" data-scroll-to="#signup-form">
 					Notify me at launch
 				</BigFilledButton>
 			</div>

diff --git a/src/views/collections/framework-field-guide/segments/hero.astro b/src/views/collections/framework-field-guide/segments/hero.astro
@@ -41,7 +41,7 @@ import Sun from "../cover-layers/fundamentals/sun.astro";
 					</p>
 					<SmallFilledButton
 						href="#fundamentals-title"
-						onclick="event.preventDefault();var title=document.getElementById('fundamentals-title');title.scrollIntoView({behavior: 'smooth', block: 'center'})"
+						data-scroll-to="#fundamentals-title"
 					>
 						Learn more
 					</SmallFilledButton>
@@ -59,7 +59,7 @@ import Sun from "../cover-layers/fundamentals/sun.astro";
 					</p>
 					<SmallOutlinedButton
 						href="#ecosystem-title"
-						onclick="event.preventDefault();var title=document.getElementById('ecosystem-title');title.scrollIntoView({behavior: 'smooth', block: 'center'})"
+						data-scroll-to="#ecosystem-title"
 					>
 						Learn more
 					</SmallOutlinedButton>
@@ -76,7 +76,7 @@ import Sun from "../cover-layers/fundamentals/sun.astro";
 					</p>
 					<SmallOutlinedButton
 						href="#internals-title"
-						onclick="event.preventDefault();var title=document.getElementById('internals-title');title.scrollIntoView({behavior: 'smooth', block: 'center'})"
+						data-scroll-to="#internals-title"
 					>
 						Learn more
 					</SmallOutlinedButton>

diff --git a/src/views/collections/framework-field-guide/segments/internals.astro b/src/views/collections/framework-field-guide/segments/internals.astro
@@ -57,10 +57,7 @@ const tags: TagList = [
 				yourself?
 			</p>
 			<div class="book-ctas">
-				<BigFilledButton
-					href="#signup-form"
-					onclick="event.preventDefault();var title=document.getElementById('signup-form');title.scrollIntoView({behavior: 'smooth', block: 'start'})"
-				>
+				<BigFilledButton href="#signup-form" data-scroll-to="#signup-form">
 					Sign up for updates
 				</BigFilledButton>
 				<!-- <BigOutlinedButton>Learn more</BigOutlinedButton> -->

diff --git a/src/views/collections/framework-field-guide/segments/pricing.astro b/src/views/collections/framework-field-guide/segments/pricing.astro
@@ -46,7 +46,7 @@ Learn the core concepts behind your favorite frameworks and develop skillsets to
 			<SmallFilledButton
 				slot="button"
 				href="#signup-form"
-				onclick="event.preventDefault();var title=document.getElementById('signup-form');title.scrollIntoView({behavior: 'smooth', block: 'start'})"
+				data-scroll-to="#signup-form"
 			>
 				Notify me at launch
 			</SmallFilledButton>
@@ -82,7 +82,7 @@ Build out production-ready applications with all of the bells and whistles your
 			<SmallOutlinedButton
 				slot="button"
 				href="#signup-form"
-				onclick="event.preventDefault();var title=document.getElementById('signup-form');title.scrollIntoView({behavior: 'smooth', block: 'start'})"
+				data-scroll-to="#signup-form"
 			>
 				Sign up for updates
 			</SmallOutlinedButton>
@@ -118,7 +118,7 @@ Take a deeper dive into understanding how your apps work under-the-hood, includi
 			<SmallOutlinedButton
 				slot="button"
 				href="#signup-form"
-				onclick="event.preventDefault();var title=document.getElementById('signup-form');title.scrollIntoView({behavior: 'smooth', block: 'start'})"
+				data-scroll-to="#signup-form"
 			>
 				Sign up for updates
 			</SmallOutlinedButton>