Something went wrong. Try again.
A social knowledge tool for research trails, built on ATProto semble.so
research-tool social-network tools-for-thought atproto
Something went wrong. Try again.
2.7 kB · 89 lines
TSX
at development
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990import { BG_IMAGE_BASE_64, loadGoogleFont } from '../../lib/utils';import { ImageResponse } from 'next/og';
interface Props { children: React.ReactElement;}
export const size = { width: 1200, height: 630,};
export const contentType = 'image/png';
export default async function OpenGraphCard(props: Props) { return new ImageResponse( ( <div style={{ width: '100%', height: '100%', backgroundImage: `url(${BG_IMAGE_BASE_64})`, backgroundSize: `${size.width} ${size.height}`, backgroundPosition: 'top left', display: 'flex', flexDirection: 'column', alignItems: 'flex-start', justifyContent: 'space-between', padding: '30px', fontFamily: 'Hanken Grotesk', }} > <svg width="70" height="97.5" viewBox="0 0 32 43" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M31.0164 33.1306C31.0164 38.581 25.7882 42.9994 15.8607 42.9994C5.93311 42.9994 0 37.5236 0 32.0732C0 26.6228 5.93311 23.2617 15.8607 23.2617C25.7882 23.2617 31.0164 27.6802 31.0164 33.1306Z" fill="#FF6400" /> <path d="M25.7295 19.3862C25.7295 22.5007 20.7964 22.2058 15.1558 22.2058C9.51511 22.2058 4.93445 22.1482 4.93445 19.0337C4.93445 15.9192 9.71537 12.6895 15.356 12.6895C20.9967 12.6895 25.7295 16.2717 25.7295 19.3862Z" fill="#FF6400" /> <path d="M25.0246 10.9256C25.0246 14.0401 20.7964 11.9829 15.1557 11.9829C9.51506 11.9829 6.34424 13.6876 6.34424 10.5731C6.34424 7.45857 9.51506 5.63867 15.1557 5.63867C20.7964 5.63867 25.0246 7.81103 25.0246 10.9256Z" fill="#FF6400" /> <path d="M20.4426 3.5755C20.4426 5.8323 18.2088 4.22951 15.2288 4.22951C12.2489 4.22951 10.5737 5.8323 10.5737 3.5755C10.5737 1.31871 12.2489 0 15.2288 0C18.2088 0 20.4426 1.31871 20.4426 3.5755Z" fill="#FF6400" /> </svg>
<div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', width: '100%', }} > {props.children} <p style={{ fontSize: '40px', lineHeight: '20px', color: '#1F6144', }} > semble.so </p> </div> </div> ), { fonts: [ { name: 'Hanken Grotesk', data: await loadGoogleFont('Hanken Grotesk'), style: 'normal', }, ], }, );}