Merge pull request #197 from benoitdemaegdt/feat-news-banner-markdown

Gestion markdown de l'historique
benoitdemaegdt · Nov 6, 2023 · 0f2e4eb · 0f2e4eb
2 parents 6201e03 + 43efc3e
commit 0f2e4eb
Show file tree

Hide file tree

Showing 8 changed files with 92 additions and 91 deletions.
diff --git a/components/ContentFrame.vue b/components/ContentFrame.vue
@@ -116,5 +116,5 @@ defineProps({
   title: { type: String, required: false, default: undefined },
   description: { type: String, required: true },
   imageUrl: { type: String, required: true }
-})
+});
 </script>
diff --git a/components/NewsBanner.vue b/components/NewsBanner.vue
@@ -1,25 +1,25 @@
 <template>
   <div class="relative isolate flex items-center gap-x-6 overflow-hidden bg-lvv-blue-100 px-6 py-2.5 sm:px-3.5 sm:before:flex-1">
     <div class="absolute left-[max(-7rem,calc(50%-52rem))] top-1/2 -z-10 -translate-y-1/2 transform-gpu blur-2xl" aria-hidden="true">
-      <div class="aspect-[577/310] w-[36.0625rem] bg-gradient-to-r from-[#C84271] to-[#9089fc] opacity-70" style="clip-path: polygon(74.8% 41.9%, 97.2% 73.2%, 100% 34.9%, 92.5% 0.4%, 87.5% 0%, 75% 28.6%, 58.5% 54.6%, 50.1% 56.8%, 46.9% 44%, 48.3% 17.4%, 24.7% 53.9%, 0% 27.9%, 11.9% 74.2%, 24.9% 54.1%, 68.6% 100%, 74.8% 41.9%)" />
+      <div class="aspect-[577/310] w-[36.0625rem] bg-gradient-to-r from-lvv-pink to-[#9089fc] opacity-70" style="clip-path: polygon(74.8% 41.9%, 97.2% 73.2%, 100% 34.9%, 92.5% 0.4%, 87.5% 0%, 75% 28.6%, 58.5% 54.6%, 50.1% 56.8%, 46.9% 44%, 48.3% 17.4%, 24.7% 53.9%, 0% 27.9%, 11.9% 74.2%, 24.9% 54.1%, 68.6% 100%, 74.8% 41.9%)" />
     </div>
     <div class="absolute left-[max(45rem,calc(50%+8rem))] top-1/2 -z-10 -translate-y-1/2 transform-gpu blur-2xl" aria-hidden="true">
       <div class="aspect-[577/310] w-[36.0625rem] bg-gradient-to-r from-[#ff80b5] to-[#9089fc] opacity-30" style="clip-path: polygon(74.8% 41.9%, 97.2% 73.2%, 100% 34.9%, 92.5% 0.4%, 87.5% 0%, 75% 28.6%, 58.5% 54.6%, 50.1% 56.8%, 46.9% 44%, 48.3% 17.4%, 24.7% 53.9%, 0% 27.9%, 11.9% 74.2%, 24.9% 54.1%, 68.6% 100%, 74.8% 41.9%)" />
     </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>
