arthur/artsite
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/artsite.git synced 2026-02-10 16:06:58 +01:00
Code Issues 1 Packages Projects Releases Wiki Activity

Refactor project and writings components: streamline i18n usage and enhance styling for better readability

Browse Source
This commit is contained in:
Arthur Danjou
2025-07-22 20:28:13 +02:00
parent 35a350e6e4
commit 60b6f463dd
3 changed files with 25 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
app/pages/projects/[slug].vue
View File

@@ -3,8 +3,7 @@ const route = useRoute()
const { data: project } = await useAsyncData(`projects/${route.params.slug}`, () => const { data: project } = await useAsyncData(`projects/${route.params.slug}`, () =>
queryCollection('projects').path(`/projects/${route.params.slug}`).first()) queryCollection('projects').path(`/projects/${route.params.slug}`).first())
const { locale } = useI18n() const { t, locale } = useI18n({
const { t } = useI18n({
useScope: 'local', useScope: 'local',
}) })

42
app/pages/projects/index.vue
View File

@@ -23,21 +23,21 @@ const { data: projects } = await useAsyncData('all-projects', () => {
:description="t('description')" :description="t('description')"
:title="t('title')" :title="t('title')"
/> />
<ul class="grid grid-cols-1 gap-4 md:grid-cols-2"> <ul class="grid grid-cols-1 sm:grid-cols-2 gap-8">
<NuxtLink <NuxtLink
v-for="(project, id) in projects" v-for="(project, id) in projects"
:key="id" :key="id"
:to="project.path" :to="project.path"
> >
<li <li
class="flex flex-col justify-between h-full border p-4 border-neutral-200 rounded-md hover:border-neutral-500 dark:border-neutral-800 dark:hover:border-neutral-600 duration-300" class="flex flex-col h-full group hover:bg-gray-100/60 duration-300 p-2 rounded-lg dark:hover:bg-neutral-800/30 transition-colors justify-center"
> >
<article class="space-y-2"> <article class="space-y-2">
<div <div
class="flex flex-col gap-2" class="flex flex-col"
> >
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<h1 class="font-bold text-lg text-black dark:text-white"> <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 }} {{ project.title }}
</h1> </h1>
<UTooltip <UTooltip
@@ -56,29 +56,29 @@ const { data: projects } = await useAsyncData('all-projects', () => {
/> />
</UTooltip> </UTooltip>
</div> </div>
<h3 class="text-md text-neutral-500 dark:text-neutral-400"> <h3 class="text-md text-neutral-500 dark:text-neutral-400 italic">
{{ project.description }} {{ project.description }}
</h3> </h3>
</div> </div>
</article> </article>
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-2 mt-2"> <div class="flex flex-col sm:flex-row sm:items-center mt-1">
<div <div
class="text-sm text-neutral-500 flex items-center gap-1" class="text-sm text-neutral-500 duration-300 flex items-center gap-1"
> >
<UIcon name="ph:calendar-duotone" size="16" /> <p>{{ useDateFormat(project.publishedAt, 'DD MMM YYYY').value }} </p>
<p>{{ useDateFormat(project.publishedAt, 'DD MMMM YYYY').value }} </p> <span class="w-2" />
</div> <div class="flex gap-2 flex-wrap">
<div class="flex gap-2 flex-wrap"> <ClientOnly>
<ClientOnly> <UBadge
<UBadge v-for="tag in project.tags.sort((a: any, b: any) => a.localeCompare(b))"
v-for="tag in project.tags.sort((a: any, b: any) => a.localeCompare(b))" :key="tag"
:key="tag" variant="soft"
variant="soft" size="sm"
size="sm" >
> {{ TAGS.find(color => color.label.toLowerCase() === tag)?.label }}
{{ TAGS.find(color => color.label.toLowerCase() === tag)?.label }} </UBadge>
</UBadge> </ClientOnly>
</ClientOnly> </div>
</div> </div>
</div> </div>
</li> </li>

6
app/pages/writings/index.vue
View File

@@ -48,14 +48,14 @@ const groupedWritings = computed(() => {
<h2 class="text-3xl absolute -left-16 font-bold text-white opacity-10 select-none pointer-events-none [writing-mode:vertical-rl] [text-orientation:upright]"> <h2 class="text-3xl absolute -left-16 font-bold text-white opacity-10 select-none pointer-events-none [writing-mode:vertical-rl] [text-orientation:upright]">
{{ year[0] }} {{ year[0] }}
</h2> </h2>
<ul class="relative grid grid-cols-1 gap-8"> <ul class="relative grid grid-cols-1 gap-2">
<NuxtLink <NuxtLink
v-for="(writing, id) in year[1]" v-for="(writing, id) in year[1]"
:key="id" :key="id"
:to="writing.path" :to="writing.path"
> >
<li <li
class="h-full group" class="h-full group hover:bg-gray-100/60 duration-300 p-2 rounded-lg dark:hover:bg-neutral-800/30 transition-colors"
> >
<h1 <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" class="font-bold text-lg duration-300 text-neutral-600 dark:text-neutral-400 group-hover:text-neutral-900 dark:group-hover:text-white"
@@ -65,7 +65,7 @@ const groupedWritings = computed(() => {
<h3 class="text-neutral-600 dark:text-neutral-400 italic"> <h3 class="text-neutral-600 dark:text-neutral-400 italic">
{{ writing.description }} {{ writing.description }}
</h3> </h3>
<div class="flex flex-col sm:flex-row sm:items-center justify-between mt-2"> <div class="flex flex-col sm:flex-row sm:items-center justify-between mt-1">
<div <div
class="text-sm text-neutral-500 duration-300 flex items-center gap-1" class="text-sm text-neutral-500 duration-300 flex items-center gap-1"
> >