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
opendatateam · Jan 16, 2025 · 5998e64 · 5998e64
1 parent 39bb8c1
commit 5998e64
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 36 deletions.
diff --git 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
@@ -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
@@ -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
@@ -7,13 +7,15 @@ 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,
   type AccessibilityPropertiesType
 } 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
@@ -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"