Skip to content

Commit d7fd66e

Browse files
codercatdevcodercatdev
committed
fix(site): inline InfiniteContentGrid script, fix author/guest Load More & diagram label overlap
1 parent 3a52999 commit d7fd66e

7 files changed

Lines changed: 391 additions & 234 deletions

File tree

‎apps/site/src/components/ExcalidrawDiagram.astro‎

Lines changed: 81 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -226,11 +226,12 @@ const resolved =
226226
const nodes = resolved.nodes;
227227
const edges = resolved.edges;
228228
const count = Math.max(nodes.length, 1);
229-
const svgWidth = Math.max(count * 248, 740);
230-
const svgHeight = compact ? 204 : 234;
231-
const boxW = 192;
232-
const boxH = 96;
233-
const boxY = Math.round((svgHeight - boxH) / 2) + 8;
229+
const stepSpan = 336;
230+
const svgWidth = Math.max(count * stepSpan, 1008);
231+
const svgHeight = compact ? 236 : 264;
232+
const boxW = 248;
233+
const boxH = 104;
234+
const boxY = Math.round((svgHeight - boxH) / 2) - 8;
234235
235236
const uid = `diagram-${Math.random().toString(36).slice(2, 9)}`;
236237
const a11ySummary = nodes
@@ -292,16 +293,13 @@ const a11ySummary = nodes
292293
</pattern>
293294
</defs>
294295