diff --git a/content/news/2023-10-02.md b/content/news/2023-10-02.md
@@ -0,0 +1,9 @@
+---
+date: 2023-10-02
+newsBannerText: Lancement officiel de Cyclopolis !
+---
+
+### Lancement officiel de Cyclopolis
+Après plusieurs mois de travail, l'association "La&nbsp;Ville&nbsp;à&nbsp;Vélo" lance sa plateforme de suivi de l'avancement des Voies Lyonnaises.
+
+[Lire le communiqué officiel](https://lavilleavelo.org/2023/10/02/la-ville-a-velo-lance-cyclopolis-la-plateforme-pour-suivre-de-pres-lavancement-des-voies-lyonnaises/){target="_blank"}
diff --git a/content/news/2023-10-09.md b/content/news/2023-10-09.md
@@ -0,0 +1,17 @@
+---
+date: 2023-10-09
+newsBannerText: Nouvelles concertations sur les Voies Lyonnaises 4/7 et 8
+---
+
+### Début des concertations sur les Voies Lyonnaises 4/7 à Lyon 6 et sur la Voie Lyonnaise 8 entre Perrache et Mermoz-Pinel
+Ces concertations contenaient plusieurs annonces :
+
+- Sur la Voie Lyonnaise 4 : l'absence de modification de l'existant entre le pont Clémenceau et le pont De Lattre, ainsi que le report de l'aménagement de l'avenue Duquesne
+- Sur la Voie Lyonnaise 7 : l'absence de modification de l'existant sur le pont Churchill et l'avenue Garibaldi au sud de la rue Vauban, ainsi que le report de l'aménagement du boulevard des Belges à l'Ouest de Garibaldi
+- Sur la Voie Lyonnaise 8 : le report de l'aménagement de la traversée de Perrache entrainant la déviation de la ligne en tronçon commun avec la VL12 pour traverser la Presqu'île, ainsi que le report de l'aménagement de la rue Marius Berliet et de l'avenue Mermoz le long de T6
+
+[Voir le détail de la Voie Lyonnaise 4](/voie-lyonnaise-4/)
+
+[Voir le détail de la Voie Lyonnaise 7](/voie-lyonnaise-7/)
+
+[Voir le détail de la Voie Lyonnaise 8](/voie-lyonnaise-8/)
diff --git a/content/news/2023-10-16.md b/content/news/2023-10-16.md
@@ -0,0 +1,15 @@
+---
+date: 2023-10-16
+newsBannerText: Choix de la variante sur la Voie Lyonnaise 8 à Tassin
+---
+
+### Choix de la variante sur la Voie Lyonnaise 8 à Tassin
+Dans la concertation de mars-avril 2023 sur le tronçon Tassin - Lyon 5 de la Voie Lyonnaise 8, la Métropole proposait 2 variantes pour relier l'Avenue de la République et l'Avenue Victor Hugo.
+
+[Voir le dossier de concertation (p18)](https://jeparticipe.grandlyon.com/media/default/0001/01/bd50d56d86221d7c4daf56f310abe3cb77aff211.pdf){:target="_blank"}
+
+Lors de la commission permanente du 16 octobre 2023, la Métropole a finalement validé la variante par l'avenue Vincent Serre.
+
+[Voir la délibération de la commission permanente du 16 octobre 2023](https://agora.grandlyon.com/portail/jsp/openfile.jsp?pdf=A9iCZwGvgK5FubNtu322bcS53GS0sK4fqUNzpPiImFcNNkx%2BTqSn6NcCoEvAfojpQXos53usMrkPJoSRf%2FIaOpbByk853Y1HvC8f5zVB7%2BI2fdWBM0KS7G%2Bc3TocC2uS){:target="_blank"}
+
+[Voir le détail de la Voie Lyonnaise 8](/voie-lyonnaise-8/)
diff --git a/content/news/2023-11-03.md b/content/news/2023-11-03.md
@@ -0,0 +1,11 @@
+---
+date: 2023-11-03
+newsBannerText: Un tronçon de la Voie Lyonnaise 2 terminé !
+---
+
+### Elargissement des couloirs bus sur le boulevard des Belges entre la rue Waldeck Rousseau et le rue Fournet
+Comme annoncé lors de la concertation du tronçon central de la *Voie Lyonnaise 2*, la Métropole a procédé a l'élargissement des couloirs bus sur le boulevard des Belges en réduisant la circulation automobile sur une seule voie. Les travaux de marquage ont été réalisés pendant les vacances scolaires de la Toussaint.
+
+[Voir le dossier de concertation (p19)](https://www.grandlyon.com/fileadmin/user_upload/media/pdf/grands-projets/concertation-reglementaire/20220601_voieslyonnaises_ligne2_dossier-concertation.pdf){target="_blank"}
+
+[Voir le détail de la Voie Lyonnaise 2](/voie-lyonnaise-2)
diff --git a/pages/[_slug]/index.vue b/pages/[_slug]/index.vue
@@ -22,23 +22,23 @@
 </template>
 
 <script setup>
-const { path } = useRoute()
+const { path } = useRoute();
 
-const regex = /voie-lyonnaise-(1[0-2]|[1-9])\b/
-const line = path.match(regex)[1]
+const regex = /voie-lyonnaise-(1[0-2]|[1-9])\b/;
+const line = path.match(regex)[1];
 
 // https://github.com/nuxt/framework/issues/3587
 definePageMeta({
   pageTransition: false,
   middleware: 'voie-lyonnaise'
-})
+});
 
 const { data: voie } = await useAsyncData(`${path}`, () => {
-  return queryContent('voies-lyonnaises').where({ _type: 'markdown', line: Number(line) }).findOne()
-})
+  return queryContent('voies-lyonnaises').where({ _type: 'markdown', line: Number(line) }).findOne();
+});
 
