Merge branch 'main' of https://github.com/barvian/number-flow

Author: barvian

.github/ISSUE_TEMPLATE/0-bug.yml

@@ -4,31 +4,41 @@ body:
   - type: markdown
     attributes:
       value: |
-        Thanks for reporting :wave:
+        Thanks for reporting :wave:.  Before filing, please [search](https://github.com/barvian/number-flow/issues?q=is%3Aissue) open & closed issues to see if a similar one exists.
 
-        Before filing, please [search](https://github.com/barvian/number-flow/issues?q=is%3Aissue) open & closed issues to see if a similar one exists.
+  # - type: input
+  #   id: numberflow-version
+  #   attributes:
+  #     label: NumberFlow version
+  #     description: |
+  #       - Please update to the [latest version](https://github.com/barvian/number-flow/releases) before filing to see if your bug has already been fixed.
+  #     placeholder: |
+  #       @number-flow/[email protected]
+  #   validations:
+  #     required: true
+
+  # - type: input
+  #   id: framework-library-version
+  #   attributes:
+  #     label: Framework version
+  #     # description: Which framework (and version) are you using?
+  #     placeholder: |
+  #       [email protected]
+  #   validations:
+  #     required: false
 
   - type: input
-    id: numberflow-version
+    id: link
     attributes:
-      label: NumberFlow version
+      label: Minimal reproduction
       description: |
-        - Please update to the [latest version](https://github.com/barvian/number-flow/releases) before filing to see if your bug has already been fixed.
+        - Links to starter sandboxes can be found in the [site](https://number-flow.barvian.me/) header
+        - Tips for creating minimal examples: https://stackoverflow.com/help/mcve
       placeholder: |
-        @number-flow/[email protected]
+        https://codesandbox.io/p/...
     validations:
       required: true
 
-  - type: input
-    id: framework-library-version
-    attributes:
-      label: Framework version
-      # description: Which framework (and version) are you using?
-      placeholder: |
-        [email protected]
-    validations:
-      required: false
-
   - type: textarea
     id: description
     attributes:
@@ -38,18 +48,6 @@ body:
     validations:
       required: true
 
-  - type: input
-    id: link
-    attributes:
-      label: Minimal reproduction
-      description: |
-        - Links to starter sandboxes can be found in the [site](https://number-flow.barvian.me/) header
-        - Tips for creating minimal examples: https://stackoverflow.com/help/mcve
-      placeholder: |
-        https://codesandbox.io/p/...
-    validations:
-      required: true
-
   # - type: textarea
   #   id: screenshots_or_videos
   #   attributes:

site/src/components/FrameworkMenu.tsx

@@ -4,7 +4,6 @@ import { ChevronDown } from 'lucide-react'
 import * as React from 'react'
 import { Check } from 'lucide-react'
 import clsx from 'clsx/lite'
-import { $pageFramework } from '@/stores/url'
 
 const icons = import.meta.glob<React.FC<React.HTMLAttributes<SVGElement>>>(
 	'./icons/frameworks/*.tsx',
@@ -56,10 +55,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}

site/src/components/Supported.tsx

@@ -25,7 +25,7 @@ export default function Supported() {
 				)}
 			>
 				{reducedMotion ? (
-					<p>Reduce motion is on</p>
+					<p>Reduced motion is on</p>
 				) : (
 					<p>
 						Your browser doesn't{' '}

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>