fix: update project links to point to the new ArtStudies repository

feat: add new homelab project documentation with details on services and hardware

fix: correct project code links for Monte Carlo Project and Schelling Segregation Model

refactor: rename Studies Projects to ArtStudies for better clarity and consistency

i18n: add project descriptions in English, Spanish, and French locales

chore: update package name to artsite and adjust dependency versions

style: add cover image for ArtLab project

fix: update chat message labels for better readability and translation usage

app/components/chat/MessageContainer.vue

@@ -9,7 +9,7 @@ const props = defineProps<{
 const isArthur = computed(() => props.message.sender === ChatSender.ARTHUR)
 
 const { t, locale, locales } = useI18n()
-const currentLocale = computed(() => locales.value.find((l: { code: string }) => l.code === locale.value))
+const currentLocale = computed(() => locales.value.find(l => l.code === locale.value))
 const formatted = computed(() => useDateFormat(useNow(), 'D MMMM YYYY, HH:mm', { locales: currentLocale.value?.code ?? 'en' }).value)
 </script>
 
@@ -86,6 +86,9 @@ const formatted = computed(() => useDateFormat(useNow(), 'D MMMM YYYY, HH:mm', {
         <div v-else-if="message.type === ChatType.SKILLS">
           <ToolSkills />
         </div>
+        <div v-else-if="message.type === ChatType.PROJECTS">
+          <ToolProjects />
+        </div>
         <div v-else>
           {{ message }}
         </div>

app/components/post/Alert.vue

@@ -1,8 +1,5 @@
 <script setup lang="ts">
-const { t, locale } = useI18n({
-  useScope: 'local',
-})
-
+const { t, locale } = useI18n()
 const closed = ref(false)
 </script>
 
@@ -11,35 +8,12 @@ const closed = ref(false)
     v-if="locale !== 'en' && !closed"
     :description="t('alert.description')"
     :title="t('alert.title')"
-    color="red"
+    color="error"
     icon="i-ph-warning-duotone"
     variant="soft"
     :close="{
-      color: 'red',
+      color: 'error',
     }"
     @update:open="closed = true"
   />
 </template>
-
-<i18n lang="json">
-{
-  "en": {
-    "alert": {
-      "title": "Translations alert!",
-      "description": "For time reasons, all article translations will only be available in English. Thank you for your understanding."
-    }
-  },
-  "fr": {
-    "alert": {
-      "title": "Attention aux traductions !",
-      "description": "Pour des raisons de temps, toutes les traductions d'articles ne seront disponibles qu'en anglais. Merci de votre compréhension."
-    }
-  },
-  "es": {
-    "alert": {
-      "title": "¡Atención a las traducciones!",
-      "description": "Por razones de tiempo, todas las traducciones de los artículos estarán disponibles solo en inglés. Gracias por su comprensión."
-    }
-  }
-}
-</i18n>

app/components/tool/Activity.vue

@@ -18,8 +18,6 @@ const codingActivity = computed(() => {
     : activities[0]
 })
 
-const currentLocale = computed(() => locales.value.find((l: { code: string }) => l.code === locale.value))
-
 const isActive = computed(() => {
   if (!codingActivity.value)
     return
@@ -51,6 +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
 
   return {

app/components/tool/Projects.vue

@@ -0,0 +1,44 @@
+<script lang="ts" setup>
+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().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>
+    </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-md">
+            <h1 class="text-xl font-medium">
+              {{ project.title }}
+            </h1>
+            <h3 class="text-muted my-2">
+              {{ project.description }}
+            </h3>
+            <div class="flex items-center justify-between">
+              <p class="text-sm text-muted-foreground">
+                {{ date(project.publishedAt).value }}
+              </p>
+              <div class="flex flex-wrap gap-2">
+                <UBadge
+                  v-for="tag in project.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/index.vue

@@ -10,11 +10,16 @@ const { messages } = useChatStore()
 const parents = useTemplateRef('parents')
 const { height } = useElementBounding(parents)
 
+const { locale } = useI18n()
+const lastLang = ref(locale.value)
 watch(
   height,
   async () => {
     await nextTick()
-    window.scrollTo({ top: parents.value?.scrollHeight, behavior: 'smooth' })
+    if (lastLang.value === locale.value) {
+      window.scrollTo({ top: parents.value?.scrollHeight, behavior: 'smooth' })
+    }
+    lastLang.value = locale.value
   },
 )
 </script>