File size: 2,698 Bytes
89682f8 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 |
import { ImageResponse } from "next/og";
import { createClient } from "@vercel/kv";
import { shareString2Json } from "@/util/use-share";
const kv =
process.env?.KV_REST_API_URL && process.env?.KV_REST_API_TOKEN
? createClient({
url: process.env.KV_REST_API_URL,
token: process.env.KV_REST_API_TOKEN,
})
: null;
export const runtime = "edge";
const siteUrl =
process.env.NODE_ENV === "production"
? "https://www.tryemoji.com/"
: "http://localhost:3000/";
export async function GET(request: Request) {
const { searchParams } = new URL(request.url);
const image = await fetch(new URL("./image.png", import.meta.url)).then(
(res) => res.arrayBuffer(),
);
let base64URL = "";
let emoji = "";
const share = searchParams.get("share");
const option = share ? shareString2Json(share as string) : null;
const apiURL = new URL("api/share", siteUrl);
if (share) {
apiURL.searchParams.set("share", share);
const res = await fetch(apiURL.toString());
base64URL = await res.text();
emoji = option?.emoji || "👍";
}
return new ImageResponse(
(
<div
style={{
display: "flex",
background: "#f6f6f6",
width: "100%",
height: "100%",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
position: "relative",
}}
>
<img
style={{
position: "absolute",
top: 0,
left: 0,
width: "100%",
height: "100%",
objectFit: "cover",
objectPosition: "center",
}}
width="800"
height="471"
src={image as unknown as string}
/>
{emoji && (
<span
style={{
width: 45,
height: 45,
textAlign: "center",
lineHeight: "40px",
background: "#0a0a0b",
position: "absolute",
top: 38,
left: 305,
fontSize: 40,
fontFamily: "sans-serif",
}}
>
{emoji}
</span>
)}
{base64URL && (
<img
src={base64URL}
width="302"
height="302"
style={{
position: "absolute",
borderRadius: 8,
top: 125,
right: 150,
width: 302,
height: 302,
objectFit: "cover",
objectPosition: "center",
}}
/>
)}
</div>
),
{
width: 800,
height: 471,
},
);
}
|