jwright
ef1719c84e
build-and-deploy / build (push) Failing after 14m43s
Light mode: revert the heavy white-out scrim back to a moderate wash so the board stays visible, and earn legibility with a soft light text-halo behind running text instead (invisible on the solid cards, only works over the image). Pairs with the darker light-mode text tokens. Also append ?v=2 to every /diagrams/*.svg reference so the recoloured diagrams bypass Cloudflare's 4h edge cache and show immediately (the SVG URLs aren't content-hashed like the CSS bundle).
54 lines
1.8 KiB
Plaintext
54 lines
1.8 KiB
Plaintext
---
|
|
// Architecture diagrams as static SVG (authored to match the site style), shown on a
|
|
// constant light card so the fixed-colour art stays legible in BOTH light and dark themes.
|
|
// CSP-clean: a plain same-origin <img> (img-src 'self'); no inline script, no web fonts.
|
|
// SVG sources live in /public/diagrams/<name>.svg — the same files the blog posts embed.
|
|
interface Props {
|
|
name: string;
|
|
caption?: string;
|
|
}
|
|
const { name, caption } = Astro.props;
|
|
|
|
const captions: Record<string, string> = {
|
|
"edge-ai": "Design → single-press pipeline → readiness-gated GPU inference at the edge",
|
|
"iac-fleet": "One source of truth → AWX/Ansible → identical edge nodes, even air-gapped",
|
|
homelab: "Bare metal → GitOps clusters → services, exposed outbound-only via a tunnel",
|
|
"authentik-sso": "One identity provider, 2FA at the flow; apps validate over an internal back channel",
|
|
"outbound-exposure": "No open ports — the origin dials out; the edge is the perimeter",
|
|
};
|
|
const cap = caption ?? captions[name];
|
|
---
|
|
|
|
<figure class="diagram" data-reveal>
|
|
<img
|
|
class="diagram__svg"
|
|
src={`/diagrams/${name}.svg?v=2`}
|
|
alt={cap ?? `${name} architecture diagram`}
|
|
loading="lazy"
|
|
decoding="async"
|
|
/>
|
|
{cap && <figcaption class="diagram__caption mono">{cap}</figcaption>}
|
|
</figure>
|
|
|
|
<style>
|
|
.diagram {
|
|
margin: var(--space-6) 0;
|
|
padding: var(--space-5);
|
|
/* constant light surface so the fixed-colour SVG keeps contrast in dark mode */
|
|
background: #f6f8fb;
|
|
border: 1px solid rgba(2, 6, 23, 0.1);
|
|
border-radius: var(--radius);
|
|
}
|
|
.diagram__svg {
|
|
display: block;
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
.diagram__caption {
|
|
margin-top: var(--space-4);
|
|
text-align: center;
|
|
font-size: 0.72rem;
|
|
color: var(--text-faint);
|
|
}
|
|
</style>
|