header static menu promoted & static content well displayed #2194

package-lock.json

@@ -21,6 +21,7 @@
         "paper": "^0.12.17",
         "pinia": "^2.0.21",
         "poly-decomp": "^0.3.0",
+        "video-embed": "^0.2.0",
         "vue": "^3.2.38",
         "vue-easy-lightbox": "^1.16.0",
         "vue-plyr": "^7.0.0",
@@ -1133,6 +1134,16 @@
       "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
       "optional": true
     },
+    "node_modules/encoding": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.13.tgz",
+      "integrity": "sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "iconv-lite": "^0.6.2"
+      }
+    },
     "node_modules/entities": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
@@ -2670,9 +2681,9 @@
       "dev": true
     },
     "node_modules/node-fetch": {
-      "version": "2.6.11",
-      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.11.tgz",
-      "integrity": "sha512-4I6pdBY1EthSqDmJkiNk3JIT8cswwR9nfeW/cPdUagJYEQG7R95WRH74wpz7ma8Gh/9dI9FP+OU+0E4FvtA55w==",
+      "version": "2.6.12",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.12.tgz",
+      "integrity": "sha512-C/fGU2E8ToujUivIO0H+tpQ6HWo4eEmchoPIoXtxCrVghxdKq+QOHqEZW7tuP3KlV3bC8FRMO5nMCC7Zm1VP6g==",
       "optional": true,
       "dependencies": {
         "whatwg-url": "^5.0.0"
@@ -2962,18 +2973,6 @@
         }
       }
     },
-    "node_modules/plyr": {
-      "version": "3.7.0",
-      "resolved": "git+ssh://git@github.com/sampotts/plyr.git#d434c9af16e641400aaee93188594208d88f2658",
-      "license": "MIT",
-      "dependencies": {
-        "core-js": "^3.22.0",
-        "custom-event-polyfill": "^1.0.7",
-        "loadjs": "^4.2.0",
-        "rangetouch": "^2.0.1",
-        "url-polyfill": "^1.1.12"
-      }
-    },
     "node_modules/poly-decomp": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/poly-decomp/-/poly-decomp-0.3.0.tgz",
@@ -3622,6 +3621,11 @@
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
       "devOptional": true
     },
+    "node_modules/video-embed": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/video-embed/-/video-embed-0.2.0.tgz",
+      "integrity": "sha512-b1pt11Dx5UscV+eKT2ZFchD/MTO5FG+mCSSEBehwwXZXkKY7NsDxn67fDpxtIU2Nbd9l9xfO7391fndlz12x/g=="
+    },
     "node_modules/vite": {
       "version": "3.2.7",
       "resolved": "https://registry.npmjs.org/vite/-/vite-3.2.7.tgz",
@@ -3768,6 +3772,18 @@
         "source-map": "^0.6.1"
       }
     },
+    "node_modules/vue-plyr/node_modules/plyr": {
+      "version": "3.7.0",
+      "resolved": "git+ssh://git@github.com/sampotts/plyr.git#d434c9af16e641400aaee93188594208d88f2658",
+      "license": "MIT",
+      "dependencies": {
+        "core-js": "^3.22.0",
+        "custom-event-polyfill": "^1.0.7",
+        "loadjs": "^4.2.0",
+        "rangetouch": "^2.0.1",
+        "url-polyfill": "^1.1.12"
+      }
+    },
     "node_modules/vue-plyr/node_modules/vue": {
       "version": "2.7.14",
       "resolved": "https://registry.npmjs.org/vue/-/vue-2.7.14.tgz",
@@ -4772,6 +4788,16 @@
       "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
       "optional": true
     },
+    "encoding": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.13.tgz",
+      "integrity": "sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==",
+      "optional": true,
+      "peer": true,
+      "requires": {
+        "iconv-lite": "^0.6.2"
+      }
+    },
     "entities": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
@@ -5812,9 +5838,9 @@
       "dev": true
     },
     "node-fetch": {
-      "version": "2.6.11",
-      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.11.tgz",
-      "integrity": "sha512-4I6pdBY1EthSqDmJkiNk3JIT8cswwR9nfeW/cPdUagJYEQG7R95WRH74wpz7ma8Gh/9dI9FP+OU+0E4FvtA55w==",
+      "version": "2.6.12",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.12.tgz",
+      "integrity": "sha512-C/fGU2E8ToujUivIO0H+tpQ6HWo4eEmchoPIoXtxCrVghxdKq+QOHqEZW7tuP3KlV3bC8FRMO5nMCC7Zm1VP6g==",
       "optional": true,
       "requires": {
         "whatwg-url": "^5.0.0"
@@ -6008,17 +6034,6 @@
         }
       }
     },
