chore: updated styles

src/app/(home)/story/page.tsx

@@ -16,7 +16,6 @@ import Link from "next/link";
 import { NRenderer } from "@/components/notion/renderer";
 import { Metadata, ResolvingMetadata } from "next";
 import Comments, { Reactions } from "@/components/comments";
-import { Stats } from "./stats";
 
 export const revalidate = 100;
 
@@ -26,7 +25,7 @@ type Props = {
 
 export async function generateMetadata(
   { searchParams }: Props,
-  parent: ResolvingMetadata,
+  // parent: ResolvingMetadata,
 ): Promise<Metadata> {
   const notion = new NotionAPI();
 
@@ -60,10 +59,36 @@ export async function generateMetadata(
     title: title,
     description: description.toString() || "Written by raj",
     openGraph: {
-      images: [og_image_url.toString()],
+      images: [
+        {
+          url: og_image_url.toString(),
+          type: "image/jpeg",
+          height: 630,
+          width: 1200,
         },
+      ],
+      authors: [author.toString()],
+    },
+    authors: [
+      {
+        name: author.toString(),
+      },
+    ],
+
     twitter: {
-      images: [og_image_url.toString()],
+      images: [
+        {
+          url: og_image_url.toString(),
+          type: "image/jpeg",
+          height: 630,
+          width: 1200,
+        },
+      ],
+      creator: author.toString(),
+      card: "summary_large_image",
+      title: title,
+      description: description.toString() || "Written by raj",
+      site: "raj.how",
     },
   };
 }
@@ -88,8 +113,6 @@ export default async function Story({
   const category = process.env.COMMENTS_CATEGORY;
   const categoryId = process.env.COMMENTS_CATEGORY_ID;
 
-  console.log(repo, repoId, category, categoryId);
-
   return (
     <article suppressHydrationWarning className="relative">
       <GrainProvider

src/app/api/og/route.tsx

@@ -3,6 +3,11 @@ import { NextRequest } from "next/server";
 
 export const runtime = "edge";
 
+export const contentType = "image/jpeg";
+
+const width = 1200 / 2;
+const height = 630 / 2;
+
 export async function GET(props: NextRequest) {
   const url = new URL(props.url);
 
@@ -21,13 +26,13 @@ export async function GET(props: NextRequest) {
     (
       <div tw="flex flex-col font-sans border-red-400 m-0 w-full h-full bg-black text-white">
         <img
-          width={1200 / 2}
+          width={width}
-          height={630 / 2}
+          height={height}
           tw="absolute top-0 left-0"
           src={`${image_origin_url}/background-gradient.png`}
           alt="og"
         />
-        <div tw="p-3 px-4 bg-white/20 flex flex-col">
+        <div tw="p-3 px-6 bg-white/20 flex flex-1 justify-center flex-col">
           <span tw="text-black text-3xl font-bold font-sans">
             {title?.toString()}
           </span>
@@ -45,9 +50,9 @@ export async function GET(props: NextRequest) {
             </span>
           </div>
         </div>
-        {images ? (
+        {images && images?.split(",")[0].trim() ? (
           <img
-            width={1200 / 2}
+            width={width}
             tw="flex-1"
             style={{
               objectFit: "cover",
@@ -60,8 +65,12 @@ export async function GET(props: NextRequest) {
       </div>
     ),
     {
-      width: 1200 / 2,
+      width,
-      height: 630 / 2,
+      height,
+      headers: {
+        "Content-Type": "image/jpeg",
+        "content-type": "image/jpeg",
+      },
     },
   );
 }