mirror of
https://github.com/ArthurDanjou/artchat.git
synced 2026-01-14 15:54:03 +01:00
feat: enhance navigation and content structure across chat and project components
This commit is contained in:
@@ -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">
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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"
|
||||
25
app/components/post/Title.vue
Normal file
25
app/components/post/Title.vue
Normal 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>
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user