arthur/artsite
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/artsite.git synced 2026-01-25 15:52:35 +01:00
Code Issues 1 Packages Projects Releases Wiki Activity

Replace Mapbox integration with custom Globe component

Browse Source 
Switched from Mapbox to a custom globe visualization using 'cobe' library. Removed all Mapbox-related code, dependencies, and environmental variables. Introduced a WebSocket-based system to display live visitor data on the globe.
This commit is contained in:
Arthur Danjou
2025-01-29 12:43:03 +01:00
parent 86b5669947
commit 9d4ca6476b
11 changed files with 149 additions and 707 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/components/AppVisitors.vue
View File

@@ -3,9 +3,9 @@ const { isLoading, visitors } = useVisitors()
</script>
<template>
<div class="fixed bottom-4 right-4">
<div v-if="!isLoading" class="fixed bottom-4 right-4">
<UTooltip text="Visitors currently on my portfolio" placement="left">
<nav v-if="!isLoading" class="text-xs flex space-x-1 items-center border border-green-400 dark:border-green-600 px-2 rounded-xl bg-white dark:bg-black">
<nav class="text-xs flex space-x-1 items-center border border-green-400 dark:border-green-600 px-2 rounded-xl bg-white dark:bg-black">
<p class="text-neutral-700 dark:text-neutral-300">
{{ visitors }}
</p>

2
app/components/home/CatchPhrase.vue
View File

@@ -30,6 +30,6 @@ const { t } = useI18n({
},
"es": {
"quote": "Pase el cursor sobre los textos en negrita para obtener más información sobre mí."
},
}
}
</i18n>

83
app/components/home/Globe.vue Normal file
View File

@@ -0,0 +1,83 @@
<script setup lang="ts">
import createGlobe from 'cobe'
const { t } = useI18n({
useScope: 'local',
})
const myLocation = useState<{ longitude: number, latitude: number }>('location')
const globe = ref<HTMLCanvasElement | null>(null)
const phi = ref(0)
const locations = ref<Array<{ latitude: number, longitude: number }>>([])
const { data, open } = useWebSocket(`/visitors?latitude=${myLocation.value.latitude}&longitude=${myLocation.value.longitude}`, { immediate: true })
watch(data, async (newData) => {
locations.value = JSON.parse(typeof newData === 'string' ? newData : await newData.text())
})
onMounted(() => {
open()
createGlobe(globe.value!, {
devicePixelRatio: 2,
width: 400 * 2,
height: 400 * 2,
phi: 0,
theta: 0,
dark: 1,
diffuse: 1.2,
scale: 1,
mapSamples: 20000,
mapBrightness: 6,
baseColor: [0.3, 0.3, 0.3],
markerColor: [0.1, 0.8, 0.1],
glowColor: [0.2, 0.2, 0.2],
markers: [],
opacity: 0.3,
onRender(state) {
state.markers = locations.value.map(location => ({
location: [location.latitude, location.longitude],
size: myLocation.value.latitude === location.latitude && myLocation.value.longitude === location.longitude ? 0.1 : 0.05,
}))
state.phi = phi.value
phi.value += 0.01
},
})
})
</script>
<template>
<section class="mt-12 not-prose w-full flex flex-col items-center justify-center">
<canvas ref="globe" />
<!-- <ClientOnly>
<div class="group text-[12px] flex items-center gap-1">
<UIcon
name="i-ph-map-pin-duotone"
/>
<p>{{ t('globe') }}</p>
</div>
</ClientOnly> -->
</section>
</template>
<style scoped>
canvas {
width: 400px;
height: 400px;
max-width: 100%;
aspect-ratio: 1;
}
</style>
<i18n>
{
"en": {
"globe": "Each marker represents a visitor connected to my site."
},
"fr": {
"globe": "Chaque point représente un visiteur connecté sur mon site."
},
"es": {
"globe": "Cada marcador representa un visitante conectado a mi sitio."
}
}
</i18n>

114
app/components/home/Map.vue
View File

@@ -1,114 +0,0 @@
<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',
})
const config = useRuntimeConfig()
</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="{
accessToken: config.public.mapbox.accessToken,
style: isDark ? config.public.mapbox.style.dark : config.public.mapbox.style.light,
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-900 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>