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

Implement mapbox and set variables in env

Browse Source
This commit is contained in:
Arthur Danjou
2024-07-17 09:26:06 +02:00
parent 00696b554a
commit 3e73aea07a
4 changed files with 24 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
.env.example
View File

@@ -20,4 +20,9 @@ NUXT_DISCORD_USER_ID=
NUXT_PUBLIC_CLOUD_RESUME= NUXT_PUBLIC_CLOUD_RESUME=
# Nuxt I18N # Nuxt I18N
NUXT_PUBLIC_I18N_BASE_URL= NUXT_PUBLIC_I18N_BASE_URL=
# Nuxt Mapbox
NUXT_PUBLIC_MAPBOX_LIGHT=
NUXT_PUBLIC_MAPBOX_STYLE_DARK=
NUXT_PUBLIC_MAPBOX_ACCESS_TOKEN=

5
README.md
View File

@@ -67,6 +67,11 @@ NUXT_PUBLIC_CLOUD_RESUME=...
# Nuxt I18N # Nuxt I18N
NUXT_PUBLIC_I18N_BASE_URL=... NUXT_PUBLIC_I18N_BASE_URL=...
# Nuxt Mapbox
NUXT_PUBLIC_MAPBOX_STYLE_LIGHT=...
NUXT_PUBLIC_MAPBOX_STYLE_DARK=...
NUXT_PUBLIC_MAPBOX_ACCESS_TOKEN=...
``` ```
## 📄 License ## 📄 License

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

@@ -23,6 +23,8 @@ function adjustZoom(amount: number) {
const { t } = useI18n({ const { t } = useI18n({
useScope: 'local' useScope: 'local'
}) })
const config = useRuntimeConfig()
</script> </script>
<template> <template>
@@ -30,7 +32,8 @@ const { t } = useI18n({
<div class="relative h-80 md:h-96 w-full"> <div class="relative h-80 md:h-96 w-full">
<MapboxMap <MapboxMap
:options="{ :options="{
style: isDark ? 'mapbox://styles/arthurdanjou/clyor1rad005y01pibypu165j' : 'mapbox://styles/arthurdanjou/clyorg3yl018r01pi6esv8ab8', accessToken: config.public.mapbox.accessToken,
style: isDark ? config.public.mapbox.style.dark : config.public.mapbox.style.light,
center: coordinates, center: coordinates,
zoom, zoom,
projection: 'globe' projection: 'globe'

10
nuxt.config.ts
View File

@@ -21,7 +21,8 @@ export default defineNuxtConfig({
'@nuxtjs/google-fonts', '@nuxtjs/google-fonts',
'@nuxthq/studio', '@nuxthq/studio',
'@nuxt/image', '@nuxt/image',
'@nuxtjs/i18n' '@nuxtjs/i18n',
'nuxt-mapbox'
], ],
// Nuxt Hub // Nuxt Hub
@@ -119,6 +120,13 @@ export default defineNuxtConfig({
public: { public: {
cloud: { cloud: {
resume: '' resume: ''
},
mapbox: {
accessToken: '',
style: {
light: '',
dark: ''
}
} }
} }
}, },