dynamize inspirations header

public/content/inspirations/1_shape-of-the-nature/inspiration.txt

@@ -10,7 +10,7 @@ Date: 2024-04-24
 
 ----
 
-New: false
+New: true
 
 ----
 

public/site/templates/inspirations.json.php

@@ -3,6 +3,8 @@
 $collections = $page->children()->map(function ($child) {
   return [
     'title' => $child->title()->value(),
+    'new' => $child->new()->value() === "true" ? true : false,
+    'date' => $child->date()->toDate('Y-m-d'),
     'url' => $child->url(),
     'modified' => $child->modified('Y-m-d'),
     'status' => $child->status(),

src/components/inspirations/Header.vue

@@ -1,27 +1,41 @@
 <template>
   <header
     class="flex | text-center"
-    style="
-      --image: url('https://plus.unsplash.com/premium_photo-1675626791716-7f74187592f1?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
-    "
+    :style="'--image: url(\'' + collection.cover + '\');'"
   >
     <!-- $inspiration->cover()->url() -->
-    <h2 class="inspiration__title | font-serif | text-lg | new">
-      Shape of Nature
+    <h2
+      class="inspiration__title | font-serif | text-lg"
+      :class="{ new: collection.new }"
+    >
+      {{ collection.title }}
     </h2>
     <!-- $inspiration->title() + class="new" if $inspiration->new()->isTrue() -->
-    <time class="inspiration__date | font-medium | text-sm" datatime="2024-04"
-      >Avril 2024</time
+    <time
+      class="inspiration__date | font-medium | text-sm"
+      datatime="2024-04"
+      >{{ frenchFormattedDate }}</time
     >
     <!-- $inspiration->date() -->
     <p class="inspiration__description">
-      Lectus adipiscing nulla quis odio in aliquam. Adipiscing libero in
-      consequat porta mauris hendrerit malesuada viverra turpis.
+      {{ collection.description }}
     </p>
-    <!-- $inspiration->description() -->
   </header>
 </template>
 
+<script setup>
+import dayjs from "dayjs";
+import "dayjs/locale/fr";
+
+const { collection } = defineProps({
+  collection: Object,
+});
+
+dayjs.locale("fr");
+
+const frenchFormattedDate = dayjs(collection.date).format("MMMM YYYY");
+</script>
+
 <style scoped>
 .inspiration > header {
   --direction: column;

src/views/Inspirations.vue

@@ -19,7 +19,7 @@
 
       <!-- TabPanel -->
       <section class="inspiration">
-        <Header />
+        <Header :collection="currentCollection" />
         <div class="grid masonry">
           <template v-for="(item, index) in currentCollection.media">
             <figure class="flex" :style="'--rows: ' + (index % 2 ? 2 : 3)">