raj/raj.how
raj
/
raj.how
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: make og images work with whatsapp

This commit is contained in:
Raj 2024-03-11 21:44:52 +05:30
parent 0b6baf996d
commit 62e3d604b9
1 changed files with 11 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/app/api/og/route.tsx
View File

@ -21,33 +21,33 @@ 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"> <div tw="flex flex-col font-sans border-red-400 m-0 w-full h-full bg-black text-white">
<img <img
width={1200} width={1200 / 2}
height={630} height={630 / 2}
tw="absolute top-0 left-0" tw="absolute top-0 left-0"
src={`${image_origin_url}/background-gradient.png`} src={`${image_origin_url}/background-gradient.png`}
alt="og" alt="og"
/> />
<div tw="p-8 bg-white/20 flex flex-col"> <div tw="p-3 px-4 bg-white/20 flex flex-col">
<span tw="text-black text-6xl font-bold font-sans"> <span tw="text-black text-3xl font-bold font-sans">
{title?.toString()} {title?.toString()}
</span> </span>
<span tw="text-black/80 text-3xl">{description?.toString()}</span> <span tw="text-black/80 text-xl">{description?.toString()}</span>
<div tw="flex mt-2 items-center rounded-full w-fit mr-auto bg-background/30"> <div tw="flex mt-1 items-center rounded-full w-fit mr-auto bg-background/30">
<img <img
width="24" width="24"
height="24" height="24"
src={`https://github.com/${github}.png`} src={`https://github.com/${github}.png`}
tw="rounded-full mr-2" tw="rounded-full mr-1"
/> />
<span tw="text-black/80 font-thin text-2xl"> <span tw="text-black/80 font-thin text-xl">
{author?.toString()} {author?.toString()}
</span> </span>
</div> </div>
</div> </div>
{images ? ( {images ? (
<img <img
width={1200} width={1200 / 2}
tw="flex-1" tw="flex-1"
style={{ style={{
objectFit: "cover", objectFit: "cover",
@ -60,8 +60,8 @@ export async function GET(props: NextRequest) {
</div> </div>
), ),
{ {
width: 1200, width: 1200 / 2,
height: 630, height: 630 / 2,
}, },
); );
} }