feat: Ajout d'une page de recherche de Services et Structures par mots-clé

[jbuget]

🍣 Problème

Nous sommes souvent sollicités par nos utilisateurs qui nous demandent d'ajouter des possibilités de recherche textuelle sur la plateforme DORA.

Nous nous posons la question de savoir dans quelle mesure proposer de la recherche textuelle pour les Services ou les Structures à nos usagers Accompagnateurs leur permettrait de trouver plus vite, facilement et efficacement une solution adaptée à la situation du Bénéficiaire qu'ils aident.

Nous souhaitons mener une expérimentation à peu de frais (temps, argent, code, déploiement, énergie) pour évaluer cette hypothèse métier.

🍓 Solution

Ajouter une nouvelle page expérimentale – /recherche-textuelle – qui intègre un moteur de recherche de Google (Google Custom Search Engine), lequel s'appuie sur l'indexation et la recherche des structures et services référencés via Google Search (grâce au sitemap de DORA).

Pour des raisons pratiques et éthiques, nous ne souhaitons pas ancrer cette solution dans le long terme. Nous en faisons une décision technique et un moyen pragmatique et rapide d'évaluation d'un besoin + piste de solution. La solution technique n'a pas vocation à perdurer au-delà de quelques mois en production, le temps de recueillir suffisamment de résultats et d'enseignements utiles.

⚠️ Important ! ⚠️ Cette PR ajoute une nouvelle variable d'environnement statique publique côté front (donc du style VITE_XXX dans le fichier .env). Si cette variable n'est pas définie, alors la page n'affiche que l'encart pour indiquer qu'il s'agit d'une modalité en cours de test, sans rien d'autre.

🤖 Implémentation

1/ Déclaration et configuration d'un nouveau Programmable Search Engine dans le panneau de contrôle (https://programmablesearchengine.google.com/controlpanel/all) :

• définition des URLs d'indexation dans lesquelles piocher pour proposer des résultats
• définition des onglets (i.e. libellés) "Services" et "Structures"
• définition du layout (searchbar et result list sur une même page)
• définition des polices et couleurs (boutons et textes)
• définition des paramètres d'URL (i.e. query params) de la page couplés aux composants de recherche du moteur (q)

À la fin, nous obtenons un identifiant de moteur (publique) ainsi qu'un snippet de code à intégrer dans notre application front-end / Sveltekit.

2/ Dans la mesure où il s'agit d'une expérimentation et que le code sera retirée et oublié dans quelques semaines, nous prenons le parti de ne pas over-engineerer la solution. Nous nous contentons d'intégrer le snippet de code directement dans la page /recherche-textuelle/+page.svelte. Pour cela, nous surchargeons l'en-tête de la page via le tag <svelte:head>.

Le composant fourni par Google se charge bien et les styles définis dans le panneau de contrôle sont bien appliqués.

Toutefois, il y a quelques éléments qui gâchent un peu le rendu d'un point de vue esthétique (un padding général autour des composants et des images "Impulsés / Optimisés par Google" de mauvais effet, malgré que nous ayons bien obtenu le droit auprès de Google de cacher la marque et activé l'option idoine). Nous sommes obligés de forcer du CSS dans l'en-tête (lorsque les styles sont définis en bas de page, le composant ne s'affichait plus).

Par défaut, le composant Google charge de nombreuses ressources sous-jacentes (images, scripts, etc.). Nous sommes obligés de les intégrer en partie dans nos CSP. Nous ignorons les ressources que nous estimons trop invasives, inutiles ou nocives pour les données et l'expérience Web de nos utilisateurs (ex : ce qui a trait au tracking ou à la publicité).

3/ Afin de recueillir des retours qualitatifs directement de la part de nos usagers, nous ajoutons un lien vers un formulaire (Tally).

4/ TODO : Lorsque la solution sera déployée, il faudra ajouter dans notre solution de suivi (Matomo) les bons tags & events.

☑️ Recette

• Avoir une nouvelle page dans le site accessible à dora.xxx/recherche-textuelle
• Voire le bon chemin dans le fil d'Ariane
• Voir l'encadré (en-dessous du composant double Google) qui explique l'expérimentation (de type Notice / warning)
• Avoir un lien vers le formulaire Tally de prise de feedbacks
• Voir les éléments du composant Google CSE dans le style de DORA / des maquettes (sans les logos Google)
• Pouvoir saisir des mots-clés de recherche textuelle dans une barre de saisie de texte (soumettable via le bouton "loupe" ou la touche clavier "entrée")
• Voir les résultats proposés par Google, issus de l'indexation par Google Search Engine (exclusivement les Services et Structures dites DORA, i.e. saisis, gérés et publiés par les responsables de structures directement sur DORA)
• Pouvoir accéder à une Fiche Service / Structure directement depuis l'un des résultats
• Pouvoir revenir en arrière depuis une Fiche Service / Structure en ayant la recherche conservée…
• … ainsi que l'onglet sélectionné ("Tous les résultats", "Services", "Structures")
• Voir que l'URL se met à jour à chaque soumission de recherche ou retour dans l'historique

[ggounot]

LGTM 🚀 Bravo pour les hacks de haut niveau !

[service-dev-gip-inclusion]

Page de recherche par mots clés