Move home-page package flags to load() so SSR emits only valid icon links

Author: milanofthe

src/routes/+page.svelte

@@ -4,12 +4,15 @@
 	import { goto } from '$app/navigation';
 	import Icon from '$lib/components/common/Icon.svelte';
 	import Tooltip, { tooltip } from '$lib/components/common/Tooltip.svelte';
-	import { packages, packageOrder, nav, type PackageId } from '$lib/config/packages';
+	import { packages, packageOrder, nav } from '$lib/config/packages';
 	import type { SearchResult } from '$lib/utils/search';
 	import { createDebouncedSearch } from '$lib/stores/searchHook.svelte';
 	import { searchTarget } from '$lib/stores/searchNavigation';
-	import { getPackageManifest, packageHasRoadmap, versionHasExamples } from '$lib/api/versions';
 	import { SearchResult as SearchResultComponent } from '$lib/components/search';
+	import type { PageData } from './$types';
+
+	let { data }: { data: PageData } = $props();
+	let packageFlags = $derived(data.packageFlags);
 
 	function navigateWithTransition(path: string) {
 		const doc = document as Document & {
@@ -35,23 +38,9 @@
 		}
 	}
 
-	// Track which packages have roadmaps / examples (latest version)
-	let roadmapFlags = $state<Record<string, boolean>>({});
-	let examplesFlags = $state<Record<string, boolean>>({});
-
 	onMount(() => {
 		window.addEventListener('keydown', handleGlobalKeydown);
 
-		// Load manifests to derive roadmap and examples availability
-		for (const pkgId of packageOrder) {
-			getPackageManifest(pkgId, fetch)
-				.then((manifest) => {
-					roadmapFlags[pkgId] = packageHasRoadmap(manifest);
-					examplesFlags[pkgId] = versionHasExamples(manifest.latestTag, manifest);
-				})
-				.catch(() => {});
-		}
-
 		return () => {
 			window.removeEventListener('keydown', handleGlobalKeydown);
 		};
@@ -171,9 +160,11 @@
 						<div class="card-info-row">
 							<span>{pkg.shortName}</span>
 							<div class="header-actions">
-								<a href="{base}/{pkg.api}" class="icon-btn" use:tooltip={'API'}>
-									<Icon name="braces" size={14} />
-								</a>
+								{#if packageFlags[pkgId].hasApi}
+									<a href="{base}/{pkg.api}" class="icon-btn" use:tooltip={'API'}>
+										<Icon name="braces" size={14} />
+									</a>
+								{/if}
 								<a href="{base}/{pkg.docs}" class="icon-btn" use:tooltip={'Docs'}>
 									<Icon name="book" size={14} />
 								</a>
@@ -182,12 +173,12 @@
 										<Icon name="package" size={14} />
 									</a>
 								{/if}
-								{#if examplesFlags[pkgId]}
+								{#if packageFlags[pkgId].hasExamples}
 									<a href="{base}/{pkgId}/examples" class="icon-btn" use:tooltip={'Examples'}>
 										<Icon name="play" size={14} />
 									</a>
 								{/if}
-								{#if roadmapFlags[pkgId]}
+								{#if packageFlags[pkgId].hasRoadmap}
 									<a href="{base}/{pkgId}/roadmap" class="icon-btn" use:tooltip={'Roadmap'}>
 										<Icon name="roadmap" size={14} />
 									</a>

src/routes/+page.ts

@@ -0,0 +1,45 @@
+import type { PageLoad } from './$types';
+import { packageOrder, type PackageId } from '$lib/config/packages';
+import {
+	getPackageManifest,
+	packageHasRoadmap,
+	versionHasApi,
+	versionHasExamples
+} from '$lib/api/versions';
+
+export interface PackageFlags {
+	hasApi: boolean;
+	hasExamples: boolean;
+	hasRoadmap: boolean;
+}
+
+/**
+ * Load each package's manifest at prerender time so the home page can
+ * server-render the API / Examples / Roadmap icon links based on real
+ * availability flags. Doing this client-side in onMount would emit the
+ * icons only after hydration — and the adapter-static crawler would never
+ * see the links, leaving the unversioned redirect routes unprerendered.
+ */
+export const load: PageLoad = async ({ fetch }) => {
+	const entries = await Promise.all(
+		packageOrder.map(async (pkgId) => {
+			try {
+				const manifest = await getPackageManifest(pkgId, fetch);
+				const flags: PackageFlags = {
+					hasApi: versionHasApi(manifest.latestTag, manifest),
+					hasExamples: versionHasExamples(manifest.latestTag, manifest),
+					hasRoadmap: packageHasRoadmap(manifest)
+				};
+				return [pkgId, flags] as const;
+			} catch {
+				// Manifest unavailable — hide every conditional link for this package.
+				const flags: PackageFlags = { hasApi: false, hasExamples: false, hasRoadmap: false };
+				return [pkgId, flags] as const;
+			}
+		})
+	);
+
+	const packageFlags = Object.fromEntries(entries) as Record<PackageId, PackageFlags>;
+
+	return { packageFlags };
+};