feat: enhance navigation and content structure across chat and project components

app/components/chat/CommandPalette.vue

@@ -80,6 +80,11 @@ function goHome() {
   clearMessages()
   router.push('/')
 }
+
+const route = useRoute()
+function isRoute(name: string): boolean {
+  return route.path.includes(name) && route.name !== '/'
+}
 </script>
 
 <template>
@@ -206,6 +211,40 @@ function goHome() {
             @click.prevent="goHome"
           />
         </UTooltip>
+        <UTooltip
+          v-if="isRoute('/projects')"
+          :text="t('palette.tooltip.writings')"
+          arrow
+          :content="toolTipContent"
+          :delay-duration="0"
+        >
+          <UButton
+            :label="t('palette.cmd.writings')"
+            variant="outline"
+            color="neutral"
+            size="xl"
+            icon="i-ph-books-duotone"
+            class="rounded-lg cursor-pointer p-2 w-full justify-center"
+            href="/writings"
+          />
+        </UTooltip>
+        <UTooltip
+          v-if="isRoute('/writings')"
+          :text="t('palette.tooltip.projects')"
+          arrow
+          :content="toolTipContent"
+          :delay-duration="0"
+        >
+          <UButton
+            :label="t('palette.cmd.projects')"
+            variant="outline"
+            color="neutral"
+            size="xl"
+            icon="i-ph-code-duotone"
+            class="rounded-lg cursor-pointer p-2 w-full justify-center"
+            href="/projects"
+          />
+        </UTooltip>
       </UFieldGroup>
       <ClientOnly>
         <UFieldGroup class="flex items-center justify-center">

app/components/chat/MessageFromArthur.vue

@@ -19,7 +19,7 @@ const props = defineProps<{
   message: ChatMessage
 }>()
 
-const { t, locale, locales } = useI18n()
+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)
 
@@ -73,9 +73,31 @@ const dynamicComponent = computed(() => componentMap[props.message.type])
           v-if="dynamicComponent"
           :type="message.type"
         />
-        <div v-else-if="message.type === ChatType.INIT">
-          {{ t(message.content || '') }}
-        </div>
+        <i18n-t v-else-if="message.type === ChatType.INIT" :keypath="message.content || ''" tag="div">
+          <template #space>
+            <br>
+          </template>
+          <template #links>
+            <div class="inline-flex items-center gap-2 mb-2">
+              <UButton
+                :label="t('tool.projects.link')"
+                to="/projects"
+                icon="i-ph-code-duotone"
+                variant="outline"
+                size="sm"
+                class="cursor-pointer translate-y-1"
+              />
+              <UButton
+                :label="t('tool.writings.link')"
+                to="/writings"
+                icon="i-ph-books-duotone"
+                variant="outline"
+                size="sm"
+                class="cursor-pointer translate-y-1"
+              />
+            </div>
+          </template>
+        </i18n-t>
         <div v-else>
           {{ message }}
         </div>

app/components/post/Footer.vue

@@ -20,7 +20,7 @@ const { t } = useI18n()
           icon="i-ph-linkedin-logo-duotone"
           label="LinkedIn"
           target="_blank"
-          class="inline-flex items-start gap-1 transform translate-y-1"
+          class="translate-y-1"
         />
       </template>
       <template #github>
@@ -29,7 +29,7 @@ const { t } = useI18n()
           icon="i-ph-github-logo-duotone"
           label="GitHub"
           target="_blank"
-          class="inline-flex items-start gap-1 transform translate-y-1"
+          class="translate-y-1"
         />
       </template>
       <template #comment>

app/components/post/Link.vue

