banner content is now dynamic

components/NewsBanner.vue

@@ -8,18 +8,18 @@
     </div>
     <div class="flex flex-wrap items-center gap-x-4 gap-y-2">
       <div class="text-sm leading-6 text-gray-900">
-        <strong class="font-semibold">3 nov. 2023</strong><svg viewBox="0 0 2 2" class="mx-2 inline h-0.5 w-0.5 fill-current" aria-hidden="true"><circle cx="1" cy="1" r="1" /></svg>
+        <strong class="font-semibold">{{ formatDate(lastNewsItem.date) }}</strong><svg viewBox="0 0 2 2" class="mx-2 inline h-0.5 w-0.5 fill-current" aria-hidden="true"><circle cx="1" cy="1" r="1" /></svg>
       </div>
       <div>
-        Un tronçon de la Voie Lyonnaise 2 terminé !
+        {{ lastNewsItem.newsBannerText }}
       </div>
       <NuxtLink to="/historique" class="flex-none text-lvv-blue-600 py-1 text-sm font-semibold hover:underline">
         Lire l'annonce <span aria-hidden="true">&rarr;</span>
       </NuxtLink>
     </div>
     <div class="flex flex-1 justify-end">
       <button type="button" class="-m-3 p-3 focus-visible:outline-offset-[-4px]" @click="close">
-        <span class="sr-only">Dismiss</span>
+        <span class="sr-only">Fermer</span>
         <Icon name="mdi:close" class="h-5 w-5" aria-hidden="true" />
       </button>
     </div>
@@ -28,7 +28,18 @@
 
 <script setup>
 const emit = defineEmits(['close']);
+
+const { data: lastNewsItem } = await useAsyncData(() => {
+  return queryContent('news').where({ _dir: 'news' }).sort({ date: -1 }).findOne();
+});
+
 function close() {
   emit('close');
 }
+
+function formatDate(date) {
+  const options = { year: 'numeric', month: 'short', day: 'numeric' };
+  return new Date(date).toLocaleDateString('fr-FR', options);
+}
+
 </script>