finxol.io
1<script setup lang="ts">
2const config = useRuntimeConfig().public;
3
4const props = defineProps<{
5 title: string;
6 date: string;
7 author: string;
8 description: string;
9}>();
10
11const { title, date, author, description } = props;
12</script>
13
14<template>
15 <div class="h-full w-full flex items-start justify-start bg-stone-100">
16 <div class="flex items-start justify-start h-full">
17 <div class="flex flex-col justify-between w-full h-full px-30 py-15" style="font-family: 'Recoleta'">
18 <div>
19 <h1 class="text-[80px] text-left">
20 {{ title }}
21 </h1>
22 <p class="text-[30px] text-left line-clamp-3 text-ellipsis" style="font-family: 'Orkney Regular'">
23 {{ description }}
24 </p>
25 </div>
26 <div class="flex flex-row items-center justify-between text-4xl font-bold mb-0">
27 <div class="flex flex-row items-center gap-8">
28 <img src="/logo.png" alt="Author Avatar" height="56" width="56">
29 <p>
30 {{ author }}
31 </p>
32 </div>
33 <p>
34 {{ new Date(date).toLocaleDateString('en-GB', {
35 year: 'numeric',
36 month: 'long',
37 day: 'numeric'
38 }) }}
39 </p>
40 </div>
41 </div>
42 </div>
43 </div>
44</template>