@@ -22,7 +22,7 @@ defineProps({
   <NuxtLink
     :href="href"
     :target="blanked ? '_blank' : '_self'"
-    class="sofia flex gap-1 items-center group"
+    class="sofia group inline-flex items-center gap-1"
   >
     <Icon
       v-if="icon"

app/components/post/Title.vue

@@ -0,0 +1,25 @@
+<script lang="ts" setup>
+defineProps({
+  title: {
+    type: String,
+    required: true,
+  },
+  description: {
+    type: String,
+    required: true,
+  },
+})
+</script>
+
+<template>
+  <div>
+    <h1
+      class="text-3xl font-bold tracking-tight text-zinc-800 dark:text-zinc-100"
+    >
+      {{ title }}
+    </h1>
+    <p class="mt-4 text-muted">
+      {{ description }}
+    </p>
+  </div>
+</template>

app/components/tool/Projects.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-const { locale, locales } = useI18n()
+const { locale, locales, t } = 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('title', 'description', 'id', 'publishedAt', 'tags', 'slug').all())
@@ -10,9 +10,17 @@ const date = (date: string) => useDateFormat(new Date(date), 'DD MMMM YYYY', { l
   <section>
     <div class="prose dark:prose-invert">
       <PostAlert class="mb-2" />
-      <i18n-t keypath="tool.projects" tag="p">
-        <template #canva>
-          CANVA
+      <i18n-t keypath="tool.projects.main" tag="p">
+        <template #projects>
+          <UButton
+            :label="t('tool.projects.link')"
+            color="neutral"
+            variant="link"
+            size="lg"
+            trailing-icon="i-ph-code-duotone"
+            to="/projects"
+            class="cursor-pointer px-0 py-0.5"
+          />
         </template>
         <template #space>
           <br>

app/components/tool/Writings.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-const { locale, locales } = useI18n()
+const { locale, locales, t } = 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())
@@ -10,9 +10,17 @@ const date = (date: string) => useDateFormat(new Date(date), 'DD MMMM YYYY', { l
   <section>
     <div class="prose dark:prose-invert">
       <PostAlert class="mb-2" />
-      <i18n-t keypath="tool.writings" tag="p">
-        <template #canva>
-          CANVA
+      <i18n-t keypath="tool.writings.main" tag="p">
+        <template #writings>
+          <UButton
+            :label="t('tool.writings.link')"
+            color="neutral"
+            variant="link"
+            size="lg"
+            trailing-icon="i-ph-books-duotone"
+            to="/writings"
+            class="cursor-pointer px-0 py-0.5"
+          />
         </template>
         <template #space>
           <br>

app/pages/projects/index.vue

@@ -0,0 +1,78 @@
+<script lang="ts" setup>
+const { t } = useI18n()
+useSeoMeta({
+  title: 'My Projects',
+  description: t('projects.description'),
+})
+
+const { data: projects } = await useAsyncData('all-projects', () => {
+  return queryCollection('projects')
+    .order('favorite', 'DESC')
+    .order('publishedAt', 'DESC')
+    .all()
+})
+</script>
+
+<template>
+  <UContainer class="space-y-12 mb-20 mt-16 md:mb-32 relative">
+    <PostTitle
+      :description="t('projects.description')"
+      :title="t('projects.title')"
+    />
+    <PostAlert />
+    <ul class="grid grid-cols-1 sm:grid-cols-2 gap-8">
+      <NuxtLink
+        v-for="(project, id) in projects"
+        :key="id"
+        :to="project.path"
+      >
+        <li
+          class="flex flex-col h-full group hover:bg-neutral-200/50  duration-300 p-2 rounded-lg dark:hover:bg-neutral-800/50 transition-colors justify-center"
+        >
+          <article class="space-y-2">
+            <div
+              class="flex flex-col"
+            >
+              <div class="flex items-center gap-2">
+                <h1 class="font-bold duration-300 text-neutral-600 dark:text-neutral-400 group-hover:text-neutral-900 dark:group-hover:text-white">
+                  {{ project.title }}
+                </h1>
+                <UIcon
+                  v-if="project.favorite"
+                  name="i-ph-star-duotone"
+                  size="16"
+                  class="text-amber-500 hover:rotate-360 duration-500"
+                />
+              </div>
+              <h3 class="text-md text-neutral-500 dark:text-neutral-400 italic">
+                {{ project.description }}
+              </h3>
+            </div>
+          </article>
+          <div class="flex flex-col sm:flex-row sm:items-center mt-1">
+            <div
+              class="text-sm text-neutral-500 duration-300 flex items-center gap-1"
+            >
+              <ClientOnly>
+                <p>{{ useDateFormat(project.publishedAt, 'DD MMM YYYY').value }} </p>
+              </ClientOnly>
+              <span class="w-2" />
+              <div class="flex gap-2 flex-wrap">
+                <ClientOnly>
+                  <UBadge
+                    v-for="tag in project.tags.sort((a: any, b: any) => a.localeCompare(b))"
+                    :key="tag"
+                    variant="soft"
+                    size="sm"
+                  >
+                    {{ tag }}
+                  </UBadge>
+                </ClientOnly>
+              </div>
+            </div>
+          </div>
+        </li>
+      </NuxtLink>
+    </ul>
+  </UContainer>
+</template>

app/pages/writings/index.vue

@@ -0,0 +1,90 @@
+<script lang="ts" setup>
+const { t } = useI18n()
+useSeoMeta({
+  title: 'My Shelf',
+  description: t('writings.description'),
+})
+
+const { data: writings } = await useAsyncData('all-writings', () => {
+  return queryCollection('writings')
+    .order('publishedAt', 'DESC')
+    .all()
+})
+
+const groupedWritings = computed(() => {
+  const grouped: Record<string, any[]> = {}
+  writings.value!.forEach((writing: any) => {
+    const year = new Date(writing.publishedAt).getFullYear().toString()
+    if (!grouped[year]) {
+      grouped[year] = []
+    }
+    grouped[year].push(writing)
+  })
+  return Object.entries(grouped).reverse()
+})
+</script>
+
+<template>
+  <UContainer class="space-y-12 mb-20 mt-16 md:mb-32 relative">
+    <PostTitle
+      :description="t('writings.description')"
+      :title="t('writings.title')"
+    />
+    <PostAlert />
+    <div class="space-y-8">
+      <div v-for="year in groupedWritings" :key="year[0]" class="lg:space-y-6 relative">
+        <h2 class="text-4xl lg:absolute top-2 -left-16 font-bold opacity-10 select-none pointer-events-none lg:[writing-mode:vertical-rl] lg:[text-orientation:upright] pl-1 lg:pl-0">
+          {{ year[0] }}
+        </h2>
+        <ul class="relative grid grid-cols-1 gap-2">
+          <NuxtLink
+            v-for="(writing, id) in year[1]"
+            :key="id"
+            :to="writing.path"
+          >
+            <li
+              class="h-full group hover:bg-neutral-200/50 duration-300 p-1 lg:p-2 rounded-lg dark:hover:bg-neutral-800/50 transition-colors"
+            >
+              <h1
+                class="font-bold text-lg duration-300 text-neutral-600 dark:text-neutral-400 group-hover:text-neutral-900 dark:group-hover:text-white"
+              >
+                {{ writing.title }}
+              </h1>
+              <h3 class="text-neutral-600 dark:text-neutral-400 italic">
+                {{ writing.description }}
+              </h3>
+              <div class="flex flex-col sm:flex-row sm:items-center justify-between mt-1">
+                <div
+                  class="text-sm text-neutral-500 duration-300 flex items-center gap-1"
+                >
+                  <ClientOnly>
+                    <p>{{ useDateFormat(writing.publishedAt, 'DD MMM').value }} </p>
+                  </ClientOnly>
+                  <span>·</span>
+                  <p>{{ writing.readingTime }}min</p>
+                  <span class="w-2" />
+                  <div class="flex gap-2 flex-wrap">
+                    <ClientOnly>
+                      <UBadge
+                        v-for="tag in writing.tags.sort((a: any, b: any) => a.localeCompare(b))"
+                        :key="tag"
+                        variant="soft"
+                        size="sm"
+                      >
+                        {{ tag }}
+                      </UBadge>
+                    </ClientOnly>
+                  </div>
+                </div>
+              </div>
+            </li>
+          </NuxtLink>
+        </ul>
+      </div>
+    </div>
+  </UContainer>
+</template>
+
+<style scoped>
+
+</style>