From 3e73aea07ab6ebee2d58fe40fa09dc5aeb6f7db2 Mon Sep 17 00:00:00 2001
From: Arthur DANJOU <arthurdanjou@outlook.fr>
Date: Wed, 17 Jul 2024 09:26:06 +0200
Subject: [PATCH] Implement mapbox and set variables in env

---
 .env.example                |  7 ++++++-
 README.md                   |  5 +++++
 app/components/home/Map.vue |  5 ++++-
 nuxt.config.ts              | 10 +++++++++-
 4 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/.env.example b/.env.example
index 5f3e191..2475fd2 100644
--- a/.env.example
+++ b/.env.example
@@ -20,4 +20,9 @@ NUXT_DISCORD_USER_ID=
 NUXT_PUBLIC_CLOUD_RESUME=
 
 # Nuxt I18N
-NUXT_PUBLIC_I18N_BASE_URL=
\ No newline at end of file
+NUXT_PUBLIC_I18N_BASE_URL=
+
+# Nuxt Mapbox
+NUXT_PUBLIC_MAPBOX_LIGHT=
+NUXT_PUBLIC_MAPBOX_STYLE_DARK=
+NUXT_PUBLIC_MAPBOX_ACCESS_TOKEN=
\ No newline at end of file
diff --git a/README.md b/README.md
index c01b81f..8a2b5a7 100644
--- a/README.md
+++ b/README.md
@@ -67,6 +67,11 @@ NUXT_PUBLIC_CLOUD_RESUME=...
 
 # Nuxt I18N
 NUXT_PUBLIC_I18N_BASE_URL=...
+
+# Nuxt Mapbox
+NUXT_PUBLIC_MAPBOX_STYLE_LIGHT=...
+NUXT_PUBLIC_MAPBOX_STYLE_DARK=...
+NUXT_PUBLIC_MAPBOX_ACCESS_TOKEN=...
 ```
 
 ## 📄 License
diff --git a/app/components/home/Map.vue b/app/components/home/Map.vue
index dd41d10..833f7d0 100644
--- a/app/components/home/Map.vue
+++ b/app/components/home/Map.vue
@@ -23,6 +23,8 @@ function adjustZoom(amount: number) {
 const { t } = useI18n({
   useScope: 'local'
 })
+
+const config = useRuntimeConfig()
 </script>
 
 <template>
@@ -30,7 +32,8 @@ const { t } = useI18n({
     <div class="relative h-80 md:h-96 w-full">
       <MapboxMap
         :options="{
-          style: isDark ? 'mapbox://styles/arthurdanjou/clyor1rad005y01pibypu165j' : 'mapbox://styles/arthurdanjou/clyorg3yl018r01pi6esv8ab8',
+          accessToken: config.public.mapbox.accessToken,
+          style: isDark ? config.public.mapbox.style.dark : config.public.mapbox.style.light,
           center: coordinates,
           zoom,
           projection: 'globe'
diff --git a/nuxt.config.ts b/nuxt.config.ts
index a03df15..16dcecb 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -21,7 +21,8 @@ export default defineNuxtConfig({
     '@nuxtjs/google-fonts',
     '@nuxthq/studio',
     '@nuxt/image',
-    '@nuxtjs/i18n'
+    '@nuxtjs/i18n',
+    'nuxt-mapbox'
   ],
 
   // Nuxt Hub
@@ -119,6 +120,13 @@ export default defineNuxtConfig({
     public: {
       cloud: {
         resume: ''
+      },
+      mapbox: {
+        accessToken: '',
+        style: {
+          light: '',
+          dark: ''
+        }
       }
     }
   },