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-8',
18 'grid grid-cols-1 lg:grid-cols-2 gap-4',
19 ]">
20 <div class="flex flex-col justify-between">
21 <h1 class="text-4xl font-bold text-neutral-900 dark:text-neutral-300">
22 {{ post.title }}
23 </h1>
24 <div class="my-2 flex items-center gap-2">
25 <span v-for="tag in post.tags" :key="tag" class="mr-2 mb-2 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 class="flex items-center justify-start gap-4 text-neutral-600 dark:text-neutral-300">
30 <div v-if="post.authors" class="flex items-center gap-1">
31 <img v-if="post.authors[0].name === config.author" src="/logo.png" :alt="post.authors[0].name"
32 class="w-8 h-8 rounded-full mr-2">
33 <span v-for="author in post.authors" :key="author.name">
34 {{ author.name }}
35 </span>
36 </div>
37 ·
38 <span>
39 {{ new Date(post.date).toLocaleDateString('en-GB', {
40 year: 'numeric',
41 month: 'long',
42 day: 'numeric'
43 }) }}
44 </span>
45 </div>
46 </div>
47
48 <p :class="[
49 'text-lg text-neutral-500 dark:text-zinc-400',
50 ]">
51 {{ post.description }}
52 <span class="text-neutral-400 underline dark:text-neutral-300 font-light hover:text-primary-600">
53 Read more.
54 </span>
55 </p>
56 </NuxtLink>
57</template>