-    "plyr": {
-      "version": "git+ssh://git@github.com/sampotts/plyr.git#d434c9af16e641400aaee93188594208d88f2658",
-      "from": "plyr@github:sampotts/plyr#develop",
-      "requires": {
-        "core-js": "^3.22.0",
-        "custom-event-polyfill": "^1.0.7",
-        "loadjs": "^4.2.0",
-        "rangetouch": "^2.0.1",
-        "url-polyfill": "^1.1.12"
-      }
-    },
     "poly-decomp": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/poly-decomp/-/poly-decomp-0.3.0.tgz",
@@ -6454,6 +6469,11 @@
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
       "devOptional": true
     },
+    "video-embed": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/video-embed/-/video-embed-0.2.0.tgz",
+      "integrity": "sha512-b1pt11Dx5UscV+eKT2ZFchD/MTO5FG+mCSSEBehwwXZXkKY7NsDxn67fDpxtIU2Nbd9l9xfO7391fndlz12x/g=="
+    },
     "vite": {
       "version": "3.2.7",
       "resolved": "https://registry.npmjs.org/vite/-/vite-3.2.7.tgz",
@@ -6550,6 +6570,17 @@
             "source-map": "^0.6.1"
           }
         },
+        "plyr": {
+          "version": "git+ssh://git@github.com/sampotts/plyr.git#d434c9af16e641400aaee93188594208d88f2658",
+          "from": "plyr@github:sampotts/plyr#develop",
+          "requires": {
+            "core-js": "^3.22.0",
+            "custom-event-polyfill": "^1.0.7",
+            "loadjs": "^4.2.0",
+            "rangetouch": "^2.0.1",
+            "url-polyfill": "^1.1.12"
+          }
+        },
         "vue": {
           "version": "2.7.14",
           "resolved": "https://registry.npmjs.org/vue/-/vue-2.7.14.tgz",

package.json

@@ -21,6 +21,7 @@
     "paper": "^0.12.17",
     "pinia": "^2.0.21",
     "poly-decomp": "^0.3.0",
+    "video-embed": "^0.2.0",
     "vue": "^3.2.38",
     "vue-easy-lightbox": "^1.16.0",
     "vue-plyr": "^7.0.0",

src/assets/main.scss

@@ -101,6 +101,21 @@ body{
     }
     section.static{
       @include main-cartouche();
+      h2{
+        font-weight: 400;
+        font-size: 1.323em;
+        padding: 1em 0;
+      }
+      p:not(:last-of-type){
+        margin-bottom: 1em;
+      }
+      img{
+        width: 100%;
+      }
+      iframe{
+        width: 100%;
+        aspect-ratio: 4 / 3;
+      }
     }
     section.concernement{
       @include main-cartouche();

src/views/Static.vue

@@ -3,6 +3,7 @@
 import { mapActions, mapState } from 'pinia'
 import { StaticsStore } from '@/stores/statics'
 
+const videoEmbed = require("video-embed");
 
 export default {
   props: ['id'],
@@ -19,7 +20,21 @@ export default {
     // this.loadStatics()
   },
   methods: {
-    ...mapActions(StaticsStore,['loadStatics'])
+    ...mapActions(StaticsStore,['loadStatics']),
+    getParsedText(){
+      let text = this.statics_byid[this.id].texte;
+      console.log('text', text);
+      let reg = /https:\/\/(vimeo\.com|www\.youtube\.com)\/(watch\?v=)?(\w+)/g;
+      let videolinks = [...text.matchAll(reg)];
+      // console.log('videolinks', videolinks);
+      for (let link of videolinks){
+        console.log('videolink', link);
+        let iframe = videoEmbed(link[0])
+        console.log('iframe', iframe);
+        text = text.replace(link[0], iframe);
+      };
+      return text;
+    }
   },
   components: {
     // MapConcernements
@@ -30,10 +45,10 @@ export default {
 
 <template>
   <section class="static">
-  <span v-if="!loaded">loading ...</span>
-  <!-- <h2 v-if="loaded">{{ this.id }}</h2> -->
-  <h2 v-if="loaded">{{ statics_byid[id].title }}</h2>
-  <div v-if="loaded" v-html="statics_byid[id].texte"/>
+    <span v-if="!loaded">loading ...</span>
+    <!-- <h2 v-if="loaded">{{ this.id }}</h2> -->
+    <h2 v-if="loaded">{{ statics_byid[id].title }}</h2>
+    <div v-if="loaded" v-html="getParsedText()"/>
 
   </section>
 </template>

vite.config.js

@@ -15,8 +15,9 @@ export default defineConfig({
       '@stores': fileURLToPath(new URL('./src/stores', import.meta.url)),
       '@components': fileURLToPath(new URL('./src/components', import.meta.url)),
       '@views': fileURLToPath(new URL('./src/views', import.meta.url)),
-      '@api': fileURLToPath(new URL('./src/api', import.meta.url))
+      '@api': fileURLToPath(new URL('./src/api', import.meta.url)),
       // '@icons': fileURLToPath(new URL('./node_modules/vue-material-design-icons', import.meta.url)),
+      '@node_modules': fileURLToPath(new URL('./node_modules', import.meta.url))
     }
   },
   css: {