From d1fce7cef5bd802dcaa39f1113299f0b76d6d8d0 Mon Sep 17 00:00:00 2001 From: jacquesfize Date: Sun, 14 Jun 2026 14:52:47 +0200 Subject: [PATCH 1/3] feat: add environment configuration and update Vite setup to use env variables --- .env | 20 +++++++ src/assets/config.js | 34 +++++------ vite.config.js | 135 ++++++++++++++++++++++--------------------- 3 files changed, 106 insertions(+), 83 deletions(-) create mode 100644 .env diff --git a/.env b/.env new file mode 100644 index 00000000..3a2e15ae --- /dev/null +++ b/.env @@ -0,0 +1,20 @@ +BASEPATH="/" +RADIUS=500 +WKT='' +#DATE_MIN='2023-01-01' +#DATE_MAX='2023-12-31' +SHOW_FILTERS=0 +MAP_EDITABLE=1 +LANG='fr' +MODE='detailedList' +# SOURCE_GEOMETRY='' +# class=Animalia +WIDGET_TYPE='mapList' +SWITCH_MODE_AVAILABLE=0 +# X=5 +# Y=32 +# CUSTOM_DETAILED_PAGE="http://example.com/detailed_page/{taxonID}" +NB_TAXON_PER_LINE=2 +#NB_DISPLAYED_SPECIES=10 +PRIMARY_COLOR='444' +FILTERS_ON_LIST=1 \ No newline at end of file diff --git a/src/assets/config.js b/src/assets/config.js index e048ccd1..11c61cbb 100644 --- a/src/assets/config.js +++ b/src/assets/config.js @@ -1,25 +1,25 @@ import { WIDGET_TYPE, TAXONLIST_DISPLAY_MODE } from '@/lib/enums'; const config = { - RADIUS: 500, - WKT: '', - dateMin: null, - dateMax: null, - showFilters: false, - mapEditable: true, - lang: 'fr', - mode: TAXONLIST_DISPLAY_MODE.detailedList, + RADIUS: import.meta.env.RADIUS || 500, + WKT: import.meta.env.WKT || '', + dateMin: import.meta.env.DATE_MIN || null, + dateMax: import.meta.env.DATE_MAX || null, + showFilters: import.meta.env.SHOW_FILTERS || false, + mapEditable: import.meta.env.MAP_EDITABLE || true, + lang: import.meta.env.LANG || 'fr', + mode: import.meta.env.MODE || TAXONLIST_DISPLAY_MODE.detailedList, sourceGeometry: null, class: null, - widgetType: WIDGET_TYPE.mapList, - switchModeAvailable: false, - x: null, - y: null, - customDetailPage: null, - nbTaxonPerLine: 2, - nbDisplayedSpecies: null, - primaryColor: '444', - filtersOnList: true, + widgetType: import.meta.env.WIDGET_TYPE || WIDGET_TYPE.mapList, + switchModeAvailable: import.meta.env.SWITCH_MODE_AVAILABLE || false, + x: import.meta.env.X || null, + y: import.meta.env.Y || null, + customDetailPage: import.meta.env.CUSTOM_DETAILED_PAGE || null, + nbTaxonPerLine: import.meta.env.NB_TAXON_PER_LINE || 2, + nbDisplayedSpecies: import.meta.env.NB_DISPLAYED_SPECIES || null, + primaryColor: import.meta.env.PRIMARY_COLOR || '444', + filtersOnList: import.meta.env.FILTERS_ON_LIST || true, }; export default config; diff --git a/vite.config.js b/vite.config.js index d43b2630..7d63ab45 100644 --- a/vite.config.js +++ b/vite.config.js @@ -1,79 +1,82 @@ import { fileURLToPath, URL } from 'node:url'; -import { defineConfig } from 'vite'; +import { defineConfig, loadEnv } from 'vite'; import vue from '@vitejs/plugin-vue'; import vueDevTools from 'vite-plugin-vue-devtools'; import Components from 'unplugin-vue-components/vite'; import { BootstrapVueNextResolver } from 'bootstrap-vue-next'; import { VitePWA } from 'vite-plugin-pwa'; import webfontDownload from 'vite-plugin-webfont-dl'; - // https://vite.dev/config/ -export default defineConfig({ - base: process.env.NODE_ENV === 'production' ? '/BAM-widget/' : '/', - plugins: [ - vue(), - webfontDownload([ - 'https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@300;400;500;600;700&display=swap', - ]), - vueDevTools(), - Components({ - resolvers: [BootstrapVueNextResolver()], - }), - VitePWA({ - registerType: 'autoUpdate', - includeAssets: [ - 'favicon.ico', - 'apple-touch-icon-180x180.png', - 'maskable-icon-512x512.png', - ], - manifest: { - name: 'BAM (Biodiversity Around Me', - short_name: 'BAM', - description: - 'BAM is an application for showing species seen nearby any location around the world', - theme_color: '#ffffff', - permissions: ['geolocation'], - icons: [ - { - src: 'manifest-icon-192.maskable.png', - sizes: '192x192', - type: 'image/png', - purpose: 'any', - }, - { - src: 'manifest-icon-192.maskable.png', - sizes: '192x192', - type: 'image/png', - purpose: 'maskable', - }, - { - src: 'manifest-icon-512.maskable.png', - sizes: '512x512', - type: 'image/png', - purpose: 'any', - }, - { - src: 'manifest-icon-512.maskable.png', - sizes: '512x512', - type: 'image/png', - purpose: 'maskable', - }, - ], - }, - workbox: { - navigateFallbackDenylist: [ - /\/docs?(\/.*)?$/, // exclut tout ce qui commence par /docs +export default defineConfig(({ mode }) => { + const env = loadEnv(mode, process.cwd(), ''); + + return { + base: env.BASEPATH || '/', + plugins: [ + vue(), + webfontDownload([ + 'https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@300;400;500;600;700&display=swap', + ]), + vueDevTools(), + Components({ + resolvers: [BootstrapVueNextResolver()], + }), + VitePWA({ + registerType: 'autoUpdate', + includeAssets: [ + 'favicon.ico', + 'apple-touch-icon-180x180.png', + 'maskable-icon-512x512.png', ], + manifest: { + name: 'BAM (Biodiversity Around Me', + short_name: 'BAM', + description: + 'BAM is an application for showing species seen nearby any location around the world', + theme_color: '#ffffff', + permissions: ['geolocation'], + icons: [ + { + src: 'manifest-icon-192.maskable.png', + sizes: '192x192', + type: 'image/png', + purpose: 'any', + }, + { + src: 'manifest-icon-192.maskable.png', + sizes: '192x192', + type: 'image/png', + purpose: 'maskable', + }, + { + src: 'manifest-icon-512.maskable.png', + sizes: '512x512', + type: 'image/png', + purpose: 'any', + }, + { + src: 'manifest-icon-512.maskable.png', + sizes: '512x512', + type: 'image/png', + purpose: 'maskable', + }, + ], + }, + workbox: { + navigateFallbackDenylist: [ + /\/docs?(\/.*)?$/, // exclut tout ce qui commence par /docs + ], + }, + devOptions: { + enabled: true, + }, + }), + ], + resolve: { + alias: { + '@': fileURLToPath(new URL('./src', import.meta.url)), }, - devOptions: { - enabled: true, - }, - }), - ], - resolve: { - alias: { - '@': fileURLToPath(new URL('./src', import.meta.url)), }, - }, + }; }); From 31dabbf98eb0dda94acb317f2c79e93c485381ca Mon Sep 17 00:00:00 2001 From: jacquesfize Date: Sun, 14 Jun 2026 14:52:56 +0200 Subject: [PATCH 2/3] refactor: simplify Netlify deployment workflow by removing environment input options --- .github/workflows/netlify.yml | 35 ++++------------------------------- 1 file changed, 4 insertions(+), 31 deletions(-) diff --git a/.github/workflows/netlify.yml b/.github/workflows/netlify.yml index 65fc9285..2008abb0 100644 --- a/.github/workflows/netlify.yml +++ b/.github/workflows/netlify.yml @@ -2,15 +2,6 @@ name: Netlify Deployment on: workflow_dispatch: - inputs: - environment: - description: "Environment de déploiement" - required: true - type: choice - default: preview - options: - - production - - preview pull_request: types: [opened, synchronize, reopened] @@ -41,21 +32,9 @@ jobs: - name: Build project run: npm run build env: - NODE_ENV: ${{ inputs.environment || 'preview' }} - - - name: Deploy to Netlify (Production) - if: inputs.environment == 'production' - id: netlify_deploy_prod - run: | - netlify deploy \ - --dir dist \ - --site ${{ secrets.NETLIFY_SITE_ID }} \ - --auth ${{ secrets.NETLIFY_APP_TOKEN }} \ - --prod > deploy-output.txt - echo "NETLIFY_URL=$(cat deploy-output.txt | grep -o 'https://[^[:space:]]*' | head -1)" >> $GITHUB_OUTPUT - - - name: Deploy to Netlify (Preview) - if: inputs.environment == 'preview' || github.event_name == 'pull_request' + BASEPATH: "/" + - name: Deploy to Netlify for preview + if: github.event_name == 'pull_request' id: netlify_deploy_preview run: | BRANCH_NAME="${{ github.head_ref || github.ref_name }}" @@ -120,12 +99,6 @@ jobs: run: | echo "### ✅ Déploiement réussi" >> $GITHUB_STEP_SUMMARY echo "" >> $GITHUB_STEP_SUMMARY - echo "- **Environment:** ${{ inputs.environment || 'preview' }}" >> $GITHUB_STEP_SUMMARY echo "- **Branch:** ${{ github.head_ref || github.ref_name }}" >> $GITHUB_STEP_SUMMARY echo "- **Commit:** ${{ github.sha }}" >> $GITHUB_STEP_SUMMARY - - if [ "${{ inputs.environment }}" == "production" ]; then - echo "- **URL:** ${{ steps.netlify_deploy_prod.outputs.NETLIFY_URL }}" >> $GITHUB_STEP_SUMMARY - else - echo "- **URL:** ${{ steps.netlify_deploy_preview.outputs.NETLIFY_URL }}" >> $GITHUB_STEP_SUMMARY - fi + echo "- **URL:** ${{ steps.netlify_deploy_preview.outputs.NETLIFY_URL }}" >> $GITHUB_STEP_SUMMARY From 485bd7e2b1b9357a7e91280205b7269c778a7a5f Mon Sep 17 00:00:00 2001 From: jacquesfize Date: Sun, 14 Jun 2026 15:01:16 +0200 Subject: [PATCH 3/3] chore: add an entry in the documentation --- README.md | 66 +++++++++++++++++++++++++++++-------------------------- 1 file changed, 35 insertions(+), 31 deletions(-) diff --git a/README.md b/README.md index 1945b4b4..03dcdaac 100644 --- a/README.md +++ b/README.md @@ -21,34 +21,34 @@ The widget is built using Vue.js 3 ⚡, Turf.js ⿻, Leaflet 🗺️, and Bootst ## ✨ Features -- Display species found in a defined area using observations data from GBIF API or from a GeoNature instance -- Define area based on a specific point, line or polygon, or a GeoJSON, or dynamic geographic objects -- GPS geolocation -- Point and line automatic buffer -- Multiple widget modes: list 📋, map 🗺️ -- Multiple species display mode: detailed or gallery -- Sort 🔃 and filter species lists -- Search 🔎 and filter species -- Share research via link 🔗 or embed in your website 🖥️ -- Multilingual support (EN, FR, ES, CS, DE, IT) 🌐 -- Based only on open API! No server required (except for self-hosting)! +- Display species found in a defined area using observations data from GBIF API or from a GeoNature instance +- Define area based on a specific point, line or polygon, or a GeoJSON, or dynamic geographic objects +- GPS geolocation +- Point and line automatic buffer +- Multiple widget modes: list 📋, map 🗺️ +- Multiple species display mode: detailed or gallery +- Sort 🔃 and filter species lists +- Search 🔎 and filter species +- Share research via link 🔗 or embed in your website 🖥️ +- Multilingual support (EN, FR, ES, CS, DE, IT) 🌐 +- Based only on open API! No server required (except for self-hosting)! ![BAM - How it works](https://geonature.fr/documents/autres/BAM/BAM-schema-01.png) ## 🚀 Generate your widget! -- Generate your widget -> [https://pnx-si.github.io/BAM-widget/#/config](https://pnx-si.github.io/BAM-widget/#/config) -- Documentation: [https://pnx-si.github.io/BAM-widget/docs/](https://pnx-si.github.io/BAM-widget/docs/) -- Widget integration examples: - - [Basic examples](https://pnx-si.github.io/BAM-widget/docs/examples/basic-examples.html) / [Source code](/docs/examples/basic-examples.html) - - [Ecrins huts and biodiversity](https://pnx-si.github.io/BAM-widget/docs/examples/huts-biodiversity.html) / [Source code](/docs/examples/huts-biodiversity.html) - - [Falkensee schools and biodiversity](https://pnx-si.github.io/BAM-widget/docs/examples/falkensee-schools-biodiversity.html) / [Source code](/docs/examples/falkensee-schools-biodiversity.html) - - [Jamaican biodiversity](https://pnx-si.github.io/BAM-widget/docs/examples/jamaican-biodiversity.html) / [Source code](/docs/examples/jamaican-biodiversity.html) - - [Corcovado treks](https://pnx-si.github.io/BAM-widget/docs/examples/corcovado-treks.html) / [Source code](docs/examples/corcovado-treks.html) - - [Geotrek trekking page](https://gtr3demo.ecrins-parcnational.fr/trek/2-Col-de-Font-Froide) / [Source code](/docs/examples/geotrek-detail-page.html) - - [Biodiversity observed around an event location](https://www.ecrins-parcnational.fr/actualite/retour-premieres-rencontres-nationales-geonature) - - [GeoNature demo instance observations in South France](https://pnx-si.github.io/BAM-widget/docs/examples/geonature-demo-widget.html) / [Source code](/docs/examples/geonature-demo-widget.html) -- Test and explore GBIF observed species: [https://pnx-si.github.io/BAM-widget/](https://pnx-si.github.io/BAM-widget/) +- Generate your widget -> [https://pnx-si.github.io/BAM-widget/#/config](https://pnx-si.github.io/BAM-widget/#/config) +- Documentation: [https://pnx-si.github.io/BAM-widget/docs/](https://pnx-si.github.io/BAM-widget/docs/) +- Widget integration examples: + - [Basic examples](https://pnx-si.github.io/BAM-widget/docs/examples/basic-examples.html) / [Source code](/docs/examples/basic-examples.html) + - [Ecrins huts and biodiversity](https://pnx-si.github.io/BAM-widget/docs/examples/huts-biodiversity.html) / [Source code](/docs/examples/huts-biodiversity.html) + - [Falkensee schools and biodiversity](https://pnx-si.github.io/BAM-widget/docs/examples/falkensee-schools-biodiversity.html) / [Source code](/docs/examples/falkensee-schools-biodiversity.html) + - [Jamaican biodiversity](https://pnx-si.github.io/BAM-widget/docs/examples/jamaican-biodiversity.html) / [Source code](/docs/examples/jamaican-biodiversity.html) + - [Corcovado treks](https://pnx-si.github.io/BAM-widget/docs/examples/corcovado-treks.html) / [Source code](docs/examples/corcovado-treks.html) + - [Geotrek trekking page](https://gtr3demo.ecrins-parcnational.fr/trek/2-Col-de-Font-Froide) / [Source code](/docs/examples/geotrek-detail-page.html) + - [Biodiversity observed around an event location](https://www.ecrins-parcnational.fr/actualite/retour-premieres-rencontres-nationales-geonature) + - [GeoNature demo instance observations in South France](https://pnx-si.github.io/BAM-widget/docs/examples/geonature-demo-widget.html) / [Source code](/docs/examples/geonature-demo-widget.html) +- Test and explore GBIF observed species: [https://pnx-si.github.io/BAM-widget/](https://pnx-si.github.io/BAM-widget/) ![BAM architecture](https://geonature.fr/documents/autres/BAM/BAM-schema-v2.png) @@ -115,18 +115,22 @@ npm run dev npm run build ``` +### 🧩 Configuration + +Default parameters value can overridden in the `.env` file. + ## 👥 Contributors **Conceived and developed by** -- @jacquesfize (Parc national des Écrins) -- @amandine-sahl (Parc national des Cévennes) -- @camillemonchicourt (Parc national des Écrins) -- @CynthiaBorotPNV (Parc national de la Vanoise) -- @EcMerc (Parc national du Mercantour) -- @SimonChevereau (Office Français de la Biodiversité) -- @babastienne (Makina Corpus) -- @trendspotter +- @jacquesfize (Parc national des Écrins) +- @amandine-sahl (Parc national des Cévennes) +- @camillemonchicourt (Parc national des Écrins) +- @CynthiaBorotPNV (Parc national de la Vanoise) +- @EcMerc (Parc national du Mercantour) +- @SimonChevereau (Office Français de la Biodiversité) +- @babastienne (Makina Corpus) +- @trendspotter [![image](https://geonature.fr/img/logo-pne.jpg)](https://www.ecrins-parcnational.fr)