mirror of
https://github.com/ArthurDanjou/artsite.git
synced 2026-01-25 09:52:46 +01:00
Arthur DANJOU
affeb347e5
Extracted reusable computed values for time, date, and hours to improve code clarity and maintainability. This change reduces duplication and ensures consistency across template usages.
85 lines
2.7 KiB
Vue
85 lines
2.7 KiB
Vue
<script lang="ts" setup>
|
|
import type { Stats } from '~~/types'
|
|
|
|
const { locale, locales } = useI18n()
|
|
const currentLocale = computed(() => locales.value.find(l => l.code === locale.value))
|
|
|
|
const { data: stats } = await useFetch<Stats>('/api/stats')
|
|
const { t } = useI18n({
|
|
useScope: 'local',
|
|
})
|
|
|
|
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, { math: 'ceil' })
|
|
</script>
|
|
|
|
<template>
|
|
<ClientOnly>
|
|
<i18n-t
|
|
v-if="stats"
|
|
keypath="stats"
|
|
tag="p"
|
|
>
|
|
<template #time>
|
|
{{ time }}
|
|
</template>
|
|
<template #date>
|
|
<HoverText
|
|
:hover="t('tooltip.date')"
|
|
:text="date"
|
|
/>
|
|
</template>
|
|
<template #hours>
|
|
<HoverText
|
|
:hover="t('tooltip.hours')"
|
|
: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>
|
|
</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>
|