first styling and store for reactive etape modale

web/autoload.php

@@ -10,7 +10,6 @@
  * @see index.php
  * @see core/install.php
  * @see core/rebuild.php
- * @see core/modules/statistics/statistics.php
  */
 
 return require __DIR__ . '/../vendor/autoload.php';

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 setup>
+  import { storeToRefs } from 'pinia';
+  import { useEtapeStore } from '../stores/etape';
 
+  const store = useEtapeStore();
+
+  const { etapeData, loading, error } = storeToRefs(store);
 </script>
-
-<style>
-
-</style>

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);
+    }
+  }
 }

web/themes/custom/caravane/package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "axios": "^1.7.2",
+        "pinia": "^2.1.7",
         "vue": "^3.4.29"
       },
       "devDependencies": {
@@ -721,6 +722,12 @@
         "@vue/shared": "3.4.31"
       }
     },
+    "node_modules/@vue/devtools-api": {
+      "version": "6.6.3",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.3.tgz",
+      "integrity": "sha512-0MiMsFma/HqA6g3KLKn+AGpL1kgKhFWszC9U29NfpWK5LE7bjeXxySWJrOJ77hBz+TBrBQ7o4QJqbPbqbs8rJw==",
+      "license": "MIT"
+    },
     "node_modules/@vue/reactivity": {
       "version": "3.4.31",
       "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.4.31.tgz",
@@ -1142,6 +1149,58 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/pinia": {
+      "version": "2.1.7",
+      "resolved": "https://registry.npmjs.org/pinia/-/pinia-2.1.7.tgz",
+      "integrity": "sha512-+C2AHFtcFqjPih0zpYuvof37SFxMQ7OEG2zV9jRI12i9BOy3YQVAHwdKtyyc8pDcDyIc33WCIsZaCFWU7WWxGQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-api": "^6.5.0",
+        "vue-demi": ">=0.14.5"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.4.0",
+        "typescript": ">=4.4.4",
+        "vue": "^2.6.14 || ^3.3.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        },
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/pinia/node_modules/vue-demi": {
+      "version": "0.14.8",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.8.tgz",
+      "integrity": "sha512-Uuqnk9YE9SsWeReYqK2alDI5YzciATE0r2SkA6iMAtuXvNTMNACJLJEXNXaEy94ECuBe4Sk6RzRU80kjdbIo1Q==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/postcss": {
       "version": "8.4.39",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.39.tgz",

web/themes/custom/caravane/package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "axios": "^1.7.2",
+    "pinia": "^2.1.7",
     "vue": "^3.4.29"
   },
   "devDependencies": {

web/themes/custom/caravane/templates/block--caravane-mainnavigation.html.twig

@@ -0,0 +1,56 @@
+{#
+/**
+ * @file
+ * Default theme implementation for a menu block.
+ *
+ * Available variables:
+ * - plugin_id: The ID of the block implementation.
+ * - label: The configured label of the block if visible.
+ * - configuration: A list of the block's configuration values.
+ *   - label: The configured label for the block.
+ *   - label_display: The display settings for the label.
+ *   - provider: The module or other provider that provided this block plugin.
+ *   - Block plugin specific settings will also be stored here.
+ * - in_preview: Whether the plugin is being rendered in preview mode.
+ * - content: The content of this block.
+ * - attributes: HTML attributes for the containing element.
+ *   - id: A valid HTML ID and guaranteed unique.
+ * - title_attributes: HTML attributes for the title element.
+ * - content_attributes: HTML attributes for the content element.
+ * - title_prefix: Additional output populated by modules, intended to be
+ *   displayed in front of the main title tag that appears in the template.
+ * - title_suffix: Additional output populated by modules, intended to be
+ *   displayed after the main title tag that appears in the template.
+ *
+ * Headings should be used on navigation menus that consistently appear on
+ * multiple pages. When this menu block's label is configured to not be
+ * displayed, it is automatically made invisible using the 'visually-hidden' CSS
+ * class, which still keeps it visible for screen-readers and assistive
+ * technology. Headings allow screen-reader and keyboard only users to navigate
+ * to or skip the links.
+ * See http://juicystudio.com/article/screen-readers-display-none.php and
+ * http://www.w3.org/TR/WCAG-TECHS/H42.html for more information.
+ *
+ * @ingroup themeable
+ */
+#}
+{% set heading_id = attributes.id ~ '-menu'|clean_id %}
+<nav role="navigation" aria-labelledby="{{ heading_id }}"{{ attributes|without('role', 'aria-labelledby') }}>
+  {# Label. If not displayed, we still provide it for screen readers. #}
+  {% if not configuration.label_display %}
+    {% set title_attributes = title_attributes.addClass('visually-hidden') %}
+  {% endif %}
+  {{ title_prefix }}
+  <h2{{ title_attributes.setAttribute('id', heading_id) }}>{{ configuration.label }}</h2>
+  <div id="hamburger">
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+  {{ title_suffix }}
+
+  {# Menu. #}
+  {% block content %}
+    {{ content }}
+  {% endblock %}
+</nav>