[recnet-web] Add desc and self-rec badge to og (#325)

## Description

<!--- Describe your changes in detail -->
Add desc and self-rec badge to og

## 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: -->
- #324 
- #317 

## Notes

<!-- Other thing to say -->

## Test

<!--- Please describe in detail how you tested your changes locally. -->
Go to `localhost:3000/rec/{id}/opengraph-image`, you should see rec desc
included. (and self-rec badge if that rec is self-rec by someone)

## Screenshots (if appropriate):

<!--- Add screenshots of your changes here -->
![Screenshot 2024-10-09 at 11 14
05 AM](https://github.com/user-attachments/assets/63d7eb97-a681-4f3a-9efa-2dc5496f1baf)


## TODO

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

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

@@ -47,7 +47,8 @@ export default async function Image({ params }: { params: { id: string } }) {
           <p tw={cn("text-[24px] text-[#0090FF]")}> RecNet </p>
         </div>
         <div tw="font-medium">{rec.article.title}</div>
-        <p tw={cn("text-[24px] text-gray-600")}>{rec.article.author} </p>
+        <p tw="text-[24px] text-gray-700">{rec.description} </p>
+        <p tw={cn("text-[18px] text-gray-600")}>{rec.article.author} </p>
         <div
           tw={cn(
             "flex flex-row items-center",
@@ -62,6 +63,11 @@ export default async function Image({ params }: { params: { id: string } }) {
             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>
+          ) : null}
         </div>
       </div>
     ),