Implement mapbox

app/components/home/Map.vue

@@ -0,0 +1,111 @@
+<script lang="ts" setup>
+const colorMode = useColorMode()
+const isDark = computed(() => colorMode.value === 'dark')
+
+const zoom = ref(11)
+const coordinates = ref<[number, number]>([2.179040, 48.877419])
+
+function adjustZoom(amount: number) {
+  const targetZoom = zoom.value + amount
+  const frameRate = 1000 / 60
+  const step = amount / 20
+
+  const interval = setInterval(() => {
+    if ((amount > 0 && zoom.value < targetZoom) || (amount < 0 && zoom.value > targetZoom)) {
+      zoom.value += step
+    }
+    else {
+      clearInterval(interval)
+    }
+  }, frameRate)
+}
+
+const { t } = useI18n({
+  useScope: 'local'
+})
+</script>
+
+<template>
+  <div class="flex items-center justify-center mt-4 flex-col space-y-1">
+    <div class="relative h-80 md:h-96 w-full">
+      <MapboxMap
+        :options="{
+          style: isDark ? 'mapbox://styles/arthurdanjou/clyor1rad005y01pibypu165j' : 'mapbox://styles/arthurdanjou/clyorg3yl018r01pi6esv8ab8',
+          center: coordinates,
+          zoom,
+          projection: 'globe'
+        }"
+        class="relative z-10"
+        map-id="map"
+      >
+        <MapboxDefaultMarker
+          :lnglat="coordinates"
+          :options="{
+            color: '#808080',
+            size: 1.5
+          }"
+          marker-id="marker"
+        />
+      </MapboxMap>
+      <div
+        v-show="zoom < 15"
+        class="map-button left-2"
+        @click.prevent="adjustZoom(1)"
+      >
+        <UIcon
+          name="i-ph-plus-bold"
+          size="24"
+        />
+      </div>
+      <div
+        v-show="zoom > 0"
+        class="map-button right-2"
+        @click.prevent="adjustZoom(-1)"
+      >
+        <UIcon
+          name="i-ph-minus-bold"
+          size="24"
+        />
+      </div>
+    </div>
+    <div class="flex gap-3 items-center group">
+      <div class="flex items-center justify-center group-hover:animate-slide duration-300">
+        <UIcon
+          name="i-ph-hand-grabbing-duotone"
+          size="16"
+        />
+      </div>
+      <p class="text-[12px] italic">
+        {{ t('caption') }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+.map-button {
+  @apply z-30 absolute bottom-2 dark:bg-gray-800 dark:hover:bg-gray-900 bg-gray-200 hover:bg-gray-100 duration-300 border border-neutral-300 dark:border-neutral-700 cursor-pointer flex items-center justify-center rounded-full p-2
+}
+
+.mapboxgl-control-container {
+  display: none !important;
+}
+
+.mapboxgl-canvas {
+  border-radius: 1rem;
+}
+</style>
+
+<i18n lang="json">
+{
+  "en": {
+    "caption": "Where I live"
+  },
+  "fr": {
+    "caption": "Où j'habite"
+  },
+  "es": {
+    "caption": "Donde vivo"
+  }
+}
+</i18n>

app/pages/index.vue

@@ -1,6 +1,7 @@
 <template>
   <main class="!max-w-none prose dark:prose-invert">
     <ContentDoc :path="`/home/${locale}`" />
+    <HomeMap />
   </main>
 </template>
 

content/home/fr.md

@@ -51,4 +51,4 @@ ne me reste que 2 ans d'études 💪" text="études"}.
 ::
 
 ::catch-phrase
-::
+::

package.json

@@ -12,16 +12,16 @@
     "db:generate": "drizzle-kit generate"
   },
   "dependencies": {
-    "@iconify/json": "^2.2.225",
+    "@iconify/json": "^2.2.228",
     "@nuxt/content": "^2.13.1",
     "@nuxt/eslint": "^0.3.13",
     "@nuxt/image": "^1.7.0",
     "@nuxt/ui": "^2.17.0",
     "@nuxthq/studio": "^2.0.3",
-    "@nuxthub/core": "^0.7.0",
+    "@nuxthub/core": "^0.7.1",
     "@nuxtjs/google-fonts": "^3.2.0",
     "@nuxtjs/i18n": "^8.3.1",
-    "drizzle-orm": "^0.31.2",
+    "drizzle-orm": "^0.31.4",
     "h3-zod": "^0.5.3",
     "nuxt": "^3.12.3",
     "zod": "^3.23.8"
@@ -34,9 +34,11 @@
     "@vueuse/core": "^10.11.0",
     "@vueuse/nuxt": "^10.11.0",
     "drizzle-kit": "^0.22.8",
-    "eslint": "^9.6.0",
+    "eslint": "^9.7.0",
+    "mapbox-gl": "^3.5.1",
+    "nuxt-mapbox": "^1.6.0",
     "typescript": "^5.5.3",
     "vue-tsc": "^2.0.26",
-    "wrangler": "^3.63.1"
+    "wrangler": "^3.65.0"
   }
 }

tailwind.config.ts

@@ -19,7 +19,8 @@ export default <Partial<Config>>{
   theme: {
     extend: {
       animation: {
-        wave: 'wave 3s infinite'
+        wave: 'wave 3s infinite',
+        slide: 'slide 3s infinite'
       },
       keyframes: {
         wave: {
@@ -29,6 +30,23 @@ export default <Partial<Config>>{
           '25%, 75%': {
             transform: 'rotate(12deg) scale(1.5)'
           }
+        },
+        slide: {
+          '0%, 100%': {
+            transform: 'translateX(0) translateY(0)'
+          },
+          '20%': {
+            transform: 'translateX(10px)'
+          },
+          '40%': {
+            transform: 'translateY(-10px) translateX(10px)'
+          },
+          '60%': {
+            transform: 'translateY(10px) translateX(-10px)'
+          },
+          '80%': {
+            transform: 'translateY(-10px)'
+          }
         }
       }
     }