Astro v5 Fixes (playfulprogramming#1228)

One of the items seemingly not mentioned in the v5 migration guide is
that `data-some-attr={false}` will now stringify `false` as `'false'`
rather than remove it entirely.

This caused a few bugs in our system that are now fixed

Author: crutchcorn

src/views/blog-post/blog-post-layout/blog-post-layout.module.scss

@@ -7,14 +7,14 @@
 	max-width: var(--max-width_xl);
 	margin: 0 auto;
 
-	&:where(:not([data-hide-left-sidebar])) {
+	&:where(:not([data-hide-left-sidebar="true"])) {
 		@include from($tabletLarge) {
 			grid-template-columns: 25% 1fr;
 		}
 	}
 
 	// in tablet view, when the sidebar is hidden, the "content" column needs to be centered
-	&[data-hide-left-sidebar] {
+	&[data-hide-left-sidebar="true"] {
 		@include until($desktopSmall) {
 			max-width: var(--max-width_m);
 		}

src/views/blog-post/series/series-toc.astro

@@ -101,7 +101,7 @@ const showMoreText = translate(
 >
 	const showMore = document.querySelector("#toggleAllButton");
 	const showHideChapters = Array.from(
-		document.querySelectorAll("[data-dont-show-initially]"),
+		document.querySelectorAll("[data-dont-show-initially='true']"),
 	);
 
 	let expanded = false;

src/views/blog-post/series/series-toc.module.scss

@@ -88,7 +88,7 @@
 	padding: 0;
 }
 
-.navigationItemOuter[data-dont-show-initially] {
+.navigationItemOuter[data-dont-show-initially="true"] {
 	display: none;
 }
 
@@ -134,7 +134,7 @@
 	background: var(--series-nav_chapter-item_border_color_pressed);
 }
 
-.navigationItem[data-is-active] {
+.navigationItem[data-is-active="true"] {
 	color: var(--series-nav_chapter-item_title_color_selected);
 	padding-left: calc(
 		var(--series-nav_chapter-item_padding-horizontal) +
@@ -143,7 +143,7 @@
 	);
 }
 
-.navigationItem[data-is-active]::before {
+.navigationItem[data-is-active="true"]::before {
 	content: " ";
 	position: absolute;
 	left: 0;
@@ -153,7 +153,7 @@
 	background: var(--series-nav_chapter-item_border_color_selected);
 }
 
-.navigationItem[data-is-active]::after {
+.navigationItem[data-is-active="true"]::after {
 	content: " ";
 	background-color: var(--series-nav_chapter-item_arrow_color);
 	mask: url('data:image/svg+xml;utf8,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="Arrow"><path id="Vector 31" d="M5 8H15M15 8L11 4M15 8L11 12" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></g></svg>');

src/views/collections/framework-field-guide-fundamentals/components/collection-table-of-contents-fundamentals.astro

@@ -56,20 +56,20 @@ const maxChapterToShow = 10;
 	<script is:inline>
 		let shown = false;
 
-		const lastChild = document.querySelector("[data-is-last-visible]");
+		const lastChild = document.querySelector("[data-is-last-visible='true']");
 
 		function toggleChapterList() {
-			const els = [...document.querySelectorAll("[data-should-hide]")];
+			const els = [...document.querySelectorAll("[data-should-hide='true']")];
 			if (!shown) {
 				els.forEach((el) => (el.style.display = "block"));
 				document.querySelector("#show-button").style.display = "none";
 				document.querySelector("#hide-button").style.display = "inline-block";
-				lastChild.removeAttribute("data-is-last-visible");
+				lastChild.setAttribute("data-is-last-visible", "false");
 			} else {
 				els.forEach((el) => (el.style.display = "none"));
 				document.querySelector("#hide-button").style.display = "none";
 				document.querySelector("#show-button").style.display = "inline-block";
-				lastChild.setAttribute("data-is-last-visible", "");
+				lastChild.setAttribute("data-is-last-visible", "true");
 			}
 
 			shown = !shown;

src/views/collections/framework-field-guide-fundamentals/components/collection-table-of-contents-fundamentals.module.scss

@@ -49,7 +49,7 @@
 	position: relative;
 }
 
-.postContainer:not([data-is-last-visible]):not(:last-child)::after {
+.postContainer:not([data-is-last-visible="true"]):not(:last-child)::after {
 	position: absolute;
 	content: " ";
 	bottom: 0;
@@ -61,7 +61,7 @@
 	background: var(--outline);
 }
 
-.postContainer[data-should-hide] {
+.postContainer[data-should-hide="true"] {
 	display: none;
 }
 

src/views/person/person-page.astro

@@ -117,7 +117,7 @@ const postAuthors = new Map(
 
 	if (viewAllAchievementsButton) {
 		const hiddenAchievements: HTMLElement[] = Array.from(
-			document.querySelectorAll("[data-hide-initially]"),
+			document.querySelectorAll("[data-hide-initially='true']"),
 		);
 
 		let expanded = false;