arthur/artsite
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/artsite.git synced 2026-01-14 15:54:13 +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}`, () =>
queryCollection('projects').path(`/projects/${route.params.slug}`).first())
const { locale } = useI18n()
const { t } = useI18n({
const { t, locale } = useI18n({
useScope: 'local',
})

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

@@ -23,21 +23,21 @@ const { data: projects } = await useAsyncData('all-projects', () => {
:description="t('description')"
: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
v-for="(project, id) in projects"
:key="id"
:to="project.path"
>
<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">
<div
class="flex flex-col gap-2"
class="flex flex-col"
>
<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 }}
</h1>
<UTooltip
@@ -56,29 +56,29 @@ const { data: projects } = await useAsyncData('all-projects', () => {
/>
</UTooltip>
</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 }}
</h3>
</div>
</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
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 MMMM YYYY').value }} </p>
</div>
<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"
>
{{ TAGS.find(color => color.label.toLowerCase() === tag)?.label }}
</UBadge>
</ClientOnly>
<p>{{ useDateFormat(project.publishedAt, 'DD MMM YYYY').value }} </p>
<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"
>
{{ TAGS.find(color => color.label.toLowerCase() === tag)?.label }}
</UBadge>
</ClientOnly>
</div>
</div>
</div>
</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]">
{{ year[0] }}
</h2>
<ul class="relative grid grid-cols-1 gap-8">
<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"
class="h-full group hover:bg-gray-100/60 duration-300 p-2 rounded-lg dark:hover:bg-neutral-800/30 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"
@@ -65,7 +65,7 @@ const groupedWritings = computed(() => {
<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-2">
<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"
>