arthur/artchat
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/artchat.git synced 2026-01-14 18:59:54 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat: simplify localization handling and add resume component with translations

Browse Source
This commit is contained in:
Arthur Danjou
2025-09-05 14:08:13 +02:00
parent 16cf818f0d
commit 7af0464a11
13 changed files with 286 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
app/components/chat/CommandPalette.vue
View File

@@ -15,7 +15,7 @@ const searchTerm = ref('')
const openMessageModal = ref(false)
const openClearModal = ref(false)
const { t, locale, locales } = useI18n()
const { t, locale } = useI18n()
const { messages, submitMessage } = useChat()
const { clearMessages, messages: storeMessages } = useChatStore()
@@ -32,7 +32,6 @@ function onSelect(item: CommandPaletteItem) {
submitMessage(item.type, item.prompt, item.fetchStates ?? [])
}
const currentLocale = computed(() => locales.value.filter(l => l.code === locale.value)[0])
const { changeLocale } = useLanguage()
const { dark, toggleDark } = useTheme()
@@ -41,7 +40,7 @@ defineShortcuts({
enter: () => openMessageModal.value = !openMessageModal.value,
meta_k: () => openMessageModal.value = !openMessageModal.value,
meta_d: () => openClearModal.value = !openClearModal.value,
l: () => changeLocale(currentLocale.value!.code === 'en' ? 'fr' : currentLocale.value!.code === 'fr' ? 'es' : 'en'),
l: () => changeLocale(locale.value === 'en' ? 'fr' : locale.value === 'fr' ? 'es' : 'en'),
t: () => toggleDark({ clientX: window.innerWidth / 2, clientY: window.innerHeight }),
})
@@ -279,7 +278,7 @@ function isRoute(name: string): boolean {
aria-label="Change language"
class="cursor-pointer"
size="xl"
@click.prevent="changeLocale(currentLocale!.code === 'en' ? 'fr' : currentLocale!.code === 'fr' ? 'es' : 'en')"
@click.prevent="changeLocale(locale === 'en' ? 'fr' : locale === 'fr' ? 'es' : 'en')"
/>
</UTooltip>
</UFieldGroup>

5
app/components/chat/MessageContainer.vue
View File

@@ -8,9 +8,8 @@ const props = defineProps<{
const isArthur = computed(() => props.message.sender === ChatSender.ARTHUR)
const { t, locale, locales } = useI18n()
const currentLocale = computed(() => locales.value.find(l => l.code === locale.value))
const formatDate = computed(() => useDateFormat(props.message.createdAt, 'D MMMM YYYY, HH:mm', { locales: currentLocale.value?.code ?? 'en' }).value)
const { t, locale } = useI18n()
const formatDate = computed(() => useDateFormat(props.message.createdAt, 'D MMMM YYYY, HH:mm', { locales: locale.value ?? 'en' }).value)
</script>
<template>

8
app/components/chat/MessageFromArthur.vue
View File

@@ -9,6 +9,7 @@ import ToolHobbies from '~/components/tool/Hobbies.vue'
import ToolLanguage from '~/components/tool/Language.vue'
import ToolLocation from '~/components/tool/Location.vue'
import ToolProjects from '~/components/tool/Projects.vue'
import ToolResume from '~/components/tool/Resume.vue'
import ToolSkills from '~/components/tool/Skills.vue'
import ToolStats from '~/components/tool/Stats.vue'
import ToolTheme from '~/components/tool/Theme.vue'
@@ -20,9 +21,8 @@ const props = defineProps<{
message: ChatMessage
}>()
const { locale, locales, t } = useI18n()
const currentLocale = computed(() => locales.value.find(l => l.code === locale.value))
const formatDate = computed(() => useDateFormat(props.message.createdAt, 'D MMMM YYYY, HH:mm', { locales: currentLocale.value?.code ?? 'en' }).value)
const { locale, t } = useI18n()
const formatDate = computed(() => useDateFormat(props.message.createdAt, 'D MMMM YYYY, HH:mm', { locales: locale.value ?? 'en' }).value)
const componentMap: Record<ChatType, Component | undefined> = {
[ChatType.INIT]: undefined,
@@ -46,7 +46,7 @@ const componentMap: Record<ChatType, Component | undefined> = {
[ChatType.EXPERIENCES]: undefined,
[ChatType.STATUS]: undefined,
[ChatType.CREDITS]: ToolCredits,
[ChatType.RESUME]: undefined,
[ChatType.RESUME]: ToolResume,
}
const dynamicComponent = computed(() => componentMap[props.message.type])

5
app/components/tool/Activity.vue
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,

5
app/components/tool/Projects.vue
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>

36
app/components/tool/Resume.vue Normal file
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>

5
app/components/tool/Stats.vue
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>

5
app/components/tool/Writings.vue
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>