[recnet-web] Update rec page og design (#358)

## Description

<!--- Describe your changes in detail -->
Redesign rec page og style

## Related Issue

<!--- This project only accepts pull requests related to open issues -->
<!--- If suggesting a new feature or change, please discuss it in an
issue first -->
<!--- If fixing a bug, there should be an issue describing it with steps
to reproduce -->
<!--- Please link to the issue here: -->

- #355 

## Notes

<!-- Other thing to say -->

## Test

<!--- Please describe in detail how you tested your changes locally. -->

## Screenshots (if appropriate):

<!--- Add screenshots of your changes here -->

Before:
![Screenshot 2024-11-14 at 4 12
56 PM](https://github.com/user-attachments/assets/198dc1a6-0f13-4b84-8e82-dab4085649f3)

It looks like this now

![Screenshot 2024-11-14 at 4 11
59 PM](https://github.com/user-attachments/assets/2c29fe42-b517-470e-9933-80fc98b77ba9)


## TODO

- [ ] Clear `console.log` or `console.error` for debug usage
- [ ] Update the documentation `recnet-docs` if needed

apps/recnet/src/app/rec/[id]/opengraph-image.tsx

@@ -14,6 +14,9 @@ export const size = {
 
 export const contentType = "image/png";
 
+const fallbackImage =
+  "https://recnet.io/_next/image?url=%2Frecnet-logo.webp&w=64&q=100";
+
 /**
   Styling: You can write Tailwind CSS via "tw" prop here.
   However, our radix-theme preset won't be available here.
@@ -25,19 +28,22 @@ export default async function Image({ params }: { params: { id: string } }) {
   const { rec } = await serverClient.getRecById({
     id,
   });
+  const linkPreviewMetadata = await serverClient.getLinkPreviewMetadata({
+    url: rec.article.link,
+  });
 
   return new ImageResponse(
     (
       // ImageResponse JSX element
       <div
         tw={cn(
-          "flex flex-col justify-start h-full bg-white",
-          "p-8",
+          "flex flex-col justify-start h-full w-full bg-white",
+          "py-8",
           "gap-y-2",
           "text-[48px]"
         )}
       >
-        <div tw="flex flex-row items-center">
+        <div tw="flex flex-row items-center px-8">
           {/* eslint-disable-next-line */}
           <img
             src={"https://imgur.com/jVp1pG1.png"}
@@ -46,28 +52,41 @@ export default async function Image({ params }: { params: { id: string } }) {
           />
           <p tw={cn("text-[32px] text-[#0090FF]")}> RecNet </p>
         </div>
-        <div tw="font-medium">{rec.article.title}</div>
-        <p tw="text-[28px] text-gray-700">{rec.description} </p>
-        <p tw={cn("text-[24px] text-gray-600")}>{rec.article.author} </p>
-        <div
-          tw={cn(
-            "flex flex-row items-center",
-            "mt-auto",
-            "text-gray-600 text-[24px]"
-          )}
-        >
-          {/* eslint-disable-next-line */}
-          <img
-            src={rec.user.photoUrl}
-            tw="w-12 h-12 rounded-full mr-4"
-            alt={rec.user.displayName}
-          />
-          <span tw="self-center">{`${rec.user.displayName} · ${formatDate(new Date(rec.cutoff))}`}</span>
-          {rec.isSelfRec ? (
-            <div tw="ml-4 bg-[#FFEFDD] text-[#D14E00] rounded-md px-2 py-1 text-[16px] font-medium w-fit max-w-fit">
-              Self Rec
+        <div tw="flex flex-col justify-start px-8 w-[1600px]">
+          <div tw="flex flex-row items-center">
+            {/* eslint-disable-next-line */}
+            <img
+              src={rec.user.photoUrl}
+              tw="w-10 h-10 rounded-full mr-4"
+              alt={rec.user.displayName}
+            />
+            <p tw="text-[24px] text-gray-600">
+              <span tw="mr-2 text-[#0090FF] font-bold">{`${rec.user.displayName}`}</span>
+              {formatDate(new Date(rec.cutoff))}
+            </p>
+          </div>
+          <p tw="text-[24px] text-gray-600 px-2 mb-12 mt-0">
+            {rec.description}
+          </p>
+          <div tw="flex flex-row items-center my-4 rounded-[16px] border-[1px] border-[#D9D9D9] text-gray-11">
+            <div tw="aspect-square w-auto max-w-[200px] h-full flex items-center justify-center">
+              {/* eslint-disable-next-line */}
+              <img
+                src={
+                  linkPreviewMetadata?.logo?.url ||
+                  linkPreviewMetadata?.image?.url ||
+                  fallbackImage
+                }
+                alt={"link-metadata-logo"}
+                tw={cn("object-contain", "p-4", "min-w-[120px] max-w-[150px]")}
+              />
+            </div>
+            <div tw="flex flex-col p-3 justify-between h-full w-min gap-y-2 pr-2 text-wrap text-gray-600 text-[16px] border-l-[1px] border-[#D9D9D9]">
+              <p tw="text-gray-900 text-[24px]">{rec.article.title}</p>
+              <p>{rec.article.author}</p>
+              <p>{rec.article.link.replace("https://", "").split("/")[0]}</p>
             </div>
-          ) : null}
+          </div>
         </div>
       </div>
     ),