Implement mapbox and set variables in env

.env.example

@@ -20,4 +20,9 @@ NUXT_DISCORD_USER_ID=
 NUXT_PUBLIC_CLOUD_RESUME=
 
 # Nuxt I18N
-NUXT_PUBLIC_I18N_BASE_URL=
+NUXT_PUBLIC_I18N_BASE_URL=
+
+# Nuxt Mapbox
+NUXT_PUBLIC_MAPBOX_LIGHT=
+NUXT_PUBLIC_MAPBOX_STYLE_DARK=
+NUXT_PUBLIC_MAPBOX_ACCESS_TOKEN=

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

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'

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: ''
+        }
       }
     }
   },