Update component configurations and styles: add new registry for @magicui in components.json, remove unused opengraph image files, and enhance opengraph-image.tsx with new font loading and styling adjustments. Refactor button sizes and styles in various components for improved responsiveness and visual consistency. Overall, these changes aim to streamline the application and enhance user experience.

2026-08-01 18:54:43 +03:00
parent 55eb32b22a
commit b3dd36fa72
23 changed files with 260 additions and 28 deletions
--- a/src/lib/og-fonts.ts
+++ b/src/lib/og-fonts.ts
@@ -0,0 +1,129 @@
+import { readFile } from "node:fs/promises";
+import { join } from "node:path";
+
+const OG_FONT_DIR = join(process.cwd(), "src/fonts/og");
+
+function toArrayBuffer(buf: Buffer): ArrayBuffer {
+  return buf.buffer.slice(
+    buf.byteOffset,
+    buf.byteOffset + buf.byteLength,
+  ) as ArrayBuffer;
+}
+
+async function loadFont(fileName: string): Promise<ArrayBuffer> {
+  return toArrayBuffer(await readFile(join(OG_FONT_DIR, fileName)));
+}
+
+type OgFont = {
+  name: string;
+  data: ArrayBuffer;
+  weight: 300 | 400 | 600 | 700 | 800;
+  style: "normal" | "italic";
+};
+
+/** latin + latin-ext çiftini aynı aile/ağırlıkta kaydeder (Türkçe glifler için). */
+async function latinPair(
+  name: string,
+  weight: OgFont["weight"],
+  latinFile: string,
+  latinExtFile: string,
+  style: OgFont["style"] = "normal",
+): Promise<OgFont[]> {
+  const [latin, latinExt] = await Promise.all([
+    loadFont(latinFile),
+    loadFont(latinExtFile),
+  ]);
+  return [
+    { name, data: latin, weight, style },
+    { name, data: latinExt, weight, style },
+  ];
+}
+
+/** 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"),
+  ]);
+
+  return [
+    ...bricolage,
+    {
+      name: "Clarity City",
+      data: clarityLight,
+      weight: 300,
+      style: "normal",
+    },
+    {
+      name: "Clarity City",
+      data: claritySemiBold,
+      weight: 600,
+      style: "normal",
+    },
+  ];
+}
+
+/** 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",
+    ),
+  ]);
+
+  // 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,
+  ];
+}