From 5998e64e814121ffb31f62e53784e41d01ad53c1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alexandre=20Bult=C3=A9?= <alexandre@bulte.net>
Date: Thu, 16 Jan 2025 10:00:25 +0100
Subject: [PATCH] feat: add configurable banners to /datasets and /topics
 (#644)

* feat: add configurable banners to /datasets and /topics

* add anchor/hash to search callback

* datasets: wording

* bouquets: wording
---
 configs/ecospheres/config.yaml                |  8 ++++
 src/assets/main.css                           |  7 +++
 .../views/indicators/IndicatorsListView.vue   |  8 +---
 src/views/bouquets/BouquetsListView.vue       | 27 ++++++++---
 src/views/datasets/DatasetsListView.vue       | 47 +++++++++----------
 5 files changed, 61 insertions(+), 36 deletions(-)

diff --git a/configs/ecospheres/config.yaml b/configs/ecospheres/config.yaml
index ac447834..1a4de50a 100644
--- a/configs/ecospheres/config.yaml
+++ b/configs/ecospheres/config.yaml
@@ -158,6 +158,10 @@ website:
     harvest_backends_quality_warning:
       - CSW-ISO-19139
     show_extended_information_panel: true
+    banner:
+      title: Un guichet unique pour l’accès aux données environnementales
+      content: |
+        En collaboration étroite avec <b>data.gouv</b><i>.fr</i>, les plateformes de données territoriales et les plateformes thématiques, le CGDD oeuvre à la centralisation de toutes les données utiles à l’appui des politiques publiques du pôle ministériel. <i>ecologie.</i><b>data.gouv</b><i>.fr</i> expose dans cet onglet les données publiées par des organisations à caractère environnemental. Néanmoins, toute donnée publiée sur <b>data.gouv</b><i>.fr</i> peut être associée à un bouquet.
   topics:
     slug: bouquets
     name: bouquet
@@ -174,6 +178,10 @@ website:
     can_add_topics:
       everyone: true
       authorized_users:
+    banner:
+      title: Cataloguer les usages des données territoriales
+      content: |
+        Le module de bouquet offre aux acteurs du développement durable un cadre pérenne et collaboratif pour documenter et valoriser les données qu'ils utilisent. Les bouquets permettent de partager des méthodologies, de valoriser des initiatives locales avec un potentiel d’extension nationale, ou encore de signaler des besoins en matière d’accès ou de standardisation des données. Les bouquets sont conçus pour s’enrichir au fil du temps : de nouvelles données peuvent y être ajoutées à mesure qu’elles sont publiées ou identifiées, garantissant ainsi une réponse toujours plus complète et adaptée aux thématiques abordées. Toute donnée présente sur <b>data.gouv</b><i>.fr</i> peut être associée à un bouquet.
   sitemap:
     - name: Accueil
       path: /
diff --git a/src/assets/main.css b/src/assets/main.css
index 2a65c504..a591a94b 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -203,3 +203,10 @@ body {
 .datagouv-components .fr-search-bar .fr-btn {
   border-radius: 0 0.25rem 0 0;
 }
+
+.hero-banner {
+  background: #f3f3f3;
+  p:last-child {
+    margin-bottom: 0;
+  }
+}
diff --git a/src/custom/ecospheres/views/indicators/IndicatorsListView.vue b/src/custom/ecospheres/views/indicators/IndicatorsListView.vue
index 073d2c35..9bdfb938 100644
--- a/src/custom/ecospheres/views/indicators/IndicatorsListView.vue
+++ b/src/custom/ecospheres/views/indicators/IndicatorsListView.vue
@@ -62,7 +62,7 @@ const search = useDebounceFn((query) => {
   <div class="fr-container datagouv-components fr-my-2w">
     <h1>Indicateurs territoriaux</h1>
   </div>
-  <section class="fr-container--fluid hero datagouv-components">
+  <section class="fr-container--fluid hero-banner datagouv-components">
     <div class="fr-container fr-py-12v">
       <h2>Les indicateurs territoriaux, qu’est-ce que c’est&nbsp;?</h2>
       <p>
@@ -72,7 +72,7 @@ const search = useDebounceFn((query) => {
         identifier des problématiques spécifiques, et à orienter les décisions
         publiques et les politiques de développement.
       </p>
-      <p class="fr-mb-0">
+      <p>
         Ils sont essentiels pour un diagnostic territorial et pour le suivi des
         évolutions dans le temps.
       </p>
@@ -124,10 +124,6 @@ const search = useDebounceFn((query) => {
 </template>
 
 <style scoped>
-.hero {
-  background: #f3f3f3;
-}
-
 /* put above header (ground+500) so that multiselect floats above menu */
 .fr-sidemenu {
   z-index: calc(var(--ground) + 600);
diff --git a/src/views/bouquets/BouquetsListView.vue b/src/views/bouquets/BouquetsListView.vue
index 7a17f662..f4f5e31f 100644
--- a/src/views/bouquets/BouquetsListView.vue
+++ b/src/views/bouquets/BouquetsListView.vue
@@ -7,6 +7,7 @@ import { useRoute, useRouter } from 'vue-router'
 import GenericContainer from '@/components/GenericContainer.vue'
 import BouquetList from '@/components/bouquets/BouquetList.vue'
 import BouquetSearch from '@/components/bouquets/BouquetSearch.vue'
+import config from '@/config'
 import type { BreadcrumbItem } from '@/model/breadcrumb'
 import {
   AccessibilityPropertiesKey,
@@ -14,6 +15,7 @@ import {
 } from '@/model/injectionKeys'
 import { NoOptionSelected } from '@/model/theme'
 import { useUserStore } from '@/store/UserStore'
+import { fromMarkdown } from '@/utils'
 import { useTopicsConf } from '@/utils/config'
 
 const { topicsSlug, topicsName } = useTopicsConf()
@@ -44,6 +46,7 @@ const props = defineProps({
   }
 })
 
+const banner = config.website.topics.banner
 const selectedTheme = ref(NoOptionSelected)
 const selectedSubtheme = ref(NoOptionSelected)
 const selectedGeozone: Ref<string | null> = ref(null)
@@ -109,7 +112,8 @@ const search = useDebounceFn(() => {
   router
     .push({
       name: topicsSlug,
-      query: { ...route.query, q: selectedQuery.value }
+      query: { ...route.query, q: selectedQuery.value },
+      hash: '#bouquets-list'
     })
     .then(() => {
       setLiveResults()
@@ -133,11 +137,9 @@ watch(
   <div class="fr-container">
     <DsfrBreadcrumb class="fr-mb-1v" :links="breadcrumbList" />
   </div>
-  <GenericContainer>
-    <div
-      class="fr-grid-row fr-grid-row--gutters fr-grid-row--middle justify-between fr-pb-1w"
-    >
-      <h1 class="fr-col-auto fr-mb-2v">{{ capitalize(topicsName) }}s</h1>
+  <div class="fr-container datagouv-components fr-my-2v">
+    <div class="fr-grid-row fr-grid-row--middle justify-between fr-mb-3w">
+      <h1 class="fr-mb-0">{{ capitalize(topicsName) }}s</h1>
       <div
         v-if="canAddBouquet"
         class="fr-col-auto fr-grid-row fr-grid-row--middle"
@@ -148,6 +150,19 @@ watch(
         </router-link>
       </div>
     </div>
+  </div>
+  <section
+    v-if="banner"
+    class="fr-container--fluid hero-banner datagouv-components fr-mb-4w"
+  >
+    <div class="fr-container fr-py-12v">
+      <!-- eslint-disable-next-line vue/no-v-html -->
+      <h2 v-html="banner.title" />
+      <!-- eslint-disable-next-line vue/no-v-html -->
+      <div v-html="fromMarkdown(banner.content)" />
+    </div>
+  </section>
+  <GenericContainer id="bouquets-list">
     <div class="fr-col-md-12 fr-mb-2w">
       <SearchComponent
         id="search-bouquet"
diff --git a/src/views/datasets/DatasetsListView.vue b/src/views/datasets/DatasetsListView.vue
index 95e8ecf6..2893223c 100644
--- a/src/views/datasets/DatasetsListView.vue
+++ b/src/views/datasets/DatasetsListView.vue
@@ -23,6 +23,7 @@ import {
 import { useOrganizationStore } from '@/store/OrganizationStore'
 import { useSearchStore } from '@/store/SearchStore'
 import { useTopicStore } from '@/store/TopicStore'
+import { fromMarkdown } from '@/utils'
 import { useTopicsConf } from '@/utils/config'
 
 defineEmits(['search'])
@@ -63,7 +64,8 @@ const datasets = computed(() => store.datasets)
 const total = computed(() => store.total)
 const pages = computed(() => store.pagination)
 
-const title: string = config.website.formatted_title
+const title = config.website.title as string
+const banner = config.website.datasets.banner
 const topicItems = config.website.list_search_topics as TopicItemConf[]
 const hasOrganizationFilter = config.website.datasets
   .organization_filter as boolean
@@ -141,7 +143,11 @@ const onSelectOrganization = (orgId: string) => {
 }
 
 const search = () => {
-  router.push({ path: '/datasets', query: computeUrlQuery({ page: 1 }) })
+  router.push({
+    path: '/datasets',
+    query: computeUrlQuery({ page: 1 }),
+    hash: '#datasets-list'
+  })
 }
 
 const goToPage = (page: number) => {
@@ -229,35 +235,28 @@ onMounted(() => {
   <div class="fr-container">
     <DsfrBreadcrumb class="fr-mb-1v" :links="links" />
   </div>
-  <GenericContainer>
-    <div
-      class="fr-grid-row fr-grid-row--gutters fr-grid-row--middle justify-between fr-pb-1w"
-    >
-      <h1 class="fr-col-auto fr-mb-2v">Jeux de données</h1>
-      <!-- FIXME: https://github.com/ecolabdata/ecospheres/issues/472 -->
-      <!-- <div class="fr-col-auto fr-grid-row fr-grid-row--middle">
-        <a
-          v-if="userStore.isAdmin"
-          :href="`${config.datagouvfr.base_url}/fr/datasets.csv?topic=${config.universe.topic_id}`"
-          class="fr-btn fr-btn--secondary fr-btn--md inline-flex fr-mb-1w fr-ml-2w"
-        >
-          <VIconCustom
-            name="file-download-line"
-            class="fr-mr-1w"
-            align="middle"
-          />
-          Exporter la liste des jeux de données
-        </a>
-      </div> -->
+  <div class="fr-container datagouv-components fr-my-2v">
+    <h1>Jeux de données</h1>
+  </div>
+  <section
+    v-if="banner"
+    class="fr-container--fluid hero-banner datagouv-components fr-mb-4w"
+  >
+    <div class="fr-container fr-py-12v">
+      <!-- eslint-disable-next-line vue/no-v-html -->
+      <h2 v-html="banner.title" />
+      <!-- eslint-disable-next-line vue/no-v-html -->
+      <div v-html="fromMarkdown(banner.content)" />
     </div>
+  </section>
+  <GenericContainer id="datasets-list">
     <p v-show="query" ref="queryResults" tabindex="-1">
       {{ total }} résultats de recherche pour "{{ query }}".
     </p>
-    <p v-if="!query">
+    <p v-if="!query && !banner">
       <!-- eslint-disable-next-line vue/no-v-html -->
       Parcourir tous les jeux de données présents sur <span v-html="title" />.
     </p>
-
     <div class="fr-col-md-12 fr-mb-2w">
       <SearchComponent
         id="search-bouquet"