commit efd833280a3a49e25001513d82dbaa5015b77d87 · finxol.io/blog

+10 -4

app/components/OgImage/Post.vue

···

       5
       5
        
           title: string;

     

       6
       6
        
           date: string;

     

       7
       7
        
           author: string;

     

       8
       8
       +
           description: string;

     

       8
       9
        
       }>();

     

       9
       10
        
       

     

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

     

       11
       11
       +
       const { title, date, author, description } = props;

     

       11
       12
        
       </script>

     

       12
       13
        
       

     

       13
       14
        
       <template>

     

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

     

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

     

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

     

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

     

       18
       18
       -
                 {{ title }}

     

       19
       19
       -
               </h1>

     

       18
       18
       +
               <div>

     

       19
       19
       +
                   <h1 class="text-[80px] text-left">

     

       20
       20
       +
                       {{ title }}

     

       21
       21
       +
                   </h1>

     

       22
       22
       +
                   <p class="text-[30px]  text-left line-clamp-3 text-ellipsis" style="font-family: 'Orkney Regular'">

     

       23
       23
       +
                       {{ description }}

     

       24
       24
       +
                   </p>

     

       25
       25
       +
               </div>

     

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

     

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

     

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

+1

app/pages/posts/[...slug].vue

···

       14
       14
        
       if (post.value) {

     

       15
       15
        
           defineOgImageComponent("Post", {

     

       16
       16
        
               title: post.value.title,

     

       17
       17
       +
               description: post.value.description,

     

       17
       18
        
               date: post.value.date,

     

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

     

       19
       20
        
           });

+5

nuxt.config.ts

···

       44
       44
        
                       name: "Recoleta",

     

       45
       45
        
                       weight: 700,

     

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

     

       47
       47
       +
                   },

     

       48
       48
       +
                   {

     

       49
       49
       +
                       name: "Orkney Regular",

     

       50
       50
       +
                       weight: 700,

     

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

     

       47
       52
        
                   }

     

       48
       53
        
               ]

     

       49
       54
        
           },