112 lines
6.1 KiB
XML
112 lines
6.1 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 640" role="img" aria-label="Architektura demo na maszynie: redaktor i czytelnik łączą się z kontenerami podmana — Gitea, build Astro, wolumen releases i nginx">
|
|
<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: 15.5px; fill: #00004a; letter-spacing: .04em; }
|
|
.cap { font-size: 12.5px; fill: #46536a; }
|
|
.lbl { font-size: 12px; fill: #46536a; paint-order: stroke; stroke: #ffffff; stroke-width: 4; }
|
|
.chipbg { fill: #d2faf7; }
|
|
.chip { font-size: 11.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: 12.5px; fill: #101228; }
|
|
</style>
|
|
</defs>
|
|
|
|
<!-- machine boundary -->
|
|
<rect x="340" y="40" width="830" height="570" rx="18" fill="#f8f9fc" stroke="#e2e5ee" stroke-width="1.5"/>
|
|
<text class="t" x="366" y="76" font-size="13" font-weight="700" fill="#00004a" letter-spacing=".18em">MASZYNA DEMO · PODMAN</text>
|
|
<text class="t cap" x="366" y="96">osobne kontenery pod systemd · wszystko w jednym katalogu użytkownika</text>
|
|
|
|
<!-- actor: redaktor -->
|
|
<g filter="url(#soft)">
|
|
<rect class="box" x="52" y="120" width="220" height="120" rx="16"/>
|
|
</g>
|
|
<circle cx="88" cy="156" r="11" fill="none" stroke="#00004a" stroke-width="1.8"/>
|
|
<path d="M72 186 q16 -18 32 0" fill="none" stroke="#00004a" stroke-width="1.8"/>
|
|
<text class="t ttl" x="116" y="162">Redaktor</text>
|
|
<text class="t cap" x="70" y="212">przeglądarka · <tspan font-weight="600">/admin/</tspan> (Sveltia)</text>
|
|
<text class="t cap" x="70" y="228">edycja WYSIWYG, podgląd 1:1</text>
|
|
|
|
<!-- actor: czytelnik -->
|
|
<g filter="url(#soft)">
|
|
<rect class="box" x="52" y="400" width="220" height="120" rx="16"/>
|
|
</g>
|
|
<circle cx="88" cy="436" r="11" fill="none" stroke="#00004a" stroke-width="1.8"/>
|
|
<path d="M72 466 q16 -18 32 0" fill="none" stroke="#00004a" stroke-width="1.8"/>
|
|
<text class="t ttl" x="116" y="442">Czytelnik</text>
|
|
<text class="t cap" x="70" y="492">publiczna strona portalu</text>
|
|
<text class="t cap" x="70" y="508">czysty, szybki HTML</text>
|
|
|
|
<!-- gitea -->
|
|
<g filter="url(#soft)">
|
|
<rect class="box" x="400" y="120" width="320" height="185" rx="16"/>
|
|
</g>
|
|
<text class="t ttl" x="424" y="152">GITEA</text>
|
|
<rect class="chipbg" x="490" y="136" width="52" height="22" rx="11"/>
|
|
<text class="t chip" x="516" y="151" text-anchor="middle">:3000</text>
|
|
<rect class="sub" x="420" y="172" width="280" height="112" rx="12"/>
|
|
<text class="t" x="436" y="198" font-size="13.5" font-weight="700" fill="#101228">repo ctao/portal</text>
|
|
<text class="t cap" x="436" y="220">treść: Markdown + obrazy (WebP)</text>
|
|
<text class="t cap" x="436" y="238">każda zmiana = commit</text>
|
|
<text class="t cap" x="436" y="256">pełna historia + rollback za darmo</text>
|
|
|
|
<!-- build (ephemeral) -->
|
|
<g filter="url(#soft)">
|
|
<rect x="790" y="120" width="340" height="185" rx="16" fill="#ffffff" stroke="#00004a" stroke-width="1.5" stroke-dasharray="7 5"/>
|
|
</g>
|
|
<text class="t ttl" x="814" y="152">BUILD · ASTRO</text>
|
|
<rect class="chipbg" x="948" y="136" width="164" height="22" rx="11"/>
|
|
<text class="t chip" x="1030" y="151" text-anchor="middle">KONTENER JEDNORAZOWY</text>
|
|
<text class="t cap" x="814" y="188">timer systemd (co ~10 s) sprawdza,</text>
|
|
<text class="t cap" x="814" y="206">czy w repo jest nowy commit</text>
|
|
<text class="t cap" x="814" y="234">jeśli tak: git fetch → checkout →</text>
|
|
<text class="t cap" x="814" y="252"><tspan font-weight="700" fill="#101228">Markdown → statyczny HTML</tspan></text>
|
|
<text class="t cap" x="814" y="280">po buildzie kontener znika</text>
|
|
|
|
<!-- releases volume -->
|
|
<g filter="url(#soft)">
|
|
<rect class="sub" x="790" y="400" width="340" height="150" rx="16"/>
|
|
</g>
|
|
<text class="t ttl" x="814" y="432">releases/</text>
|
|
<rect class="chipbg" x="908" y="416" width="82" height="22" rx="11"/>
|
|
<text class="t chip" x="949" y="431" text-anchor="middle">WOLUMEN</text>
|
|
<text class="t mono" x="814" y="466">9f2c1d/ poprzednia wersja</text>
|
|
<text class="t mono" x="814" y="488">71b980/ <tspan font-weight="700" fill="#00004a">← current (symlink)</tspan></text>
|
|
<text class="t cap" x="814" y="518">podmiana atomowa — zero przestoju</text>
|
|
|
|
<!-- nginx -->
|
|
<g filter="url(#soft)">
|
|
<rect class="box" x="400" y="400" width="320" height="150" rx="16"/>
|
|
</g>
|
|
<text class="t ttl" x="424" y="432">NGINX</text>
|
|
<rect class="chipbg" x="500" y="416" width="52" height="22" rx="11"/>
|
|
<text class="t chip" x="526" y="431" text-anchor="middle">:8080</text>
|
|
<text class="t cap" x="424" y="466">serwuje <tspan font-weight="600">releases/current</tspan></text>
|
|
<text class="t cap" x="424" y="484">wyłącznie statyczne pliki</text>
|
|
<text class="t cap" x="424" y="502">brak aplikacji · brak bazy · brak PHP</text>
|
|
|
|
<!-- flows -->
|
|
<path class="flow" d="M272 180 H396"/>
|
|
<text class="t lbl" x="334" y="170" text-anchor="middle">zapis przez API (OAuth)</text>
|
|
|
|
<path class="flow" d="M790 212 H724"/>
|
|
<text class="t lbl" x="757" y="202" text-anchor="middle">git fetch</text>
|
|
|
|
<path class="flow" d="M960 305 V396"/>
|
|
<text class="t lbl" x="968" y="354" text-anchor="start">nowa wersja strony</text>
|
|
|
|
<path class="flow" d="M790 475 H724"/>
|
|
<text class="t lbl" x="757" y="465" text-anchor="middle">current/</text>
|
|
|
|
<path class="flow" d="M400 475 H276"/>
|
|
<text class="t lbl" x="338" y="465" text-anchor="middle">statyczny HTML</text>
|
|
</svg>
|