mirror of
https://github.com/ArthurDanjou/artchat.git
synced 2026-01-27 08:54:12 +01:00
Add multilingual support with English, Spanish, and French translations; update Nuxt configuration and package dependencies
This commit is contained in:
@@ -3,10 +3,7 @@ import type { UseTimeAgoMessages } from '@vueuse/core'
|
||||
import type { Activity } from '~~/types'
|
||||
import { activityMessages, IDEs } from '~~/types'
|
||||
|
||||
const { locale, locales, t } = useI18n({
|
||||
useScope: 'local',
|
||||
})
|
||||
|
||||
const { locale, locales, t } = useI18n()
|
||||
const { data: activity, refresh } = await useAsyncData<Activity>('activity', () => $fetch<Activity>('/api/activity'))
|
||||
|
||||
useIntervalFn(async () => await refresh(), 5000)
|
||||
@@ -50,7 +47,7 @@ const getActivity = computed(() => {
|
||||
.trim()
|
||||
: ''
|
||||
|
||||
const stateWord = state && state.split(' ').length >= 2 ? state.split(' ')[1] : t('secret')
|
||||
const stateWord = state && state.split(' ').length >= 2 ? state.split(' ')[1] : t('tool.activity.secret')
|
||||
const ago = useTimeAgo(timestamps.start, {
|
||||
messages: activityMessages[locale.value as keyof typeof activityMessages] as UseTimeAgoMessages,
|
||||
}).value
|
||||
@@ -74,16 +71,16 @@ const getActivity = computed(() => {
|
||||
<template>
|
||||
<section>
|
||||
<div class="prose dark:prose-invert">
|
||||
<p>{{ t('response') }}</p>
|
||||
<p>{{ t('tool.activity.response') }}</p>
|
||||
</div>
|
||||
<div v-if="getActivity" class="space-y-4">
|
||||
<div v-if="getActivity" class="prose dark:prose-invert flex items-center gap-2">
|
||||
<div>
|
||||
{{ isActive ? t('working') : t('idling', {
|
||||
{{ isActive ? t('tool.activity.working') : t('tool.activity.idling', {
|
||||
editor: getActivity.name,
|
||||
}) }}
|
||||
</div>
|
||||
<UTooltip :text="isActive ? t('tooltip.online') : t('tooltip.idling')">
|
||||
<UTooltip :text="isActive ? t('tool.activity.tooltip.online') : t('tool.activity.tooltip.idling')">
|
||||
<div class="relative flex h-3 w-3">
|
||||
<div
|
||||
v-if="isActive"
|
||||
@@ -117,7 +114,7 @@ const getActivity = computed(() => {
|
||||
|
||||
<template #footer>
|
||||
<div class="flex justify-end text-sm">
|
||||
<i18n-t keypath="started" tag="p">
|
||||
<i18n-t keypath="tool.activity.started" tag="p">
|
||||
<template #date>
|
||||
{{ getActivity.start.formated.date }}
|
||||
</template>
|
||||
@@ -132,7 +129,7 @@ const getActivity = computed(() => {
|
||||
</div>
|
||||
<div v-else class="flex md:items-start gap-2">
|
||||
<i18n-t
|
||||
keypath="offline"
|
||||
keypath="tool.activity.offline"
|
||||
tag="p"
|
||||
class="not-prose"
|
||||
>
|
||||
@@ -140,7 +137,7 @@ const getActivity = computed(() => {
|
||||
<i>{{ t('maths') }}</i>
|
||||
</template>
|
||||
</i18n-t>
|
||||
<UTooltip :text="t('tooltip.offline')">
|
||||
<UTooltip :text="t('tool.activity.tooltip.offline')">
|
||||
<div class="relative flex h-3 w-3 mt-2">
|
||||
<div
|
||||
class="relative inline-flex rounded-full h-3 w-3 bg-red-500"
|
||||
@@ -150,50 +147,3 @@ const getActivity = computed(() => {
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<i18n lang="json">
|
||||
{
|
||||
"en": {
|
||||
"offline": "I'm currently offline. Come back later to see what I'm working on. {maths}",
|
||||
"working": "I'm actually online! Check what I'm working on just below.",
|
||||
"idling": "I'm idling on my computer with {editor} running in background.",
|
||||
"maths": "I am probably doing some maths or sleeping.",
|
||||
"response": "The statistics are powered and saved by WakaTime.",
|
||||
"tooltip": {
|
||||
"online": "I'm online 👋",
|
||||
"offline": "I'm offline 🫥",
|
||||
"idling": "I'm sleeping 😴"
|
||||
},
|
||||
"started": "Started the {date} at {hour}",
|
||||
"secret": "Secret Project"
|
||||
},
|
||||
"fr": {
|
||||
"offline": "Je suis actuellement hors ligne. Revenez plus tard pour voir sur quoi je travaille. {maths}",
|
||||
"working": "Je suis actuellement en ligne ! Découvrez ce sur quoi je travaille juste en dessous.",
|
||||
"idling": "Je suis en veille sur mon ordinateur avec {editor} en arrière-plan.",
|
||||
"maths": "Je suis probablement en train de faire des maths ou en train de dormir.",
|
||||
"response": "Les statistiques sont propulsées et enregistrées par WakaTime.",
|
||||
"tooltip": {
|
||||
"online": "Je suis connecté 👋",
|
||||
"offline": "Je suis déconnecté 🫥",
|
||||
"idling": "Je dors 😴"
|
||||
},
|
||||
"started": "Commencé le {date} à {hour}",
|
||||
"secret": "Projet Secret"
|
||||
},
|
||||
"es": {
|
||||
"offline": "Ahora mismo estoy desconectado. Vuelve más tarde para ver en lo que estoy trabajando. {maths}",
|
||||
"working": "Estoy trabajando en línea. ¡Mira lo que estoy haciendo justo debajo!",
|
||||
"idling": "Estoy en reposo en mi ordenador con {editor} en segundo plano.",
|
||||
"maths": "Estoy probablemente haciendo matemáticas o durmiendo.",
|
||||
"response": "Las estadísticas son propulsadas y registradas por WakaTime.",
|
||||
"tooltip": {
|
||||
"online": "Estoy conectado 👋",
|
||||
"offline": "Estoy desconectado 🫥",
|
||||
"idling": "Estoy durmiendo 😴"
|
||||
},
|
||||
"started": "Comenzado el {date} a {hour}",
|
||||
"secret": "Proyecto Secreto"
|
||||
}
|
||||
}
|
||||
</i18n>
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
<script lang="ts" setup>
|
||||
import { socials } from '~~/types'
|
||||
|
||||
const { t } = useI18n({ useScope: 'local' })
|
||||
const { t } = useI18n()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section>
|
||||
<div>
|
||||
<p class="prose dark:prose-invert">
|
||||
{{ t('contact') }}
|
||||
{{ t('tool.contact') }}
|
||||
</p>
|
||||
<div class="flex gap-2 flex-wrap my-2">
|
||||
<UButton
|
||||
@@ -27,17 +27,3 @@ const { t } = useI18n({ useScope: 'local' })
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<i18n lang="json">
|
||||
{
|
||||
"en": {
|
||||
"contact": "There are different ways to contact me. Here is a list:"
|
||||
},
|
||||
"fr": {
|
||||
"contact": "Il existe différents façons de me contacter. Voici une liste :"
|
||||
},
|
||||
"es": {
|
||||
"contact": "Existen diferentes formas de contactarme. Aquí hay una lista:"
|
||||
}
|
||||
}
|
||||
</i18n>
|
||||
|
||||
@@ -1,33 +1,10 @@
|
||||
<script lang="ts" setup>
|
||||
const { t } = useI18n({ useScope: 'local' })
|
||||
const { t } = useI18n()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="prose dark:prose-invert">
|
||||
<h3>{{ t('duplicated.title') }}</h3>
|
||||
<p>{{ t('duplicated.description') }}</p>
|
||||
<h3>{{ t('tool.duplicated.title') }}</h3>
|
||||
<p>{{ t('tool.duplicated.description') }}</p>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<i18n lang="json">
|
||||
{
|
||||
"en": {
|
||||
"duplicated": {
|
||||
"title": "⚠️ I detected duplicated messages",
|
||||
"description": "I have therefore removed the older duplicated messages to lighten the application."
|
||||
}
|
||||
},
|
||||
"fr": {
|
||||
"duplicated": {
|
||||
"title": "⚠️ J'ai détecté des messages dupliqués",
|
||||
"description": "J'ai donc supprimé les anciens messages dupliqués pour alléger l'application."
|
||||
}
|
||||
},
|
||||
"es": {
|
||||
"duplicated": {
|
||||
"title": "⚠️ He detectado mensajes duplicados",
|
||||
"description": "Por lo tanto, eliminé los mensajes duplicados más antiguos para aligerar la aplicación."
|
||||
}
|
||||
}
|
||||
}
|
||||
</i18n>
|
||||
|
||||
@@ -1,33 +1,20 @@
|
||||
<script lang="ts" setup>
|
||||
import { en, es, fr } from '@nuxt/ui/locale'
|
||||
|
||||
const { locale, setLocale, locales, t } = useI18n({ useScope: 'local' })
|
||||
const currentLocale = computed(() => locales.value.filter(l => l.code === locale.value)[0])
|
||||
watch(locale, () => changeLocale(locale.value))
|
||||
|
||||
async function changeLocale(newLocale: string | undefined) {
|
||||
document.body.style.animation = 'switch-on .2s'
|
||||
await new Promise(resolve => setTimeout(resolve, 200))
|
||||
const { locale, setLocale, t } = useI18n()
|
||||
|
||||
async function changeLocale(newLocale: string) {
|
||||
await setLocale(newLocale as 'en' | 'fr' | 'es')
|
||||
document.body.style.animation = 'switch-off .5s'
|
||||
|
||||
await new Promise(resolve => setTimeout(resolve, 200))
|
||||
document.body.style.animation = ''
|
||||
}
|
||||
|
||||
defineShortcuts({
|
||||
l: () => locale.value = currentLocale.value!.code === 'en' ? 'fr' : currentLocale.value!.code === 'fr' ? 'es' : 'en',
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="space-y-4">
|
||||
<div class="prose dark:prose-invert">
|
||||
<p>{{ t('response.control') }}</p>
|
||||
<p>{{ t('tool.language.response.control') }}</p>
|
||||
<ul>
|
||||
<li>{{ t('response.choose') }}</li>
|
||||
<i18n-t keypath="response.kbd" tag="li">
|
||||
<li>{{ t('tool.language.response.choose') }}</li>
|
||||
<i18n-t keypath="tool.language.response.kbd" tag="li">
|
||||
<template #kbd>
|
||||
<UKbd>L</UKbd>
|
||||
</template>
|
||||
@@ -37,39 +24,10 @@ defineShortcuts({
|
||||
<ClientOnly>
|
||||
<UCard variant="outline" class="md:max-w-1/2 m-1 shadow-sm" :ui="{ body: 'flex justify-between items-center gap-2' }">
|
||||
<p class="block">
|
||||
{{ t('change') }}
|
||||
{{ t('tool.language.change') }}
|
||||
</p>
|
||||
<ULocaleSelect v-model="locale" :locales="[en, es, fr]" @update:model-value="changeLocale" />
|
||||
</UCard>
|
||||
</ClientOnly>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<i18n lang="json">
|
||||
{
|
||||
"en": {
|
||||
"change": "Change language",
|
||||
"response": {
|
||||
"control": "I added the language switch control above so you can switch directly.",
|
||||
"choose": "Choose English, French, or Spanish",
|
||||
"kbd": "Press {kbd} on your keyboard"
|
||||
}
|
||||
},
|
||||
"fr": {
|
||||
"change": "Changer de langue",
|
||||
"response": {
|
||||
"control": "J'ai ajouté le contrôle de changement de langue ci-dessus pour que vous puissiez changer directement.",
|
||||
"choose": "Choisissez Anglais, Français ou Espagnol",
|
||||
"kbd": "Appuyez sur {kbd} de votre clavier"
|
||||
}
|
||||
},
|
||||
"es": {
|
||||
"change": "Cambiar idioma",
|
||||
"response": {
|
||||
"control": "He añadido el control de cambio de idioma arriba para que puedas cambiar directamente.",
|
||||
"choose": "Elige Inglés, Francés o Español",
|
||||
"kbd": "Presiona {kbd} en tu teclado"
|
||||
}
|
||||
}
|
||||
}
|
||||
</i18n>
|
||||
|
||||
@@ -1,11 +1,7 @@
|
||||
<script lang="ts" setup>
|
||||
useI18n({ useScope: 'local' })
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section>
|
||||
<div class="prose dark:prose-invert mb-4">
|
||||
<i18n-t keypath="location" tag="p">
|
||||
<i18n-t keypath="tool.location" tag="p">
|
||||
<template #location>
|
||||
<strong>Paris, France 🇫🇷</strong>
|
||||
</template>
|
||||
@@ -19,17 +15,3 @@ useI18n({ useScope: 'local' })
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<i18n lang="json">
|
||||
{
|
||||
"en": {
|
||||
"location": "I'm currently based in {location}. See below for more details."
|
||||
},
|
||||
"fr": {
|
||||
"location": "Je suis actuellement basé à {location}. Voir ci-dessous pour plus de détails."
|
||||
},
|
||||
"es": {
|
||||
"location": "Actualmente estoy basado en {location}. Consulta más detalles a continuación."
|
||||
}
|
||||
}
|
||||
</i18n>
|
||||
|
||||
@@ -3,9 +3,7 @@ import type { Stats } from '~~/types'
|
||||
|
||||
const { data: stats } = await useAsyncData<Stats>('stats', () => $fetch('/api/stats'))
|
||||
|
||||
const { locale, locales, t } = useI18n({
|
||||
useScope: 'local',
|
||||
})
|
||||
const { locale, locales, t } = useI18n()
|
||||
const currentLocale = computed(() => locales.value.find(l => l.code === locale.value))
|
||||
|
||||
const time = useTimeAgo(new Date(stats.value!.coding.data.range.start) ?? new Date()).value.split(' ')[0]
|
||||
@@ -17,7 +15,7 @@ const hours = usePrecision(stats.value!.coding.data.grand_total.total_seconds_in
|
||||
<section v-if="stats && stats.coding && stats.editors && stats.os && stats.languages && time && date && hours">
|
||||
<div class="prose dark:prose-invert">
|
||||
<i18n-t
|
||||
keypath="stats"
|
||||
keypath="tool.stats.main"
|
||||
tag="p"
|
||||
>
|
||||
<template #time>
|
||||
@@ -25,28 +23,28 @@ const hours = usePrecision(stats.value!.coding.data.grand_total.total_seconds_in
|
||||
</template>
|
||||
<template #date>
|
||||
<HoverText
|
||||
:hover="t('tooltip.date')"
|
||||
:hover="t('tool.stats.tooltip.date')"
|
||||
:text="date"
|
||||
/>
|
||||
</template>
|
||||
<template #hours>
|
||||
<HoverText
|
||||
:hover="t('tooltip.hours')"
|
||||
:hover="t('tool.stats.tooltip.hours')"
|
||||
:text="hours"
|
||||
/>
|
||||
</template>
|
||||
</i18n-t>
|
||||
<ul>
|
||||
<i18n-t
|
||||
keypath="editors"
|
||||
keypath="tool.stats.editors"
|
||||
tag="li"
|
||||
>
|
||||
<template #editors>
|
||||
{{ stats.editors.data.slice(0, 2).map(editor => `${editor.name} (${editor.percent}%)`).join(t('separator')) }}
|
||||
{{ stats.editors.data.slice(0, 2).map(editor => `${editor.name} (${editor.percent}%)`).join(t('tool.stats.separator')) }}
|
||||
</template>
|
||||
</i18n-t>
|
||||
<i18n-t
|
||||
keypath="os"
|
||||
keypath="tool.stats.os"
|
||||
tag="li"
|
||||
>
|
||||
<template
|
||||
@@ -57,52 +55,14 @@ const hours = usePrecision(stats.value!.coding.data.grand_total.total_seconds_in
|
||||
</template>
|
||||
</i18n-t>
|
||||
<i18n-t
|
||||
keypath="languages"
|
||||
keypath="tool.stats.languages"
|
||||
tag="li"
|
||||
>
|
||||
<template #languages>
|
||||
{{ stats.languages.data.slice(0, 2).map(language => `${language.name} (${language.percent}%)`).join(t('separator')) }}
|
||||
{{ stats.languages.data.slice(0, 2).map(language => `${language.name} (${language.percent}%)`).join(t('tool.stats.separator')) }}
|
||||
</template>
|
||||
</i18n-t>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<i18n lang="json">
|
||||
{
|
||||
"en": {
|
||||
"stats": "I collect some data for {time} years, started the {date}. I've coded for a total of {hours} hours.",
|
||||
"editors": "My top editors are {editors}",
|
||||
"os": "My best OS is {os}",
|
||||
"languages": "My favorite languages are {languages}",
|
||||
"separator": " and ",
|
||||
"tooltip": {
|
||||
"date": "That was so long ago 🫣",
|
||||
"hours": "That's a lot 😮"
|
||||
}
|
||||
},
|
||||
"fr": {
|
||||
"stats": "Je collecte des données depuis {time} ans, commencé le {date}. J'ai codé un total de {hours} heures.",
|
||||
"editors": "Mes meilleurs éditeurs sont {editors}",
|
||||
"os": "Mon meilleur OS est {os}",
|
||||
"languages": "Mes langages préférés sont {languages}",
|
||||
"separator": " et ",
|
||||
"tooltip": {
|
||||
"date": "C'était il y a si longtemps 🫣",
|
||||
"hours": "C'est beaucoup 😮"
|
||||
}
|
||||
},
|
||||
"es": {
|
||||
"stats": "Recopilo datos desde hace {time} años, empecé el {date}. He programado durante un total de {hours} horas.",
|
||||
"editors": "Mis mejores editores son {editors}.",
|
||||
"os": "Mi mejor OS es {os}.",
|
||||
"languages": "Mis lenguajes favoritos son {languages}.",
|
||||
"separator": " y ",
|
||||
"tooltip": {
|
||||
"date": "hace tato tiempo…🫣",
|
||||
"hours": "es mucho 😮"
|
||||
}
|
||||
}
|
||||
}
|
||||
</i18n>
|
||||
|
||||
@@ -1,15 +1,15 @@
|
||||
<script lang="ts" setup>
|
||||
const { t } = useI18n({ useScope: 'local' })
|
||||
const { t } = useI18n()
|
||||
const { dark, toggleDark } = useTheme()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="space-y-4">
|
||||
<div class="prose dark:prose-invert">
|
||||
<p>{{ t('response.control') }}</p>
|
||||
<p>{{ t('tool.theme.response.control') }}</p>
|
||||
<ul>
|
||||
<li>{{ t('response.choose') }}</li>
|
||||
<i18n-t keypath="response.kbd" tag="li">
|
||||
<li>{{ t('tool.theme.response.choose') }}</li>
|
||||
<i18n-t keypath="tool.theme.response.kbd" tag="li">
|
||||
<template #kbd>
|
||||
<UKbd>T</UKbd>
|
||||
</template>
|
||||
@@ -21,10 +21,10 @@ const { dark, toggleDark } = useTheme()
|
||||
<div class="flex items-center gap-2">
|
||||
<UIcon v-if="dark" name="i-ph-moon-duotone" size="24" />
|
||||
<UIcon v-else name="i-ph-sun-duotone" size="24" />
|
||||
<span>{{ t('switch') }}</span>
|
||||
<span>{{ t('tool.theme.switch') }}</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-xs text-muted">{{ t('light') }}</span>
|
||||
<span class="text-xs text-muted">{{ t('tool.theme.light') }}</span>
|
||||
<USwitch
|
||||
v-model="dark"
|
||||
color="neutral"
|
||||
@@ -32,48 +32,13 @@ const { dark, toggleDark } = useTheme()
|
||||
aria-label="switch theme"
|
||||
@click.prevent="toggleDark"
|
||||
/>
|
||||
<span class="text-xs text-muted">{{ t('dark') }}</span>
|
||||
<span class="text-xs text-muted">{{ t('tool.theme.dark') }}</span>
|
||||
</div>
|
||||
</UCard>
|
||||
</ClientOnly>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<i18n lang="json">
|
||||
{
|
||||
"en": {
|
||||
"switch": "Switch theme",
|
||||
"light": "Light",
|
||||
"dark": "Dark",
|
||||
"response": {
|
||||
"control": "I added the theme toggle control above so you can switch directly.",
|
||||
"choose": "Choose Light (sun icon) or Dark (moon icon)",
|
||||
"kbd": "Press {kbd} on your keyboard"
|
||||
}
|
||||
},
|
||||
"fr": {
|
||||
"switch": "Changer de thème",
|
||||
"light": "Clair",
|
||||
"dark": "Sombre",
|
||||
"response": {
|
||||
"control": "J'ai ajouté le contrôle de basculement de thème ci-dessus afin que vous puissiez basculer directement.",
|
||||
"choose": "Choisissez Clair (icône de soleil) ou Sombre (icône de lune)",
|
||||
"kbd": "Appuyez sur {kbd} sur votre clavier"
|
||||
}
|
||||
},
|
||||
"es": {
|
||||
"switch": "Cambiar tema",
|
||||
"light": "Claro",
|
||||
"dark": "Oscuro",
|
||||
"response": {
|
||||
"control": "He añadido el control de alternancia de tema arriba para que puedas cambiar directamente.",
|
||||
"choose": "Elige Claro (icono de sol) u Oscuro (icono de luna)",
|
||||
"kbd": "Presiona {kbd} en tu teclado"
|
||||
}
|
||||
}
|
||||
}
|
||||
</i18n>
|
||||
|
||||
<style scoped>
|
||||
::view-transition-old(root),
|
||||
::view-transition-new(root) {
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script lang="ts" setup>
|
||||
const { t } = useI18n({ useScope: 'local' })
|
||||
const { t } = useI18n()
|
||||
|
||||
const { data: items } = await useAsyncData('uses', async () => await queryCollection('uses').all())
|
||||
const { data: categories } = await useAsyncData('categories', async () => await queryCollection('usesCategories').all())
|
||||
@@ -8,7 +8,7 @@ const { data: categories } = await useAsyncData('categories', async () => await
|
||||
<template>
|
||||
<section>
|
||||
<div class="prose dark:prose-invert">
|
||||
<p>{{ t('description') }}</p>
|
||||
<p>{{ t('uses') }}</p>
|
||||
</div>
|
||||
<div v-if="items" class="space-y-12 mt-4">
|
||||
<UsesList v-for="category in categories" :key="category.id" :title="category.name">
|
||||
@@ -21,17 +21,3 @@ const { data: categories } = await useAsyncData('categories', async () => await
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<i18n lang="json">
|
||||
{
|
||||
"en": {
|
||||
"description": "Here is a comprehensive list of all the software I use, gadgets I love, and other things I recommend."
|
||||
},
|
||||
"fr": {
|
||||
"description": "Voici une grande liste de tous mes logiciels que j'utilise, gadgets que j'adore et autres choses que je recommande."
|
||||
},
|
||||
"es": {
|
||||
"description": "Aquí hay una gran lista de todo el software que uso, gadgets que amo y otras cosas que recomiendo."
|
||||
}
|
||||
}
|
||||
</i18n>
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import type { Weather } from '~~/types'
|
||||
|
||||
const { t } = useI18n({ useScope: 'local' })
|
||||
|
||||
const { t } = useI18n()
|
||||
const { data: weather } = await useAsyncData<Weather>('weather', () =>
|
||||
$fetch('/api/weather'))
|
||||
</script>
|
||||
@@ -13,7 +12,7 @@ const { data: weather } = await useAsyncData<Weather>('weather', () =>
|
||||
<div class="flex gap-4 items-center">
|
||||
<UIcon name="i-ph-cloud-duotone" size="24" />
|
||||
<h3 class="text-lg font-semibold">
|
||||
{{ t('weather') }}
|
||||
{{ t('tool.weather.main') }}
|
||||
</h3>
|
||||
</div>
|
||||
</template>
|
||||
@@ -30,7 +29,7 @@ const { data: weather } = await useAsyncData<Weather>('weather', () =>
|
||||
<div class="grid grid-cols-3 gap-2 mt-4">
|
||||
<div class="bg-zinc-200 dark:bg-zinc-800 rounded-md p-2 text-center">
|
||||
<p class="text-sm text-zinc-800 dark:text-zinc-400">
|
||||
{{ t('high') }}
|
||||
{{ t('tool.weather.high') }}
|
||||
</p>
|
||||
<p class="font-semibold">
|
||||
{{ weather.temp_max }}°C
|
||||
@@ -38,7 +37,7 @@ const { data: weather } = await useAsyncData<Weather>('weather', () =>
|
||||
</div>
|
||||
<div class="bg-zinc-200 dark:bg-zinc-800 rounded-md p-2 text-center">
|
||||
<p class="text-sm text-zinc-800 dark:text-zinc-400">
|
||||
{{ t('low') }}
|
||||
{{ t('tool.weather.low') }}
|
||||
</p>
|
||||
<p class="font-semibold">
|
||||
{{ weather.temp_min }}°C
|
||||
@@ -46,7 +45,7 @@ const { data: weather } = await useAsyncData<Weather>('weather', () =>
|
||||
</div>
|
||||
<div class="bg-zinc-200 dark:bg-zinc-800 rounded-md p-2 text-center">
|
||||
<p class="text-sm text-zinc-800 dark:text-zinc-400">
|
||||
{{ t('humidity') }}
|
||||
{{ t('tool.weather.humidity') }}
|
||||
</p>
|
||||
<p class="font-semibold">
|
||||
{{ weather.humidity }}%
|
||||
@@ -58,41 +57,12 @@ const { data: weather } = await useAsyncData<Weather>('weather', () =>
|
||||
<template #footer>
|
||||
<div class="flex items-center justify-between">
|
||||
<p class="text-sm text-zinc-600 dark:text-zinc-400">
|
||||
{{ t('wind') }}: {{ weather.wind }} km/h
|
||||
{{ t('tool.weather.wind') }}: {{ weather.wind }} km/h
|
||||
</p>
|
||||
<p class="text-sm text-zinc-600 dark:text-zinc-400">
|
||||
{{ t('powered_by') }}
|
||||
{{ t('tool.weather.powered_by') }}
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
</UCard>
|
||||
</template>
|
||||
|
||||
<i18n lang="json">
|
||||
{
|
||||
"en": {
|
||||
"weather": "Weather",
|
||||
"powered_by": "Powered by OpenWeatherMap",
|
||||
"low": "Low",
|
||||
"high": "High",
|
||||
"humidity": "Humidity",
|
||||
"wind": "Wind"
|
||||
},
|
||||
"fr": {
|
||||
"weather": "Météo",
|
||||
"powered_by": "Alimenté par OpenWeatherMap",
|
||||
"low": "Bas",
|
||||
"high": "Haut",
|
||||
"humidity": "Humidité",
|
||||
"wind": "Vent"
|
||||
},
|
||||
"es": {
|
||||
"weather": "Tiempo",
|
||||
"powered_by": "Impulsado por OpenWeatherMap",
|
||||
"low": "Bajo",
|
||||
"high": "Alto",
|
||||
"humidity": "Humedad",
|
||||
"wind": "Viento"
|
||||
}
|
||||
}
|
||||
</i18n>
|
||||
|
||||
Reference in New Issue
Block a user