A social knowledge tool for researchers built on ATProto
cosmik.network
1import { BG_IMAGE_BASE_64, loadGoogleFont } from '../../lib/utils';
2import { ImageResponse } from 'next/og';
3
4interface Props {
5 children: React.ReactElement;
6}
7
8export const size = {
9 width: 1200,
10 height: 630,
11};
12
13export const contentType = 'image/png';
14
15export default async function OpenGraphCard(props: Props) {
16 return new ImageResponse(
17 (
18 <div
19 style={{
20 width: '100%',
21 height: '100%',
22 backgroundImage: `url(${BG_IMAGE_BASE_64})`,
23 backgroundSize: `${size.width} ${size.height}`,
24 backgroundPosition: 'top left',
25 display: 'flex',
26 flexDirection: 'column',
27 alignItems: 'flex-start',
28 justifyContent: 'space-between',
29 padding: '30px',
30 fontFamily: 'Hanken Grotesk',
31 }}
32 >
33 <svg
34 width="70"
35 height="97.5"
36 viewBox="0 0 32 43"
37 fill="none"
38 xmlns="http://www.w3.org/2000/svg"
39 >
40 <path
41 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"
42 fill="#FF6400"
43 />
44 <path
45 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"
46 fill="#FF6400"
47 />
48 <path
49 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"
50 fill="#FF6400"
51 />
52 <path
53 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"
54 fill="#FF6400"
55 />
56 </svg>
57
58 <div
59 style={{
60 display: 'flex',
61 alignItems: 'flex-end',
62 justifyContent: 'space-between',
63 width: '100%',
64 }}
65 >
66 {props.children}
67 <p
68 style={{
69 fontSize: '40px',
70 lineHeight: '20px',
71 color: '#1F6144',
72 }}
73 >
74 semble.so
75 </p>
76 </div>
77 </div>
78 ),
79 {
80 fonts: [
81 {
82 name: 'Hanken Grotesk',
83 data: await loadGoogleFont('Hanken Grotesk'),
84 style: 'normal',
85 },
86 ],
87 },
88 );
89}