-const description = `Tout savoir sur la Voie Lyonnaise ${voie.value.line}. Avancement, carte interactive, détail rue par rue, calendrier des travaux et photos du projet.`
-const coverImage = voie.value.cover
+const description = `Tout savoir sur la Voie Lyonnaise ${voie.value.line}. Avancement, carte interactive, détail rue par rue, calendrier des travaux et photos du projet.`;
+const coverImage = voie.value.cover;
 useHead({
   title: `Voie Lyonnaise ${voie.value.line}`,
   meta: [
@@ -50,5 +50,5 @@ useHead({
     { hid: 'og:image', property: 'og:image', content: coverImage },
     { hid: 'twitter:image', name: 'twitter:image', content: coverImage }
   ]
-})
+});
 </script>
diff --git a/pages/historique.vue b/pages/historique.vue
@@ -11,92 +11,30 @@
       </div>
     </div>
     <div class="relative mx-auto max-w-5xl px-4 sm:px-6 lg:px-8 mb-8">
-      <section class="md:flex">
+      <section v-for="newsItem in news" :key="newsItem.date" class="md:flex">
         <h2 class="pl-7 prose prose-lg text-gray-500 md:w-1/4 md:pl-0 md:pr-12 md:text-right">
-          3 novembre 2023
+          {{ formatDate(newsItem.date) }}
         </h2>
-        <div class="relative pl-7 pt-2 md:w-3/4 md:pl-12 md:pt-0 pb-16">
-          <div class="absolute bottom-0 left-0 w-px bg-slate-200 -top-3 md:top-2.5" />
-          <div class="absolute -left-1 -top-[1.0625rem] h-[0.5625rem] w-[0.5625rem] rounded-full border-2 border-slate-300 bg-white md:top-[0.4375rem]" />
-          <div class="max-w-none prose-h3:mb-4 prose prose-lg text-gray-500">
-            <h3>Elargissement des couloirs bus sur le boulevard des Belges entre la rue Waldeck Rousseau et le rue Fournet</h3>
-            <p>Comme annoncé lors de la concertation du tronçon central de la <b>Voie Lyonnaise 2</b>, la Métropole a procédé a l'élargissement des couloirs bus sur le boulevard des Belges en réduisant la circulation automobile sur une seule voie. Les travaux de marquage ont été réalisés pendant les vacances scolaires de la Toussaint.</p>
-            <a href="https://www.grandlyon.com/fileadmin/user_upload/media/pdf/grands-projets/concertation-reglementaire/20220601_voieslyonnaises_ligne2_dossier-concertation.pdf" target="_blank">Voir le dossier de concertation (p19)<br></a>
-            <NuxtLink to="/voie-lyonnaise-2">
-              Voir le détail de la Voie Lyonnaise 2
-            </NuxtLink>
-          </div>
-        </div>
-      </section>
-
-      <section class="md:flex">
-        <h2 class="pl-7 prose prose-lg text-gray-500 md:w-1/4 md:pl-0 md:pr-12 md:text-right">
-          16 octobre 2023
-        </h2>
-        <div class="relative pl-7 pt-2 md:w-3/4 md:pl-12 md:pt-0 pb-16">
-          <div class="absolute bottom-0 left-0 w-px bg-slate-200 -top-3 md:top-2.5" />
-          <div class="absolute -left-1 -top-[1.0625rem] h-[0.5625rem] w-[0.5625rem] rounded-full border-2 border-slate-300 bg-white md:top-[0.4375rem]" />
-          <div class="max-w-none prose-h3:mb-4 prose prose-lg text-gray-500">
-            <h3>Choix de la variante sur la Voie Lyonnaise 8 à Tassin</h3>
-            <p>Dans la concertation de mars-avril 2023 sur le tronçon Tassin - Lyon 5 de la Voie Lyonnaise 8, la Métropole proposait 2 variantes pour relier l'Avenue de la République et l'Avenue Victor Hugo.</p>
-            <p>
-              <a href="https://jeparticipe.grandlyon.com/media/default/0001/01/bd50d56d86221d7c4daf56f310abe3cb77aff211.pdf" target="_blank">Voir le dossier de concertation (p18)</a>
-            </p>
-            <p>Lors de la commission permanente du 16 octobre 2023, la Métropole a finalement validé la variante par l'avenue Vincent Serre.</p>
-            <p>
-              <a href="https://agora.grandlyon.com/portail/jsp/openfile.jsp?pdf=A9iCZwGvgK5FubNtu322bcS53GS0sK4fqUNzpPiImFcNNkx%2BTqSn6NcCoEvAfojpQXos53usMrkPJoSRf%2FIaOpbByk853Y1HvC8f5zVB7%2BI2fdWBM0KS7G%2Bc3TocC2uS" target="_blank">Voir la délibération de la commission permanente du 16 octobre 2023<br></a>
-
-              <NuxtLink to="/voie-lyonnaise-8">
-                Voir le détail de la Voie Lyonnaise 8
-              </NuxtLink>
-            </p>
-          </div>
-        </div>
-      </section>
 
