feat: render a deep link to Polypane specificity calculator

src/routes/(public)/specificity-calculator/+page.svelte

@@ -15,9 +15,19 @@
 	// @ts-expect-error No type definitions for importing images
 	import Image from './og-image.png?w=1200'
 
-	let input_ref: HTMLInputElement
+	let input_ref: HTMLInputElement | undefined = $state()
+	let input_value = $state('')
 	let has_error = $state(false)
 	let result: { selector: string; specificity: Specificity }[] | undefined = $state()
+	let polypane_url = $derived.by(() => {
+		let base_url = new URL('https://polypane.app/css-specificity-calculator/')
+
+		if (input_value) {
+			base_url.searchParams.set('selector', encodeURIComponent(input_value))
+		}
+
+		return base_url.toString()
+	})
 
 	const DEFAULT_INPUT = '.kid :has(.friend) ~ :where(.treehouse) :is(#gross)'
 	const PARAM = 'selectors'
@@ -70,7 +80,8 @@
 	}
 
 	async function on_input() {
-		let input = input_ref.value
+		let input = input_ref!.value
+		input_value = input
 
 		calculate(input)
 		await update_url(input)
@@ -79,12 +90,15 @@
 	onMount(async () => {
 		let param_input = new URLSearchParams(page.url.searchParams.toString()).get(PARAM)
 
+		if (!input_ref) return
+
 		if (param_input) {
 			input_ref.value = param_input
 		} else {
 			input_ref.value = DEFAULT_INPUT
 		}
 
+		input_value = input_ref.value
 		calculate(input_ref.value)
 		await update_url(input_ref.value)
 	})
@@ -150,8 +164,8 @@
 					This analyzer is powered by <a rel="external" href="https://github.com/bramus/specificity"
 						>@bramus/specificity</a
 					>. There are other specificity calculators available that offer explanations, like
-					<a href="https://polypane.app/css-specificity-calculator/" rel="external">the one from Polypane</a>. You
-					should use that one if you want to know more about <em>how</em>
+					<a href={polypane_url} rel="external">the one from Polypane</a>. You should use that one if you want to know
+					more about <em>how</em>
 					specificity is calculated.
 				</p>
 			</Markdown>

src/routes/(public)/specificity-calculator/spec.ts

@@ -65,6 +65,7 @@ test.describe('without preloading', () => {
 			index++
 		}
 	})
+
 	test('shows an error message for invalid selectors', async ({ page }) => {
 		await expect(page).toBeHydrated()
 		await input.fill(`1234`)
@@ -89,6 +90,20 @@ test.describe('without preloading', () => {
 		await input.fill(`#my-selector .myClass, :is(second)`)
 		await expect(page).toHaveURL('/specificity-calculator?selectors=%23my-selector+.myClass%2C+%3Ais%28second%29')
 	})
+
+	test('deep links to Polypane when selector is filled', async ({ page }) => {
+		await expect(page).toBeHydrated()
+		await input.fill(`#my-selector .myClass, :is(second)`)
+		const link = page.getByRole('link', { name: 'the one from Polypane' })
+		await expect(link).toHaveAttribute(
+			'href',
+			'https://polypane.app/css-specificity-calculator/?selector=%2523my-selector%2520.myClass%252C%2520%253Ais%28second%29'
+		)
+
+		// and updates after changing selector
+		await input.fill(`a`)
+		await expect(link).toHaveAttribute('href', 'https://polypane.app/css-specificity-calculator/?selector=a')
+	})
 })
 
 test.describe('with preloading', () => {