296+
{/* Layer 1: Node Boxes */}
295297
{
296298
nodes.map((node, index) => {
297-
const stepSpan = svgWidth / count;
298299
const x = Math.round(index * stepSpan + (stepSpan - boxW) / 2);
299300
const y = boxY + (index % 2 === 0 ? -4 : 6);
300301
const colorKey = node.color ?? PALETTE_CYCLE[index % PALETTE_CYCLE.length];
301302
const palette = COLOR_MAP[colorKey];
302-
const nextX = Math.round((index + 1) * stepSpan + (stepSpan - boxW) / 2);
303-
const nextY = boxY + ((index + 1) % 2 === 0 ? -4 : 6);
304-
const edge = edges[index];
305303
const isBad = colorKey === "red" || node.status === "bad";
306304
const isGood =
307305
colorKey === "green" ||
@@ -311,39 +309,6 @@ const a11ySummary = nodes
311309

312310
return (
313311
<g>
314-
{/* Sketchy Arrow to Next Node */}
315-
{index < nodes.length - 1 && (
316-
<g>
317-
<path
318-
d={`M ${x + boxW + 4} ${y + boxH / 2} C ${x + boxW + 28} ${y + boxH / 2 - 22}, ${nextX - 28} ${nextY + boxH / 2 - 22}, ${nextX - 8} ${nextY + boxH / 2}`}
319-
fill="none"
320-
stroke="#D8B4FE"
321-
stroke-width="3"
322-
stroke-dasharray="7 5"
323-
stroke-linecap="round"
324-
/>
325-
<path
326-
d={`M ${nextX - 18} ${nextY + boxH / 2 - 8} L ${nextX - 5} ${nextY + boxH / 2} L ${nextX - 17} ${nextY + boxH / 2 + 8}`}
327-
fill="none"
328-
stroke="#FEF08A"
329-
stroke-width="3.2"
330-
stroke-linecap="round"
331-
stroke-linejoin="round"
332-
/>
333-
{edge?.label && (
334-
<text
335-
x={(x + boxW + nextX) / 2}
336-
y={Math.min(y, nextY) + 16}
337-
text-anchor="middle"
338-
fill="#FEF08A"
339-
style="font-family: var(--font-hand); font-size: 17px; font-weight: 700;"
340-
>
341-
{edge.label}
342-
</text>
343-
)}
344-
</g>
345-
)}
346-
347312
{/* Solid backing inside node for AAA text readability */}
348313
<rect
349314
x={x}
@@ -393,15 +358,15 @@ const a11ySummary = nodes
393358
{/* Evaluation Marker Badge (✓ Mint or ✗ Coral) */}
394359
<g>
395360
<circle
396-
cx={x + boxW - 16}
361+
cx={x + boxW - 18}
397362
cy={y + 18}
398363
r="11"
399364
fill={isBad ? "#FCA5A5" : isGood ? "#86EFAC" : "#EDE9FE"}
400365
stroke="#2A1155"
401366
stroke-width="2"
402367
/>
403368
<text
404-
x={x + boxW - 16}
369+
x={x + boxW - 18}
405370
y={y + 22}
406371
text-anchor="middle"
407372
fill="#2A1155"
@@ -415,17 +380,17 @@ const a11ySummary = nodes
415380
{node.badge && (
416381
<g>
417382
<rect
418-
x={x + 12}
383+
x={x + 14}
419384
y={y - 13}
420-
width={Math.max(node.badge.length * 8.5 + 18, 60)}
385+
width={Math.max(node.badge.length * 8.5 + 18, 64)}
421386
height="23"
422387
rx="8"
423388
fill={palette.hex}
424389
stroke="#2A1155"
425390
stroke-width="2"
426391
/>
427392
<text
428-
x={x + 12 + Math.max(node.badge.length * 8.5 + 18, 60) / 2}
393+
x={x + 14 + Math.max(node.badge.length * 8.5 + 18, 64) / 2}
429394
y={y + 2}
430395
text-anchor="middle"
431396
fill={palette.textOnBadge}
@@ -438,33 +403,94 @@ const a11ySummary = nodes
438403

439404
{/* Node Primary Label */}
440405
<text
441-
x={x + boxW / 2 - 4}
442-
y={node.sublabel ? y + 44 : y + 54}
406+
x={x + boxW / 2}
407+
y={node.sublabel ? y + 48 : y + 58}
443408
text-anchor="middle"
444409
fill="#FFFFFF"
445-
style="font-family: var(--font-hand); font-size: 18px; font-weight: 700;"
410+
style="font-family: var(--font-hand); font-size: 17px; font-weight: 700;"
446411
>
447-
{node.label.length > 21 ? `${node.label.slice(0, 19)}…` : node.label}
412+
{node.label.length > 26 ? `${node.label.slice(0, 24)}…` : node.label}
448413
</text>
449414

450415
{/* Node Hand-Drawn Sub-label */}
451416
{node.sublabel && (
452417
<text
453418
x={x + boxW / 2}
454-
y={y + 72}
419+
y={y + 76}
455420
text-anchor="middle"
456421
fill="#FEF08A"
457-
style="font-family: var(--font-hand); font-size: 16px; font-weight: 400;"
422+
style="font-family: var(--font-hand); font-size: 14.5px; font-weight: 400;"
458423
>
459-
{node.sublabel.length > 26
460-
? `${node.sublabel.slice(0, 24)}…`
424+
{node.sublabel.length > 30
425+
? `${node.sublabel.slice(0, 28)}…`
461426
: node.sublabel}
462427
</text>
463428
)}
464429
</g>
465430
);
466431
})
467432
}
433+
434+
{/* Layer 2: Connecting Arrows & High-Contrast Pill Labels (Never occluded by boxes) */}
435+
{
436+
nodes.map((_, index) => {
437+
if (index >= nodes.length - 1) return null;
438+
const x = Math.round(index * stepSpan + (stepSpan - boxW) / 2);
439+
const y = boxY + (index % 2 === 0 ? -4 : 6);
440+
const nextX = Math.round((index + 1) * stepSpan + (stepSpan - boxW) / 2);
441+
const nextY = boxY + ((index + 1) % 2 === 0 ? -4 : 6);
442+
const edge = edges[index];
443+
const midX = Math.round((x + boxW + nextX) / 2);
444+
const labelY = Math.max(y, nextY) + boxH + 26;
445+
const pillW = edge?.label ? Math.max(edge.label.length * 8.2 + 22, 88) : 0;
446+
447+
return (
448+
<g>
449+
<path
450+
d={`M ${x + boxW + 6} ${y + boxH / 2} C ${x + boxW + 34} ${y + boxH / 2 - 18}, ${nextX - 34} ${nextY + boxH / 2 - 18}, ${nextX - 8} ${nextY + boxH / 2}`}
451+
fill="none"
452+
stroke="#D8B4FE"
453+
stroke-width="3"
454+
stroke-dasharray="7 5"
455+
stroke-linecap="round"
456+
/>
457+
<path
458+
d={`M ${nextX - 18} ${nextY + boxH / 2 - 8} L ${nextX - 5} ${nextY + boxH / 2} L ${nextX - 17} ${nextY + boxH / 2 + 8}`}
459+
fill="none"
460+
stroke="#FEF08A"
461+
stroke-width="3.2"
462+
stroke-linecap="round"
463+
stroke-linejoin="round"
464+
/>
465+
{edge?.label && (
466+
<g>
467+
<rect
468+
x={midX - pillW / 2}
469+
y={labelY - 16}
470+
width={pillW}
471+
height="24"
472+
rx="12"
473+
fill="#0B1326"
474+
fill-opacity="0.92"
475+
stroke="#D8B4FE"
476+
stroke-width="1.5"
477+
stroke-dasharray="4 3"
478+
/>
479+
<text
480+
x={midX}
481+
y={labelY}
482+
text-anchor="middle"
483+
fill="#FEF08A"
484+
style="font-family: var(--font-hand); font-size: 14.5px; font-weight: 700;"
485+
>
486+
{edge.label}
487+
</text>
488+
</g>
489+
)}
490+
</g>
491+
);
492+
})
493+
}
468494
</svg>
469495
</div>
470496

0 commit comments

Comments
 (0)