mirror of
https://github.com/ArthurDanjou/artchat.git
synced 2026-01-26 07:54:07 +01:00
Add multilingual support with English, Spanish, and French translations; update Nuxt configuration and package dependencies
This commit is contained in:
@@ -6,14 +6,9 @@ const searchTerm = ref('')
|
||||
const openMessageModal = ref(false)
|
||||
const openClearModal = ref(false)
|
||||
|
||||
const { t } = useI18n({ useScope: 'local' })
|
||||
const { t, locale, locales, setLocale } = useI18n()
|
||||
|
||||
const { isDark, toggleDark } = useTheme()
|
||||
defineShortcuts({
|
||||
t: () => toggleDark({ clientX: window.innerWidth, clientY: 0 }),
|
||||
})
|
||||
|
||||
const { messages, submitMessage } = useChat(t)
|
||||
const { messages, submitMessage } = useChat()
|
||||
const { clearMessages, messages: storeMessages } = useChatStore()
|
||||
const loading = computed(() => storeMessages.some(msg => msg.state === ChatState.LOADING))
|
||||
|
||||
@@ -28,6 +23,13 @@ function onSelect(item: CommandPaletteItem) {
|
||||
submitMessage(item.type, item.prompt, item.fetchStates ?? [])
|
||||
}
|
||||
|
||||
const currentLocale = computed(() => locales.value.filter(l => l.code === locale.value)[0])
|
||||
|
||||
async function changeLocale() {
|
||||
await setLocale(currentLocale.value!.code === 'en' ? 'fr' : currentLocale.value!.code === 'fr' ? 'es' : 'en')
|
||||
}
|
||||
|
||||
const { isDark, toggleDark } = useTheme()
|
||||
defineShortcuts({
|
||||
meta_enter: () => {
|
||||
openMessageModal.value = !openMessageModal.value
|
||||
@@ -35,6 +37,8 @@ defineShortcuts({
|
||||
meta_d: () => {
|
||||
openClearModal.value = !openClearModal.value
|
||||
},
|
||||
l: () => changeLocale(),
|
||||
t: () => toggleDark({ clientX: window.innerWidth, clientY: 0 }),
|
||||
})
|
||||
|
||||
const modalUi = {
|
||||
@@ -55,8 +59,8 @@ const commandPaletteUi = {
|
||||
<UFieldGroup>
|
||||
<UModal v-model:open="openMessageModal" :ui="modalUi" title="Hey" description="Hey">
|
||||
<UButton
|
||||
:label="loading ? t('cmd.sending') : t('cmd.send')"
|
||||
variant="outline"
|
||||
:label="loading ? t('palette.cmd.sending') : t('palette.cmd.send')"
|
||||
variant="solid"
|
||||
color="neutral"
|
||||
size="xl"
|
||||
icon="i-ph-paper-plane-tilt-duotone"
|
||||
@@ -83,11 +87,11 @@ const commandPaletteUi = {
|
||||
<div class="flex items-center gap-2.5">
|
||||
<div class="flex items-center gap-2.5">
|
||||
<UIcon :name="item.icon!" size="20" />
|
||||
<span>{{ item.label }}</span>
|
||||
<span>{{ t(item.label) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-muted text-xs font-medium">
|
||||
{{ item.prompt }}
|
||||
{{ t(item.prompt) }}
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
@@ -95,7 +99,7 @@ const commandPaletteUi = {
|
||||
<div class="flex items-center justify-between gap-2">
|
||||
<UIcon name="i-simple-icons-nuxtdotjs" class="size-5 text-dimmed ml-1" />
|
||||
<div class="flex items-center gap-1">
|
||||
<UButton color="neutral" variant="ghost" :label="t('cmd.send')" class="text-dimmed" size="xs">
|
||||
<UButton color="neutral" variant="ghost" :label="t('palette.cmd.send')" class="text-dimmed" size="xs">
|
||||
<template #trailing>
|
||||
<UKbd value="enter" />
|
||||
</template>
|
||||
@@ -108,11 +112,10 @@ const commandPaletteUi = {
|
||||
</UModal>
|
||||
<UModal
|
||||
v-model:open="openClearModal"
|
||||
:title="t('clear.title')"
|
||||
:description="t('clear.description')"
|
||||
:title="t('palette.clear.title')"
|
||||
:description="t('palette.clear.description')"
|
||||
>
|
||||
<UButton
|
||||
:label="t('clear.button')"
|
||||
variant="subtle"
|
||||
color="error"
|
||||
leading-icon="i-ph-trash-duotone"
|
||||
@@ -120,291 +123,34 @@ const commandPaletteUi = {
|
||||
class="rounded-lg"
|
||||
:class="storeMessages.length !== 0 ? 'cursor-pointer' : 'cursor-default'"
|
||||
:disabled="storeMessages.length === 0"
|
||||
>
|
||||
<template #trailing>
|
||||
<UKbd value="meta" color="error" />
|
||||
<UKbd value="D" color="error" />
|
||||
</template>
|
||||
</UButton>
|
||||
/>
|
||||
|
||||
<template #footer="{ close }">
|
||||
<UFieldGroup>
|
||||
<UButton :label="t('clear.cancel')" color="neutral" variant="outline" @click="close" />
|
||||
<UButton :label="t('clear.submit')" color="error" @click.prevent="handleDelete()" />
|
||||
<UButton :label="t('palette.clear.cancel')" color="neutral" variant="outline" @click="close" />
|
||||
<UButton :label="t('palette.clear.submit')" color="error" @click.prevent="handleDelete()" />
|
||||
</UFieldGroup>
|
||||
</template>
|
||||
</UModal>
|
||||
</UFieldGroup>
|
||||
<UButton
|
||||
:icon="isDark ? 'i-ph-moon-duotone' : 'i-ph-sun-duotone'"
|
||||
color="neutral"
|
||||
variant="solid"
|
||||
size="xl"
|
||||
@click.prevent="toggleDark"
|
||||
/>
|
||||
<ClientOnly>
|
||||
<UFieldGroup>
|
||||
<UButton
|
||||
:icon="isDark ? 'i-ph-moon-duotone' : 'i-ph-sun-duotone'"
|
||||
color="neutral"
|
||||
variant="outline"
|
||||
size="xl"
|
||||
@click.prevent="toggleDark"
|
||||
/>
|
||||
<UButton
|
||||
icon="i-ph-translate-duotone"
|
||||
color="neutral"
|
||||
variant="outline"
|
||||
size="xl"
|
||||
@click.prevent="changeLocale"
|
||||
/>
|
||||
</UFieldGroup>
|
||||
</ClientOnly>
|
||||
</UCard>
|
||||
</nav>
|
||||
</template>
|
||||
|
||||
<i18n lang="json">
|
||||
{
|
||||
"en": {
|
||||
"clear": {
|
||||
"button": "Clear",
|
||||
"cancel": "Cancel",
|
||||
"submit": "Delete",
|
||||
"title": "Are you sure you want to delete this conversation?",
|
||||
"description": "This action cannot be undone."
|
||||
},
|
||||
"cmd": {
|
||||
"send": "Send message",
|
||||
"sending": "Sending..."
|
||||
},
|
||||
"chat": {
|
||||
"actions": "Components",
|
||||
"arthur": "More about Arthur",
|
||||
"interface": "Change the interface",
|
||||
"theme": {
|
||||
"label": "Change theme",
|
||||
"prompt": "How can I change the theme?"
|
||||
},
|
||||
"uses": {
|
||||
"label": "View setup",
|
||||
"prompt": "How can I view the setup of Arthur?"
|
||||
},
|
||||
"stats": {
|
||||
"label": "View statistics",
|
||||
"prompt": "How can I view the statistics concerning Arthur?"
|
||||
},
|
||||
"weather": {
|
||||
"label": "View weather",
|
||||
"prompt": "How can I view the weather conditions near Arthur?"
|
||||
},
|
||||
"location": {
|
||||
"label": "View location",
|
||||
"prompt": "How can I view the location of Arthur?"
|
||||
},
|
||||
"language": {
|
||||
"label": "Change language",
|
||||
"prompt": "How can I change the chat language?"
|
||||
},
|
||||
"activity": {
|
||||
"label": "Activity",
|
||||
"prompt": "What are you currently doing?"
|
||||
},
|
||||
"about": {
|
||||
"label": "About Arthur",
|
||||
"prompt": "I want you to tell me about yourself."
|
||||
},
|
||||
"projects": {
|
||||
"label": "Projects",
|
||||
"prompt": "Tell me about your projects."
|
||||
},
|
||||
"writings": {
|
||||
"label": "Writings",
|
||||
"prompt": "What are your latest articles?"
|
||||
},
|
||||
"experiences": {
|
||||
"label": "Experiences",
|
||||
"prompt": "What experiences do you have in your career?"
|
||||
},
|
||||
"skills": {
|
||||
"label": "Skills",
|
||||
"prompt": "What are your skills?"
|
||||
},
|
||||
"status": {
|
||||
"label": "Homelab status",
|
||||
"prompt": "I saw you have a homelab, is it currently working?"
|
||||
},
|
||||
"resume": {
|
||||
"label": "Resume",
|
||||
"prompt": "Can you send me your resume?"
|
||||
},
|
||||
"contact": {
|
||||
"label": "Contact",
|
||||
"prompt": "How can I contact you?"
|
||||
},
|
||||
"hobbies": {
|
||||
"label": "Hobbies and passions",
|
||||
"prompt": "What are your hobbies? Your passions? Your interests?"
|
||||
},
|
||||
"credits": {
|
||||
"label": "Credits",
|
||||
"prompt": "How is this chat made?"
|
||||
}
|
||||
}
|
||||
},
|
||||
"fr": {
|
||||
"clear": {
|
||||
"button": "Effacer",
|
||||
"cancel": "Annuler",
|
||||
"submit": "Supprimer",
|
||||
"title": "Êtes-vous sûr de vouloir supprimer cette conversation ?",
|
||||
"description": "Cette action ne peut pas être annulée."
|
||||
},
|
||||
"cmd": {
|
||||
"send": "Envoyer le message",
|
||||
"sending": "Envoi..."
|
||||
},
|
||||
"chat": {
|
||||
"actions": "Composants",
|
||||
"arthur": "En savoir plus sur Arthur",
|
||||
"interface": "Changer l'interface",
|
||||
"theme": {
|
||||
"label": "Changer de thème",
|
||||
"prompt": "Comment puis-je changer le thème ?"
|
||||
},
|
||||
"uses": {
|
||||
"label": "Voir la configuration",
|
||||
"prompt": "Comment puis-je voir la configuration d'Arthur ?"
|
||||
},
|
||||
"stats": {
|
||||
"label": "Voir les statistiques",
|
||||
"prompt": "Comment puis-je voir les statistiques concernant Arthur ?"
|
||||
},
|
||||
"weather": {
|
||||
"label": "Voir la météo",
|
||||
"prompt": "Comment puis-je voir les conditions météorologiques près d'Arthur ?"
|
||||
},
|
||||
"location": {
|
||||
"label": "Voir la localisation",
|
||||
"prompt": "Comment puis-je voir la localisation d'Arthur ?"
|
||||
},
|
||||
"language": {
|
||||
"label": "Changer de langue",
|
||||
"prompt": "Comment puis-je changer la langue du chat ?"
|
||||
},
|
||||
"activity": {
|
||||
"label": "Activité",
|
||||
"prompt": "Que fais-tu actuellement ?"
|
||||
},
|
||||
"about": {
|
||||
"label": "A propos d'Arthur",
|
||||
"prompt": "Je veux que tu me parles de toi."
|
||||
},
|
||||
"projects": {
|
||||
"label": "Projets",
|
||||
"prompt": "Je veux que tu me parles de tes projets."
|
||||
},
|
||||
"writings": {
|
||||
"label": "Écrits",
|
||||
"prompt": "Quels sont tes derniers articles ?"
|
||||
},
|
||||
"experiences": {
|
||||
"label": "Expériences",
|
||||
"prompt": "Quelles expériences as-tu lors de ta carrière ?"
|
||||
},
|
||||
"skills": {
|
||||
"label": "Compétences",
|
||||
"prompt": "Quelles sont tes compétences ?"
|
||||
},
|
||||
"status": {
|
||||
"label": "Statut du homelab",
|
||||
"prompt": "J'ai vu que tu avais un homelab, est-il actuellement fonctionnel ?"
|
||||
},
|
||||
"resume": {
|
||||
"label": "CV",
|
||||
"prompt": "Peux-tu m'envoyer ton CV ?"
|
||||
},
|
||||
"contact": {
|
||||
"label": "Contact",
|
||||
"prompt": "Comment puis-je te contacter ?"
|
||||
},
|
||||
"hobbies": {
|
||||
"label": "Loisirs et passions",
|
||||
"prompt": "Quels sont tes loisirs ? Tes passions ? Tes intérêts ?"
|
||||
},
|
||||
"credits": {
|
||||
"label": "Crédits",
|
||||
"prompt": "Comment est réalisé ce chat ?"
|
||||
}
|
||||
}
|
||||
},
|
||||
"es": {
|
||||
"clear": {
|
||||
"button": "Borrar",
|
||||
"cancel": "Cancelar",
|
||||
"submit": "Eliminar",
|
||||
"title": "¿Estás seguro de que deseas eliminar esta conversación?",
|
||||
"description": "Esta acción no se puede deshacer."
|
||||
},
|
||||
"cmd": {
|
||||
"send": "Enviar el mensaje",
|
||||
"sending": "Enviando..."
|
||||
},
|
||||
"chat": {
|
||||
"actions": "Componentes",
|
||||
"arthur": "Más sobre Arthur",
|
||||
"interface": "Cambiar la interfaz",
|
||||
"theme": {
|
||||
"label": "Cambiar tema",
|
||||
"prompt": "¿Cómo puedo cambiar el tema?"
|
||||
},
|
||||
"uses": {
|
||||
"label": "Ver la configuración",
|
||||
"prompt": "¿Cómo puedo ver la configuración de Arthur?"
|
||||
},
|
||||
"stats": {
|
||||
"label": "Ver estadísticas",
|
||||
"prompt": "¿Cómo puedo ver las estadísticas sobre Arthur?"
|
||||
},
|
||||
"weather": {
|
||||
"label": "Ver el clima",
|
||||
"prompt": "¿Cómo puedo ver las condiciones climáticas cerca de Arthur?"
|
||||
},
|
||||
"location": {
|
||||
"label": "Ver ubicación",
|
||||
"prompt": "¿Cómo puedo ver la ubicación de Arthur?"
|
||||
},
|
||||
"language": {
|
||||
"label": "Cambiar idioma",
|
||||
"prompt": "¿Cómo puedo cambiar el idioma del chat?"
|
||||
},
|
||||
"activity": {
|
||||
"label": "Actividad",
|
||||
"prompt": "¿Qué estás haciendo actualmente?"
|
||||
},
|
||||
"about": {
|
||||
"label": "Sobre Arthur",
|
||||
"prompt": "Quiero que me hables de ti."
|
||||
},
|
||||
"projects": {
|
||||
"label": "Proyectos",
|
||||
"prompt": "Háblame de tus proyectos."
|
||||
},
|
||||
"writings": {
|
||||
"label": "Escritos",
|
||||
"prompt": "¿Cuáles son tus últimos artículos?"
|
||||
},
|
||||
"experiences": {
|
||||
"label": "Experiencias",
|
||||
"prompt": "¿Qué experiencias tienes en tu carrera?"
|
||||
},
|
||||
"skills": {
|
||||
"label": "Habilidades",
|
||||
"prompt": "¿Cuáles son tus habilidades?"
|
||||
},
|
||||
"status": {
|
||||
"label": "Estado del homelab",
|
||||
"prompt": "Vi que tienes un homelab, ¿está funcionando actualmente?"
|
||||
},
|
||||
"resume": {
|
||||
"label": "CV",
|
||||
"prompt": "¿Puedes enviarme tu CV?"
|
||||
},
|
||||
"contact": {
|
||||
"label": "Contacto",
|
||||
"prompt": "¿Cómo puedo contactarte?"
|
||||
},
|
||||
"hobbies": {
|
||||
"label": "Pasatiempos y pasiones",
|
||||
"prompt": "¿Cuáles son tus pasatiempos? ¿Tus pasiones? ¿Tus intereses?"
|
||||
},
|
||||
"credits": {
|
||||
"label": "Créditos",
|
||||
"prompt": "¿Cómo se ha hecho este chat?"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</i18n>
|
||||
|
||||
@@ -3,10 +3,9 @@ import type { ChatFetchState } from '~~/types'
|
||||
import { ChatState } from '~~/types'
|
||||
|
||||
const props = defineProps<{ messageId: number, fetchStates: ChatFetchState[] }>()
|
||||
|
||||
const currentState = ref<ChatFetchState | undefined>(props.fetchStates[0] ?? undefined)
|
||||
|
||||
const { setLoadingState } = useChatStore()
|
||||
const { t } = useI18n()
|
||||
|
||||
onMounted(() => {
|
||||
let index = 0
|
||||
@@ -38,7 +37,7 @@ onMounted(() => {
|
||||
<span
|
||||
class="relative inline-block overflow-hidden animate-shine italic bg-[linear-gradient(110deg,#bfbfbf,35%,#000,50%,#bfbfbf,75%,#bfbfbf)] dark:bg-[linear-gradient(110deg,#404040,35%,#fff,50%,#404040,75%,#404040)] bg-[length:200%_100%] bg-clip-text text-transparent"
|
||||
>
|
||||
<slot>{{ currentState }}</slot>
|
||||
<slot>{{ t(currentState || '') }}</slot>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -8,9 +8,7 @@ const props = defineProps<{
|
||||
|
||||
const isArthur = computed(() => props.message.sender === ChatSender.ARTHUR)
|
||||
|
||||
const { locale, locales } = useI18n({
|
||||
useScope: 'local',
|
||||
})
|
||||
const { t, locale, locales } = useI18n()
|
||||
const currentLocale = computed(() => locales.value.find((l: { code: string }) => l.code === locale.value))
|
||||
const formatted = computed(() => useDateFormat(useNow(), 'D MMMM YYYY, HH:mm', { locales: currentLocale.value?.code ?? 'en' }).value)
|
||||
</script>
|
||||
@@ -23,7 +21,7 @@ const formatted = computed(() => useDateFormat(useNow(), 'D MMMM YYYY, HH:mm', {
|
||||
class="rounded-xl mt-1 bg-sky-500 md:max-w-3/4 text-white font-medium"
|
||||
:ui="{ body: 'sm:p-2', header: 'sm:p-2', footer: 'sm:p-2' }"
|
||||
>
|
||||
{{ message.content }}
|
||||
{{ t(message.content || '') }}
|
||||
</UCard>
|
||||
</div>
|
||||
<div class="opacity-0 group-hover:opacity-80 duration-500 flex text-sm italic justify-end">
|
||||
@@ -47,7 +45,7 @@ const formatted = computed(() => useDateFormat(useNow(), 'D MMMM YYYY, HH:mm', {
|
||||
:ui="{ body: 'p-0 sm:p-0', header: 'p-0 sm:p-0', footer: 'p-0 sm:p-0' }"
|
||||
>
|
||||
<div v-if="message.type === ChatType.INIT">
|
||||
{{ message.content }}
|
||||
{{ t(message.content || '') }}
|
||||
</div>
|
||||
<div v-else-if="message.type === ChatType.DUPLICATED">
|
||||
<ToolDuplicated />
|
||||
|
||||
@@ -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