Add Cobe library for Globe component

src/components/cobe.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import createGlobe, { Marker } from 'cobe'
+
+const el = ref()
+const phi = ref(0)
+
+const props = defineProps({
+  markers: {
+    type: Array as () => Marker[],
+    default: () => [
+      { location: [51.163818, 10.447831], size: 0.1 },
+      { location: [63.246778, 25.920916], size: 0.1 },
+    ],
+  },
+  marker: {
+    type: Object as () => Marker,
+    required: true,
+  },
+});
+
+
+function locationToAngles(lat, long) {
+  return [
+    Math.PI - ((long * Math.PI) / 180 - Math.PI / 2),
+    (lat * Math.PI) / 180,
+  ];
+}
+
+onMounted(() => {
+  const globe = createGlobe(el.value, {
+    devicePixelRatio: 2,
+    width: 1000,
+    height: 1000,
+    phi: 4.24,
+    theta: 0.25,
+    dark: 1,
+    diffuse: 2,
+    scale: 2,
+    mapSamples: 16000,
+    mapBrightness: 6,
+    opacity: 0.9,
+    baseColor: [1, 1, 1],
+    markerColor: [1, 0.5, 1],
+    glowColor: [0.04, 0.04, 0.04],
+    offset: [300, 600],
+    markers: [
+      { location: [52.520008, 13.404954], size: 0.1 },
+      { location: [62.520008, 16.404954], size: 0.1 },
+    ],
+    onRender: (state) => {
+      phi.value += 0;
+    },
+  });
+});
+
+</script>
+
+<template>
+  <canvas :style="{
+    maxWidth: '800px',
+    width: '100%',
+    height: '400px',
+    display: 'block',
+    margin: 'auto'
+  }" ref="el"></canvas>
+</template>

src/components/globe.astro

@@ -0,0 +1,51 @@
+---
+import Globe from '@components/cobe.vue'
+---
+
+<h2 style="text-align: center; font-size: 42px; padding: 0px 0px 24px 0px">Locations</h2>
+
+<div class="server-locations">
+  <div class="server-location">
+    <img src="/images/icons/fi.svg"/>
+    <p>Finland</p>
+  </div>
+  <div class="server-location">
+    <img src="/images/icons/de.svg"/>
+    <p>Germany</p>
+  </div>
+</div>
+<Globe client:visible/>
+<!-- If the browser has JavaScript disabled, show a static image instead -->
+<noscript>
+  <style>
+    canvas {display: none !important}
+    #globe-nojs {
+      width: 100%;
+      margin-top: 80px;
+    }
+  </style>
+  <img id="globe-nojs" src="/images/globe-nojs.png"/>
+</noscript>
+
+<style lang="scss">
+.server-locations {
+  display: flex;
+  justify-content: center;
+  gap: 24px;
+  .server-location {
+    display: flex;
+    align-items: center;
+    background: #0e0e0e;
+    border: 1px #2c2c2c solid;
+    border-radius: 3rem;
+    padding: 0px 24px 0px 12px;
+    img {
+      width: 32px;
+      height: 32px;
+      object-fit: cover;
+      border-radius: 1rem;
+      margin-right: 12px;
+    }
+  }
+}
+</style>