demo article in English: stack overview and redesigned architecture diagrams

2026-09-11 13:58:49 +02:00
parent 43e2bb4061
commit 9ca89f3e40
13 changed files with 573 additions and 524 deletions
@@ -0,0 +1,48 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 540" role="img" aria-label="Attack surface compared: a database-backed CMS exposes an application, a login panel, a database and plugins, while this solution exposes static HTML files only and keeps editing behind a git sign-in">
+  <defs>
+    <filter id="soft3" x="-20%" y="-20%" width="140%" height="140%">
+      <feDropShadow dx="0" dy="2" stdDeviation="5" flood-color="#00004a" flood-opacity="0.10"/>
+    </filter>
+    <marker id="arr3" 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>
+    <style>
+      .t    { font-family: Inter, "Segoe UI", Arial, sans-serif; }
+      .hd   { font-weight: 800; font-size: 16px; fill: #00004a; letter-spacing: .14em; }
+      .cap  { font-size: 14.5px; fill: #46536a; }
+      .item { font-size: 15.5px; fill: #101228; }
+      .side { font-size: 15px; fill: #101228; }
+      .bad  { fill: #fdf0f0; stroke: #e8c5c5; stroke-width: 1.5; }
+      .good { fill: #ffffff; stroke: #00004a; stroke-width: 1.5; }
+      .flow { stroke: #00004a; stroke-width: 1.8; fill: none; marker-end: url(#arr3); }
+    </style>
+  </defs>
+
+  <!-- top: classic CMS -->
+  <text class="t hd" x="40" y="48">DATABASE-BACKED CMS</text>
+  <text class="t side" x="40" y="173">internet</text>
+  <path class="flow" d="M120 168 H176"/>
+  <g filter="url(#soft3)"><rect class="bad" x="180" y="68" width="580" height="200" rx="16"/></g>
+  <text class="t item" x="208" y="106">▪ CMS application (PHP / Node), public</text>
+  <text class="t item" x="208" y="140">▪ login panel, public</text>
+  <text class="t item" x="208" y="174">▪ database holding the content</text>
+  <text class="t item" x="208" y="208">▪ plugins and dependencies</text>
+  <text class="t" x="208" y="242" font-size="14.5" font-weight="700" fill="#8f3b3b">all of it runs non stop and needs patching</text>
+
+  <!-- divider -->
+  <line x1="40" y1="300" x2="760" y2="300" stroke="#e2e5ee" stroke-width="1.5"/>
+
+  <!-- bottom: this solution -->
+  <text class="t hd" x="40" y="334">THIS SOLUTION</text>
+  <text class="t side" x="40" y="389">internet</text>
+  <path class="flow" d="M120 384 H176"/>
+  <g filter="url(#soft3)"><rect class="good" x="180" y="346" width="580" height="76" rx="16"/></g>
+  <text class="t item" x="208" y="378">▪ HTML files served by nginx</text>
+  <text class="t cap" x="208" y="404">no application, no database, no login panel</text>
+
+  <text class="t side" x="40" y="483">editing</text>
+  <path class="flow" d="M120 478 H176"/>
+  <g filter="url(#soft3)"><rect class="good" x="180" y="440" width="580" height="76" rx="16"/></g>
+  <text class="t item" x="208" y="472">▪ git (Gitea), signed-in users only</text>
+  <text class="t cap" x="208" y="498">off the reader's path, so an outage is invisible</text>
+</svg>