mirror of
https://github.com/ArthurDanjou/artsite.git
synced 2026-01-14 15:54:13 +01:00
feat: refactor components to remove i18n and update static text
This commit is contained in:
@@ -1,9 +1,6 @@
|
||||
<script lang="ts" setup>
|
||||
import type { UseTimeAgoMessages } from '@vueuse/core'
|
||||
import type { Activity } from '~~/types'
|
||||
import { activityMessages, IDEs } from '~~/types'
|
||||
|
||||
const { locale, locales, t } = useI18n({ useScope: 'local' })
|
||||
import { IDEs } from '~~/types'
|
||||
|
||||
const { data: activity, refresh } = await useAsyncData<Activity>('activity', () => $fetch('/api/activity'),
|
||||
{ lazy: true }
|
||||
@@ -25,8 +22,6 @@ const codingActivity = computed(() => {
|
||||
: codingActivities.value[0]
|
||||
})
|
||||
|
||||
const currentLocale = computed(() => locales.value.find((l: { code: string }) => l.code === locale.value)?.code ?? 'en')
|
||||
|
||||
const isActive = computed(() => {
|
||||
const act = codingActivity.value
|
||||
if (!act) return false
|
||||
@@ -59,13 +54,11 @@ const formattedActivity = computed<FormattedActivity>(() => {
|
||||
? (details.charAt(0).toUpperCase() + details.slice(1).replace('Workspace:', '').trim())
|
||||
: ''
|
||||
|
||||
const stateWord = (state && state.split(' ').length >= 2 ? state.split(' ')[1] : t('secret')) as string
|
||||
const ago = useTimeAgo(timestamps.start, {
|
||||
messages: activityMessages[locale.value as keyof typeof activityMessages] as UseTimeAgoMessages
|
||||
}).value
|
||||
const stateWord = (state && state.split(' ').length >= 2 ? state.split(' ')[1] : 'Secret project') as string
|
||||
const ago = useTimeAgo(timestamps.start).value
|
||||
|
||||
const formatDate = (date: number, format: string) =>
|
||||
useDateFormat(date, format, { locales: currentLocale.value }).value
|
||||
useDateFormat(date, format).value
|
||||
|
||||
return {
|
||||
name,
|
||||
@@ -93,7 +86,7 @@ const editorIcon = computed(() => {
|
||||
v-if="formattedActivity"
|
||||
class="flex items-start gap-2 mt-4"
|
||||
>
|
||||
<UTooltip :text="isActive ? t('tooltip.online') : t('tooltip.idling')">
|
||||
<UTooltip :text="isActive ? 'I\'m online 👋' : 'I\'m sleeping 😴'">
|
||||
<div class="relative flex h-3 w-3 mt-2">
|
||||
<div
|
||||
v-if="isActive"
|
||||
@@ -106,42 +99,33 @@ const editorIcon = computed(() => {
|
||||
</div>
|
||||
</UTooltip>
|
||||
|
||||
<i18n-t
|
||||
<div
|
||||
v-if="isActive"
|
||||
keypath="working"
|
||||
tag="div"
|
||||
>
|
||||
<template #state>
|
||||
<strong>{{ formattedActivity.state.split(' ').map(w => w.charAt(0).toUpperCase() + w.slice(1).toLowerCase()).join(' ') }}</strong>
|
||||
</template>
|
||||
<template #project>
|
||||
<i>{{ formattedActivity.project.replace('Editing', '') }}</i>
|
||||
</template>
|
||||
<template #editor>
|
||||
<span class="space-x-1">
|
||||
<UIcon
|
||||
:name="editorIcon"
|
||||
size="16"
|
||||
/>
|
||||
<strong>{{ formattedActivity.name }}</strong>
|
||||
</span>
|
||||
</template>
|
||||
<template #start>
|
||||
<strong>{{ formattedActivity.start.ago }}</strong>
|
||||
</template>
|
||||
<template #format>
|
||||
<strong>{{ formattedActivity.start.formatted.date }}</strong> {{ t('separator') }}
|
||||
<strong>{{ formattedActivity.start.formatted.time }}</strong>
|
||||
</template>
|
||||
</i18n-t>
|
||||
|
||||
<i18n-t
|
||||
v-else
|
||||
keypath="idling"
|
||||
tag="div"
|
||||
class="space-x-1"
|
||||
>
|
||||
<template #editor>
|
||||
<span>
|
||||
I'm actually working on
|
||||
<strong>{{ formattedActivity.state.split(' ').map(w => w.charAt(0).toUpperCase() + w.slice(1).toLowerCase()).join(' ') }}</strong>,
|
||||
editing <i>{{ formattedActivity.project.replace('Editing', '') }}</i>, using
|
||||
<span class="space-x-1">
|
||||
<UIcon
|
||||
:name="editorIcon"
|
||||
size="16"
|
||||
/>
|
||||
<strong>{{ formattedActivity.name }}</strong>
|
||||
</span>.
|
||||
I've started <strong>{{ formattedActivity.start.ago }}</strong>, on
|
||||
<strong>{{ formattedActivity.start.formatted.date }}</strong>
|
||||
at <strong>{{ formattedActivity.start.formatted.time }}</strong>.
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-else
|
||||
class="space-x-1"
|
||||
>
|
||||
<span>
|
||||
I'm idling on my computer with
|
||||
<span class="space-x-1">
|
||||
<UIcon
|
||||
:name="editorIcon"
|
||||
@@ -149,72 +133,23 @@ const editorIcon = computed(() => {
|
||||
/>
|
||||
<strong>{{ formattedActivity.name }}</strong>
|
||||
</span>
|
||||
</template>
|
||||
</i18n-t>
|
||||
running in background.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-else
|
||||
class="my-5 flex md:items-start gap-2"
|
||||
>
|
||||
<UTooltip :text="t('tooltip.offline')">
|
||||
<UTooltip text="I'm offline 🫥">
|
||||
<div class="relative flex h-3 w-3 mt-2">
|
||||
<div class="relative cursor-not-allowed inline-flex rounded-full h-3 w-3 bg-red-500" />
|
||||
</div>
|
||||
</UTooltip>
|
||||
<i18n-t
|
||||
keypath="offline"
|
||||
tag="p"
|
||||
class="not-prose"
|
||||
>
|
||||
<template #maths>
|
||||
<i>{{ t('maths') }}</i>
|
||||
</template>
|
||||
</i18n-t>
|
||||
<p class="not-prose">
|
||||
I'm currently offline. Come back later to see what I'm working on. <i>I am probably doing some maths or sleeping.</i>
|
||||
</p>
|
||||
</div>
|
||||
</ClientOnly>
|
||||
</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 working on {state}, editing {project}, using {editor}. I've started {start}, the {format}.",
|
||||
"idling": "I'm idling on my computer with {editor} running in background.",
|
||||
"maths": "I am probably doing some maths or sleeping.",
|
||||
"tooltip": {
|
||||
"online": "I'm online 👋",
|
||||
"offline": "I'm offline 🫥",
|
||||
"idling": "I'm sleeping 😴"
|
||||
},
|
||||
"separator": "at",
|
||||
"secret": "Secret Project"
|
||||
},
|
||||
"fr": {
|
||||
"offline": "Je suis actuellement hors ligne. Revenez plus tard pour voir sur quoi je travaille. {maths}",
|
||||
"working": "Je travaille actuellement sur {state}, éditant {project}, en utilisant {editor}. J'ai commencé {start}, le {format}.",
|
||||
"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.",
|
||||
"tooltip": {
|
||||
"online": "Je suis connecté 👋",
|
||||
"offline": "Je suis déconnecté 🫥",
|
||||
"idling": "Je dors 😴"
|
||||
},
|
||||
"separator": "à",
|
||||
"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 {state}, editando {project}, y utilizando {editor}. He empezado {start}, el {format}.",
|
||||
"idling": "Estoy en reposo en mi ordenador con {editor} en segundo plano.",
|
||||
"maths": "Estoy probablemente haciendo matemáticas o durmiendo.",
|
||||
"tooltip": {
|
||||
"online": "Estoy conectado 👋",
|
||||
"offline": "Estoy desconectado 🫥",
|
||||
"idling": "Estoy durmiendo 😴"
|
||||
},
|
||||
"separator": "a",
|
||||
"secret": "Proyecto Secreto"
|
||||
}
|
||||
}
|
||||
</i18n>
|
||||
|
||||
@@ -1,8 +1,5 @@
|
||||
<script lang="ts" setup>
|
||||
const { width } = useWindowSize()
|
||||
const { t } = useI18n({
|
||||
useScope: 'local'
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -15,21 +12,7 @@ const { t } = useI18n({
|
||||
class="transform -rotate-12 duration-300 animate-wave"
|
||||
name="i-ph-hand-pointing-duotone"
|
||||
/>
|
||||
<p>{{ t('quote') }}</p>
|
||||
<p>Hover the bold texts to find out more about me.</p>
|
||||
</div>
|
||||
</ClientOnly>
|
||||
</template>
|
||||
|
||||
<i18n lang="json">
|
||||
{
|
||||
"en": {
|
||||
"quote": "Hover the bold texts to find out more about me."
|
||||
},
|
||||
"fr": {
|
||||
"quote": "Survolez les textes en gras pour en savoir plus sur moi."
|
||||
},
|
||||
"es": {
|
||||
"quote": "Pase el cursor sobre los textos en negrita para obtener más información sobre mí."
|
||||
}
|
||||
}
|
||||
</i18n>
|
||||
|
||||
@@ -1,9 +1,3 @@
|
||||
<script lang="ts" setup>
|
||||
const { t } = useI18n({
|
||||
useScope: 'local'
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="mt-4">
|
||||
<div class="float-left flex items-center mr-2 mt-1">
|
||||
@@ -19,21 +13,7 @@ const { t } = useI18n({
|
||||
</ClientOnly>
|
||||
</div>
|
||||
<p class="not-prose">
|
||||
{{ t('quote') }}
|
||||
Hello everyone! Thanks for visiting my portfolio. Please leave whatever you like to say, such as suggestions, appreciations, questions or anything!
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<i18n lang="json">
|
||||
{
|
||||
"en": {
|
||||
"quote": "Hello everyone! Thanks for visiting my portfolio. Please leave whatever you like to say, such as suggestions, appreciations, questions or anything!"
|
||||
},
|
||||
"fr": {
|
||||
"quote": "Bonjour tout le monde ! Merci de visiter mon portfolio. N'hésitez pas à laisser ce que vous avez à dire, comme des suggestions, des appréciations, des questions ou autre chose !"
|
||||
},
|
||||
"es": {
|
||||
"quote": "Hola a todos ! Muchas gracias por visitar mi portfolio. No dudes en dejar cualquier comentario, como sugerencias, apreciaciones. preguntas, o cualquier cosa !"
|
||||
}
|
||||
}
|
||||
</i18n>
|
||||
|
||||
@@ -2,83 +2,40 @@
|
||||
import type { Stats } from '~~/types'
|
||||
import { usePrecision } from '@vueuse/math'
|
||||
|
||||
const { locale, locales, t } = useI18n({
|
||||
useScope: 'local'
|
||||
})
|
||||
const currentLocale = computed(() => locales.value.find(l => l.code === locale.value))
|
||||
|
||||
const { data: stats } = await useAsyncData<Stats>('stats', () => $fetch('/api/stats'))
|
||||
|
||||
const time = useTimeAgo(new Date(stats.value!.coding.data.range.start)).value.split(' ')[0]
|
||||
const date = useDateFormat(new Date(stats.value!.coding.data.range.start), 'DD MMMM YYYY', { locales: currentLocale.value?.code ?? 'en' })
|
||||
const hours = usePrecision(stats.value!.coding.data.grand_total.total_seconds_including_other_language / 3600, 0)
|
||||
const time = useTimeAgo(new Date(stats.value?.coding.range.start ?? 0)).value.split(' ')[0]
|
||||
const date = useDateFormat(new Date(stats.value?.coding.range.start ?? 0), 'DD MMMM YYYY')
|
||||
const hours = usePrecision((stats.value?.coding.grand_total.total_seconds_including_other_language ?? 0) / 3600, 0)
|
||||
|
||||
const editors = computed(() => stats.value?.editors.slice(0, 3).map(editor => `${editor.name} (${editor.percent}%)`).join(', '))
|
||||
const os = computed(() => stats.value?.os.slice(0, 2).map(os => `${os.name} (${os.percent}%)`).join(', '))
|
||||
const languages = computed(() => stats.value?.languages.slice(0, 3).map(language => `${language.name} (${language.percent}%)`).join(', '))
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ClientOnly>
|
||||
<i18n-t
|
||||
v-if="stats && stats.coding && stats.editors && stats.os && stats.languages && time && date && hours"
|
||||
keypath="stats"
|
||||
tag="p"
|
||||
<div
|
||||
v-if="time && date && hours && stats"
|
||||
class="space-y-1"
|
||||
>
|
||||
<template #time>
|
||||
{{ time }}
|
||||
</template>
|
||||
<template #date>
|
||||
<p>
|
||||
I collect some data for {{ time }} years, started the
|
||||
<HoverText
|
||||
:hover="t('tooltip.date')"
|
||||
hover="That was so long ago 🫣"
|
||||
:text="date"
|
||||
/>
|
||||
</template>
|
||||
<template #hours>
|
||||
/>.
|
||||
I've coded for a total of
|
||||
<HoverText
|
||||
:hover="t('tooltip.hours')"
|
||||
hover="That's a lot 😮"
|
||||
:text="hours"
|
||||
/>
|
||||
</template>
|
||||
<template #editors>
|
||||
{{ stats.editors.data.slice(0, 2).map(editor => `${editor.name} (${editor.percent}%)`).join(t('separator')) }}
|
||||
</template>
|
||||
<template
|
||||
v-if="stats.os.data[0]"
|
||||
#os
|
||||
>
|
||||
{{ stats.os.data[0].name }} ({{ stats.os.data[0].percent }}%)
|
||||
</template>
|
||||
<template #languages>
|
||||
{{
|
||||
stats.languages.data.slice(0, 2).map(language => `${language.name} (${language.percent}%)`).join(t('separator'))
|
||||
}}
|
||||
</template>
|
||||
</i18n-t>
|
||||
hours.
|
||||
</p>
|
||||
<p>
|
||||
My best editors are {{ editors || 'N/A' }}. My best OS is {{ os || 'N/A' }}. My top languages are
|
||||
{{ languages || 'N/A' }}.
|
||||
</p>
|
||||
</div>
|
||||
</ClientOnly>
|
||||
</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. My best editors are {editors}. My best OS is {os}. My top 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. Mes meilleurs éditeurs sont {editors}. Mon meilleur OS est {os}. 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. Mis mejores editores son {editors}. Mi mejor OS es {os}. Y mis lenguajes favoritos son {languages}.",
|
||||
"separator": " y ",
|
||||
"tooltip": {
|
||||
"date": "hace tato tiempo…🫣",
|
||||
"hours": "es mucho 😮"
|
||||
}
|
||||
}
|
||||
}
|
||||
</i18n>
|
||||
|
||||
Reference in New Issue
Block a user