finxol.io
1<script setup>
2const config = useRuntimeConfig().public;
3
4const props = defineProps({
5 post: {
6 type: Object,
7 required: true
8 }
9});
10const { post } = toRefs(props);
11</script>
12
13<template>
14 <NuxtLink v-if="post !== undefined" :to="post.path" :class="[
15 'rounded-lg',
16 'border border-neutral-200 dark:border-neutral-700',
17 'px-8 py-6',
18 'flex flex-col justify-between',
19 ]">
20 <div>
21 <h1 class="text-2xl font-bold text-neutral-900 dark:text-neutral-300">
22 {{ post.title }}
23 </h1>
24 <div class="mt-2 flex items-center gap-2">
25 <span v-for="tag in post.tags" :key="tag" class="px-2 py-0.5 text-xs bg-stone-200 dark:bg-stone-700 text-stone-600 dark:text-stone-400 rounded-full">
26 {{ tag }}
27 </span>
28 </div>
29 </div>
30 <p :class="[
31 'text-neutral-500 dark:text-zinc-400',
32 'my-4',
33 ]">
34 {{ post.description }}
35 <span class="text-neutral-400 underline dark:text-neutral-300 font-light hover:text-primary-600">
36 Read more.
37 </span>
38 </p>
39
40 <div class="flex items-center justify-start gap-4 text-neutral-600 dark:text-neutral-300">
41 <div v-if="post.authors" class="flex items-center gap-1">
42 <img v-if="post.authors[0].name === config.author" src="/logo.png" :alt="post.authors[0].name"
43 class="w-8 h-8 rounded-full mr-2">
44 <span v-for="author in post.authors" :key="author.name">
45 {{ author.name }}
46 </span>
47 </div>
48 ·
49 <span>
50 {{ new Date(post.date).toLocaleDateString('en-GB', {
51 year: 'numeric',
52 month: 'long',
53 day: 'numeric'
54 }) }}
55 </span>
56 </div>
57 </NuxtLink>
58</template>