Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 1 commit into from
Nov 18, 2024
Merged

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

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
67 changes: 43 additions & 24 deletions apps/recnet/src/app/rec/[id]/opengraph-image.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand All @@ -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"}
Expand All @@ -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>
),
Expand Down
Loading