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

This commit is contained in:
2025-09-05 12:51:25 +02:00
parent b140760cfe
commit addb63a792
13 changed files with 337 additions and 231 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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