fix current page styles not applying in production

This commit replaces Astro local styles with tailwind equivalents. Due to `Astro.url.pathname` inconsistencies between development and production (see withastro/astro#5630), we strip the trailing slash when doing comparisons against the current pathname.
rose-pine · Apr 18, 2023 · db19e19 · db19e19
1 parent 5138957
commit db19e19
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 12 deletions.
diff --git a/src/layouts/base.astro b/src/layouts/base.astro
@@ -12,7 +12,9 @@ export type Props = {
 
 const { title, description } = Astro.props;
 
-pathname.set(Astro.url.pathname);
+// Remove trailing slash if present
+// https://github.com/withastro/astro/issues/5630
+pathname.set(Astro.url.pathname.replace(/(\/.*?)\/$/, "$1"));
 ---
 
 <html lang="en">

diff --git a/src/layouts/palette.astro b/src/layouts/palette.astro
@@ -24,10 +24,14 @@ const menu = [
 					<li>
 						<a
 							href={href}
-							aria-current={Astro.url.pathname === href ? "page" : undefined}
+							aria-current={
+								Astro.url.pathname.replace(/(\/.*?)\/$/, "$1") === href
+									? "page"
+									: undefined
+							}
 							class:list={[
 								{ ["border-r"]: index < menu.length - 1 },
-								"flex bg-muted/10 px-4 py-2 text-sm font-medium text-subtle transition hover:text-text focus:outline-none focus:ring focus:ring-inset",
+								"flex bg-muted/10 px-4 py-2 text-sm font-medium text-subtle transition hover:text-text focus:outline-none focus:ring focus:ring-inset aria-[current=page]:bg-surface aria-[current=page]:text-text aria-[current=page]:hover:bg-surface",
 							]}
 						>
 							{name}
@@ -44,12 +48,3 @@ const menu = [
 		<slot />
 	</section>
 </Layout>
-
-<style>
-	[aria-current="page"] {
-		@apply bg-surface text-text;
-	}
-	[aria-current="page"]:hover {
-		@apply bg-surface;
-	}
-</style>