first styling and store for reactive etape modale

web/themes/custom/caravane/assets/js/main.js

@@ -1,10 +1,12 @@
 import { createApp } from 'vue'
+import { createPinia } from 'pinia'
 import '../scss/main.scss'
 import Etape from './vuejs/Etape.vue'
 
-import REST from './api/rest-axios'
-
+import { useEtapeStore } from './stores/etape';
 
+// Working with the history API
+// https://developer.mozilla.org/en-US/docs/Web/API/History_API/Working_with_the_History_API
 
 // /**
 //  * @file
@@ -46,28 +48,30 @@ import REST from './api/rest-axios'
     }
 
     function initVueEtapeModale(){
-      createApp(Etape).mount('#etape-modale');
+      const app = createApp(Etape).use(createPinia());
+      const store = useEtapeStore();
+      app.mount('#etape-modale');
 
-      processEtapeLinks();
+      processEtapeLinks(store);
     }
 
 
-    function onClickEtapeLink(e){
+    function onClickEtapeLink(e, store){
       e.preventDefault();
       
       let a = e.currentTarget;
       let nid = a.dataset.nodeNid;
       console.log(nid);
 
-      getNodeData(nid);
+      store.fetchEtapeData(nid);
 
       return null;
     }
 
 
-    function processEtapeLinks(){
+    function processEtapeLinks(store){
       let etape_link_fields = document.querySelectorAll('#etapes-liste div.views-field-title');
-      etape_link_fields.forEach((field, index) => {
+      etape_link_fields.forEach((field) => {
         let nid = null;
         let classList = field.classList;
         classList.forEach((classe) => {
@@ -82,26 +86,13 @@ import REST from './api/rest-axios'
         if (nid) {
           let a = field.querySelector('a');
           a.setAttribute('data-node-nid', nid);
-          a.addEventListener('click', onClickEtapeLink);
+          a.addEventListener('click', (e) => onClickEtapeLink(e, store));
         }
         
         
       })
     }
     
-    function getNodeData(nid){
-      const params = {
-      }
-      REST.get(`/node/${nid}?_format=json`, params)
-      .then((data) => {
-        console.log('user REST getUser data', data)
-      })
-      .catch(error => {
-        console.warn('Issue with getNodedata', error)
-        Promise.reject(error)
-      })
-    }
-
     init()
   } // end CaravaneTheme()
 

web/themes/custom/caravane/assets/js/stores/etape.js

@@ -0,0 +1,25 @@
+import { defineStore } from 'pinia';
+import REST from '../api/rest-axios';
+
+export const useEtapeStore = defineStore('etape', {
+    state: () => ({
+      etapeData: null,
+      loading: false,
+      error: null,
+    }),
+    actions: {
+      async fetchEtapeData(nid) {
+        this.loading = true;
+        this.error = null;
+        try {
+          const response = await REST.get(`/node/${nid}?_format=json`);
+          this.etapeData = response.data;
+        } catch (error) {
+          this.error = 'Failed to fetch data';
+          console.error('Issue with getNodeData', error);
+        } finally {
+          this.loading = false;
+        }
+      },
+    },
+  });

web/themes/custom/caravane/assets/js/vuejs/Etape.vue

@@ -1,13 +1,18 @@
 <template>
   <div>
-    hello HMR TROP TROP BIEN \o/
+    <div v-if="loading">Loading...</div>
+    <div v-if="error">{{ error }}</div>
+    <div v-if="etapeData">
+      <pre>{{ etapeData }}</pre>
+    </div>
   </div>
 </template>
 
-<script>
-  
-</script>
+<script setup>
+  import { storeToRefs } from 'pinia';
+  import { useEtapeStore } from '../stores/etape';
 
-<style>
+  const store = useEtapeStore();
 
-</style>
+  const { etapeData, loading, error } = storeToRefs(store);
+</script>

web/themes/custom/caravane/assets/scss/fonts.scss

@@ -0,0 +1,57 @@
+@font-face {
+    font-family: 'Joost';
+    src: url('../fonts/joost/joost-bold.woff2') format('woff2');
+    font-weight: bold;
+    font-style: normal;
+  }
+  
+  @font-face {
+    font-family: 'Joost';
+    src: url('../fonts/joost/joost-light.woff2') format('woff2');
+    font-weight: 300;
+    font-style: normal;
+  }
+  
+  @font-face {
+    font-family: 'Marianne';
+    src: url('../fonts/marianne/Marianne-Bold_Italic.woff') format('woff'),
+         url('../fonts/marianne/Marianne-Bold_Italic.woff2') format('woff2');
+    font-weight: bold;
+    font-style: italic;
+  }
+  
+  @font-face {
+    font-family: 'Marianne';
+    src: url('../fonts/marianne/Marianne-Bold.woff2') format('woff2');
+    font-weight: bold;
+    font-style: normal;
+  }
+  
+  @font-face {
+    font-family: 'Marianne';
+    src: url('../fonts/marianne/Marianne-Light_Italic.woff2') format('woff2');
+    font-weight: 300;
+    font-style: italic;
+  }
+  
+  @font-face {
+    font-family: 'Marianne';
+    src: url('../fonts/marianne/Marianne-Light.woff2') format('woff2');
+    font-weight: 300;
+    font-style: normal;
+  }
+  
+  @font-face {
+    font-family: 'Marianne';
+    src: url('../fonts/marianne/Marianne-Regular_Italic.woff2') format('woff2');
+    font-weight: normal;
+    font-style: italic;
+  }
+  
+  @font-face {
+    font-family: 'Marianne';
+    src: url('../fonts/marianne/Marianne-Regular.woff2') format('woff2');
+    font-weight: normal;
+    font-style: normal;
+  }
+  

web/themes/custom/caravane/assets/scss/main.scss

@@ -1,3 +1,145 @@
+@import 'fonts.scss';
+
+$body-margin-x: 10px;
+$body-margin-y: 5px;
+
+$sm-font-size: 0.8rem;
+
+$main-color: #1a1918;
+$main-color-light: #635b58;
+$light-color: #faf1eb;
+
 body{
-  background-color: purple;
+  font-family: Marianne, sans-serif;
+  color: $main-color;
+  margin: 0;
+  padding: 0;
+  header {
+    z-index: 2;
+    position: relative;
+    > div {
+      padding: $body-margin-y $body-margin-x 0 $body-margin-x;
+      display: grid;
+      grid-template-columns: repeat(16, 1fr);
+      > #block-caravane-logorepublique {
+        grid-column: 1 / span 1;
+        display: flex;
+        align-items: center;
+        > div > div > a > img {
+          width: 100%;
+          height: auto;
+        }
+      }
+      > #block-caravane-logoepau {
+        grid-column: 2 / span 2;
+        display: flex;
+        align-items: center;
+        > div > div > a > img {
+          width: 100%;
+          height: auto;
+        }
+      }
+      > #block-caravane-logocaravane {
+        grid-column: 7 / span 4;
+        display: flex;
+        align-items: center;
+        > div > div > a > img {
+          width: 100%;
+          height: auto;
+        }
+      }
+      > #block-caravane-mainnavigation {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        grid-column: 16 / span 1;
+        display: flex;
+        flex-direction: column;
+        cursor: pointer;
+        > h2 {
+          margin-block: 0;
+          font-size: $sm-font-size;
+          color: $main-color-light;
+          font-weight: normal;
+          margin-bottom: 5px;
+        }
+        > #hamburger {
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          align-items: center;
+          width: 100%;
+          > div {
+            width: 40%;
+            height: 3px;
+            margin: 4px 0;
+            border-radius: 2px;
+            background-color: $main-color-light;
+          }
+        }
+        > ul {
+          display: none;
+        }
+      }
+    }
+  }
+  main {
+    z-index: 1;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    > .layout-content {
+      z-index: 1;
+      position: relative;
+      > div > .layout {
+        display: grid;
+        grid-template-columns: repeat(16,1fr);
+        height: 100vh;
+        align-items: center;
+        > .layout__region--first {
+          padding-left: $body-margin-x;
+          grid-column: 1 / span 4;
+          position: relative;
+          z-index: 2;
+          pointer-events: none;
+          width: fit-content;
+          > div {
+            pointer-events: auto;
+          }
+        } 
+        > .layout__region--second {
+          position: absolute;
+          z-index: 1;
+          width: 100vw;
+          height: 100vh;
+        } 
+        > .layout__region--third {
+          padding-right: $body-margin-x;
+          grid-column: 13 / span 4;
+          position: relative;
+          z-index: 2;
+          background: linear-gradient(to right, transparent, #faf1eb);
+          height: 100vh;
+          display: flex;
+          align-items: center;
+          justify-content: flex-end;
+          pointer-events: none;
+          > div {
+            pointer-events: auto;
+          }
+        } 
+      }
+    }
+    > #etape-modale {
+      z-index: 2;
+      position: absolute;
+      top: 10vh;
+      left: 25vw;
+      width: 50vw;
+      height: 80vh;
+      background-color: rgba(255,255,255,0.5);
+    }
+  }
 }