mirror of
https://github.com/ArthurDanjou/artchat.git
synced 2026-01-14 15:54:03 +01:00
feat: add Writings section with dynamic content; enhance localization for projects and writings
This commit is contained in:
@@ -89,6 +89,9 @@ const formatted = computed(() => useDateFormat(useNow(), 'D MMMM YYYY, HH:mm', {
|
||||
<div v-else-if="message.type === ChatType.PROJECTS">
|
||||
<ToolProjects />
|
||||
</div>
|
||||
<div v-else-if="message.type === ChatType.WRITINGS">
|
||||
<ToolWritings />
|
||||
</div>
|
||||
<div v-else>
|
||||
{{ message }}
|
||||
</div>
|
||||
|
||||
@@ -1,19 +1,11 @@
|
||||
<script setup lang="ts">
|
||||
const { t, locale } = useI18n()
|
||||
const closed = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UAlert
|
||||
v-if="locale !== 'en' && !closed"
|
||||
:description="t('alert.description')"
|
||||
:title="t('alert.title')"
|
||||
color="error"
|
||||
icon="i-ph-warning-duotone"
|
||||
variant="soft"
|
||||
:close="{
|
||||
color: 'error',
|
||||
}"
|
||||
@update:open="closed = true"
|
||||
/>
|
||||
<h3
|
||||
v-if="locale !== 'en'"
|
||||
>
|
||||
⚠️ {{ t('alert') }}
|
||||
</h3>
|
||||
</template>
|
||||
|
||||
@@ -1,21 +1,28 @@
|
||||
<script lang="ts" setup>
|
||||
const { locale, locales, t } = useI18n()
|
||||
const { locale, locales } = useI18n()
|
||||
const currentLocale = computed(() => locales.value.find(l => l.code === locale.value))
|
||||
|
||||
const { data: projects } = await useAsyncData('projects-index', async () => await queryCollection('projects').where('favorite', '=', true).select().all())
|
||||
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' })
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section>
|
||||
<PostAlert class="mb-2" />
|
||||
<div class="prose dark:prose-invert">
|
||||
<p>{{ t('tool.projects') }}</p>
|
||||
<PostAlert class="mb-2" />
|
||||
<i18n-t keypath="tool.projects" tag="p">
|
||||
<template #canva>
|
||||
CANVA
|
||||
</template>
|
||||
<template #space>
|
||||
<br>
|
||||
</template>
|
||||
</i18n-t>
|
||||
</div>
|
||||
<div v-if="projects" class="m-1 my-4 flex flex-col gap-4">
|
||||
<div v-for="project in projects" :key="project.id">
|
||||
<NuxtLink :to="`/projects/${project.slug}`">
|
||||
<UCard variant="subtle" class="shadow-sm bg-white dark:bg-neutral-900">
|
||||
<UCard variant="subtle" class="shadow-sm bg-white dark:bg-neutral-900 hover:bg-neutral-100 dark:hover:bg-black duration-300">
|
||||
<h1 class="text-xl font-medium">
|
||||
{{ project.title }}
|
||||
</h1>
|
||||
|
||||
51
app/components/tool/Writings.vue
Normal file
51
app/components/tool/Writings.vue
Normal file
@@ -0,0 +1,51 @@
|
||||
<script lang="ts" setup>
|
||||
const { locale, locales } = useI18n()
|
||||
const currentLocale = computed(() => locales.value.find(l => l.code === locale.value))
|
||||
|
||||
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' })
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section>
|
||||
<div class="prose dark:prose-invert">
|
||||
<PostAlert class="mb-2" />
|
||||
<i18n-t keypath="tool.writings" tag="p">
|
||||
<template #canva>
|
||||
CANVA
|
||||
</template>
|
||||
<template #space>
|
||||
<br>
|
||||
</template>
|
||||
</i18n-t>
|
||||
</div>
|
||||
<div v-if="writings" class="m-1 my-4 flex flex-col gap-4">
|
||||
<div v-for="writing in writings" :key="writing.id">
|
||||
<NuxtLink :to="`/writings/${writing.slug}`">
|
||||
<UCard variant="subtle" class="shadow-sm bg-white dark:bg-neutral-900 hover:bg-neutral-100 dark:hover:bg-black duration-300">
|
||||
<h1 class="text-xl font-medium">
|
||||
{{ writing.title }}
|
||||
</h1>
|
||||
<h3 class="text-muted my-2">
|
||||
{{ writing.description }}
|
||||
</h3>
|
||||
<div class="flex items-center justify-between">
|
||||
<p class="text-sm text-muted-foreground">
|
||||
{{ date(writing.publishedAt).value }}
|
||||
</p>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<UBadge
|
||||
v-for="tag in writing.tags.sort((a: any, b: any) => a.localeCompare(b))"
|
||||
:key="tag"
|
||||
variant="soft"
|
||||
>
|
||||
{{ tag }}
|
||||
</UBadge>
|
||||
</div>
|
||||
</div>
|
||||
</UCard>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
Reference in New Issue
Block a user