@datagouv/components-next 0.0.7 → 0.0.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datagouv/components-next",
-  "version": "0.0.7",
+  "version": "0.0.9",
   "private": false,
   "type": "module",
   "main": "./src/main.ts",
@@ -18,8 +18,7 @@
     "lint": "eslint . --fix",
     "format": "prettier --write src/",
     "css": "tailwindcss -i ./assets/main.css -o ./dist/components.css --minify --optimize",
-    "i18n": "intlify compile --source ./src/locales/**/*.json --output ./dist/locales",
-    "preversion": "npm run build-only && npm run css && npm run i18n",
+    "preversion": "npm run build-only && npm run css",
     "publish-stable": "npm publish --access public"
   },
   "dependencies": {
@@ -27,13 +26,15 @@
     "@remixicon/vue": "^4.5.0",
     "@vueuse/core": "^13.1.0",
     "chart.js": "^4.4.8",
+    "dompurify": "^3.2.5",
+    "maplibre-gl": "^5.5.0",
     "markdown-it": "^14.1.0",
     "ofetch": "^1.4.1",
+    "pmtiles": "^4.3.0",
     "popmotion": "^8.7.6",
     "remark": "^15.0.1",
     "remark-gfm": "^4.0.1",
     "strip-markdown": "^6.0.0",
-    "swagger-themes": "^1.4.3",
     "swagger-ui": "^5.20.1",
     "vue": "^3.5.13",
     "vue-content-loader": "^2.0.1",
@@ -46,10 +47,11 @@
     "@tailwindcss/cli": "^4.0.8",
     "@tailwindcss/typography": "^0.5.16",
     "@tsconfig/node22": "^22.0.0",
+    "@types/geojson": "^7946.0.16",
     "@types/node": "^22.13.1",
     "@types/swagger-ui": "^3.52.4",
     "@vitejs/plugin-vue": "^5.2.1",
-    "@vue/eslint-config-prettier": "^10.1.0",
+    "@vue/eslint-config-prettier": "^10.2.0",
     "@vue/eslint-config-typescript": "^14.3.0",
     "@vue/tsconfig": "^0.7.0",
     "eslint": "^9.18.0",

package/src/components/AvatarWithName.vue

@@ -6,15 +6,19 @@
       :size
       :rounded="true"
     />
-    <span class="fr-text--bold">
+    <AppLink
+      :to="user.page"
+      class="fr-text--bold"
+    >
       {{ user.first_name }}
       {{ user.last_name }}
-    </span>
+    </AppLink>
   </span>
 </template>
 
 <script setup lang="ts">
 import type { User } from '../types/users'
+import AppLink from './AppLink.vue'
 import Avatar from './Avatar.vue'
 
 withDefaults(defineProps<{

package/src/components/BannerAction.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="group flex items-center justify-between rounded border p-2.5"
+    class="group flex items-center justify-between gap-2 rounded border p-2.5"
     :data-banner-action-type="type"
     :class="{
       '!border-datagouv bg-datagouv-lightest text-datagouv-dark': type === 'primary',

package/src/components/BrandedButton.vue

@@ -1,7 +1,8 @@
 <template>
+  <!-- 46 42 32 -->
   <component
     :is="href ? AppLink: 'button'"
-    class="inline-flex items-center rounded-full font-medium border !bg-none !no-underline after:content-none"
+    class="inline-flex items-center justify-center rounded-full font-medium border !bg-none !no-underline after:content-none"
     :class="[colors, sizes, removePaddingsIfNoBorders, isDisabled ? '!opacity-50' : '', iconRight && !newTab ? 'flex-row-reverse space-x-reverse' : '']"
     :disabled="isDisabled"
     :aria-disabled="isDisabled"
@@ -47,19 +48,20 @@ import {
   useSlots,
 } from 'vue'
 import { RiExternalLinkLine } from '@remixicon/vue'
+import type { RouteLocation } from 'vue-router'
 import AppLink from './AppLink.vue'
 import { bannerActionTypeKey } from './BannerAction.vue'
 
 type ColorType = 'primary' | 'primary-soft' | 'primary-softer' | 'secondary' | 'secondary-softer' | 'warning' | 'danger' | 'tertiary'
 
 const props = withDefaults(defineProps<{
-  size?: '2xs' | 'xs' | 'sm' | 'lg'
+  size?: '2xs' | 'xs' | 'sm' | 'lg' | 'xl'
   color?: ColorType
   disabled?: boolean
   loading?: boolean
   icon?: Component
   iconAttrs?: Record<string, string>
-  href?: string
+  href?: string | RouteLocation
   newTab?: boolean
   iconOnly?: boolean
   iconRight?: boolean
@@ -109,7 +111,7 @@ const isDisabled = computed(() => props.disabled || props.loading)
 const colors = computed(() => {
   return {
     'primary': `text-white bg-datagouv-dark !border-datagouv-dark ${!isDisabled.value ? 'hover:!bg-datagouv-hover hover:!border-datagouv-hover' : ''}`,
-    'primary-soft': `text-datagouv-dark bg-transparent !border-datagouv-dark ${!isDisabled.value ? '[&&]:hover:!bg-gray-some' : ''}`,
+    'primary-soft': `text-datagouv-dark bg-white !border-datagouv-dark ${!isDisabled.value ? '[&&]:hover:!bg-gray-some' : ''}`,
     'primary-softer': `text-datagouv-dark bg-transparent !border-transparent ${!isDisabled.value ? '[&&]:hover:!bg-gray-some' : ''}`,
     'secondary': `text-gray-plain bg-white !border-gray-plain ${!isDisabled.value ? '[&&]:hover:!bg-gray-some' : ''}`,
     'secondary-softer': `text-gray-plain !border-transparent ${!isDisabled.value ? '[&&]:hover:!bg-gray-some' : ''}`,
@@ -121,9 +123,10 @@ const colors = computed(() => {
 
 const sizes = computed(() => {
   return {
-    'lg': `text-lg ${hasText.value ? 'px-4 py-2 space-x-2' : 'p-3'}`,
-    'sm': `text-sm leading-none ${hasText.value ? 'px-4 py-3 space-x-1' : 'p-2.5'}`,
-    'xs': `text-xs leading-[0.875rem] ${hasText.value ? 'px-4 py-2 space-x-1' : 'p-2'}`,
+    'xl': `text-xl h-16 ${hasText.value ? 'px-4 space-x-2' : 'w-16 px-3'}`,
+    'lg': `text-lg h-12 ${hasText.value ? 'px-4 space-x-2' : 'w-12 px-3'}`,
+    'sm': `text-sm h-10 leading-none ${hasText.value ? 'px-4 space-x-1' : 'w-10 px-2.5'}`,
+    'xs': `text-xs h-8 leading-[0.875rem] ${hasText.value ? 'px-4 space-x-1' : 'w-8 px-2'}`,
     '2xs': `text-xs leading-[0.875rem] p-1 space-x-1`,
   }[size.value]
 })
@@ -137,7 +140,8 @@ const removePaddingsIfNoBorders = computed(() => {
   if (props.keepMarginsEvenWithoutBorders) return ''
 
   return {
-    'lg': hasText.value ? '-mx-6' : '-mx-3',
+    'xl': hasText.value ? '-mx-4' : '-mx-3',
+    'lg': hasText.value ? '-mx-4' : '-mx-3',
     'sm': hasText.value ? '-mx-4' : '-mx-2.5',
     'xs': hasText.value ? '-mx-4' : '-mx-2',
     '2xs': '-m-1',
@@ -146,6 +150,7 @@ const removePaddingsIfNoBorders = computed(() => {
 
 const iconSize = computed(() => {
   return {
+    'xl': (hasBorders.value || hasText.value) ? 'size-8' : 'size-10',
     'lg': (hasBorders.value || hasText.value) ? 'size-6' : 'size-8',
     'sm': (hasBorders.value || hasText.value) ? 'size-4' : 'size-6',
     'xs': (hasBorders.value || hasText.value) ? 'size-3' : 'size-5',

package/src/components/CopyButton.vue

@@ -1,33 +1,33 @@
 <template>
   <button
     type="button"
-    class="text-sm mb-0 whitespace-nowrap relative p-1 text-gray-medium leading-none"
+    class="text-sm mb-0 md:whitespace-nowrap relative p-1 text-gray-medium leading-none text-left"
     :class="{ 'border bg-white rounded-sm text-gray-title': hideLabel }"
     @click="copy"
   >
     <span
       v-if="copied"
-      class="flex items-center"
+      class="flex items-center gap-1"
       :class="{ 'flex-row-reverse': reverse }"
       style="color: #3558a2;"
     >
-      <RiCheckLine class="size-4 inline" />
+      <RiCheckLine class="flex-none size-4 inline" />
       <span
-        class="fr-ml-1v copy-label"
+        class="copy-label"
         :class="{ 'fr-sr-only': hideLabel }"
       >{{ copiedLabel }}</span>
     </span>
     <span
       v-if="!copied"
-      class="flex items-center"
+      class="flex items-center gap-1"
       :class="{ 'flex-row-reverse': reverse }"
     >
       <component
         :is="hideLabel ? RiClipboardLine : RiFileCopyLine"
-        class="size-4 inline"
+        class="size-4 flex-none inline"
       />
       <span
-        class="fr-ml-1v copy-link copy-label"
+        class="copy-link copy-label"
         :class="{ 'fr-sr-only': hideLabel }"
       >{{ label }}</span>
     </span>

package/src/components/DataserviceCard.vue

@@ -1,6 +1,6 @@
 <template>
   <article
-    class="my-4 p-4 border border-gray-default fr-enlarge-link"
+    class="my-4 p-4 bg-white border border-gray-default fr-enlarge-link"
     :class="{
       'border-tabular-api': isTabularApi,
       'mt-6': showBadge,
@@ -18,7 +18,14 @@
           class="fr-icon-lock-line fr-icon--sm"
           aria-hidden="true"
         />
-        {{ t('Restricted access') }}
+        {{ t('Accès restreint') }}
+      </p>
+      <p
+        v-else-if="dataservice.access_type === 'open_with_account'"
+        class="fr-badge fr-badge--sm fr-badge--mention-grey text-gray-medium mr-2"
+      >
+        <RiPassValidLine class="size-4 mr-1" />
+        {{ t('Ouvert avec un compte') }}
       </p>
       <p
         v-if="dataservice.private"
@@ -28,7 +35,7 @@
           class="fr-icon-lock-line fr-icon--sm"
           aria-hidden="true"
         />
-        {{ t('Draft') }}
+        {{ t('Brouillon') }}
       </p>
       <p
         v-if="dataservice.archived_at"
@@ -38,7 +45,7 @@
           class="fr-icon-lock-line fr-icon--sm"
           aria-hidden="true"
         />
-        {{ t('Archived') }}
+        {{ t('Archivé') }}
       </p>
     </div>
     <h4 class="fr-text--md fr-mb-0">
@@ -77,15 +84,15 @@
     </h4>
     <p
       v-if="dataservice.organization || dataservice.owner"
-      class="text-sm text-gray-medium inline-flex mt-1 mb-0"
+      class="text-sm text-gray-medium overflow-hidden flex items-center gap-1 mt-1 mb-0"
     >
       <span
         v-if="dataservice.organization"
-        class="not-enlarged"
+        class="block not-enlarged overflow-hidden"
       >
         <AppLink
           v-if="organizationUrl"
-          class="fr-link fr-text--sm"
+          class="link text-sm overflow-hidden"
           :to="organizationUrl"
         >
           <OrganizationNameWithCertificate :organization="dataservice.organization" />
@@ -98,25 +105,46 @@
       <component
         :is="config.textClamp"
         v-else-if="config.textClamp"
-        class="not-enlarged fr-mr-1v"
+        class="not-enlarged mr-1"
         :auto-resize="true"
         :text="ownerName"
         :max-lines="1"
       />
-      <span class="dash-before whitespace-nowrap">{{ t('Updated {date}', { date: formatRelativeIfRecentDate(dataservice.metadata_modified_at, { dateStyle: 'medium' }) }) }}</span>
-    </p>
-    <p class="text-sm text-gray-medium mb-0 mt-1">
-      <span class="fr-icon-information-line fr-icon--sm text-gray-medium" />
-      {{ t('Availability :') }}
-      <span class="text-gray-plain">
-        <template v-if="dataservice.availability">
-          {{ t('{n}%', dataservice.availability) }}
-        </template>
-        <template v-else>
-          {{ t('unknown') }}
-        </template>
-      </span>
+      <RiSubtractLine class="size-4 flex-none fill-gray-medium" />
+      <span class="block whitespace-nowrap">{{ t('Mis à jour {date}', { date: formatRelativeIfRecentDate(dataservice.metadata_modified_at, { dateStyle: 'medium' }) }) }}</span>
     </p>
+    <div class="flex flex-wrap items-center gap-1 mt-1 text-gray-medium">
+      <p class="text-sm mb-0">
+        {{ t('Disponibilité :') }}
+        <span class="text-gray-plain">
+          <template v-if="dataservice.availability">
+            {{ t('{n}%', dataservice.availability) }}
+          </template>
+          <template v-else>
+            {{ t('inconnue') }}
+          </template>
+        </span>
+      </p>
+      <RiSubtractLine class="size-4 flex-none fill-gray-medium" />
+      <p
+        class="text-sm mb-0 flex items-center gap-0.5"
+        :aria-label="t('{n} vues | {n} vue | {n} vues', dataservice.metrics.views)"
+      >
+        <RiEyeLine
+          aria-hidden="true"
+          class="size-3.5"
+        />{{ summarize(dataservice.metrics.views) }}
+      </p>
+      <p
+        class="text-sm mb-0 flex items-center gap-0.5"
+        :aria-label="t('{n} abonnés | {n} abonné | {n} abonnés', dataservice.metrics.followers)"
+      >
+        <RiStarLine
+          aria-hidden="true"
+          class="size-3.5"
+        />{{ summarize(dataservice.metrics.followers) }}
+      </p>
+    </div>
     <component
       :is="config.textClamp"
       v-if="config.textClamp && description && showDescription"
@@ -132,8 +160,10 @@
 import { computed, ref, watchEffect } from 'vue'
 import { useI18n } from 'vue-i18n'
 import type { RouteLocationRaw } from 'vue-router'
+import { RiEyeLine, RiPassValidLine, RiStarLine, RiSubtractLine } from '@remixicon/vue'
 import { useComponentsConfig } from '../config'
-import { formatRelativeIfRecentDate } from '../functions/dates'
+import { useFormatDate } from '../functions/dates'
+import { summarize } from '../functions/helpers'
 import { removeMarkdown } from '../functions/markdown'
 import { getOwnerName } from '../functions/owned'
 import type { Dataservice } from '../types/dataservices'
@@ -163,8 +193,9 @@ const props = withDefaults(defineProps<Props>(), {
 })
 
 const { t } = useI18n()
+const { formatRelativeIfRecentDate } = useFormatDate()
 const ownerName = computed(() => getOwnerName(props.dataservice))
-const showBadge = computed(() => props.dataservice.access_type === 'restricted' || props.dataservice.private || props.dataservice.archived_at)
+const showBadge = computed(() => props.dataservice.access_type === 'restricted' || props.dataservice.access_type === 'open_with_account' || props.dataservice.private || props.dataservice.archived_at)
 
 const config = useComponentsConfig()
 const isTabularApi = computed(() => {

package/src/components/DatasetCard.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="p-4 border border-gray-default relative hover:bg-gray-some">
+  <div class="p-4 border bg-white border-gray-default relative hover:bg-gray-some">
     <div :id />
     <div
       v-if="dataset.private || dataset.archived"
@@ -13,7 +13,7 @@
           class="fr-icon-lock-line fr-icon--sm"
           aria-hidden="true"
         />
-        {{ t('Draft') }}
+        {{ t('Brouillon') }}
       </p>
       <p
         v-if="dataset.archived"
@@ -23,7 +23,7 @@
           class="fr-icon-archive-line fr-icon--sm"
           aria-hidden="true"
         />
-        {{ t('Archived') }}
+        {{ t('Archivé') }}
       </p>
     </div>
     <div class="flex flex-wrap md:flex-nowrap gap-4 items-start">
@@ -70,13 +70,13 @@
         </h4>
         <div
           v-if="dataset.organization || dataset.owner"
-          class="text-sm m-0 flex truncate"
+          class="text-sm m-0 flex items-center truncate"
         >
           <template v-if="dataset.organization">
             <div class="-mr-0.5 flex-initial truncate">
               <AppLink
                 v-if="organizationUrl"
-                class="link text-sm flex items-center relative z-[2] truncate"
+                class="link text-sm overflow-hidden flex items-center relative z-[2] truncate"
                 :to="organizationUrl"
               >
                 <OrganizationNameWithCertificate :organization="dataset.organization" />
@@ -93,45 +93,55 @@
           >
             {{ ownerName }}
           </div>
-          <div class="text-gray-medium dash-before-sm whitespace-nowrap">
-            {{ $t('Updated {date}', { date: formatRelativeIfRecentDate(dataset.last_update, { dateStyle: 'medium' }) }) }}
+          <RiSubtractLine class="size-4 flex-none fill-gray-medium" />
+          <div class="text-gray-medium whitespace-nowrap">
+            {{ $t('Mis à jour {date}', { date: formatRelativeIfRecentDate(dataset.last_update, { dateStyle: 'medium' }) }) }}
           </div>
         </div>
         <div class="mx-0 -mb-1 flex flex-wrap items-center text-sm text-gray-medium">
-          <div class="fr-hidden flex-sm dash-after-sm text-gray-500 -ml-2.5">
+          <div class="fr-hidden flex-sm dash-after-sm text-gray-medium -ml-2.5">
             <DatasetQualityInline
               :quality="dataset.quality"
               :teleport-id="id"
             />
           </div>
-          <div class="fr-grid-row fr-grid-row--middle fr-mr-1v">
+          <div class="flex flex-wrap items-center gap-1">
             <p
-              class="fr-text--sm fr-my-0"
-              :aria-label="t('{n} resources downloads', dataset.metrics.resources_downloads)"
+              class="text-sm mb-0 flex items-center gap-0.5"
+              :aria-label="t('{n} vues | {n} vue | {n} vues', dataset.metrics.views)"
             >
-              <span
-                class="fr-icon-download-line fr-icon--sm fr-px-1v"
+              <RiEyeLine
                 aria-hidden="true"
-              />{{ summarize(dataset.metrics.resources_downloads) }}
+                class="size-3.5"
+              />{{ summarize(dataset.metrics.views) }}
             </p>
             <p
-              class="fr-text--sm fr-my-0"
-              :aria-label="t('{n} followers', dataset.metrics.followers)"
+              class="text-sm mb-0 flex items-center gap-0.5"
+              :aria-label="t('{n} téléchargements des ressources | {n} téléchargement des ressources | {n} téléchargements des ressources', dataset.metrics.resources_downloads)"
             >
-              <span
-                class="fr-icon-star-line fr-icon--sm fr-px-1v"
+              <RiDownloadLine
                 aria-hidden="true"
-              />{{ summarize(dataset.metrics.followers) }}
+                class="size-3.5"
+              />{{ summarize(dataset.metrics.resources_downloads) }}
             </p>
             <p
-              class="fr-text--sm fr-my-0"
-              :aria-label="t('{n} reuses', dataset.metrics.reuses)"
+              class="text-sm mb-0 flex items-center gap-0.5"
+              :aria-label="t('{n} réutilisations | {n} réutilisation | {n} réutilisations', dataset.metrics.reuses)"
             >
-              <span
-                class="fr-icon-line-chart-line fr-icon--sm fr-px-1v"
+              <RiLineChartLine
                 aria-hidden="true"
+                class="size-3.5"
               />{{ summarize(dataset.metrics.reuses) }}
             </p>
+            <p
+              class="text-sm mb-0 flex items-center gap-0.5"
+              :aria-label="t('{n} abonnés | {n} abonné | {n} abonnés', dataset.metrics.followers)"
+            >
+              <RiStarLine
+                aria-hidden="true"
+                class="size-3.5"
+              />{{ summarize(dataset.metrics.followers) }}
+            </p>
           </div>
         </div>
         <component
@@ -151,9 +161,10 @@
 import { useI18n } from 'vue-i18n'
 import type { RouteLocationRaw } from 'vue-router'
 import { computed, ref, useId, watchEffect } from 'vue'
+import { RiDownloadLine, RiEyeLine, RiLineChartLine, RiStarLine, RiSubtractLine } from '@remixicon/vue'
 import type { Dataset, DatasetV2 } from '../types/datasets'
 import { summarize } from '../functions/helpers'
-import { formatRelativeIfRecentDate } from '../functions/dates'
+import { useFormatDate } from '../functions/dates'
 import { getOwnerName } from '../functions/owned'
 import { removeMarkdown } from '../functions/markdown'
 import { useComponentsConfig } from '../config'
@@ -186,6 +197,7 @@ const props = withDefaults(defineProps<Props>(), {
 })
 
 const { t } = useI18n()
+const { formatRelativeIfRecentDate } = useFormatDate()
 const id = useId()
 const ownerName = computed(() => getOwnerName(props.dataset))
 const config = useComponentsConfig()

package/src/components/DatasetInformationPanel.vue

@@ -1,5 +1,5 @@
 <template>
- <div class="py-6 mb-6 border-bottom border-gray-default">
+  <div class="py-6 mb-6 border-bottom border-gray-default">
     <h2 class="subtitle subtitle--uppercase">
       {{ $t('Informations') }}
     </h2>
@@ -10,7 +10,7 @@
           class="fr-col-12 fr-col-sm-6 fr-col-md-4"
         >
           <dt class="subtitle fr-mb-0">
-            {{ $t('License') }}
+            {{ $t('Licence') }}
           </dt>
           <dd class="text-sm m-0 text-gray-medium p-0">
             <code class="bg-grey-some px-1 text-gray-medium">
@@ -22,7 +22,7 @@
         </div>
         <div class="fr-col-12 fr-col-sm-6 fr-col-md-4">
           <dt class="subtitle fr-mb-0">
-            ID
+            {{ $t('Identifiant') }}
           </dt>
           <dd class="text-sm m-0 text-gray-medium p-0">
             {{ dataset.id }}
@@ -33,13 +33,13 @@
   </div>
   <div class="pb-6 mb-6 border-bottom border-gray-default">
     <h2 class="subtitle subtitle--uppercase">
-      {{ $t('Temporality') }}
+      {{ $t('Temporalité') }}
     </h2>
     <div class="fr-text--sm fr-m-0">
       <dl class="fr-grid-row fr-grid-row--gutters">
         <div class="fr-col-12 fr-col-sm-6 fr-col-md-4">
           <dt class="subtitle fr-mb-0">
-            {{ $t('Creation') }}
+            {{ $t('Création') }}
           </dt>
           <dd class="text-sm m-0 text-gray-medium p-0">
             {{ formatDate(dataset.created_at) }}
@@ -50,7 +50,7 @@
           class="fr-col-12 fr-col-sm-6 fr-col-md-4"
         >
           <dt class="subtitle fr-mb-0">
-            {{ $t('Frequency') }}
+            {{ $t('Fréquence') }}
           </dt>
           <dd class="text-sm m-0 text-gray-medium p-0">
             {{ frequency.label }}
@@ -60,7 +60,7 @@
       <dl class="fr-grid-row fr-grid-row--gutters">
         <div class="fr-col-12 fr-col-sm-6 fr-col-md-4">
           <dt class="subtitle fr-mb-0">
-            {{ $t('Last update') }}
+            {{ $t('Dernière mise à jour') }}
           </dt>
           <dd class="text-sm m-0 text-gray-medium p-0">
             {{ formatDate(props.dataset.last_update) }}
@@ -71,7 +71,7 @@
   </div>
   <div class="pb-6 mb-6 border-bottom border-gray-default">
     <h2 class="subtitle subtitle--uppercase">
-      {{ $t('Spatial coverage') }}
+      {{ $t('Couverture spatiale') }}
     </h2>
     <div class="fr-text--sm fr-m-0">
       <dl class="fr-grid-row fr-grid-row--gutters">
@@ -80,7 +80,7 @@
           class="fr-col-12 fr-col-sm-6 fr-col-md-4"
         >
           <dt class="subtitle fr-mb-0">
-            {{ $t('Territorial coverage') }}
+            {{ $t('Couverture territoriale') }}
           </dt>
           <dd class="text-sm m-0 text-gray-medium p-0">
             {{ zonesLabels.join(', ') }}
@@ -91,7 +91,7 @@
           class="fr-col-12 fr-col-sm-6 fr-col-md-4"
         >
           <dt class="subtitle fr-mb-0">
-            {{ $t('Granularity of territorial coverage') }}
+            {{ $t('Granularité de la couverture territoriale') }}
           </dt>
           <dd class="text-sm m-0 text-gray-medium p-0">
             {{ granularity.name }}
@@ -102,15 +102,15 @@
   </div>
   <div class="pb-6 mb-6 border-bottom border-gray-default">
     <h2 class="subtitle subtitle--uppercase">
-      Actions
+      {{ $t('Actions') }}
     </h2>
     <div class="fr-text--sm fr-m-0">
       <h3 class="subtitle fr-mb-1v">
-        {{ $t('Integrate on your website') }}
+        {{ $t('Intégrer sur votre site') }}
         <CopyButton
           :hide-label="true"
-          :label="$t('Copy embed')"
-          :copied-label="$t('Embed copied')"
+          :label="$t(`Copier l'intégration`)"
+          :copied-label="$t('Intégration copiée !')"
           class="fr-my-1w fr-mr-1w"
           :text="getDatasetOEmbedHtml('dataset', dataset.id)"
         />
@@ -128,7 +128,7 @@
   </div>
   <div v-if="hasExtras">
     <ExtraAccordion
-      :button-text="t('See extras')"
+      :button-text="t('Voir les extras')"
       :title-text="t('Extras')"
       :extra="props.dataset.extras"
       title-level="h2"
@@ -136,8 +136,8 @@
   </div>
   <div v-if="props.dataset?.harvest">
     <ExtraAccordion
-      :button-text="t('See harvest')"
-      :title-text="t('Harvest')"
+      :button-text="t('Voir le moissonage')"
+      :title-text="t('Moissonnage')"
       :extra="props.dataset.harvest"
       title-level="h2"
     />
@@ -147,7 +147,7 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { formatDate } from '../functions/dates'
+import { useFormatDate } from '../functions/dates'
 // import useOEmbed from '../../composables/useOEmbed'
 import type { Dataset, DatasetV2 } from '../types/datasets'
 import type { Granularity } from '../types/granularity'
@@ -162,6 +162,7 @@ const props = defineProps<{
   dataset: DatasetV2 | Dataset
 }>()
 const { t } = useI18n()
+const { formatDate } = useFormatDate()
 // const embedText = useOEmbed('dataset', props.dataset.id)
 const textAreaRef = ref<HTMLTextAreaElement | null>(null)