feat: simplify localization handling and add resume component with translations

This commit is contained in:
2025-09-05 14:08:13 +02:00
parent 16cf818f0d
commit 7af0464a11
13 changed files with 286 additions and 30 deletions

View File

@@ -3,7 +3,7 @@ import type { UseTimeAgoMessages } from '@vueuse/core'
import type { Activity } from '~~/types'
import { activityMessages, IDEs } from '~~/types'
const { locale, locales, t } = useI18n()
const { locale, t } = useI18n()
const { data: activity, refresh } = await useAsyncData<Activity>('activity', () => $fetch<Activity>('/api/activity'))
useIntervalFn(async () => await refresh(), 5000)
@@ -49,8 +49,7 @@ const getActivity = computed(() => {
const ago = useTimeAgo(timestamps.start, {
messages: activityMessages[locale.value as keyof typeof activityMessages] as UseTimeAgoMessages,
}).value
const currentLocale = computed(() => locales.value.find(l => l.code === locale.value))
const formatDate = (date: number, format: string) => useDateFormat(date, format, { locales: currentLocale.value?.code ?? 'en' }).value
const formatDate = (date: number, format: string) => useDateFormat(date, format, { locales: locale.value ?? 'en' }).value
return {
name,

View File

@@ -1,9 +1,8 @@
<script lang="ts" setup>
const { locale, locales, t } = useI18n()
const currentLocale = computed(() => locales.value.find(l => l.code === locale.value))
const { locale, t } = useI18n()
const { data: projects } = await useAsyncData('projects-index', async () => await queryCollection('projects').where('favorite', '=', true).select('title', 'description', 'id', 'publishedAt', 'tags', 'slug').all())
const date = (date: string) => useDateFormat(new Date(date), 'DD MMMM YYYY', { locales: currentLocale.value?.code ?? 'en' })
const date = (date: string) => useDateFormat(new Date(date), 'DD MMMM YYYY', { locales: locale.value ?? 'en' })
</script>
<template>

View File

@@ -0,0 +1,36 @@
<script lang="ts" setup>
const { t, locale } = useI18n()
const date = (date: string) => useDateFormat(new Date(date), 'D MMM YYYY - hh:mm', { locales: locale.value ?? 'en' })
</script>
<template>
<section class="space-y-4">
<p class="prose dark:prose-invert">
{{ t('tool.resume.main') }}
</p>
<div class="flex gap-4 m-1">
<UCard variant="outline" class="md:max-w-1/2 shadow-sm bg-white dark:bg-neutral-900" :ui="{ body: 'flex justify-between items-center gap-4' }">
<UCard class="rounded-sm" :ui="{ body: 'p-2 sm:p-2 flex items-center justify-center' }">
<UIcon name="i-ph-file-pdf-duotone" size="48" />
</UCard>
<div>
<p>File 1</p>
<p class="text-muted">
{{ t('tool.resume.uploaded') }} {{ date('2025-01-01') }}
</p>
</div>
</UCard>
<UCard variant="outline" class="md:max-w-1/2 shadow-sm bg-white dark:bg-neutral-900" :ui="{ body: 'flex justify-between items-center gap-4' }">
<UCard class="rounded-sm" :ui="{ body: 'p-2 sm:p-2 flex items-center justify-center' }">
<UIcon name="i-ph-file-pdf-duotone" size="48" />
</UCard>
<div>
<p>File 2</p>
<p class="text-muted">
{{ t('tool.resume.uploaded') }} {{ date('2025-01-01') }}
</p>
</div>
</UCard>
</div>
</section>
</template>

View File

@@ -3,11 +3,10 @@ import type { Stats } from '~~/types'
const { data: stats } = await useAsyncData<Stats>('stats', () => $fetch('/api/stats'))
const { locale, locales, t } = useI18n()
const currentLocale = computed(() => locales.value.find(l => l.code === locale.value))
const { locale, t } = useI18n()
const time = useTimeAgo(new Date(stats.value!.coding.data.range.start) ?? new Date()).value.split(' ')[0]
const date = useDateFormat(new Date(stats.value!.coding.data.range.start ?? new Date()), 'DD MMMM YYYY', { locales: currentLocale.value?.code ?? 'en' })
const date = useDateFormat(new Date(stats.value!.coding.data.range.start ?? new Date()), 'DD MMMM YYYY', { locales: locale.value ?? 'en' })
const hours = usePrecision(stats.value!.coding.data.grand_total.total_seconds_including_other_language / 3600, 0)
</script>

View File

@@ -1,9 +1,8 @@
<script lang="ts" setup>
const { locale, locales, t } = useI18n()
const currentLocale = computed(() => locales.value.find(l => l.code === locale.value))
const { locale, t } = useI18n()
const { data: writings } = await useAsyncData('writings-index', async () => await queryCollection('writings').order('publishedAt', 'DESC').select('title', 'description', 'id', 'publishedAt', 'tags', 'slug').limit(2).all())
const date = (date: string) => useDateFormat(new Date(date), 'DD MMMM YYYY', { locales: currentLocale.value?.code ?? 'en' })
const date = (date: string) => useDateFormat(new Date(date), 'DD MMMM YYYY', { locales: locale.value ?? 'en' })
</script>
<template>