Update Globe and add comments

src/components/organisms/InteractiveGlobe2.svelte

@@ -4,7 +4,7 @@
 
 <script lang="ts">
     import { getContext, onMount } from 'svelte'
-    import { fade, fly } from 'svelte/transition'
+    import { fly } from 'svelte/transition'
     import { quartOut } from 'svelte/easing'
     import { Globe, type Marker } from '$modules/globe2'
     import { getRandomItem } from '$utils/functions'
@@ -12,7 +12,6 @@
     import Image from '$components/atoms/Image.svelte'
 
     let innerWidth: number
-    let offsetWidth: number, offsetHeight: number
     let globeParentEl: HTMLElement, globeEl: HTMLElement
     let globe: any
     let observer: IntersectionObserver
@@ -27,11 +26,7 @@
     const markers = locations.map(({ name, slug, country, coordinates: { coordinates }}): Marker => ({
         name,
         slug,
-        country: {
-            name: country.name,
-            slug: country.slug,
-            flag: country.flag,
-        },
+        country: { ...country },
         lat: coordinates[1],
         lng: coordinates[0],
     }))
@@ -41,22 +36,18 @@
         globe = new Globe({
             el: globeEl,
             parent: globeParentEl,
-            width: offsetWidth,
-            height: offsetHeight,
             mapFile: `/images/globe-map-${globeResolution}.png`,
             dpr: Math.min(Math.round(window.devicePixelRatio), 2),
             autoRotate: true,
-            speed: 0.0035,
+            speed: 0.003,
             rotationStart: randomContinent.rotation,
             markers,
             pane: import.meta.env.DEV,
         })
 
-        // Define cluster locations
+        // TODO: Define cluster locations and position it
         clusterLocations = locations.filter((loc: any) => loc.country.slug === 'france')
 
-        // console.log(globe)
-
         resize()
 
         // Render only if in viewport
@@ -100,10 +91,7 @@
 
     // Resize
     const resize = () => {
-        globe.resize({
-            width: offsetWidth,
-            height: offsetHeight,
-        })
+        globe.resize()
     }
 
     // Destroy
@@ -119,10 +107,7 @@
 
 <div class="globe" bind:this={globeParentEl}>
     <div class="globe__inner">
-        <div class="globe__canvas"
-            bind:this={globeEl}
-            bind:offsetWidth bind:offsetHeight
-        />
+        <div class="globe__canvas" bind:this={globeEl} />
     </div>
 
     <ul class="globe__markers">