-      <section class="md:flex">
-        <h2 class="pl-7 prose prose-lg text-gray-500 md:w-1/4 md:pl-0 md:pr-12 md:text-right">
-          9 octobre 2023
-        </h2>
         <div class="relative pl-7 pt-2 md:w-3/4 md:pl-12 md:pt-0 pb-16">
           <div class="absolute bottom-0 left-0 w-px bg-slate-200 -top-3 md:top-2.5" />
           <div class="absolute -left-1 -top-[1.0625rem] h-[0.5625rem] w-[0.5625rem] rounded-full border-2 border-slate-300 bg-white md:top-[0.4375rem]" />
-          <div class="max-w-none prose-h3:mb-4 prose prose-lg text-gray-500">
-            <h3>Début des concertations sur les Voies Lyonnaises 4/7 à Lyon 6 et sur la Voie Lyonnaise 8 entre Perrache et Mermoz-Pinel</h3>
-            <p>Ces concertations contenaient plusieurs annonces :</p>
-            <ul>
-              <li>Sur la Voie Lyonnaise 4 : l'absence de modification de l'existant entre le pont Clémenceau et le pont De Lattre, ainsi que le report de l'aménagement de l'avenue Duquesne</li>
-              <li>Sur la Voie Lyonnaise 7 : l'absence de modification de l'existant sur le pont Churchill et l'avenue Garibaldi au sud de la rue Vauban, ainsi que le report de l'aménagement du boulevard des Belges à l'Ouest de Garibaldi</li>
-              <li>Sur la Voie Lyonnaise 8 : le report de l'aménagement de la traversée de Perrache entrainant la déviation de la ligne en tronçon commun avec la VL12 pour traverser la Presqu'île, ainsi que le report de l'aménagement de la rue Marius Berliet et de l'avenue Mermoz le long de T6</li>
-            </ul>
-
-            <NuxtLink to="/voie-lyonnaise-4">
-              Voir le détail de la Voie Lyonnaise 4<br>
-            </NuxtLink>
-            <NuxtLink to="/voie-lyonnaise-7">
-              Voir le détail de la Voie Lyonnaise 7<br>
-            </NuxtLink>
-            <NuxtLink to="/voie-lyonnaise-8">
-              Voir le détail de la Voie Lyonnaise 8
-            </NuxtLink>
-          </div>
-        </div>
-      </section>
-
-      <section class="md:flex">
-        <h2 class="pl-7 prose prose-lg text-gray-500 md:w-1/4 md:pl-0 md:pr-12 md:text-right">
-          2 octobre 2023
-        </h2>
-        <div class="relative pl-7 pt-2 md:w-3/4 md:pl-12 md:pt-0 pb-16">
-          <div class="absolute bottom-0 left-0 w-px bg-slate-200 -top-3 md:top-2.5" />
-          <div class="absolute -left-1 -top-[1.0625rem] h-[0.5625rem] w-[0.5625rem] rounded-full border-2 border-slate-300 bg-white md:top-[0.4375rem]" />
-          <div class="max-w-none prose-h3:mb-4 prose prose-lg text-gray-500">
-            <h3>Lancement officiel de Cyclopolis</h3>
-            <p>Après plusieurs mois de travail, l'association "La&nbsp;Ville&nbsp;à&nbsp;Vélo" lance sa plateforme de suivi de l'avancement des Voies Lyonnaises.</p>
-            <a href="https://lavilleavelo.org/2023/10/02/la-ville-a-velo-lance-cyclopolis-la-plateforme-pour-suivre-de-pres-lavancement-des-voies-lyonnaises/" target="_blank">Lire le communiqué officiel</a>
+          <div class="max-w-none prose-h3:mb-4 prose-h3:mt-0 prose prose-lg text-gray-500">
+            <ContentRenderer :value="newsItem" />
           </div>
         </div>
       </section>
     </div>
   </div>
 </template>
+
+<script setup>
+const { data: news } = await useAsyncData(() => {
+  return queryContent('news').sort({ date: -1 }).find();
+});
+
+function formatDate(date) {
+  const options = { year: 'numeric', month: 'long', day: 'numeric' };
+  return new Date(date).toLocaleDateString('fr-FR', options);
+}
+</script>