feat: add Writings section with dynamic content; enhance localization for projects and writings

app/components/chat/MessageContainer.vue

@@ -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>

app/components/post/Alert.vue

@@ -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>

app/components/tool/Projects.vue

@@ -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>

app/components/tool/Writings.vue

@@ -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>

app/pages/writings/[slug].vue

@@ -0,0 +1,90 @@
+<script lang="ts" setup>
+const route = useRoute()
+const { data: writing } = await useAsyncData(`writings/${route.params.slug}`, () =>
+  queryCollection('writings').path(`/writings/${route.params.slug}`).first())
+
+const { t } = useI18n()
+
+useSeoMeta({
+  title: writing.value?.title,
+  description: writing.value?.description,
+  author: 'Arthur Danjou',
+})
+</script>
+
+<template>
+  <main v-if="writing" class="mt-8 md:mt-16 md:mb-32 mb-20">
+    <div class="flex">
+      <NuxtLinkLocale
+        class="flex items-center gap-2 mb-8 group text-sm hover:text-black dark:hover:text-white duration-300"
+        to="/canva"
+      >
+        <UIcon
+          class="group-hover:-translate-x-1 transform duration-300"
+          name="i-ph-arrow-left-duotone"
+          size="20"
+        />
+        {{ t('post.back') }}
+      </NuxtLinkLocale>
+    </div>
+    <PostAlert class="mb-8" />
+    <div>
+      <div class="flex items-end justify-between gap-2 flex-wrap">
+        <h1
+          class="font-bold text-3xl text-black dark:text-white"
+        >
+          {{ writing.title }}
+        </h1>
+        <div
+          class="text-sm text-neutral-500 duration-300 flex items-center gap-1"
+        >
+          <UIcon name="ph:calendar-duotone" size="16" />
+          <p>{{ useDateFormat(writing.publishedAt, 'DD MMMM YYYY').value }} </p>
+        </div>
+      </div>
+      <p class="mt-2 text-base">
+        {{ writing.description }}
+      </p>
+    </div>
+    <div
+      v-if="writing.cover"
+      class="w-full rounded-md my-8"
+    >
+      <ProseImg
+        :src="`/projects/${writing.cover}`"
+        label="Project cover"
+      />
+    </div>
+    <USeparator
+      class="my-4"
+      icon="i-ph-pencil-line-duotone"
+    />
+    <ClientOnly>
+      <ContentRenderer
+        :value="writing"
+        class="!max-w-none prose dark:prose-invert"
+      />
+    </ClientOnly>
+    <PostFooter />
+  </main>
+</template>
+
+<style scoped>
+.prose h2 a,
+.prose h3 a,
+.prose h4 a {
+  text-decoration: none;
+}
+
+.prose img {
+  margin: 0;
+}
+
+.katex-html {
+  display: none;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+</style>