Files
content/uploads/diagrams/architecture-machine.svg
T

106 lines
6.3 KiB
XML

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 1040" role="img" aria-label="Architecture on the demo machine: the editor writes through Sveltia into the Gitea content repository, a systemd timer runs a one-shot Astro build container that overlays content onto the code repository, the result lands in the releases volume and nginx serves readers static files only">
<defs>
<marker id="arr" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
<path d="M0 0 L10 5 L0 10 z" fill="#00004a"/>
</marker>
<filter id="soft" x="-20%" y="-20%" width="140%" height="140%">
<feDropShadow dx="0" dy="2" stdDeviation="5" flood-color="#00004a" flood-opacity="0.10"/>
</filter>
<style>
.t { font-family: Inter, "Segoe UI", Arial, sans-serif; }
.box { fill: #ffffff; stroke: #00004a; stroke-width: 1.5; }
.sub { fill: #f5f5f5; stroke: #e2e5ee; stroke-width: 1; }
.ttl { font-weight: 700; font-size: 19px; fill: #00004a; letter-spacing: .04em; }
.act { font-weight: 700; font-size: 18px; fill: #00004a; }
.cap { font-size: 15px; fill: #46536a; }
.sml { font-size: 14px; fill: #46536a; }
.lbl { font-size: 14px; fill: #46536a; paint-order: stroke; stroke: #f8f9fc; stroke-width: 5; }
.chipbg { fill: #d2faf7; }
.chip { font-size: 12.5px; font-weight: 700; fill: #00004a; letter-spacing: .06em; }
.flow { stroke: #00004a; stroke-width: 1.8; fill: none; marker-end: url(#arr); }
.mono { font-family: "SF Mono", Consolas, Menlo, monospace; font-size: 14px; fill: #101228; }
.name { font-size: 16px; font-weight: 700; fill: #101228; }
</style>
</defs>
<!-- actor: editor -->
<g filter="url(#soft)"><rect class="box" x="49" y="20" width="380" height="86" rx="16"/></g>
<circle cx="80" cy="48" r="11" fill="none" stroke="#00004a" stroke-width="1.8"/>
<path d="M64 78 q16 -18 32 0" fill="none" stroke="#00004a" stroke-width="1.8"/>
<text class="t act" x="108" y="54">Editor</text>
<text class="t sml" x="108" y="80">browser · <tspan font-weight="600">/admin/</tspan> (Sveltia), visual editing</text>
<!-- machine boundary -->
<rect x="30" y="158" width="740" height="730" rx="18" fill="#f8f9fc" stroke="#e2e5ee" stroke-width="1.5"/>
<text class="t" x="400" y="194" text-anchor="middle" font-size="14" font-weight="700" fill="#00004a" letter-spacing=".18em">DEMO MACHINE · PODMAN</text>
<text class="t sml" x="400" y="216" text-anchor="middle">separate containers under systemd</text>
<path class="flow" d="M239 106 V232"/>
<text class="t lbl" x="253" y="150">save through the API (OAuth)</text>
<!-- gitea: two repositories -->
<g filter="url(#soft)"><rect class="box" x="60" y="238" width="680" height="190" rx="16"/></g>
<text class="t ttl" x="88" y="278">GITEA</text>
<rect class="chipbg" x="170" y="258" width="62" height="24" rx="12"/>
<text class="t chip" x="201" y="275" text-anchor="middle">:3000</text>
<rect class="sub" x="84" y="298" width="310" height="108" rx="12"/>
<text class="t name" x="106" y="330">ctao/content</text>
<text class="t cap" x="106" y="356">Markdown and images,</text>
<text class="t cap" x="106" y="380">written by the CMS</text>
<rect class="sub" x="414" y="298" width="302" height="108" rx="12"/>
<text class="t name" x="436" y="330">ctao/portal</text>
<text class="t cap" x="436" y="356">portal code,</text>
<text class="t cap" x="436" y="380">maintained by the team</text>
<path class="flow" d="M400 428 V454"/>
<text class="t lbl" x="414" y="447">git fetch, both repos</text>
<!-- build (ephemeral) -->
<g filter="url(#soft)">
<rect x="60" y="460" width="680" height="190" rx="16" fill="#ffffff" stroke="#00004a" stroke-width="1.5" stroke-dasharray="7 5"/>
</g>
<text class="t ttl" x="88" y="500">BUILD · ASTRO</text>
<rect class="chipbg" x="250" y="480" width="190" height="24" rx="12"/>
<text class="t chip" x="345" y="497" text-anchor="middle">ONE-SHOT CONTAINER</text>
<text class="t cap" x="88" y="536">a systemd timer checks both repositories every 10 seconds</text>
<text class="t cap" x="88" y="564">on a change: fetch both, overlay content onto code</text>
<text class="t cap" x="88" y="592" font-weight="700" fill="#101228">Markdown becomes static HTML</text>
<text class="t cap" x="88" y="620">the container exits when the build is done</text>
<path class="flow" d="M400 650 V676"/>
<text class="t lbl" x="414" y="669">new version of the site</text>
<!-- releases volume -->
<g filter="url(#soft)"><rect class="sub" x="60" y="682" width="310" height="176" rx="16"/></g>
<text class="t ttl" x="88" y="720">releases/</text>
<rect class="chipbg" x="196" y="700" width="86" height="24" rx="12"/>
<text class="t chip" x="239" y="717" text-anchor="middle">VOLUME</text>
<text class="t mono" x="88" y="754">9f2c1d-43e2bb/ previous</text>
<text class="t mono" x="88" y="778">71b980-8c1a2f/ <tspan font-weight="700" fill="#00004a">← current</tspan></text>
<text class="t cap" x="88" y="812">atomic swap,</text>
<text class="t cap" x="88" y="836">zero downtime</text>
<!-- nginx -->
<g filter="url(#soft)"><rect class="box" x="430" y="682" width="310" height="176" rx="16"/></g>
<text class="t ttl" x="458" y="720">NGINX</text>
<rect class="chipbg" x="540" y="700" width="62" height="24" rx="12"/>
<text class="t chip" x="571" y="717" text-anchor="middle">:8080</text>
<text class="t cap" x="458" y="754">serves <tspan font-weight="600">releases/current</tspan></text>
<text class="t cap" x="458" y="782">static files only</text>
<text class="t cap" x="458" y="810">no application, no database,</text>
<text class="t cap" x="458" y="836">no PHP, no plugins</text>
<path class="flow" d="M372 770 H424"/>
<text class="t lbl" x="398" y="756" text-anchor="middle">current/</text>
<path class="flow" d="M585 860 V930"/>
<text class="t lbl" x="599" y="900">static HTML</text>
<!-- actor: reader -->
<g filter="url(#soft)"><rect class="box" x="395" y="940" width="380" height="86" rx="16"/></g>
<circle cx="426" cy="968" r="11" fill="none" stroke="#00004a" stroke-width="1.8"/>
<path d="M410 998 q16 -18 32 0" fill="none" stroke="#00004a" stroke-width="1.8"/>
<text class="t act" x="454" y="974">Reader</text>
<text class="t sml" x="454" y="1000">the public portal, plain and fast HTML</text>
</svg>