From 2284d3ca0f58fb716f2962ff69ef01d2c3b723ee Mon Sep 17 00:00:00 2001 From: Alexis Gousseau Date: Tue, 15 Apr 2025 12:45:27 +0200 Subject: [PATCH] fix: :bug: add leaflet package and resolve csp errors --- .gitignore | 2 + app/Http/Middleware/SecureHeaders.php | 9 +- package-lock.json | 125 +++++++++++++++++- package.json | 1 + resources/sass/fo/fo.scss | 1 + .../ts/fo/components/GeocodageComponent.vue | 38 ++---- resources/views/fo/pages/map.blade.php | 18 +-- vite.config.ts | 22 ++- 8 files changed, 164 insertions(+), 52 deletions(-) diff --git a/.gitignore b/.gitignore index 7c5fc67..c0247ac 100644 --- a/.gitignore +++ b/.gitignore @@ -6,6 +6,8 @@ /public/uploads /public/cache /public/sitemap.xml +/public/marker-icon.png +/public/marker-shadow.png /storage/*.key /vendor .env diff --git a/app/Http/Middleware/SecureHeaders.php b/app/Http/Middleware/SecureHeaders.php index c029078..2cbd129 100644 --- a/app/Http/Middleware/SecureHeaders.php +++ b/app/Http/Middleware/SecureHeaders.php @@ -7,7 +7,6 @@ use Illuminate\Http\Request; use Illuminate\Support\Facades\Route; use Illuminate\Support\Facades\View; use Illuminate\Support\Facades\Vite; -use Symfony\Component\HttpFoundation\Response; class SecureHeaders { @@ -31,7 +30,7 @@ class SecureHeaders * @return \Symfony\Component\HttpFoundation\Response * @phpcs:disable Squiz.Commenting.FunctionComment.IncorrectTypeHint */ - public function handle(Request $request, Closure $next): Response + public function handle(Request $request, Closure $next): \Symfony\Component\HttpFoundation\Response { // phpcs:enable View::share('nonce', $nonce = Vite::useCspNonce()); @@ -55,7 +54,9 @@ class SecureHeaders 'https://yl.s-web.fr', 'https://api-adresse.data.gouv.fr' ]) . ';', - "img-src 'self' data: blob:;", + "img-src 'self' data: blob: " . implode(' ', [ + 'https://tile.openstreetmap.org/' + ]) . ';', // ! Blob required for printjs 'frame-src ' . implode(' ', [ 'https://www.google.com/recaptcha/', @@ -74,7 +75,6 @@ class SecureHeaders 'https://cdn.jsdelivr.net', 'https://use.fontawesome.com', 'https://fonts.googleapis.com', - ' https://unpkg.com/leaflet@1.9.3/dist/leaflet.css' ]) . ';', // ! If you dont use ckeditor use this // "style-src 'self' 'nonce-$nonce';", @@ -84,7 +84,6 @@ class SecureHeaders 'https://unpkg.com', 'https://www.googletagmanager.com', 'https://cdnjs.cloudflare.com', - 'https://unpkg.com/leaflet@1.9.3/dist/leaflet.js', "$scheme://www.google-analytics.com", ]) . ';' ]; diff --git a/package-lock.json b/package-lock.json index 3b19d8a..4af1855 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,5 +1,5 @@ { - "name": "srcs", + "name": "lionor", "lockfileVersion": 3, "requires": true, "packages": { @@ -34,6 +34,7 @@ "postcss-discard-comments": "^5.1.2", "prettier": "latest", "resolve-url-loader": "^5.0.0", + "rollup-plugin-copy": "^3.5.0", "sass": "latest", "slugify": "^1.6.6", "stylelint-config-idiomatic-order": "github:ream88/stylelint-config-idiomatic-order", @@ -2550,12 +2551,31 @@ "integrity": "sha512-VeiPZ9MMwXjO32/Xu7+OwflfmeoRwkE/qzndw42gGtgJwZopBnzy2gD//NN1+go1mADzkDcqf/KnFRSjTJ8xJA==", "dev": true }, + "node_modules/@types/fs-extra": { + "version": "8.1.5", + "resolved": "https://registry.npmjs.org/@types/fs-extra/-/fs-extra-8.1.5.tgz", + "integrity": "sha512-0dzKcwO+S8s2kuF5Z9oUWatQJj5Uq/iqphEtE3GQJVRRYm/tD1LglU2UnXi2A8jLq5umkGouOXOR9y0n613ZwQ==", + "dev": true, + "dependencies": { + "@types/node": "*" + } + }, "node_modules/@types/geojson": { "version": "7946.0.11", "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.11.tgz", "integrity": "sha512-L7A0AINMXQpVwxHJ4jxD6/XjZ4NDufaRlUJHjNIFKYUFBH1SvOW+neaqb0VTRSLW5suSrSu19ObFEFnfNcr+qg==", "dev": true }, + "node_modules/@types/glob": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/@types/glob/-/glob-7.2.0.tgz", + "integrity": "sha512-ZUxbzKl0IfJILTS6t7ip5fQQM/J3TJYubDm3nMbgubNNYS62eXeUpoLUC8/7fJNiFYHTrGPQn7hspDUzIHX3UA==", + "dev": true, + "dependencies": { + "@types/minimatch": "*", + "@types/node": "*" + } + }, "node_modules/@types/json-schema": { "version": "7.0.13", "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.13.tgz", @@ -2571,6 +2591,12 @@ "@types/geojson": "*" } }, + "node_modules/@types/minimatch": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-5.1.2.tgz", + "integrity": "sha512-K0VQKziLUWkVKiRVrx4a40iPaxTUefQmjtkQofBkYRcoaaL/8rhwDWww9qWbrgicNOgnpIsMxyNIUM4+n6dUIA==", + "dev": true + }, "node_modules/@types/minimist": { "version": "1.2.3", "resolved": "https://registry.npmjs.org/@types/minimist/-/minimist-1.2.3.tgz", @@ -2578,6 +2604,15 @@ "dev": true, "peer": true }, + "node_modules/@types/node": { + "version": "22.14.1", + "resolved": "https://registry.npmjs.org/@types/node/-/node-22.14.1.tgz", + "integrity": "sha512-u0HuPQwe/dHrItgHHpmw3N2fYCR6x4ivMNbPHRkBVP4CvN+kiRrKHWk3i8tXiO/joPwXLMYvF9TTF0eqgHIuOw==", + "dev": true, + "dependencies": { + "undici-types": "~6.21.0" + } + }, "node_modules/@types/normalize-package-data": { "version": "2.4.2", "resolved": "https://registry.npmjs.org/@types/normalize-package-data/-/normalize-package-data-2.4.2.tgz", @@ -3583,6 +3618,12 @@ "dev": true, "peer": true }, + "node_modules/colorette": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.4.0.tgz", + "integrity": "sha512-Y2oEozpomLn7Q3HFP7dpww7AtMJplbM9lGZP6RDfHqmbeRjiwRg4n6VM6j4KLmRke85uWEI7JqF17f3pqdRA0g==", + "dev": true + }, "node_modules/combined-stream": { "version": "1.0.8", "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz", @@ -6063,6 +6104,82 @@ "fsevents": "~2.3.2" } }, + "node_modules/rollup-plugin-copy": { + "version": "3.5.0", + "resolved": "https://registry.npmjs.org/rollup-plugin-copy/-/rollup-plugin-copy-3.5.0.tgz", + "integrity": "sha512-wI8D5dvYovRMx/YYKtUNt3Yxaw4ORC9xo6Gt9t22kveWz1enG9QrhVlagzwrxSC455xD1dHMKhIJkbsQ7d48BA==", + "dev": true, + "dependencies": { + "@types/fs-extra": "^8.0.1", + "colorette": "^1.1.0", + "fs-extra": "^8.1.0", + "globby": "10.0.1", + "is-plain-object": "^3.0.0" + }, + "engines": { + "node": ">=8.3" + } + }, + "node_modules/rollup-plugin-copy/node_modules/fs-extra": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz", + "integrity": "sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==", + "dev": true, + "dependencies": { + "graceful-fs": "^4.2.0", + "jsonfile": "^4.0.0", + "universalify": "^0.1.0" + }, + "engines": { + "node": ">=6 <7 || >=8" + } + }, + "node_modules/rollup-plugin-copy/node_modules/globby": { + "version": "10.0.1", + "resolved": "https://registry.npmjs.org/globby/-/globby-10.0.1.tgz", + "integrity": "sha512-sSs4inE1FB2YQiymcmTv6NWENryABjUNPeWhOvmn4SjtKybglsyPZxFB3U1/+L1bYi0rNZDqCLlHyLYDl1Pq5A==", + "dev": true, + "dependencies": { + "@types/glob": "^7.1.1", + "array-union": "^2.1.0", + "dir-glob": "^3.0.1", + "fast-glob": "^3.0.3", + "glob": "^7.1.3", + "ignore": "^5.1.1", + "merge2": "^1.2.3", + "slash": "^3.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/rollup-plugin-copy/node_modules/is-plain-object": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-3.0.1.tgz", + "integrity": "sha512-Xnpx182SBMrr/aBik8y+GuR4U1L9FqMSojwDQwPMmxyC6bvEqly9UBCxhauBF5vNh2gwWJNX6oDV7O+OM4z34g==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/rollup-plugin-copy/node_modules/jsonfile": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz", + "integrity": "sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==", + "dev": true, + "optionalDependencies": { + "graceful-fs": "^4.1.6" + } + }, + "node_modules/rollup-plugin-copy/node_modules/universalify": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz", + "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==", + "dev": true, + "engines": { + "node": ">= 4.0.0" + } + }, "node_modules/run-parallel": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz", @@ -6996,6 +7113,12 @@ "node": ">=14.17" } }, + "node_modules/undici-types": { + "version": "6.21.0", + "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz", + "integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==", + "dev": true + }, "node_modules/unicode-canonical-property-names-ecmascript": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz", diff --git a/package.json b/package.json index 21fed3a..1d65eed 100644 --- a/package.json +++ b/package.json @@ -41,6 +41,7 @@ "postcss-discard-comments": "^5.1.2", "prettier": "latest", "resolve-url-loader": "^5.0.0", + "rollup-plugin-copy": "^3.5.0", "sass": "latest", "slugify": "^1.6.6", "stylelint-config-idiomatic-order": "github:ream88/stylelint-config-idiomatic-order", diff --git a/resources/sass/fo/fo.scss b/resources/sass/fo/fo.scss index c837de7..aa5e200 100644 --- a/resources/sass/fo/fo.scss +++ b/resources/sass/fo/fo.scss @@ -6,6 +6,7 @@ // * VENDOR @import "./vendor/ckEditorContent"; @import "./vendor/bootstrap"; +@import "leaflet"; // * UTILITIES @import "./utilities/bootstrap-custom"; diff --git a/resources/ts/fo/components/GeocodageComponent.vue b/resources/ts/fo/components/GeocodageComponent.vue index cfde8b8..86aaa8f 100644 --- a/resources/ts/fo/components/GeocodageComponent.vue +++ b/resources/ts/fo/components/GeocodageComponent.vue @@ -10,7 +10,7 @@ import parseLaravelErrorMessages from "./../../modules/parseLaravelErrorMessages import route from "./../../modules/route"; import toast from "./../../modules/toast"; import trans from "./../../modules/trans"; -import * as L from "leaflet"; +import L from "leaflet"; import { defineComponent } from "vue"; @@ -237,18 +237,10 @@ export default defineComponent({ map.eachLayer(function (layer: L.Layer) { map.removeLayer(layer); }); - L.tileLayer( - "https://{s}.tile.jawg.io/jawg-sunny/{z}/{x}/{y}{r}.png?access-token={accessToken}", - { - attribution: - "© JawgMaps © OpenStreetMap contributors", - minZoom: 0, - maxZoom: 22, - subdomains: "abcd", - accessToken: - "K1juMdkCgPLIjLt2KgXkeMDxenwtl9ZJqIZmNDbLoNU9P672uoA9ffNAty6UcoQU", - } - ).addTo(this.map); + L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", { + maxZoom: 16, + attribution: "© OpenStreetMap" + }).addTo(this.map); this.map.setView([userLat, userLon], 8); for (let shop of this.shops) { L.marker([shop.latitude, shop.longitude]) @@ -267,18 +259,14 @@ export default defineComponent({ // Initialize map with markers for all shops in database initMap() { // View set with coords and zoom for France. - this.map = L.map("map").setView([47, 2], 6); - L.tileLayer( - "https://{s}.tile.jawg.io/jawg-sunny/{z}/{x}/{y}{r}.png?access-token={accessToken}", - { - attribution: - "© JawgMaps © OpenStreetMap contributors", - minZoom: 0, - maxZoom: 22, - accessToken: - "K1juMdkCgPLIjLt2KgXkeMDxenwtl9ZJqIZmNDbLoNU9P672uoA9ffNAty6UcoQU", - } - ).addTo(this.map); + this.map = L.map("map", {attributionControl: false}).setView([47, 2], 6); + L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", { + maxZoom: 16, + attribution: "© OpenStreetMap" + }).addTo(this.map); + // Remove Ukrainian flag. + const myAttrControl = L.control.attribution().addTo(this.map); + myAttrControl.setPrefix("Leaflet"); for (let shop of this.shops) { L.marker([shop.latitude, shop.longitude]) .bindPopup(shop.name) diff --git a/resources/views/fo/pages/map.blade.php b/resources/views/fo/pages/map.blade.php index f77bb40..496a2c0 100644 --- a/resources/views/fo/pages/map.blade.php +++ b/resources/views/fo/pages/map.blade.php @@ -4,11 +4,6 @@ @section('description', __('Recherchez le magasin le plus près de chez vous commercialisant des produits de chez nous.')) @section('breadcrumb', request()->route()->getName()) -@push('styles') - -@endpush - @section('content')
Logo 100% local @@ -27,15 +22,13 @@
-

{{ __('Retrouvez vos produits Lionor') }}{{ __('près de chez vous') }}

+ class="font-amatic-red">{{ __('près de chez vous') }}
- @if (now()->lessThan(\Carbon\Carbon::make('2024-07-01')))
@@ -45,7 +38,6 @@
@endif -
@@ -55,12 +47,10 @@
-
{{ __('Magasins') }} -
- @endsection - -@push('scripts') - -@endpush diff --git a/vite.config.ts b/vite.config.ts index 240574f..e6bda87 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,11 +1,12 @@ -import legacy from "@vitejs/plugin-legacy"; -import vue from "@vitejs/plugin-vue"; -import laravel from "laravel-vite-plugin"; -import path from "path"; import { defineConfig } from "vite"; import checker from "vite-plugin-checker"; +import copy from "rollup-plugin-copy"; import eslint from "vite-plugin-eslint"; +import laravel from "laravel-vite-plugin"; +import legacy from "@vitejs/plugin-legacy"; +import path from "path"; import stylelint from "vite-plugin-stylelint"; +import vue from "@vitejs/plugin-vue"; export default defineConfig({ build: { @@ -99,6 +100,19 @@ export default defineConfig({ targets: "last 3 version, not dead, >0.3%", renderLegacyChunks: false, }), + copy({ + targets: [ + { + src: [ + path.normalize("node_modules/leaflet/dist/images/marker-icon.png"), + path.normalize("node_modules/leaflet/dist/images/marker-shadow.png"), + ], + dest: path.normalize("public") + }, + ], + copyOnce: true, + verbose: true + }), ], resolve: { extensions: ["*", ".js", ".ts", ".vue"],