mariosant/mariosant.dev
1
0
Fork 0
Code Issues Pull Requests Actions Activity

Add latest article section to homepage and back to articles link

Browse Source
This commit is contained in:
Marios Antonoudiou
2026-04-06 15:34:29 +03:00
parent 999967eb74
commit 09becbd76e
5 changed files with 92 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
components/home/latest-article.vue Normal file
View File

@@ -0,0 +1,41 @@
<script setup lang="ts">
const { data: article } = await useAsyncData("latest-article", async () => {
return queryCollection("articles").order("date", "DESC").first();
});
const date = useDateFormat(new Date(article.value?.date ?? ""), "Do of MMMM YYYY");
const excerpt = computed(() => {
if (!article.value) return "";
const text = article.value.description ?? article.value.body ?? "";
return text.slice(0, 150) + (text.length > 150 ? "..." : "");
});
</script>
<template>
<UContainer
v-if="article"
class="p-4 sm:p-6 lg:p-8 max-w-3xl"
as="section"
>
<span class="text-sm text-gray-500 flex flex-row gap-1 items-center">
Latest article
</span>
<ULink :to="article.path" class="block mt-4">
<div class="flex gap-6 items-start flex-row-reverse">
<NuxtImg
v-if="article.coverImage?.url"
class="w-24 h-24 object-cover rounded-lg shrink-0"
:src="article.coverImage.url.replace('w=1287&h=600', 'w=300&h=300')"
:alt="article.title"
/>
<div class="flex flex-col gap-2">
<h3 class="font-semibold text-lg">{{ article.title }}</h3>
<p class="text-sm text-slate-600 dark:text-slate-400 line-clamp-3">{{ excerpt }}</p>
<time class="text-xs text-slate-500">{{ date }}</time>
</div>
</div>
</ULink>
</UContainer>
</template>

82
components/home/personal-projects.vue
View File

@@ -1,45 +1,47 @@
<template>
<UContainer class="flex flex-col gap-5 p-4 sm:p-6 lg:p-8 max-w-3xl" as="section">
<div class="text-sm text-gray-500">Personal projects</div>
<UContainer
class="flex flex-col gap-5 p-4 sm:p-6 lg:p-8 max-w-3xl"
as="section"
>
<div class="text-sm text-gray-500">Personal projects</div>
<div class="grid grid-cols-1 gap-5 md:grid-cols-3">
<Project
title="Ghostwriter"
image="https://www.ghostwriter.rocks/ghostwriter-logo.png"
url="https://ghostwriter.rocks"
>
<template v-slot:description>
Creative post-generation for Strava activities with a lightweight, playful product feel.
</template>
<template v-slot:subtitle> Compatible with Strava </template>
</Project>
<div class="grid grid-cols-1 gap-5 md:grid-cols-3">
<Project
title="Ghostwriter"
image="https://app.ghostwriter.rocks/_ipx/_/ghostwriter-logo.png"
url="https://ghostwriter.rocks"
>
<template v-slot:description>
Creative post-generation for Strava activities with a lightweight,
playful product feel.
</template>
<template v-slot:subtitle> Compatible with Strava </template>
</Project>
<Project
title="Places for Zendesk"
image="https://990141.apps.zdusercontent.com/990141/assets/1701544308-8c83d0f02afd0b3d7342e5f19304c4b4/logo.png"
url="https://getplaces.co"
>
<template v-slot:description>
Location-aware lead capture designed to connect digital conversations to real-world businesses.
</template>
<template v-slot:subtitle>
Built for Zendesk marketplace
</template>
</Project>
<Project
title="Places for Zendesk"
image="https://990141.apps.zdusercontent.com/990141/assets/1701544308-8c83d0f02afd0b3d7342e5f19304c4b4/logo.png"
url="https://getplaces.co"
>
<template v-slot:description>
Location-aware lead capture designed to connect digital conversations
to real-world businesses.
</template>
<template v-slot:subtitle> Built for Zendesk marketplace </template>
</Project>
<Project
title="SneakPeek"
image="https://cdn.livechat-files.com/api/file/developers/img/applications/449B6QFGg/icons/AecAyk1Gg-960x960.png"
url="https://www.livechat.com/marketplace/apps/sneakpeek"
marketplace="LiveChat"
>
<template v-slot:description
>Turn plain links into richer, more informative chat experiences</template
>
<template v-slot:subtitle>
Built for LiveChat marketplace
</template>
</Project>
</div>
</UContainer>
<Project
title="SneakPeek"
image="https://cdn.livechat-files.com/api/file/developers/img/applications/449B6QFGg/icons/AecAyk1Gg-960x960.png"
url="https://www.livechat.com/marketplace/apps/sneakpeek"
marketplace="LiveChat"
>
<template v-slot:description
>Turn plain links into richer, more informative chat
experiences</template
>
<template v-slot:subtitle> Built for LiveChat marketplace </template>
</Project>
</div>
</UContainer>
</template>