···

       
5
       
 
       
    title: string;

     

       
6
       
 
       
    date: string;

     

       
7
       
 
       
    author: string;

     

       
0
       
 
       

     

       
8
       
 
       
}>();

     

       
9
       
 
       


     

       
10
       
-
       
const { title, date, author } = props;

     

       
11
       
 
       
</script>

     

       
12
       
 
       


     

       
13
       
 
       
<template>

     

       
14
       
 
       
  <div class="h-full w-full flex items-start justify-start bg-stone-100">

     

       
15
       
 
       
    <div class="flex items-start justify-start h-full">

     

       
16
       
 
       
      <div class="flex flex-col justify-between w-full h-full px-30 py-15" style="font-family: 'Recoleta'">

     

       
17
       
-
       
        <h1 class="text-[90px] text-left">

     

       
18
       
-
       
          {{ title }}

     

       
19
       
-
       
        </h1>

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
20
       
 
       
        <div class="flex flex-row items-center justify-between text-4xl font-bold mb-0">

     

       
21
       
 
       
            <div class="flex flex-row items-center gap-8">

     

       
22
       
 
       
                <img src="/logo.png" alt="Author Avatar" height="56" width="56">

     

···

       
5
       
 
       
    title: string;

     

       
6
       
 
       
    date: string;

     

       
7
       
 
       
    author: string;

     

       
8
       
+
       
    description: string;

     

       
9
       
 
       
}>();

     

       
10
       
 
       


     

       
11
       
+
       
const { 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">

     

···

       
14
       
 
       
if (post.value) {

     

       
15
       
 
       
    defineOgImageComponent("Post", {

     

       
16
       
 
       
        title: post.value.title,

     

       
0
       
 
       

     

       
17
       
 
       
        date: post.value.date,

     

       
18
       
 
       
        author: post.value.authors[0]?.name

     

       
19
       
 
       
    });

     

···

       
14
       
 
       
if (post.value) {

     

       
15
       
 
       
    defineOgImageComponent("Post", {

     

       
16
       
 
       
        title: post.value.title,

     

       
17
       
+
       
        description: post.value.description,

     

       
18
       
 
       
        date: post.value.date,

     

       
19
       
 
       
        author: post.value.authors[0]?.name

     

       
20
       
 
       
    });

     

···

       
44
       
 
       
                name: "Recoleta",

     

       
45
       
 
       
                weight: 700,

     

       
46
       
 
       
                path: "/fonts/recoleta-bold.ttf"

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
47
       
 
       
            }

     

       
48
       
 
       
        ]

     

       
49
       
 
       
    },

     

···

       
44
       
 
       
                name: "Recoleta",

     

       
45
       
 
       
                weight: 700,

     

       
46
       
 
       
                path: "/fonts/recoleta-bold.ttf"

     

       
47
       
+
       
            },

     

       
48
       
+
       
            {

     

       
49
       
+
       
                name: "Orkney Regular",

     

       
50
       
+
       
                weight: 700,

     

       
51
       
+
       
                path: "/fonts/orkney-regular.ttf"

     

       
52
       
 
       
            }

     

       
53
       
 
       
        ]

     

       
54
       
 
       
    },