bilal/kolaytercih
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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
Details

Browse Source
This commit is contained in:
bilalgursen
2026-08-01 18:58:27 +03:00
parent b3dd36fa72
commit ff66480227
17 changed files with 601 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

176
src/lib/og-fonts.ts
View File

@@ -39,91 +39,105 @@ async function latinPair(
];
}
let siteOgFontsPromise: Promise<OgFont[]> | null = null;
let rehberOgFontsPromise: Promise<OgFont[]> | null = null;
/** Ana sayfa OG: Bricolage (marka) + ClarityCity (gövde). */
export async function loadSiteOgFonts(): Promise<OgFont[]> {
const [bricolage, clarityLight, claritySemiBold] = await Promise.all([
Promise.all([
latinPair(
"Bricolage Grotesque",
300,
"bricolage-grotesque-latin-300-normal.woff",
"bricolage-grotesque-latin-ext-300-normal.woff",
),
latinPair(
"Bricolage Grotesque",
600,
"bricolage-grotesque-latin-600-normal.woff",
"bricolage-grotesque-latin-ext-600-normal.woff",
),
]).then((pairs) => pairs.flat()),
loadFont("ClarityCity-Light.ttf"),
loadFont("ClarityCity-SemiBold.ttf"),
]);
export function loadSiteOgFonts(): Promise<OgFont[]> {
if (!siteOgFontsPromise) {
siteOgFontsPromise = (async () => {
const [bricolage, clarityLight, claritySemiBold] = await Promise.all([
Promise.all([
latinPair(
"Bricolage Grotesque",
300,
"bricolage-grotesque-latin-300-normal.woff",
"bricolage-grotesque-latin-ext-300-normal.woff",
),
latinPair(
"Bricolage Grotesque",
600,
"bricolage-grotesque-latin-600-normal.woff",
"bricolage-grotesque-latin-ext-600-normal.woff",
),
]).then((pairs) => pairs.flat()),
loadFont("ClarityCity-Light.ttf"),
loadFont("ClarityCity-SemiBold.ttf"),
]);
return [
...bricolage,
{
name: "Clarity City",
data: clarityLight,
weight: 300,
style: "normal",
},
{
name: "Clarity City",
data: claritySemiBold,
weight: 600,
style: "normal",
},
];
return [
...bricolage,
{
name: "Clarity City",
data: clarityLight,
weight: 300,
style: "normal" as const,
},
{
name: "Clarity City",
data: claritySemiBold,
weight: 600,
style: "normal" as const,
},
];
})();
}
return siteOgFontsPromise;
}
/** Rehber kapak OG: ClarityCity + Cal Sans + Bricolage. */
export async function loadRehberOgFonts(): Promise<OgFont[]> {
const [clarityBold, calSans, light, semiBold, extraBold] = await Promise.all([
loadFont("ClarityCity-Bold.ttf"),
latinPair(
"Cal Sans",
400,
"cal-sans-latin-400-normal.woff",
"cal-sans-latin-ext-400-normal.woff",
),
latinPair(
"Bricolage Grotesque",
300,
"bricolage-grotesque-latin-300-normal.woff",
"bricolage-grotesque-latin-ext-300-normal.woff",
),
latinPair(
"Bricolage Grotesque",
600,
"bricolage-grotesque-latin-600-normal.woff",
"bricolage-grotesque-latin-ext-600-normal.woff",
),
latinPair(
"Bricolage Grotesque",
800,
"bricolage-grotesque-latin-800-normal.woff",
"bricolage-grotesque-latin-ext-800-normal.woff",
),
]);
/** Rehber / sayfa OG: ClarityCity + Cal Sans + Bricolage. */
export function loadRehberOgFonts(): Promise<OgFont[]> {
if (!rehberOgFontsPromise) {
rehberOgFontsPromise = (async () => {
const [clarityBold, calSans, light, semiBold, extraBold] =
await Promise.all([
loadFont("ClarityCity-Bold.ttf"),
latinPair(
"Cal Sans",
400,
"cal-sans-latin-400-normal.woff",
"cal-sans-latin-ext-400-normal.woff",
),
latinPair(
"Bricolage Grotesque",
300,
"bricolage-grotesque-latin-300-normal.woff",
"bricolage-grotesque-latin-ext-300-normal.woff",
),
latinPair(
"Bricolage Grotesque",
600,
"bricolage-grotesque-latin-600-normal.woff",
"bricolage-grotesque-latin-ext-600-normal.woff",
),
latinPair(
"Bricolage Grotesque",
800,
"bricolage-grotesque-latin-800-normal.woff",
"bricolage-grotesque-latin-ext-800-normal.woff",
),
]);
// Sitede italic kullanılıyor; ayrı italic dosya yok — aynı kesimi italic olarak kaydet.
const extraBoldItalic = extraBold.map((font) => ({
...font,
style: "italic" as const,
}));
// Sitede italic kullanılıyor; ayrı italic dosya yok — aynı kesimi italic olarak kaydet.
const extraBoldItalic = extraBold.map((font) => ({
...font,
style: "italic" as const,
}));
return [
{
name: "Clarity City",
data: clarityBold,
weight: 700,
style: "normal",
},
...calSans,
...light,
...semiBold,
...extraBold,
...extraBoldItalic,
];
return [
{
name: "Clarity City",
data: clarityBold,
weight: 700,
style: "normal" as const,
},
...calSans,
...light,
...semiBold,
...extraBold,
...extraBoldItalic,
];
})();
}
return rehberOgFontsPromise;
}

216
src/lib/og-sayfa.tsx Normal file
View 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 },
);
}