atmosphere explorer
pds.ls
tool
typescript
atproto
fix og card font size
+27
-11
+27
-11
src/worker.js
+27
-11
src/worker.js
···
104
104
105
105
// Flatten JSON into an array of { depth, segments } lines
106
106
// Each segment is { text, color }
107
-
function flattenJson(value, depth, lines, key, isIndex) {
107
+
function flattenJson(value, depth, lines, key, isIndex, maxStrWidth) {
108
108
if (lines.length >= MAX_LINES) return;
109
109
110
110
const keySegs = [];
···
121
121
lines.push({ depth, segments: [...keySegs, { text: String(value), color: C.number }] });
122
122
} else if (typeof value === "string") {
123
123
const display = value.replace(/\n/g, " ");
124
-
const truncated = truncateToWidth(display, MAX_STRING_WIDTH);
124
+
const truncated = truncateToWidth(display, maxStrWidth);
125
125
lines.push({
126
126
depth,
127
127
segments: [
···
146
146
}
147
147
for (let i = 0; i < value.length; i++) {
148
148
if (lines.length >= MAX_LINES) break;
149
-
flattenJson(value[i], depth + 1, lines, `#${i}`, true);
149
+
flattenJson(value[i], depth + 1, lines, `#${i}`, true, maxStrWidth);
150
150
}
151
151
}
152
152
} else {
···
165
165
}
166
166
for (const k of keys) {
167
167
if (lines.length >= MAX_LINES) break;
168
-
flattenJson(value[k], depth + 1, lines, k, false);
168
+
flattenJson(value[k], depth + 1, lines, k, false, maxStrWidth);
169
169
}
170
170
}
171
171
}
172
172
}
173
173
174
-
function renderLine(line) {
174
+
function renderLine(line, guideMargin) {
175
175
const guides = [];
176
176
for (let i = 0; i < line.depth; i++) {
177
177
guides.push(
···
179
179
style: {
180
180
width: 1,
181
181
backgroundColor: C.guide,
182
-
marginRight: 19,
182
+
marginRight: guideMargin,
183
183
flexShrink: 0,
184
184
},
185
185
}),
···
195
195
196
196
function OgImage({ record }) {
197
197
const lines = [];
198
-
const keys = Object.keys(record);
199
-
for (const k of keys) {
198
+
for (const k of Object.keys(record)) {
200
199
if (lines.length >= MAX_LINES) break;
201
-
flattenJson(record[k], 0, lines, k, false);
200
+
flattenJson(record[k], 0, lines, k, false, MAX_STRING_WIDTH);
202
201
}
203
202
if (lines.length >= MAX_LINES) {
204
203
lines.push({ depth: 0, segments: [{ text: "…", color: C.null }] });
205
204
}
206
205
206
+
const availableHeight = 630 - 100; // height minus vertical padding
207
+
const fontSize = Math.min(32, Math.max(18, Math.floor(availableHeight / (lines.length * 1.5))));
208
+
const guideMargin = Math.round((fontSize * 19) / 18);
209
+
210
+
// Re-truncate string values if the larger font size means fewer chars fit.
211
+
// Available width: 1200 canvas - 100 padding - 80 logo area; Roboto Mono char ≈ 0.6× fontSize.
212
+
const maxStrWidth = Math.floor((1200 - 100 - 80) / (fontSize * 0.6));
213
+
if (maxStrWidth < MAX_STRING_WIDTH) {
214
+
for (const line of lines) {
215
+
for (const seg of line.segments) {
216
+
if (seg.color === C.string) {
217
+
seg.text = truncateToWidth(seg.text, maxStrWidth);
218
+
}
219
+
}
220
+
}
221
+
}
222
+
207
223
return h(
208
224
"div",
209
225
{
···
217
233
background: "#1f1f1f",
218
234
padding: "50px 50px",
219
235
fontFamily: "Roboto Mono, Noto Sans JP, Noto Sans SC, Noto Sans KR, Noto Emoji",
220
-
fontSize: 18,
236
+
fontSize,
221
237
lineHeight: 1.5,
222
238
color: "#e2e8f0",
223
239
},
···
240
256
h(
241
257
"div",
242
258
{ style: { display: "flex", flexDirection: "column", paddingRight: 80 } },
243
-
...lines.map(renderLine),
259
+
...lines.map((line) => renderLine(line, guideMargin)),
244
260
),
245
261
);
246
262
}