Skip to content

Commit 8d98e37

Browse files
JeanneGrenetJeanneGrenet
authored
feat : D-1 announcement asstets : linkedin and insta (#444)
1 parent 7a7365d commit 8d98e37

File tree

4 files changed

+499
-0
lines changed

4 files changed

+499
-0
lines changed

‎src/generated-assets/components/RoundedSpeakers.tsx‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
export const RoundedSpeakers = (props: { speakerImages: string[] }) => {
2+
return (
3+
<div style={{ display: "flex" }}>
4+
{props.speakerImages.map((image, index) => (
5+
<img
6+
src={image}
7+
style={{
8+
borderRadius: 100,
9+
width: 80,
10+
height: 80,
11+
marginLeft: index === 0 ? 0 : -25,
12+
border: "solid 4px black",
13+
}}
14+
/>
15+
))}
16+
</div>
17+
);
18+
};

‎src/pages/events/[id]/assets/_d-1-announcement-insta.tsx‎

Lines changed: 247 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,247 @@
1+
import { Frame } from "@/generated-assets/components/Frame";
2+
import {
3+
getAstroImageBase64,
4+
type AssetImageConfig,
5+
} from "@/generated-assets/image";
6+
import { BgImage } from "@/generated-assets/components/BgImage";
7+
import { COLORS } from "@/generated-assets/theme";
8+
import { getEventDisplayDate } from "@/lib/events";
9+
import { getEventData } from "./_utils";
10+
import { LogoWithFriends } from "@/generated-assets/components/LogoWithFriends";
11+
import { RoundedSpeakers } from "@/generated-assets/components/RoundedSpeakers";
12+
import type { ImageMetadata } from "astro";
13+
14+
export const config: AssetImageConfig = {
15+
width: 1080,
16+
height: 1350,
17+
};
18+
19+
export function d1announcementInsta(options: {
20+
width: number;
21+
height: number;
22+
}) {
23+
return async ({ params }: { params: { id: string } }) => {
24+
const event = await getEventData(params.id);
25+
const postCover = await getAstroImageBase64(event.data.image.media);
26+
const coOrganizersLogos = await Promise.all(
27+
event.__coOrganizers.map(
28+
async (coOrganiser) =>
29+
await getAstroImageBase64(coOrganiser.data.logos.noBgSquare),
30+
),
31+
);
32+
33+
const speakerImages = await Promise.all(
34+
event.data._computed.speakers
35+
.filter(
36+
(s): s is typeof s & { data: { avatar: ImageMetadata } } =>
37+
s.data.avatar != null,
38+
)
39+
.slice(0, 3)
40+
.map((s) => getAstroImageBase64(s.data.avatar)),
41+
);
42+
43+
return (
44+
<Frame {...options} style={{ padding: 96 }}>
45+
<BgImage
46+
src={postCover}
47+
width={options.width}
48+
height={options.height}
49+
/>
50+
51+
<div
52+
style={{
53+
zIndex: 100,
54+
flex: 1,
55+
display: "flex",
56+
flexDirection: "column",
57+
gap: 40,
58+
width: "100%",
59+
justifyContent: "space-between",
60+
}}
61+
>
62+
<LogoWithFriends logos={coOrganizersLogos} />
63+
<div
64+
style={{
65+
display: "flex",
66+
flexDirection: "column",
67+
gap: 24,
68+
}}
69+
>
70+
<div
71+
style={{
72+
display: "flex",
73+
alignItems: "center",
74+
gap: 24,
75+
}}
76+
>
77+
<div
78+
style={{
79+
display: "flex",
80+
fontSize: 192,
81+
fontWeight: 500,
82+
lineHeight: 1,
83+
color: COLORS.primary,
84+
}}
85+
>
86+
01
87+
</div>
88+
<div
89+
style={{
90+
display: "flex",
91+
flexDirection: "column",
92+
}}
93+
>
94+
<div
95+
style={{
96+
display: "flex",
97+
fontSize: 76,
98+
fontWeight: 500,
99+
lineHeight: 1,
100+
color: COLORS.primary,
101+
textTransform: "uppercase",
102+
}}
103+
>
104+
Days left
105+
</div>
106+
<div
107+
style={{
108+
display: "flex",
109+
fontSize: 76,
110+
fontWeight: 500,
111+
lineHeight: 1,
112+
color: COLORS.white,
113+
textTransform: "uppercase",
114+
}}
115+
>
116+
Until the event
117+
</div>
118+
</div>
119+
</div>
120+
<div
121+
style={{
122+
display: "flex",
123+
flexDirection: "column",
124+
fontSize: 44,
125+
fontWeight: 500,
126+
lineHeight: 1,
127+
textTransform: "uppercase",
128+
opacity: 0.8,
129+
}}
130+
>
131+
<div style={{ display: "flex", gap: 12, alignItems: "center" }}>
132+
<RoundedSpeakers speakerImages={speakerImages} />
133+
<div style={{ display: "flex", height: "fit-content" }}>
134+
Join us to meet 100+ people
135+
</div>
136+
</div>
137+
<div style={{ display: "flex" }}>
138+
sharing real-life experiences
139+
</div>
140+
</div>
141+
</div>
142+
<div
143+
style={{
144+
display: "flex",
145+
flexDirection: "column",
146+
flexWrap: "wrap",
147+
gap: 12,
148+
}}
149+
>
150+
<div
151+
style={{
152+
display: "flex",
153+
alignItems: "center",
154+
gap: 12,
155+
fontSize: 40,
156+
fontWeight: 500,
157+
lineHeight: 1,
158+
}}
159+
>
160+
<svg
161+
viewBox="0 0 24 24"
162+
style={{
163+
flex: "none",
164+
opacity: 0.6,
165+
width: "1em",
166+
height: "1em",
167+
}}
168+
>
169+
<path
170+
fill="currentColor"
171+
d="M19 19H5V8h14m-3-7v2H8V1H6v2H5c-1.11 0-2 .89-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2h-1V1m-1 11h-5v5h5z"
172+
/>
173+
</svg>
174+
{getEventDisplayDate(event)}
175+
</div>
176+
177+
{!!event.data.location?.name && (
178+
<div
179+
style={{
180+
display: "flex",
181+
gap: 12,
182+
alignItems: "center",
183+
fontSize: 40,
184+
fontWeight: 500,
185+
lineHeight: 1.2,
186+
textWrap: "balance",
187+
}}
188+
>
189+
<svg
190+
viewBox="0 0 24 24"
191+
style={{
192+
flex: "none",
193+
opacity: 0.6,
194+
width: "1em",
195+
height: "1em",
196+
}}
197+
>
198+
<path
199+
fill="currentColor"
200+
d="M12 11.5A2.5 2.5 0 0 1 9.5 9A2.5 2.5 0 0 1 12 6.5A2.5 2.5 0 0 1 14.5 9a2.5 2.5 0 0 1-2.5 2.5M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7"
201+
/>
202+
</svg>
203+
{event.data.location.name}
204+
</div>
205+
)}
206+
</div>
207+
208+
<div
209+
style={{
210+
display: "flex",
211+
justifyContent: "space-between",
212+
alignItems: "flex-end",
213+
}}
214+
>
215+
<div
216+
style={{
217+
display: "flex",
218+
fontSize: 26,
219+
fontWeight: 500,
220+
lineHeight: 1.2,
221+
textTransform: "uppercase",
222+
opacity: 0.6,
223+
}}
224+
>
225+
{event.data._computed.city?.data.name},{" "}
226+
{event.data._computed.country?.data.name}
227+
</div>
228+
<div
229+
style={{
230+
display: "flex",
231+
fontSize: 26,
232+
fontWeight: 500,
233+
lineHeight: 1.2,
234+
textTransform: "uppercase",
235+
opacity: 0.6,
236+
}}
237+
>
238+
www.forkit.community
239+
</div>
240+
</div>
241+
</div>
242+
</Frame>
243+
);
244+
};
245+
}
246+
247+
export default d1announcementInsta(config);

0 commit comments

Comments
 (0)