From 52c0700d2916d4fa3998df44fd6942cdb30ee8b8 Mon Sep 17 00:00:00 2001 From: bach Date: Thu, 6 Jul 2023 15:05:59 +0200 Subject: [PATCH] header static menu promoted & static content well displayed #2194 --- package-lock.json | 89 +++++++++++++++++++++++++++++--------------- package.json | 1 + src/assets/main.scss | 15 ++++++++ src/views/Static.vue | 25 ++++++++++--- vite.config.js | 3 +- 5 files changed, 98 insertions(+), 35 deletions(-) diff --git a/package-lock.json b/package-lock.json index 20c9118..b9981c4 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 24079f3..e249676 100644 --- a/package.json +++ b/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", diff --git a/src/assets/main.scss b/src/assets/main.scss index 9f16daa..ae64dea 100644 --- a/src/assets/main.scss +++ b/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(); diff --git a/src/views/Static.vue b/src/views/Static.vue index b2579ca..47e9d9b 100644 --- a/src/views/Static.vue +++ b/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 { diff --git a/vite.config.js b/vite.config.js index 2062f24..e22ede7 100644 --- a/vite.config.js +++ b/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: {