commit 7f87f7cb4094ad5e714ea0bc5c45ba4c419dcc66 · finxol.io/blog

+34

app/components/OgImage/Page.vue

···

       1
       1
       +
       <script setup lang="ts">

     

       2
       2
       +
       const config = useRuntimeConfig().public;

     

       3
       3
       +
       

     

       4
       4
       +
       const props = defineProps<{

     

       5
       5
       +
           description: string;

     

       6
       6
       +
       }>();

     

       7
       7
       +
       

     

       8
       8
       +
       const { description } = props;

     

       9
       9
       +
       </script>

     

       10
       10
       +
       

     

       11
       11
       +
       <template>

     

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

     

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

     

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

     

       15
       15
       +
                 <div class="flex flex-col justify-between">

     

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

     

       17
       17
       +
                   {{ config.title }}

     

       18
       18
       +
                   </h1>

     

       19
       19
       +
                   <h2 class="text-4xl text-left">

     

       20
       20
       +
                   {{ description }}

     

       21
       21
       +
                   </h2>

     

       22
       22
       +
                 </div>

     

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

     

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

     

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

     

       26
       26
       +
                       <p>

     

       27
       27
       +
                           {{ config.author }}

     

       28
       28
       +
                       </p>

     

       29
       29
       +
                   </div>

     

       30
       30
       +
               </div>

     

       31
       31
       +
             </div>

     

       32
       32
       +
           </div>

     

       33
       33
       +
         </div>

     

       34
       34
       +
       </template>

app/pages/index.vue

···

       1
       1
        
       <script setup lang="ts">

     

       2
       2
       +
       const config = useRuntimeConfig().public;

     

       3
       3
       +
       

     

       2
       4
        
       const { data: frontmatter } = await useAsyncData("frontmatter", () =>

     

       3
       5
        
           queryCollection("pages").path("/pages").first()

     

       4
       6
        
       );

     
···

       17
       19
        
       });

     

       18
       20
        
       

     

       19
       21
        
       const posts = data.value ? data.value[0]?.children : [];

     

       22
       22
       +
       

     

       23
       23
       +
       defineOgImageComponent("Page", {

     

       24
       24
       +
           description: `This is ${config.title}. Read all ${posts?.length || 0} posts published so far, but stay tuned for more!`,

     

       25
       25
       +
       });

     

       20
       26
        
       </script>

     

       21
       27
        
       

     

       22
       28
        
       <template>