Ajout d'une page de contrôle des miniatures

src/aides.yaml

@@ -1759,7 +1759,7 @@ aides . vallée de l'homme:
 
 aides . sablé sur sarthe:
   remplace: commune
-  titre: Communauté de communes des Sablé sur Sarthe
+  titre: Communauté de communes de Sablé sur Sarthe
   applicable si:
     toutes ces conditions:
       - localisation . code insee = '72264'
@@ -3327,7 +3327,7 @@ aides . marignier:
 
 aides . combloux:
   remplace: commune
-  titre: Commune de Combloux
+  titre: Ville de Combloux
   applicable si:
     toutes ces conditions:
       - localisation . code insee = '74083'

src/routes/(front)/+layout.svelte

@@ -0,0 +1,123 @@
+<script>
+	import { preloadCode } from '$app/navigation';
+	import { page } from '$app/stores';
+	import { localisation } from '$lib/stores';
+	import Emoji from '$lib/components/Emoji.svelte';
+	import Footer from '$lib/components/Footer.svelte';
+	import { onMount, setContext } from 'svelte';
+	import { building, dev } from '$app/environment';
+
+	onMount(() => {
+		preloadCode('/', '/ville/*');
+
+		// This is a work-around a cold-start issue with the search
+		// autocompletion. By calling this endpoint as soon as possible we
+		// asynchrounsly warm up the server code, and reduce the latency in case
+		// of a cold start.
+		if (!dev) {
+			fetch('/api/collectivites');
+		}
+	});
+
+	const isEmbeded = Boolean(building ? false : $page.url.searchParams.get('iframe'));
+	const embedSource = isEmbeded && $page.url.searchParams.get('utm_source');
+	setContext('embed', { isEmbeded, embedSource });
+
+	let pageElement;
+
+	onMount(() => {
+		if (!isEmbeded) {
+			return;
+		}
+		// The code below communicate with the iframe.js script on a host site
+		// to automatically resize the iframe when its inner content height
+		// change.
+		const minHeight = 500; // Also used in iframe.js
+		const observer = new ResizeObserver(([entry]) => {
+			const value = Math.max(minHeight, entry.contentRect.height);
+			window.parent?.postMessage({ kind: 'resize-height', value }, '*');
+		});
+
+		observer.observe(pageElement);
+	});
+
+	// When the site is embeded in an iframe, we don't want to track a “visit”
+	// every time the page is loaded, as the iframe is oftentimes low on the
+	// page and the user might not interact with it or even see it. We disable
+	// tracking up until the first click interaction;
+	let enableTracking = import.meta.env.PROD && !isEmbeded;
+
+	// The city can be provided from the URL, for instance /ville/paris. The
+	// `data` output of a load function provides a mechanism for pages to pass
+	// data 'upward' to layouts, which is useful in our case since the selected
+	// city is a "global state".
+	localisation.set($page.data?.ville ?? null);
+	$: if ($page.data?.ville) {
+		localisation.set($page.data.ville);
+	}
+</script>
+
+<svelte:window on:click={() => (enableTracking = true)} />
+
+{#if isEmbeded}
+	<div class="embeded-too-small text-xl text-center items-center justify-center h-[100vh]">
+		<p>
+			Retrouvez toutes les aides à l’achat d’un vélo sur le site<br />
+			<a
+				href="https://mesaidesvelo.fr"
+				target="_blank"
+				class="inline-block mt-2 font-bold underline hover:text-green-800"
+				>Mes<span class="text-green-800">aides</span>velo.fr</a
+			>
+		</p>
+	</div>
+{/if}
+
+<div class="app px-3 sm:px-8 {!isEmbeded ? 'h-screen' : ''} flex flex-col" bind:this={pageElement}>
+	<header
+		class="{!isEmbeded
+			? 'mt-8'
+			: ''} w-full max-w-screen-md m-auto flex flex-row justify-between items-end"
+	>
+		{#if !isEmbeded}
+			<a href="/" class="text-3xl font-bold cursor-pointer">
+				Mes<span class="text-green-800">Aides</span>Vélo
+				<Emoji emoji="🚲" className="-mt-2" />
+			</a>
+			<a
+				href="https://aideretrofit.fr"
+				rel="external"
+				class="underline underline-green-400 underline-offset-4 text-green-600 hover:text-green-400 <sm:hidden"
+				>Aide Retrofit</a
+			>
+		{/if}
+	</header>
+	<div class="pb-6 {!isEmbeded ? 'flex-1' : ''}">
+		<slot />
+	</div>
+	<Footer />
+
+	{#if !dev && enableTracking}
+		<script defer data-domain="mesaidesvelo.fr" src="/js/script.js"></script>
+	{/if}
+</div>
+
+<style>
+	:global(body) {
+		min-height: 100vh;
+	}
+
+	.embeded-too-small {
+		display: none;
+	}
+
+	@media (max-height: 300px) {
+		.embeded-too-small + .app {
+			display: none;
+		}
+
+		.embeded-too-small {
+			display: flex;
+		}
+	}
+</style>

src/routes/+layout.svelte

@@ -1,124 +1,5 @@
 <script>
-	import { preloadCode } from '$app/navigation';
-	import { page } from '$app/stores';
-	import { localisation } from '$lib/stores';
-	import Emoji from '$lib/components/Emoji.svelte';
-	import Footer from '$lib/components/Footer.svelte';
-	import { onMount, setContext } from 'svelte';
 	import 'virtual:windi.css';
-	import { building, dev } from '$app/environment';
-
-	onMount(() => {
-		preloadCode('/', '/ville/*');
-
-		// This is a work-around a cold-start issue with the search
-		// autocompletion. By calling this endpoint as soon as possible we
-		// asynchrounsly warm up the server code, and reduce the latency in case
-		// of a cold start.
-		if (!dev) {
-			fetch('/api/collectivites');
-		}
-	});
-
-	const isEmbeded = Boolean(building ? false : $page.url.searchParams.get('iframe'));
-	const embedSource = isEmbeded && $page.url.searchParams.get('utm_source');
-	setContext('embed', { isEmbeded, embedSource });
-
-	let pageElement;
-
-	onMount(() => {
-		if (!isEmbeded) {
-			return;
-		}
-		// The code below communicate with the iframe.js script on a host site
-		// to automatically resize the iframe when its inner content height
-		// change.
-		const minHeight = 500; // Also used in iframe.js
-		const observer = new ResizeObserver(([entry]) => {
-			const value = Math.max(minHeight, entry.contentRect.height);
-			window.parent?.postMessage({ kind: 'resize-height', value }, '*');
-		});
-
-		observer.observe(pageElement);
-	});
-
-	// When the site is embeded in an iframe, we don't want to track a “visit”
-	// every time the page is loaded, as the iframe is oftentimes low on the
-	// page and the user might not interact with it or even see it. We disable
-	// tracking up until the first click interaction;
-	let enableTracking = import.meta.env.PROD && !isEmbeded;
-
-	// The city can be provided from the URL, for instance /ville/paris. The
-	// `data` output of a load function provides a mechanism for pages to pass
-	// data 'upward' to layouts, which is useful in our case since the selected
-	// city is a "global state".
-	localisation.set($page.data?.ville ?? null);
-	$: if ($page.data?.ville) {
-		localisation.set($page.data.ville);
-	}
 </script>
 
-<svelte:window on:click={() => (enableTracking = true)} />
-
-{#if isEmbeded}
-	<div class="embeded-too-small text-xl text-center items-center justify-center h-[100vh]">
-		<p>
-			Retrouvez toutes les aides à l’achat d’un vélo sur le site<br />
-			<a
-				href="https://mesaidesvelo.fr"
-				target="_blank"
-				class="inline-block mt-2 font-bold underline hover:text-green-800"
-				>Mes<span class="text-green-800">aides</span>velo.fr</a
-			>
-		</p>
-	</div>
-{/if}
-
-<div class="app px-3 sm:px-8 {!isEmbeded ? 'h-screen' : ''} flex flex-col" bind:this={pageElement}>
-	<header
-		class="{!isEmbeded
-			? 'mt-8'
-			: ''} w-full max-w-screen-md m-auto flex flex-row justify-between items-end"
-	>
-		{#if !isEmbeded}
-			<a href="/" class="text-3xl font-bold cursor-pointer">
-				Mes<span class="text-green-800">Aides</span>Vélo
-				<Emoji emoji="🚲" className="-mt-2" />
-			</a>
-			<a
-				href="https://aideretrofit.fr"
-				rel="external"
-				class="underline underline-green-400 underline-offset-4 text-green-600 hover:text-green-400 <sm:hidden"
-				>Aide Retrofit</a
-			>
-		{/if}
-	</header>
-	<div class="pb-6 {!isEmbeded ? 'flex-1' : ''}">
-		<slot />
-	</div>
-	<Footer />
-
-	{#if !dev && enableTracking}
-		<script defer data-domain="mesaidesvelo.fr" src="/js/script.js"></script>
-	{/if}
-</div>
-
-<style>
-	:global(body) {
-		min-height: 100vh;
-	}
-
-	.embeded-too-small {
-		display: none;
-	}
-
-	@media (max-height: 300px) {
-		.embeded-too-small + .app {
-			display: none;
-		}
-
-		.embeded-too-small {
-			display: flex;
-		}
-	}
-</style>
+<slot />

src/routes/dev/+layout.svelte

@@ -0,0 +1,4 @@
+<svelte:head>
+	<meta name="robots" content="noindex" />
+</svelte:head>
+<slot />

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

@@ -0,0 +1,49 @@
+<script>
+	import miniaturesManifest from '$lib/data/miniatures.json';
+	import { engine } from '$lib/engine';
+
+	const aidesRuleNames = Object.keys(engine.getParsedRules()).filter(
+		(ruleName) => ruleName.startsWith('aides .') && engine.getRule(ruleName).rawNode.titre
+	);
+
+	function simplifyTitle(title) {
+		return 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();
+	}
+</script>
+
+<h1 class="mx-4 my-2 font-bold font-serif">
+	<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"
+		>DEV</span
+	>
+	Contrôle des miniatures
+</h1>
+
+<div
+	class="grid gap-2 items-stretch mx-4 mb-10"
+	style="grid-template-columns: repeat(auto-fill,minmax(min(100%,120px),1fr));"
+>
+	{#each aidesRuleNames as aideRuleName}
+		{@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}
+			</div>
+			<h3 class="text-xs text-center mt-4">{simplifyTitle(title)}</h3>
+		</article>
+	{/each}
+</div>