Update dependencies and remove Globe component

- Updated various dependencies in package.json and pnpm-lock.yaml for improved performance and compatibility.
- Removed the Globe component from the home page, streamlining the layout and reducing complexity.

app/components/home/Globe.vue

@@ -1,140 +0,0 @@
-<script lang="ts" setup>
-import type { COBEOptions } from 'cobe'
-import createGlobe from 'cobe'
-import { useSpring } from 'vue-use-spring'
-
-interface GlobeProps {
-  class?: string
-  config?: Partial<COBEOptions>
-  mass?: number
-  tension?: number
-  friction?: number
-  precision?: number
-  locations?: Array<{ latitude: number, longitude: number }>
-  myLocation?: { latitude: number, longitude: number }
-}
-
-const props = withDefaults(defineProps<GlobeProps>(), {
-  mass: 1,
-  tension: 280,
-  friction: 100,
-  precision: 0.001,
-})
-
-const DEFAULT_CONFIG: COBEOptions = {
-  width: 400,
-  height: 400,
-  onRender: () => {},
-  devicePixelRatio: 2,
-  phi: 0,
-  theta: 0.3,
-  dark: 0,
-  diffuse: 0.4,
-  mapSamples: 20000,
-  mapBrightness: 1.7,
-  baseColor: [0.5, 0.5, 0.5],
-  opacity: 0.7,
-  markerColor: [160 / 255, 160 / 255, 160 / 255],
-  glowColor: [0.4, 0.4, 0.4],
-  markers: [],
-}
-
-const globeCanvasRef = ref<HTMLCanvasElement>()
-const phi = ref(0)
-const width = ref(0)
-const pointerInteracting = ref()
-const pointerInteractionMovement = ref()
-
-let globe: ReturnType<typeof createGlobe> | null = null
-
-const spring = useSpring(
-  {
-    r: 0,
-  },
-  {
-    mass: props.mass,
-    tension: props.tension,
-    friction: props.friction,
-    precision: props.precision,
-  },
-)
-
-function updatePointerInteraction(clientX: number | null) {
-  if (clientX !== null) {
-    pointerInteracting.value = clientX - (pointerInteractionMovement.value ?? clientX)
-  }
-  else {
-    pointerInteracting.value = null
-  }
-
-  if (globeCanvasRef.value) {
-    globeCanvasRef.value.style.cursor = clientX ? 'grabbing' : 'grab'
-  }
-}
-
-function updateMovement(clientX: number) {
-  if (pointerInteracting.value !== null) {
-    const delta = clientX - (pointerInteracting.value ?? clientX)
-    pointerInteractionMovement.value = delta
-    spring.r = delta / 200
-  }
-}
-
-function onRender(state: Record<string, unknown>) {
-  if (!pointerInteracting.value) {
-    phi.value += 0.005
-  }
-
-  state.phi = phi.value + spring.r
-  state.width = width.value * 2
-  state.height = width.value * 2
-  state.markers = props.locations?.map(location => ({
-    location: [location.latitude, location.longitude],
-    size: props.myLocation?.latitude === location.latitude && props.myLocation?.longitude === location.longitude ? 0.1 : 0.05,
-  }))
-}
-
-function onResize() {
-  if (globeCanvasRef.value) {
-    width.value = globeCanvasRef.value.offsetWidth
-  }
-}
-
-function createGlobeOnMounted() {
-  const config = { ...DEFAULT_CONFIG, ...props.config }
-
-  globe = createGlobe(globeCanvasRef.value!, {
-    ...config,
-    width: width.value,
-    height: width.value,
-    onRender,
-  })
-}
-
-onMounted(() => {
-  window.addEventListener('resize', onResize)
-  onResize()
-  createGlobeOnMounted()
-
-  setTimeout(() => (globeCanvasRef.value!.style.opacity = '1'))
-})
-
-onBeforeUnmount(() => {
-  globe?.destroy()
-  window.removeEventListener('resize', onResize)
-})
-</script>
-
-<template>
-  <div :class="props.class">
-    <canvas
-      ref="globeCanvasRef"
-      class="size-full opacity-0 transition-opacity duration-1000 ease-in-out [contain:layout_paint_size]"
-      @pointerdown="(e) => updatePointerInteraction(e.clientX)"
-      @pointerup="updatePointerInteraction(null)"
-      @pointerout="updatePointerInteraction(null)"
-      @mousemove="(e) => updateMovement(e.clientX)"
-      @touchmove="(e) => e.touches[0] && updateMovement(e.touches[0].clientX)"
-    />
-  </div>
-</template>

app/pages/index.vue

@@ -6,8 +6,6 @@ const { data: page } = await useAsyncData(`/home/${locale.value}`, () => {
 }, {
   watch: [locale],
 })
-
-const { myLocation, locations } = useVisitors()
 </script>
 
 <template>
@@ -17,10 +15,5 @@ const { myLocation, locations } = useVisitors()
     <HomeActivity />
     <HomeQuote />
     <HomeCatchPhrase />
-    <HomeGlobe
-      :my-location
-      :locations
-      class="mt-8 mx-auto aspect-[1/1] duration-500 md:w-1/2"
-    />
   </main>
 </template>

package.json

@@ -18,35 +18,34 @@
     "@iconify-json/ph": "^1.2.2",
     "@iconify-json/twemoji": "^1.2.2",
     "@iconify-json/vscode-icons": "^1.2.18",
-    "@intlify/message-compiler": "^11.1.2",
+    "@intlify/message-compiler": "^11.1.3",
     "@nuxt/content": "3.4.0",
     "@nuxt/image": "^1.10.0",
     "@nuxt/ui": "3.0.2",
-    "@nuxthub/core": "^0.8.22",
+    "@nuxthub/core": "^0.8.23",
     "@nuxtjs/google-fonts": "^3.2.0",
-    "@nuxtjs/i18n": "9.4.0",
-    "cobe": "^0.6.3",
+    "@nuxtjs/i18n": "9.5.2",
     "drizzle-orm": "^0.41.0",
     "h3-zod": "^0.5.3",
-    "nuxt": "^3.16.1",
+    "nuxt": "^3.16.2",
     "rehype-katex": "^7.0.1",
     "remark-math": "^6.0.0",
     "remark-parse": "^11.0.0",
-    "remark-rehype": "^11.1.1",
+    "remark-rehype": "^11.1.2",
     "vue-use-spring": "^0.3.3",
     "zod": "^3.24.2"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^4.11.0",
     "@tailwindcss/typography": "^0.5.16",
-    "@types/node": "^22.13.16",
+    "@types/node": "^22.14.0",
     "@vueuse/core": "^13.0.0",
     "@vueuse/math": "^13.0.0",
     "@vueuse/nuxt": "^13.0.0",
     "drizzle-kit": "^0.30.6",
-    "eslint": "^9.23.0",
-    "typescript": "^5.8.2",
+    "eslint": "^9.24.0",
+    "typescript": "^5.8.3",
     "vue-tsc": "^2.2.8",
-    "wrangler": "^4.6.0"
+    "wrangler": "^4.7.2"
   }
 }