buildmymcpserver/apps/web/lib/og-article.tsx

import { ImageResponse } from 'next/og';

// Shared Open Graph card for /guides/* articles. Each guide directory ships a
// tiny opengraph-image.tsx that calls this with its title + tag — the design
// stays consistent and Google Discover gets a ≥1200px image per article.

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

export function articleOgImage(opts: { title: string; tag: string }): ImageResponse {
  return new ImageResponse(
    <div
      style={{
        width: '100%',
        height: '100%',
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'space-between',
        backgroundColor: '#0a0a0b',
        padding: '72px',
        fontFamily: 'sans-serif',
        position: 'relative',
      }}
    >
      {/* Indigo→cyan accent bar along the top edge */}
      <div
        style={{
          position: 'absolute',
          top: 0,
          left: 0,
          width: '1200px',
          height: '8px',
          background: 'linear-gradient(90deg, #6366f1 0%, #22d3ee 100%)',
        }}
      />

      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
          <div
            style={{
              width: '46px',
              height: '46px',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              border: '2px solid #fafafa',
              borderRadius: '9px',
              color: '#fafafa',
              fontSize: '26px',
              fontWeight: 700,
            }}
          >
            M
          </div>
          <div
            style={{
              color: '#fafafa',
              fontSize: '28px',
              fontWeight: 600,
              letterSpacing: '-0.02em',
            }}
          >
            BuildMyMCPServer
          </div>
        </div>
        <div
          style={{
            color: '#22d3ee',
            fontSize: '20px',
            textTransform: 'uppercase',
            letterSpacing: '0.18em',
            border: '1px solid #164e63',
            borderRadius: '999px',
            padding: '8px 22px',
          }}
        >
          {opts.tag}
        </div>
      </div>

      <div
        style={{
          color: '#fafafa',
          fontSize: opts.title.length > 60 ? '56px' : '66px',
          fontWeight: 700,
          lineHeight: 1.08,
          letterSpacing: '-0.03em',
          maxWidth: '1000px',
        }}
      >
        {opts.title}
      </div>

      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <div
          style={{
            display: 'flex',
            alignItems: 'center',
            gap: '11px',
            color: '#71717a',
            fontSize: '22px',
          }}
        >
          <div
            style={{
              width: '9px',
              height: '9px',
              borderRadius: '9px',
              backgroundColor: '#6366f1',
            }}
          />
          MCP guides
        </div>
        <div style={{ color: '#71717a', fontSize: '22px' }}>buildmymcpserver.com/guides</div>
      </div>
    </div>,
    { ...OG_SIZE },
  );
}