content: demo article — custom SVG diagrams (machine architecture, publish flow, attack surface) + cover, dated to sit second on the list

2026-07-28 20:03:44 +02:00
parent 71b9808a11
commit 93712a1481
5 changed files with 322 additions and 26 deletions
@@ -0,0 +1,76 @@
+<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>