examples banners

Author: dani-polani

bitext/src/lib/components/partners/PartnerBannerById.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { HomePartnerId } from '$lib/partners/home-rotation.js';
+	import PartnerBannerCursor from './PartnerBannerCursor.svelte';
+	import PartnerBannerPreply from './PartnerBannerPreply.svelte';
+	import PartnerBannerRailway from './PartnerBannerRailway.svelte';
+	import PartnerBannerWise from './PartnerBannerWise.svelte';
+
+	let { partnerId }: { partnerId: HomePartnerId } = $props();
+
+	const bannerById = {
+		preply: PartnerBannerPreply,
+		railway: PartnerBannerRailway,
+		cursor: PartnerBannerCursor,
+		wise: PartnerBannerWise
+	} as const;
+
+	const Banner = $derived(bannerById[partnerId]);
+</script>
+
+<Banner />

bitext/src/lib/partners/home-rotation.test.ts

@@ -0,0 +1,27 @@
+import { describe, expect, it } from 'vitest';
+import {
+	getExamplePagePartnerId,
+	getHomePartnerOrder,
+	HOME_PARTNER_IDS
+} from './home-rotation.js';
+
+describe('getExamplePagePartnerId', () => {
+	it('returns a pool member and is stable for the same slug', () => {
+		const a = getExamplePagePartnerId('turkish-interlinear-gloss-ipa');
+		const b = getExamplePagePartnerId('turkish-interlinear-gloss-ipa');
+		expect(HOME_PARTNER_IDS).toContain(a);
+		expect(a).toBe(b);
+	});
+
+	it('can differ across slugs', () => {
+		const ids = new Set(HOME_PARTNER_IDS.map((_, i) => getExamplePagePartnerId(`slug-${i}`)));
+		expect(ids.size).toBeGreaterThan(1);
+	});
+});
+
+describe('getHomePartnerOrder', () => {
+	it('returns two distinct partners', () => {
+		const [a, b] = getHomePartnerOrder(1_700_000_000_000);
+		expect(a).not.toBe(b);
+	});
+});

bitext/src/lib/partners/home-rotation.ts

@@ -1,9 +1,8 @@
 /**
- * Home page shows two partner banners in fixed regions (intro column + settings sidebar).
- * Each hour (UTC, by Unix time) we pick two *distinct* partners from `HOME_PARTNER_IDS`;
- * all ids participate in rotation as the set grows.
+ * Partner banner rotation.
  *
- * Order is computed once per request on the server so SSR and hydration match.
+ * Home: two distinct partners per UTC hour (`getHomePartnerOrder`).
+ * Example gallery pages: one partner per slug, stable across prerender/build (`getExamplePagePartnerId`).
  */
 export const HOME_PARTNER_IDS = ['preply', 'railway', 'cursor', 'wise'] as const;
 export type HomePartnerId = (typeof HOME_PARTNER_IDS)[number];
@@ -17,6 +16,16 @@ function mulberry32(seed: number) {
 	};
 }
 
+/** FNV-1a 32-bit — stable string → integer for seeded picks. */
+function hashSeedString(input: string): number {
+	let h = 0x811c9dc5;
+	for (let i = 0; i < input.length; i++) {
+		h ^= input.charCodeAt(i);
+		h = Math.imul(h, 0x01000193);
+	}
+	return h | 0;
+}
+
 /** Uniform random shuffle (Fisher–Yates). Mutates `items`. */
 function shuffleInPlace<T>(items: T[], rng: () => number): void {
 	for (let i = items.length - 1; i > 0; i--) {
@@ -25,6 +34,17 @@ function shuffleInPlace<T>(items: T[], rng: () => number): void {
 	}
 }
 
+/**
+ * One partner for a prerendered example page. Seed with gallery `slug` so each page keeps
+ * the same banner across visits and SSR/hydration match; partners are spread across slugs.
+ */
+export function getExamplePagePartnerId(slug: string): HomePartnerId {
+	const seed = Math.imul(hashSeedString(`example:${slug}`), 0x9e3779b1) | 0;
+	const rng = mulberry32(seed);
+	const index = Math.floor(rng() * HOME_PARTNER_IDS.length);
+	return HOME_PARTNER_IDS[index]!;
+}
+
 /**
  * `[introColumn, settingsSidebar]` — two different partners; every ordered pair among
  * `HOME_PARTNER_IDS` is equally likely for a given draw.

bitext/src/routes/examples/[slug]/+page.svelte

@@ -3,6 +3,7 @@
 	import { resolve } from '$app/paths';
 	import { ALIGNER_DISPLAY_NAME } from '$lib/brand.js';
 	import SiteFooter from '$lib/components/layout/SiteFooter.svelte';
+	import PartnerBannerById from '$lib/components/partners/PartnerBannerById.svelte';
 	import type { PageProps } from './$types';
 
 	let { data }: PageProps = $props();
@@ -91,15 +92,16 @@
 		</figcaption>
 	</figure>
 
-	<p class="mt-8">
+	<div class="mt-8 flex flex-wrap items-center gap-x-4 gap-y-3">
+		<a href={resolve('/examples')} class="{linkClass} text-sm">← All examples</a>
 		<a href="{resolve('/')}?example={exampleSlug}" class={ctaClass}>
 			Open in Editor
 		</a>
-	</p>
+	</div>
 
-	<p class="mt-6 text-sm">
-		<a href={resolve('/examples')} class={linkClass}>← All examples</a>
-	</p>
+	<div class="mt-10">
+		<PartnerBannerById partnerId={data.partnerId} />
+	</div>
 
 	<SiteFooter />
 </main>

bitext/src/routes/examples/[slug]/+page.ts

@@ -2,6 +2,7 @@ export const prerender = true;
 
 import { error } from '@sveltejs/kit';
 import { findGalleryBySlug, galleryPreviewImageFor, GALLERY_EXAMPLES } from '$lib/examples/catalog.js';
+import { getExamplePagePartnerId } from '$lib/partners/home-rotation.js';
 import type { PageLoad } from './$types';
 
 export function entries() {
@@ -14,6 +15,7 @@ export const load: PageLoad = ({ params }) => {
 	return {
 		entry,
 		previewImageUrl: galleryPreviewImageFor(entry),
-		exampleSlug: entry.slug
+		exampleSlug: entry.slug,
+		partnerId: getExamplePagePartnerId(entry.slug)
 	};
 };