sharing links are open

Author: jycouet

apps/svelte.dev/src/lib/server/content.ts

@@ -238,6 +238,7 @@ export interface PackageCalculated {
 
 export interface Category {
 	title: string;
+	hash: string;
 	description?: string;
 	packages: Package[];
 }

apps/svelte.dev/src/routes/packages/+page.server.ts

@@ -26,6 +26,7 @@ const homepage: Category[] = [];
 for (const { packages, title, description } of PACKAGES_META.FEATURED) {
 	homepage.push({
 		title,
+		hash: title.toLowerCase().replace(/ /g, '-'),
 		description,
 		packages: arrToPackages(packages)
 	});

apps/svelte.dev/src/routes/packages/+page.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import Category from './Category.svelte';
+	import { page } from '$app/state';
 
 	const { data } = $props();
 </script>
@@ -22,8 +23,8 @@
 	</header>
 
 	<div>
-		{#each data.homepage as { title, description, packages }}
-			<Category {title} {description} {packages} />
+		{#each data.homepage as category}
+			<Category {...category} open={page.url.hash === `#${category.hash}`} />
 		{/each}
 	</div>
 </div>

apps/svelte.dev/src/routes/packages/Category.svelte

@@ -1,24 +1,22 @@
 <script lang="ts">
 	import type { Package } from '$lib/server/content';
 	import PackageCard from './PackageCard.svelte';
+	import type { Category } from '$lib/server/content';
 
-	interface Props {
-		title: string;
-		packages: Package[];
-		description?: string;
-	}
+	type Props = {
+		open: boolean;
+	} & Category
 
-	let { title, description, packages }: Props = $props();
-	const slug = $derived(`${title.toLowerCase().replace(/ /g, '-')}`);
+	let { title, description, packages, hash, open }: Props = $props();
 
 	const INITIAL_ITEMS = 3;
 </script>
 
 <section class="category">
 	<header>
-		<h2 id={slug}>
+		<h2 id={hash}>
 			<span>{title}</span>
-			<a href="#{slug}" class="permalink" aria-label="permalink">aa</a>
+			<a href="#{hash}" class="permalink" aria-label="permalink">aa</a>
 		</h2>
 
 		{#if description}
@@ -35,7 +33,7 @@
 	</div>
 
 	{#if packages.length > INITIAL_ITEMS}
-		<details>
+		<details {open}>
 			<summary>
 				<span class="raised button" aria-label="Toggle">
 					<span class="icon"></span>
@@ -154,7 +152,7 @@
 
 	/* permalink */
 	[id] {
-		scroll-margin-top: calc(var(--sk-nav-height)) !important;
+		scroll-margin-top: calc(var(--sk-nav-height) + 2rem) !important;
 	}
 
 	a.permalink {