BarevClub/apps/landing/lib/og.tsx

import { readFile } from 'node:fs/promises';
import path from 'node:path';
import { ImageResponse } from 'next/og';

export const OG_SIZE = { width: 1200, height: 630 };

/**
 * Шрифты лежат в apps/landing/assets: Rubik — латиница и кириллица,
 * Noto Sans Armenian — армянский (без него вместо букв были квадраты). Китайский Next догружает сам.
 */
async function fonts() {
  const dir = path.join(process.cwd(), 'assets');
  const [rubik, armenian] = await Promise.all([readFile(path.join(dir, 'Rubik-ExtraBold.ttf')), readFile(path.join(dir, 'NotoSansArmenian-Bold.ttf'))]);
  return [
    { name: 'Rubik', data: rubik, weight: 800 as const, style: 'normal' as const },
    { name: 'Noto Sans Armenian', data: armenian, weight: 700 as const, style: 'normal' as const },
  ];
}

/** OG-картинка в цветах тёмной главной: заголовок страницы, домен и полоски четырёх направлений */
export async function ogImage(title: string) {
  return new ImageResponse(
    (
      <div style={{ width: '100%', height: '100%', background: '#4A1028', display: 'flex', flexDirection: 'column', justifyContent: 'space-between', padding: 72, color: '#FBF6EE', fontFamily: 'Rubik, "Noto Sans Armenian"' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 16, fontSize: 40, color: '#F6C3D3' }}>
          <svg width="52" height="52" viewBox="0 0 24 24" fill="none" stroke="#F6C3D3" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
            <path d="M12 21.5a9.5 9.5 0 1 0 0-19 9.5 9.5 0 0 0 0 19zM8 12.5l2.6 2.6L16 9.5" />
          </svg>
          Barev Club
        </div>
        <div style={{ display: 'flex', fontSize: title.length > 40 ? 64 : 80, lineHeight: 1.05, letterSpacing: -2, maxWidth: 1000 }}>{title}</div>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <div style={{ display: 'flex', gap: 14 }}>
            {['#A8C38A', '#F9CDB0', '#CFC8F5', '#F7DA6E'].map((c) => (
              <div key={c} style={{ width: 110, height: 32, borderRadius: 999, background: c }} />
            ))}
          </div>
          <div style={{ fontSize: 30, color: '#F6C3D3' }}>barevclub.com</div>
        </div>
      </div>
    ),
    { ...OG_SIZE, fonts: await fonts() },
  );
}