Refactor font loading functions to implement caching for improved performance. The loadSiteOgFonts and loadRehberOgFonts functions now utilize promises to prevent redundant loading, enhancing efficiency. Additionally, minor adjustments were made to ensure consistent font data structure and style definitions.
All checks were successful
Deploy / deploy (push) Successful in 7m1s
All checks were successful
Deploy / deploy (push) Successful in 7m1s
This commit is contained in:
bilalgursen
216
src/lib/og-sayfa.tsx
Normal file
216
src/lib/og-sayfa.tsx
Normal file
@@ -0,0 +1,216 @@
|
||||
import { ImageResponse } from "next/og";
|
||||
import { loadRehberOgFonts } from "@/lib/og-fonts";
|
||||
|
||||
export const OG_SIZE = { width: 1200, height: 630 };
|
||||
export const OG_CONTENT_TYPE = "image/png";
|
||||
|
||||
const PIXELS: [number, number, number][] = [
|
||||
[960, 50, 0.16],
|
||||
[980, 50, 0.28],
|
||||
[1020, 50, 0.12],
|
||||
[940, 70, 0.24],
|
||||
[980, 70, 0.12],
|
||||
[1000, 70, 0.3],
|
||||
[1060, 70, 0.18],
|
||||
[960, 90, 0.12],
|
||||
[1000, 90, 0.2],
|
||||
[1040, 90, 0.1],
|
||||
[1080, 90, 0.26],
|
||||
[1080, 110, 0.14],
|
||||
[1120, 110, 0.22],
|
||||
[1140, 110, 0.12],
|
||||
[60, 490, 0.12],
|
||||
[100, 490, 0.25],
|
||||
[120, 490, 0.14],
|
||||
[40, 510, 0.24],
|
||||
[80, 510, 0.12],
|
||||
[120, 510, 0.3],
|
||||
[160, 510, 0.16],
|
||||
[60, 530, 0.14],
|
||||
[100, 530, 0.22],
|
||||
[140, 530, 0.1],
|
||||
[180, 530, 0.27],
|
||||
];
|
||||
|
||||
function baslikBoyutu(title: string): number {
|
||||
if (title.length > 70) return 44;
|
||||
if (title.length > 52) return 50;
|
||||
if (title.length > 36) return 56;
|
||||
return 62;
|
||||
}
|
||||
|
||||
/** Sayfa OG kartı — rehber kapağıyla aynı dil: eyebrow, başlık, marka. */
|
||||
export async function createOgSayfaImage(opts: {
|
||||
eyebrow: string;
|
||||
title: string;
|
||||
description?: string;
|
||||
}): Promise<ImageResponse> {
|
||||
const fonts = await loadRehberOgFonts();
|
||||
const { eyebrow, title, description } = opts;
|
||||
|
||||
return new ImageResponse(
|
||||
(
|
||||
<div
|
||||
style={{
|
||||
position: "relative",
|
||||
display: "flex",
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
overflow: "hidden",
|
||||
background: "white",
|
||||
color: "#2563eb",
|
||||
fontFamily: "Bricolage Grotesque",
|
||||
}}
|
||||
>
|
||||
{PIXELS.map(([left, top, opacity], i) => (
|
||||
<span
|
||||
key={i}
|
||||
style={{
|
||||
position: "absolute",
|
||||
display: "flex",
|
||||
left,
|
||||
top,
|
||||
width: 14,
|
||||
height: 14,
|
||||
borderRadius: 4,
|
||||
background: "#2563eb",
|
||||
opacity,
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
<span
|
||||
style={{
|
||||
position: "absolute",
|
||||
display: "flex",
|
||||
left: 1040,
|
||||
top: 50,
|
||||
width: 14,
|
||||
height: 14,
|
||||
borderRadius: 4,
|
||||
background: "#ff5a00",
|
||||
opacity: 0.8,
|
||||
}}
|
||||
/>
|
||||
<span
|
||||
style={{
|
||||
position: "absolute",
|
||||
display: "flex",
|
||||
left: 80,
|
||||
top: 530,
|
||||
width: 14,
|
||||
height: 14,
|
||||
borderRadius: 4,
|
||||
background: "#ff5a00",
|
||||
opacity: 0.8,
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
position: "absolute",
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
border: "2px solid rgba(37,99,235,0.15)",
|
||||
}}
|
||||
/>
|
||||
|
||||
<div
|
||||
style={{
|
||||
position: "relative",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "space-between",
|
||||
width: "100%",
|
||||
padding: "58px 68px 52px",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
fontFamily: "Clarity City",
|
||||
fontSize: 20,
|
||||
fontWeight: 700,
|
||||
letterSpacing: "0.18em",
|
||||
textTransform: "uppercase",
|
||||
color: "#2563eb",
|
||||
}}
|
||||
>
|
||||
<span>{eyebrow}</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
maxWidth: 980,
|
||||
gap: 18,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexWrap: "wrap",
|
||||
fontFamily: "Cal Sans",
|
||||
fontSize: baslikBoyutu(title),
|
||||
fontWeight: 400,
|
||||
lineHeight: 1.05,
|
||||
letterSpacing: "-0.025em",
|
||||
color: "#2563eb",
|
||||
}}
|
||||
>
|
||||
{title}
|
||||
</div>
|
||||
{description ? (
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
fontFamily: "Clarity City",
|
||||
fontSize: 26,
|
||||
fontWeight: 700,
|
||||
lineHeight: 1.35,
|
||||
color: "#64748b",
|
||||
maxWidth: 860,
|
||||
}}
|
||||
>
|
||||
{description}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "flex-end",
|
||||
}}
|
||||
>
|
||||
<svg
|
||||
width="38"
|
||||
height="38"
|
||||
viewBox="0 0 180 180"
|
||||
style={{ display: "flex" }}
|
||||
>
|
||||
<rect x="27" y="56" width="57" height="57" rx="13" fill="#3b82f6" />
|
||||
<rect x="91" y="29" width="56" height="56" rx="13" fill="#fdc7a7" />
|
||||
<rect x="91" y="95" width="56" height="56" rx="13" fill="#ff5a00" />
|
||||
</svg>
|
||||
<span
|
||||
style={{
|
||||
display: "flex",
|
||||
marginLeft: 2,
|
||||
fontFamily: "Bricolage Grotesque",
|
||||
fontSize: 24,
|
||||
letterSpacing: "-0.05em",
|
||||
color: "#2563eb",
|
||||
}}
|
||||
>
|
||||
<span style={{ fontWeight: 300 }}>Kolay</span>
|
||||
<span style={{ fontWeight: 600 }}>Tercih</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
{ ...OG_SIZE, fonts },
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user