feat: restore previous og image in blog

Author: alexdln

app/components/BlogPostWrapper.vue

@@ -13,7 +13,7 @@ useSeoMeta({
   ogType: 'article',
 })
 
-defineOgImage('BlogPost.takumi', {
+defineOgImageComponent('BlogPost', {
   title: props.frontmatter.title,
   authors: props.frontmatter.authors,
   date: props.frontmatter.date,

…p/components/OgImage/BlogPost.takumi.vue app/components/OgImage/BlogPost.vueapp/components/OgImage/BlogPost.takumi.vue renamed to app/components/OgImage/BlogPost.vue app/components/OgImage/BlogPost.takumi.vue renamed to app/components/OgImage/BlogPost.vue

@@ -69,28 +69,36 @@ const formattedAuthorNames = computed(() => {
   >
     <!-- npmx logo - top right -->
     <div
-      class="absolute top-12 z-10 flex items-center gap-1 text-5xl tracking-tight"
-      style="right: 6rem"
+      class="absolute top-12 z-10 flex items-center gap-1 text-5xl font-bold tracking-tight"
+      style="font-family: 'Geist', sans-serif; right: 6rem"
     >
       <span :style="{ color: primaryColor }" class="opacity-80">./</span>
       <span class="text-white">npmx</span>
     </div>
 
     <div class="relative z-10 flex flex-col gap-2">
       <!-- Date -->
-      <span v-if="formattedDate" class="text-3xl text-[#a3a3a3] font-light">
+      <span
+        v-if="formattedDate"
+        class="text-3xl text-[#a3a3a3] font-light"
+        style="font-family: 'Geist', sans-serif"
+      >
         {{ formattedDate }}
       </span>
 
       <!-- Blog title -->
-      <h1 class="text-6xl tracking-tight leading-[1.2] w-9/10" style="letter-spacing: -0.03em">
+      <h1
+        class="text-6xl font-semibold tracking-tight leading-snug w-9/10"
+        style="font-family: 'Geist', sans-serif; letter-spacing: -0.03em"
+      >
         {{ title }}
       </h1>
 
       <!-- Authors -->
       <div
         v-if="resolvedAuthors.length"
-        class="flex items-center gap-4 self-start justify-start flex-nowrap mt-4"
+        class="flex items-center gap-4 self-start justify-start flex-nowrap"
+        style="font-family: 'Geist', sans-serif"
       >
         <!-- Stacked avatars -->
         <span>
@@ -120,7 +128,7 @@ const formattedAuthorNames = computed(() => {
           </span>
         </span>
         <!-- Names -->
-        <span style="font-size: 24px; color: #a3a3a3; font-weight: 400">{{
+        <span style="font-size: 24px; color: #a3a3a3; font-weight: 300">{{
           formattedAuthorNames
         }}</span>
       </div>