Better framework switching logic

barvian · barvian · commit a68127661f1e · 2025-03-13T05:42:41.000-07:00
Especially when navigating back/forward
diff --git a/site/src/components/FrameworkMenu.tsx b/site/src/components/FrameworkMenu.tsx
@@ -56,10 +56,6 @@ export default function FrameworkMenu({
 								'dark:data-[focus]:bg-white/12.5 text-primary flex items-center gap-2 rounded-lg py-2 pl-2 text-sm font-medium data-[disabled]:cursor-default data-[focus]:bg-black/[8%]'
 							)}
 							href={toFrameworkPath(url.pathname, id as Framework)}
-							onClick={() => {
-								localStorage.setItem('framework', id)
-								$pageFramework.set(id as Framework)
-							}}
 						>
 							<Icon className="size-4.5" />
 							{framework.name}
diff --git a/site/src/layouts/Layout.astro b/site/src/layouts/Layout.astro
@@ -28,7 +28,7 @@ type Props = {
 	paddingBottom?: string
 }
 
-const { title, description, paddingBottom = "~pb-40/52" } = Astro.props
+const { title, description, paddingBottom = '~pb-40/52' } = Astro.props
 
 const app = {
 	'@context': 'https://schema.org',
@@ -94,7 +94,7 @@ const app = {
 
 		<ClientRouter />
 	</head>
-	<body class:list={[paddingBottom, '~pt-12/28']}> 
+	<body class:list={[paddingBottom, '~pt-12/28']}>
 		<div class="container inline-flex items-baseline justify-center whitespace-nowrap text-center">
 			{
 				isActive('/', Astro.url) ? (
@@ -141,6 +141,9 @@ const app = {
 </style>
 
 <script>
+	import type { Framework } from '@/lib/framework'
+	import { $pageFramework } from '@/stores/url'
+
 	// Disable smooth scroll when transitioning, which also fixes anchor links for some reason:
 	document.addEventListener('astro:before-swap', (event) => {
 		event.newDocument.documentElement.style.scrollBehavior = 'auto'
@@ -155,4 +158,13 @@ const app = {
 			{ once: true }
 		)
 	})
+
+	// Update framework on page load
+	document.addEventListener('astro:page-load', () => {
+		const framework = document.documentElement.dataset.framework as Framework
+		if (framework) {
+			localStorage.setItem('framework', framework)
+			$pageFramework.set(framework)
+		}
+	})
 </script>
