margin.at
Write on the margins of the internet. Powered by the AT Protocol.
margin.at
extension
web
atproto
comments
scanash.com
make frontend serve independent from backend and handle OG image generation in frontend for good
1#!/usr/bin/env node
2
3/**
4 * OG Image Preview Generator
5 *
6 * Usage:
7 * node tools/preview-og.mjs # generates all sample types
8 * node tools/preview-og.mjs --uri at://did/col/rkey # fetches real data from running backend
9 */
10
11import satori from "satori";
12import { Resvg } from "@resvg/resvg-js";
13import { readFileSync, writeFileSync, mkdirSync } from "node:fs";
14import { join, dirname } from "node:path";
15import { fileURLToPath } from "node:url";
16import { execSync } from "node:child_process";
17
18const __dirname = dirname(fileURLToPath(import.meta.url));
19const ROOT = join(__dirname, "..");
20
21const fontsDir = join(ROOT, "public", "fonts");
22const regular = readFileSync(join(fontsDir, "Inter-Regular.ttf"));
23const bold = readFileSync(join(fontsDir, "Inter-Bold.ttf"));
24
25let logoDataURI = "";
26try {
27 const buf = readFileSync(join(ROOT, "public", "logo.svg"));
28 logoDataURI = `data:image/svg+xml;base64,${buf.toString("base64")}`;
29} catch {}
30
31const outDir = join(ROOT, "tools", "og-preview");
32mkdirSync(outDir, { recursive: true });
33
34function truncate(str, max) {
35 if (str.length <= max) return str;
36 return str.slice(0, max - 3) + "...";
37}
38
39function wrapCard(children) {
40 return {
41 type: "div",
42 props: {
43 style: {
44 display: "flex",
45 width: "100%",
46 height: "100%",
47 background: "#09090b",
48 padding: 40,
49 fontFamily: "Inter",
50 },
51 children: [
52 {
53 type: "div",
54 props: {
55 style: {
56 display: "flex",
57 flexDirection: "column",
58 width: "100%",
59 height: "100%",
60 padding: "52px 56px",
61 border: "1px solid #27272a",
62 borderRadius: 24,
63 borderTop: `3px solid ${children.__accent || "#3b82f6"}`,
64 background: "#18181b",
65 overflow: "hidden",
66 },
67 children,
68 },
69 },
70 ],
71 },
72 };
73}
74
75function avatarCircle(author, size = 48) {
76 const letter =
77 author[0] === "@"
78 ? (author[1] || "?").toUpperCase()
79 : (author[0] || "?").toUpperCase();
80 return {
81 type: "div",
82 props: {
83 style: {
84 width: size,
85 height: size,
86 borderRadius: size / 2,
87 background: "#3b82f6",
88 display: "flex",
89 alignItems: "center",
90 justifyContent: "center",
91 color: "white",
92 fontSize: Math.round(size * 0.45),
93 fontWeight: 700,
94 },
95 children: letter,
96 },
97 };
98}
99
100const typeColors = {
101 annotation: {
102 accent: "#3b82f6",
103 badge: "#1e3a8a",
104 badgeText: "#60a5fa",
105 bar: "#60a5fa",
106 },
107 highlight: {
108 accent: "#eab308",
109 badge: "#422006",
110 badgeText: "#facc15",
111 bar: "#facc15",
112 },
113 bookmark: {
114 accent: "#22c55e",
115 badge: "#052e16",
116 badgeText: "#4ade80",
117 bar: "#4ade80",
118 },
119};
120
121function getTypeColor(type) {
122 return typeColors[type] || typeColors.annotation;
123}
124
125function typeBadge(type) {
126 const labels = {
127 annotation: "Annotation",
128 highlight: "Highlight",
129 bookmark: "Bookmark",
130 };
131 const c = getTypeColor(type);
132 return {
133 type: "div",
134 props: {
135 style: {
136 padding: "6px 16px",
137 borderRadius: 99,
138 background: c.badge,
139 color: c.badgeText,
140 fontSize: 16,
141 fontWeight: 600,
142 },
143 children: labels[type] || type,
144 },
145 };
146}
147
148function marginBrand() {
149 if (!logoDataURI) return null;
150 return {
151 type: "div",
152 props: {
153 style: {
154 display: "flex",
155 alignItems: "center",
156 marginLeft: "auto",
157 },
158 children: [
159 {
160 type: "img",
161 props: { src: logoDataURI, width: 28, height: 24 },
162 },
163 ],
164 },
165 };
166}
167
168function buildAnnotationImage(data) {
169 const children = [];
170 const tc = getTypeColor(data.type || "annotation");
171
172 children.push({
173 type: "div",
174 props: {
175 style: { display: "flex", alignItems: "center", width: "100%" },
176 children: [
177 data.avatarURL
178 ? {
179 type: "img",
180 props: {
181 src: data.avatarURL,
182 width: 48,
183 height: 48,
184 style: { borderRadius: 24 },
185 },
186 }
187 : avatarCircle(data.author, 48),
188 {
189 type: "span",
190 props: {
191 style: { color: "#a1a1aa", fontSize: 22, marginLeft: 14 },
192 children: data.author,
193 },
194 },
195 {
196 type: "div",
197 props: {
198 style: { marginLeft: "auto", display: "flex" },
199 children: [typeBadge(data.type || "annotation")],
200 },
201 },
202 ],
203 },
204 });
205
206 if (data.text) {
207 children.push({
208 type: "div",
209 props: {
210 style: {
211 color: "#fafafa",
212 fontSize: data.text.length > 200 ? 26 : 32,
213 lineHeight: 1.45,
214 marginTop: 32,
215 overflow: "hidden",
216 },
217 children: truncate(data.text, 300),
218 },
219 });
220 }
221
222 if (data.quote) {
223 children.push({
224 type: "div",
225 props: {
226 style: { display: "flex", marginTop: 24 },
227 children: [
228 {
229 type: "div",
230 props: {
231 style: {
232 width: 4,
233 borderRadius: 2,
234 background: tc.bar,
235 flexShrink: 0,
236 },
237 },
238 },
239 {
240 type: "div",
241 props: {
242 style: {
243 color: "#a1a1aa",
244 fontSize: data.quote.length > 150 ? 22 : 26,
245 lineHeight: 1.5,
246 paddingLeft: 18,
247 fontStyle: "italic",
248 overflow: "hidden",
249 },
250 children: `"${truncate(data.quote, 250)}"`,
251 },
252 },
253 ],
254 },
255 });
256 }
257
258 const footerChildren = [];
259 if (data.source)
260 footerChildren.push({
261 type: "span",
262 props: {
263 style: { color: "#71717a", fontSize: 20 },
264 children: data.source,
265 },
266 });
267 footerChildren.push(marginBrand());
268 children.push({
269 type: "div",
270 props: {
271 style: {
272 display: "flex",
273 alignItems: "center",
274 marginTop: "auto",
275 paddingTop: 28,
276 borderTop: "1px solid #27272a",
277 },
278 children: footerChildren,
279 },
280 });
281
282 children.__accent = tc.accent;
283 return wrapCard(children);
284}
285
286function buildBookmarkImage(data) {
287 const children = [];
288 const tc = getTypeColor("bookmark");
289
290 children.push({
291 type: "div",
292 props: {
293 style: { display: "flex", alignItems: "center", width: "100%" },
294 children: [
295 {
296 type: "div",
297 props: {
298 style: { display: "flex", alignItems: "center", gap: 10 },
299 children: [
300 {
301 type: "div",
302 props: {
303 style: {
304 width: 36,
305 height: 36,
306 borderRadius: 10,
307 background: "#052e16",
308 display: "flex",
309 alignItems: "center",
310 justifyContent: "center",
311 },
312 children: {
313 type: "div",
314 props: {
315 style: {
316 fontSize: 18,
317 color: "#4ade80",
318 fontWeight: 700,
319 },
320 children: "🔗",
321 },
322 },
323 },
324 },
325 {
326 type: "span",
327 props: {
328 style: { color: "#71717a", fontSize: 20 },
329 children: data.source || "Saved page",
330 },
331 },
332 ],
333 },
334 },
335 {
336 type: "div",
337 props: {
338 style: { marginLeft: "auto", display: "flex" },
339 children: [typeBadge("bookmark")],
340 },
341 },
342 ],
343 },
344 });
345
346 children.push({
347 type: "div",
348 props: {
349 style: {
350 color: "#fafafa",
351 fontSize: (data.text?.length || 0) > 60 ? 36 : 44,
352 fontWeight: 700,
353 lineHeight: 1.3,
354 marginTop: 36,
355 overflow: "hidden",
356 },
357 children: truncate(data.text || "Untitled Bookmark", 100),
358 },
359 });
360
361 if (data.quote) {
362 children.push({
363 type: "div",
364 props: {
365 style: {
366 color: "#a1a1aa",
367 fontSize: 24,
368 lineHeight: 1.5,
369 marginTop: 20,
370 overflow: "hidden",
371 },
372 children: truncate(data.quote, 200),
373 },
374 });
375 }
376
377 const authorChildren = [
378 avatarCircle(data.author, 36),
379 {
380 type: "span",
381 props: {
382 style: { color: "#71717a", fontSize: 20, marginLeft: 12 },
383 children: data.author,
384 },
385 },
386 ];
387 children.push({
388 type: "div",
389 props: {
390 style: {
391 display: "flex",
392 alignItems: "center",
393 marginTop: "auto",
394 paddingTop: 28,
395 borderTop: "1px solid #27272a",
396 },
397 children: [
398 {
399 type: "div",
400 props: {
401 style: { display: "flex", alignItems: "center" },
402 children: authorChildren,
403 },
404 },
405 marginBrand(),
406 ],
407 },
408 });
409
410 children.__accent = tc.accent;
411 return wrapCard(children);
412}
413
414function buildCollectionImage(data) {
415 const children = [];
416 children.push({
417 type: "div",
418 props: {
419 style: { display: "flex", alignItems: "center", gap: 18 },
420 children: [
421 {
422 type: "span",
423 props: { style: { fontSize: 64 }, children: data.icon },
424 },
425 {
426 type: "span",
427 props: {
428 style: {
429 color: "#fafafa",
430 fontSize: 48,
431 fontWeight: 700,
432 overflow: "hidden",
433 },
434 children: truncate(data.title, 40),
435 },
436 },
437 ],
438 },
439 });
440
441 children.push({
442 type: "div",
443 props: {
444 style: {
445 color: data.description ? "#a1a1aa" : "#71717a",
446 fontSize: 26,
447 lineHeight: 1.5,
448 marginTop: 24,
449 overflow: "hidden",
450 },
451 children: data.description
452 ? truncate(data.description, 200)
453 : "A collection on Margin",
454 },
455 });
456
457 const authorChildren = [
458 avatarCircle(data.author, 36),
459 {
460 type: "span",
461 props: {
462 style: { color: "#71717a", fontSize: 20, marginLeft: 12 },
463 children: data.author,
464 },
465 },
466 ];
467 const footerChildren = [
468 {
469 type: "div",
470 props: {
471 style: { display: "flex", alignItems: "center" },
472 children: authorChildren,
473 },
474 },
475 ];
476 footerChildren.push(marginBrand());
477
478 children.push({
479 type: "div",
480 props: {
481 style: {
482 display: "flex",
483 alignItems: "center",
484 marginTop: "auto",
485 paddingTop: 28,
486 borderTop: "1px solid #27272a",
487 },
488 children: footerChildren,
489 },
490 });
491
492 return wrapCard(children);
493}
494
495async function renderPNG(element, filename) {
496 const svg = await satori(element, {
497 width: 1200,
498 height: 630,
499 fonts: [
500 { name: "Inter", data: regular.buffer, weight: 400, style: "normal" },
501 { name: "Inter", data: bold.buffer, weight: 700, style: "normal" },
502 ],
503 loadAdditionalAsset: async (code, segment) => {
504 if (code === "emoji") {
505 const codepoints = [...segment]
506 .map((c) => c.codePointAt(0).toString(16))
507 .join("-");
508 const url = `https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/${codepoints}.svg`;
509 try {
510 const res = await fetch(url);
511 if (res.ok)
512 return `data:image/svg+xml,${encodeURIComponent(await res.text())}`;
513 } catch {}
514 }
515 return "";
516 },
517 });
518
519 const resvg = new Resvg(svg, { fitTo: { mode: "width", value: 1200 } });
520 const png = resvg.render().asPng();
521 const out = join(outDir, filename);
522 writeFileSync(out, png);
523 console.log(` ✓ ${out}`);
524 return out;
525}
526
527const samples = [
528 {
529 name: "annotation.png",
530 builder: buildAnnotationImage,
531 data: {
532 type: "annotation",
533 author: "@alice.bsky.social",
534 avatarURL: "",
535 text: "This is a really insightful point about decentralized identity. The AT Protocol's approach to portable accounts changes everything.",
536 quote:
537 "Users should own their data and be able to move between services without losing their identity or social graph.",
538 source: "atproto.com",
539 },
540 },
541 {
542 name: "highlight.png",
543 builder: buildAnnotationImage,
544 data: {
545 type: "highlight",
546 author: "@bob.bsky.social",
547 avatarURL: "",
548 text: "",
549 quote:
550 "The web annotation data model provides a framework for sharing annotations across different platforms, creating an interoperable layer of user-generated metadata on top of existing web content.",
551 source: "w3.org",
552 },
553 },
554 {
555 name: "bookmark.png",
556 builder: buildBookmarkImage,
557 data: {
558 type: "bookmark",
559 author: "@carol.bsky.social",
560 avatarURL: "",
561 text: "How to Build a Chrome Extension with React and TypeScript",
562 quote:
563 "A comprehensive guide covering manifest v3, content scripts, popup pages, and background workers.",
564 source: "dev.to",
565 },
566 },
567 {
568 name: "collection.png",
569 builder: buildCollectionImage,
570 data: {
571 author: "@dave.bsky.social",
572 avatarURL: "",
573 title: "Web Standards",
574 icon: "🌍",
575 description:
576 "Articles and specs about W3C web standards, accessibility, and the open web platform.",
577 },
578 },
579 {
580 name: "collection-minimal.png",
581 builder: buildCollectionImage,
582 data: {
583 author: "@eve.bsky.social",
584 avatarURL: "",
585 title: "Reading List",
586 icon: "📚",
587 description: "",
588 },
589 },
590];
591
592const args = process.argv.slice(2);
593const uriArg = args.find(
594 (a) => a.startsWith("--uri=") || args[args.indexOf("--uri") + 1],
595);
596const uri = uriArg?.startsWith("--uri=")
597 ? uriArg.slice(6)
598 : args[args.indexOf("--uri") + 1];
599
600if (uri) {
601 const apiURL = process.env.API_URL || "http://localhost:8081";
602 console.log(`Fetching ${uri} from ${apiURL}...`);
603
604 let data = null;
605
606 try {
607 const res = await fetch(
608 `${apiURL}/api/annotation?uri=${encodeURIComponent(uri)}`,
609 );
610 if (res.ok) {
611 const item = await res.json();
612 const author = item.author || item.creator || {};
613 const handle = author.handle
614 ? `@${author.handle}`
615 : author.did || "someone";
616 const targetSource = item.target?.source || item.url || item.source || "";
617 const domain = targetSource
618 ? (() => {
619 try {
620 return new URL(targetSource).host;
621 } catch {
622 return "";
623 }
624 })()
625 : "";
626 data = {
627 author: handle,
628 avatarURL: author.avatar || "",
629 text: item.body || item.bodyValue || item.text || item.title || "",
630 quote:
631 item.target?.selector?.exact ||
632 item.selector?.exact ||
633 item.description ||
634 "",
635 source: domain,
636 };
637 }
638 } catch {}
639
640 if (!data) {
641 try {
642 const res = await fetch(
643 `${apiURL}/api/collection?uri=${encodeURIComponent(uri)}`,
644 );
645 if (res.ok) {
646 const item = await res.json();
647 const author = item.author || item.creator || {};
648 data = {
649 type: "collection",
650 author: author.handle ? `@${author.handle}` : author.did || "someone",
651 avatarURL: author.avatar || "",
652 title: item.name || "Collection",
653 icon: item.icon || "📁",
654 description: item.description || "",
655 };
656 }
657 } catch {}
658 }
659
660 if (!data) {
661 console.error("Could not fetch record for URI:", uri);
662 process.exit(1);
663 }
664
665 const element =
666 data.type === "collection"
667 ? buildCollectionImage(data)
668 : buildAnnotationImage(data);
669 const file = await renderPNG(element, "live-preview.png");
670 tryOpen(file);
671} else {
672 console.log("Generating OG image previews...\n");
673 let lastFile;
674 for (const s of samples) {
675 lastFile = await renderPNG(s.builder(s.data), s.name);
676 }
677 console.log(`\nDone! Files in ${outDir}`);
678 tryOpen(outDir);
679}
680
681function tryOpen(path) {
682 try {
683 execSync(`open "${path}"`, { stdio: "ignore" });
684 } catch {}
685}