feat(search): Ajout de Google CSE (moteur de recherche)

Il s'agit d'un test produit, pour valider l'hypothèse selon laquelle la recherche textuelle permettrait aux accompagnateurs de trouver plus facilement et rapidement les services d'insertion pour la personne qu'ils accompagnent.

Plutôt que poser toute une architecture interne de moteur de recherche textuelle avancée, nous testons un prototype très rapide basé sur Google.

Celui-ci ne permet de rechercher et proposer seulement les services gérés dans DORA (donc, pas ceux de data•inclusion), référencés sur Google Search.

La fonctionnalité embarque :
* une nouvelle page à l'URL /recherche-textuelle
* cette page est non-SSR
* pour activer la fonctionnalité, il faut au prélable avoir définie la variable d'environnement VITE_GOOGLE_CSE_ID (fichier .env pour du localhost)
* les styles sont définis côté IHM d'admin de Google CSE (cse.google.com), sauf pour certains éléments spécifiques
* attention ! cette fonctionnalié oblige à ouvrir de nombreuses CSP et notamment autoriser le `unsafe-eval` pour le type "script-src"

Dans les prochains mois, une fois que l'expérience aura porté ses résultats et que l'hypothèse pourra être conclue (validée ou pas), ce code sera retiré.

front/.env-example

@@ -13,3 +13,5 @@ VITE_PUBLIC_MATOMO_CONTAINER_URL=# ex: "https://<matomo_host>/js/container_<cont
 VITE_OIDC_AUTH_BACKEND=# proconnect | inclusionconnect
 
 VITE_WARNING_BANNER=
+
+VITE_GOOGLE_CSE_ID=

front/src/lib/components/display/breadcrumb.svelte

@@ -5,6 +5,7 @@
   type BreadcrumbLocation =
     | "home"
     | "search"
+    | "text-search"
     | "legal"
     | "cgu"
     | "model"
@@ -37,6 +38,7 @@
 
   const locationToText: Record<string, string> = {
     search: "Recherche",
+    "text-search": "Recherche par mots-clés",
     login: "Accéder à DORA",
     legal: "Mentions légales",
     cgu: "Conditions générales d’utilisation",

front/src/lib/env.ts

@@ -7,3 +7,4 @@ export const METABASE_EMBED_URL = import.meta.env.VITE_METABASE_EMBED_URL;
 export const WARNING_BANNER = import.meta.env.VITE_WARNING_BANNER;
 export const OIDC_AUTH_BACKEND =
   import.meta.env.VITE_OIDC_AUTH_BACKEND || "proconnect";
+export const GOOGLE_CSE_ID = import.meta.env.VITE_GOOGLE_CSE_ID;

front/src/routes/recherche-textuelle/+page.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+
+  import Breadcrumb from "$lib/components/display/breadcrumb.svelte";
+  import CenteredGrid from "$lib/components/display/centered-grid.svelte";
+  import { GOOGLE_CSE_ID } from "$lib/env";
+
+  import type { PageData } from "./$types";
+  import Notice from "$lib/components/display/notice.svelte";
+</script>
+
+<svelte:head>
+  {#if GOOGLE_CSE_ID}
+    <!-- Google Custom Search Engine -->
+    <script
+      async
+      src={`https://cse.google.com/cse.js?cx=${GOOGLE_CSE_ID}`}
+    ></script>
+
+    <!-- Les couleurs et polices sont définies directement depuis l'interface de gestion du moteur de recherche. -->
+    <!-- Pour ce qui est des espacements ou de certains éléments non souhaitables, il faut les gérer ici. -->
+    <style>
+      .gsc-control-cse {
+        padding: 0 !important;
+      }
+      .gsc-input {
+        background: none !important;
+      }
+      .gcsc-find-more-on-google-branding {
+        display: none !important;
+      }
+    </style>
+  {/if}
+</svelte:head>
+
+<CenteredGrid>
+  <div class="gap-s32 flex flex-col">
+    <h1 class="sr-only">
+      Résultats de votre recherche de services d’insertion
+    </h1>
+
+    <Breadcrumb currentLocation="text-search" dark></Breadcrumb>
+
+    <div>
+      <p class="text-f12 text-gray-text-alt2 italic">
+        Saisissez vos mots-clés et cliquez sur la loupe pour lancer la
+        recherche.
+      </p>
+      <div class="gcse-search"></div>
+    </div>
+
+    <Notice
+      title="Nous expérimentons la recherche par mot-clés pour tester son efficacité"
+      type="warning"
+      showIcon={false}
+    >
+      <div>
+        Vous allez tester une version expérimentale de notre moteur de
+        recherche. Les résultats pourraient être moins précis ou moins nombreux
+        qu’une recherche par thématiques ou besoins. Vos retours seront précieux
+        pour l’améliorer. <a
+          class="text-magenta-cta underline"
+          href="https://tally.so/r/mYJ1qW"
+          target="_blank">Donnez votre avis</a
+        >
+      </div>
+    </Notice>
+  </div>
+</CenteredGrid>

front/src/routes/recherche-textuelle/+page.ts

@@ -0,0 +1 @@
+export const ssr = false;

front/svelte.config.js

@@ -27,12 +27,18 @@ const config = {
           "https://openmaptiles.github.io/osm-bright-gl-style/",
           "https://matomo.inclusion.beta.gouv.fr",
           "https://api.collectivite.fr",
+          "https://cse.google.com",
         ].filter((source) => !!source),
         "script-src": [
           "self",
           "unsafe-inline",
           "https://tally.so/widgets/embed.js",
           "https://matomo.inclusion.beta.gouv.fr",
+          "https://cse.google.com",
+          "https://www.google.com",
+          "http://clients1.google.com",
+          "http://cse.google.com/adsense/search/async-ads.js",
+          "unsafe-eval",
         ],
         "worker-src": ["self", "blob:"],
         "child-src": [
@@ -42,11 +48,24 @@ const config = {
           "https://tube.numerique.gouv.fr",
         ],
         "font-src": ["self"],
-        "img-src": ["self", "data:"],
+        "frame-src": [
+          "self",
+          "https://cse.google.com",
+          "https://syndicatedsearch.goog",
+        ],
+        "img-src": [
+          "self",
+          "data:",
+          "https://www.google.com",
+          "http://clients1.google.com",
+          "https://ssl.gstatic.com",
+          "https://encrypted-tbn0.gstatic.com",
+        ],
         "style-src": [
           "self",
           "https://tally.so/widgets/embed.js",
           "unsafe-inline",
+          "https://www.google.com",
         ],
       },
     },