77 lines
4.5 KiB
XML
77 lines
4.5 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 430" role="img" aria-label="Pięć kroków od zapisu w edytorze do publikacji: zapis, commit, detekcja, build, publikacja">
|
|
<defs>
|
|
<marker id="arr2" 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="soft2" 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; }
|
|
.card { fill: #ffffff; stroke: #00004a; stroke-width: 1.5; }
|
|
.ttl { font-weight: 700; font-size: 15px; fill: #00004a; }
|
|
.cap { font-size: 12.3px; fill: #46536a; }
|
|
.num { font-weight: 800; font-size: 15px; fill: #00004a; }
|
|
.pill { fill: #f5f5f5; stroke: #e2e5ee; }
|
|
.pilltxt { font-size: 12.5px; fill: #101228; }
|
|
.flow { stroke: #00004a; stroke-width: 1.8; fill: none; marker-end: url(#arr2); }
|
|
</style>
|
|
</defs>
|
|
|
|
<!-- cards -->
|
|
<g filter="url(#soft2)"><rect class="card" x="55" y="100" width="200" height="175" rx="16"/></g>
|
|
<g filter="url(#soft2)"><rect class="card" x="285" y="100" width="200" height="175" rx="16"/></g>
|
|
<g filter="url(#soft2)"><rect class="card" x="515" y="100" width="200" height="175" rx="16"/></g>
|
|
<g filter="url(#soft2)"><rect class="card" x="745" y="100" width="200" height="175" rx="16"/></g>
|
|
<g filter="url(#soft2)"><rect class="card" x="975" y="100" width="200" height="175" rx="16"/></g>
|
|
|
|
<!-- connectors -->
|
|
<path class="flow" d="M255 187 H281"/>
|
|
<path class="flow" d="M485 187 H511"/>
|
|
<path class="flow" d="M715 187 H741"/>
|
|
<path class="flow" d="M945 187 H971"/>
|
|
|
|
<!-- step numbers -->
|
|
<circle cx="155" cy="100" r="17" fill="#00e4d8"/><text class="t num" x="155" y="106" text-anchor="middle">1</text>
|
|
<circle cx="385" cy="100" r="17" fill="#00e4d8"/><text class="t num" x="385" y="106" text-anchor="middle">2</text>
|
|
<circle cx="615" cy="100" r="17" fill="#00e4d8"/><text class="t num" x="615" y="106" text-anchor="middle">3</text>
|
|
<circle cx="845" cy="100" r="17" fill="#00e4d8"/><text class="t num" x="845" y="106" text-anchor="middle">4</text>
|
|
<circle cx="1075" cy="100" r="17" fill="#00e4d8"/><text class="t num" x="1075" y="106" text-anchor="middle">5</text>
|
|
|
|
<!-- card 1 -->
|
|
<text class="t ttl" x="155" y="152" text-anchor="middle">Zapis w edytorze</text>
|
|
<text class="t cap" x="155" y="182" text-anchor="middle">Sveltia · WYSIWYG</text>
|
|
<text class="t cap" x="155" y="200" text-anchor="middle">podgląd artykułu 1:1</text>
|
|
<text class="t cap" x="155" y="218" text-anchor="middle">obrazy → WebP przy uploadzie</text>
|
|
|
|
<!-- card 2 -->
|
|
<text class="t ttl" x="385" y="152" text-anchor="middle">Commit w repo</text>
|
|
<text class="t cap" x="385" y="182" text-anchor="middle">Gitea · logowanie OAuth</text>
|
|
<text class="t cap" x="385" y="200" text-anchor="middle">zapis przez API = commit</text>
|
|
<text class="t cap" x="385" y="218" text-anchor="middle">historia każdej zmiany</text>
|
|
|
|
<!-- card 3 -->
|
|
<text class="t ttl" x="615" y="152" text-anchor="middle">Detekcja zmiany</text>
|
|
<text class="t cap" x="615" y="182" text-anchor="middle">timer systemd</text>
|
|
<text class="t cap" x="615" y="200" text-anchor="middle">sprawdza repo co ~10 s</text>
|
|
<text class="t cap" x="615" y="218" text-anchor="middle">brak zmian = brak pracy</text>
|
|
|
|
<!-- card 4 -->
|
|
<text class="t ttl" x="845" y="152" text-anchor="middle">Build strony</text>
|
|
<text class="t cap" x="845" y="182" text-anchor="middle">jednorazowy kontener</text>
|
|
<text class="t cap" x="845" y="200" text-anchor="middle">Astro: Markdown →</text>
|
|
<text class="t cap" x="845" y="218" text-anchor="middle">statyczny HTML</text>
|
|
|
|
<!-- card 5 -->
|
|
<text class="t ttl" x="1075" y="152" text-anchor="middle">Publikacja</text>
|
|
<text class="t cap" x="1075" y="182" text-anchor="middle">atomowa podmiana symlinka</text>
|
|
<text class="t cap" x="1075" y="200" text-anchor="middle">nginx od razu serwuje</text>
|
|
<text class="t cap" x="1075" y="218" text-anchor="middle">nową wersję</text>
|
|
|
|
<!-- reassurance pills -->
|
|
<rect class="pill" x="240" y="330" width="330" height="40" rx="20"/>
|
|
<text class="t pilltxt" x="405" y="355" text-anchor="middle">awaria builda? strona działa dalej na starej wersji</text>
|
|
<rect class="pill" x="630" y="330" width="330" height="40" rx="20"/>
|
|
<text class="t pilltxt" x="795" y="355" text-anchor="middle">rollback = git revert — jedna komenda</text>
|
|
</svg>
|