contrôle miniatures : ajout d'un lien google images

src/routes/dev/controle-miniatures/+page.svelte

@@ -6,24 +6,29 @@
 		(ruleName) => ruleName.startsWith('aides .') && engine.getRule(ruleName).rawNode.titre
 	);
 
-	function simplifyTitle(title) {
-		return title
+	const simplifyTitle = (title) =>
+		title
 			.trim()
 			.replace(/ville (d'|d’|de)/i, '')
 			.replace(/communauté des? communes ?(du|de la|des|de)?/i, '')
 			.replace(/communauté( urbaine| d'agglomération( de)?)?/i, '')
 			.replace(/département (du|de la|de l'|de)/i, '')
 			.trim();
-	}
+
+	const googleSearchImageHref = (title) =>
+		`https://www.google.com/search?tbm=isch&q=${encodeURIComponent(`logo ${title}`)}`;
 </script>
 
-<h1 class="mx-4 my-2 font-bold font-serif">
+<h1 class="mx-4 my-2 font-bold font-serif flex gap-x-3">
 	<span
-		class="mr-4 no-underline bg-gray-800 text-light-100 rounded-full px-2 py-1 uppercase text-xs font-bold tracking-widest self-center"
+		class="no-underline bg-gray-800 text-light-100 rounded-full px-2 py-1 uppercase text-xs font-bold tracking-widest self-center"
 		>DEV</span
 	>
 	Contrôle des miniatures
 </h1>
+<p class="mx-4 mb-4 text-xs text-gray-600">
+	Cliquez sur une image pour ouvrir une recherche Google Images.
+</p>
 
 <div
 	class="grid gap-2 items-stretch mx-4 mb-10"
@@ -33,15 +38,17 @@
 		{@const title = engine.getRule(aideRuleName).rawNode.titre}
 		<article class="flex flex-col justify-between items-center border shadow-sm p-2">
 			<div>
-				{#if miniaturesManifest[aideRuleName]}
-					<img
-						src="/miniatures/{miniaturesManifest[aideRuleName]}"
-						class="object-fill max-h-20"
-						alt="Logo {title.toLowerCase()}"
-					/>
-				{:else}
-					<div class="bg-gray-200 text-gray-800 italic text-center">Pas de miniature</div>
-				{/if}
+				<a href={googleSearchImageHref(title)}>
+					{#if miniaturesManifest[aideRuleName]}
+						<img
+							src="/miniatures/{miniaturesManifest[aideRuleName]}"
+							class="object-fill max-h-20"
+							alt="Logo {title.toLowerCase()}"
+						/>
+					{:else}
+						<span class="block bg-gray-200 text-gray-800 italic text-center">Pas de miniature</span>
+					{/if}
+				</a>
 			</div>
 			<h3 class="text-xs text-center mt-4">{simplifyTitle(title)}</h3>
 		</article>