docs: redesign architecture diagram

Ahmed Elghareeb · Ahmed Elghareeb · commit a51d7eceda5d · 2025-12-02T01:40:57.000+01:00
diff --git a/src/assets/archetype-architecture.svg b/src/assets/archetype-architecture.svg
@@ -1,127 +1,140 @@
-<svg width="1100" height="720" viewBox="0 0 1100 720" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="1200" height="780" viewBox="0 0 1200 780" fill="none" xmlns="http://www.w3.org/2000/svg">
   <defs>
-    <linearGradient id="bg" x1="0" y1="0" x2="0" y2="1">
-      <stop offset="0%" stop-color="#05070F"/>
-      <stop offset="100%" stop-color="#0C1225"/>
+    <linearGradient id="diag-bg" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#040615"/>
+      <stop offset="100%" stop-color="#0c132c"/>
     </linearGradient>
-    <linearGradient id="card" x1="0" y1="0" x2="1" y2="1">
-      <stop offset="0%" stop-color="rgba(243,183,92,0.25)"/>
-      <stop offset="100%" stop-color="rgba(62,126,171,0.25)"/>
+    <linearGradient id="node-surface" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0%" stop-color="#1b233c"/>
+      <stop offset="100%" stop-color="#12172a"/>
     </linearGradient>
-    <linearGradient id="cardLight" x1="0" y1="0" x2="1" y2="1">
-      <stop offset="0%" stop-color="#252C46"/>
-      <stop offset="100%" stop-color="#1B2034"/>
+    <linearGradient id="node-accent" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0%" stop-color="#2f3b66"/>
+      <stop offset="100%" stop-color="#1c223c"/>
     </linearGradient>
-    <filter id="shadow" x="-10%" y="-10%" width="130%" height="140%">
-      <feDropShadow dx="0" dy="12" stdDeviation="16" flood-color="rgba(0,0,0,0.35)"/>
+    <linearGradient id="node-gold" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0%" stop-color="#f3b75c"/>
+      <stop offset="100%" stop-color="#f4875c"/>
+    </linearGradient>
+    <filter id="node-shadow" x="-15%" y="-20%" width="140%" height="150%">
+      <feDropShadow dx="0" dy="20" stdDeviation="20" flood-color="rgba(0,0,0,0.45)"/>
     </filter>
-    <style>
-      .label { font-family: 'Space Grotesk', 'Inter', sans-serif; fill: #E6EBFF; font-weight: 600; }
-      .sub { font-family: 'Space Grotesk', 'Inter', sans-serif; fill: #A9B8F5; font-size: 15px; }
-      .caption { font-family: 'Space Grotesk', 'Inter', sans-serif; fill: #8EA2FF; font-size: 16px; font-weight: 600; }
-      .section-title { font-size: 20px; }
-      .box { fill: url(#cardLight); stroke: rgba(255,255,255,0.08); stroke-width: 1; rx: 18; }
-      .accent-box { fill: url(#card); stroke: rgba(243,183,92,0.4); stroke-width: 1.5; rx: 18; }
-      .connector { stroke: #7EA8FF; stroke-width: 2; marker-end: url(#arrow); }
-      .connector-alt { stroke: #F3B75C; stroke-width: 2; stroke-dasharray: 6 6; marker-end: url(#arrowAccent); }
-    </style>
-    <marker id="arrow" markerWidth="10" markerHeight="10" refX="8" refY="3" orient="auto">
-      <path d="M0 0 L10 3 L0 6" fill="#7EA8FF"/>
+    <marker id="arrow-default" markerWidth="12" markerHeight="12" refX="10" refY="6" orient="auto">
+      <path d="M0 0 L10 6 L0 12" fill="#7ea8ff"/>
     </marker>
-    <marker id="arrowAccent" markerWidth="10" markerHeight="10" refX="8" refY="3" orient="auto">
-      <path d="M0 0 L10 3 L0 6" fill="#F3B75C"/>
+    <marker id="arrow-gold" markerWidth="12" markerHeight="12" refX="10" refY="6" orient="auto">
+      <path d="M0 0 L10 6 L0 12" fill="#f3b75c"/>
     </marker>
+    <style>
+      .node { fill: url(#node-surface); stroke: rgba(255,255,255,0.08); stroke-width: 1.5; rx: 16; }
+      .node-accent { fill: url(#node-accent); stroke: rgba(255,255,255,0.12); stroke-width: 1.5; rx: 16; }
+      .node-gold { fill: rgba(243,183,92,0.12); stroke: rgba(243,183,92,0.65); stroke-width: 2; rx: 16; }
+      .title { font-family: 'Space Grotesk','Inter',sans-serif; font-size: 18px; font-weight: 600; fill: #eff3ff; letter-spacing: 0.02em; }
+      .tier-label { font-family: 'Space Grotesk','Inter',sans-serif; font-size: 16px; font-weight: 600; fill: rgba(255,255,255,0.7); text-transform: uppercase; letter-spacing: 0.3em; }
+      .flow-default { stroke: #7ea8ff; stroke-width: 2.5; marker-end: url(#arrow-default); }
+      .flow-async { stroke: #f3b75c; stroke-width: 2.5; stroke-dasharray: 10 8; marker-end: url(#arrow-gold); }
+      .caption { font-family: 'Space Grotesk','Inter',sans-serif; font-size: 15px; fill: rgba(255,255,255,0.5); }
+    </style>
   </defs>
 
-  <rect width="1100" height="720" fill="url(#bg)" rx="32"/>
+  <rect width="1200" height="780" rx="36" fill="url(#diag-bg)"/>
 
-  <!-- Audience -->
-  <g filter="url(#shadow)">
-    <rect x="50" y="40" width="240" height="120" class="box"/>
-    <text x="70" y="90" class="label">Researchers · Editors</text>
-  </g>
+  <!-- tier labels -->
+  <text x="80" y="80" class="tier-label">CLIENT</text>
+  <text x="80" y="210" class="tier-label">EDGE</text>
+  <text x="80" y="360" class="tier-label">APPLICATION</text>
+  <text x="80" y="540" class="tier-label">DATA + MEDIA</text>
+  <text x="80" y="710" class="tier-label">DELIVERY</text>
 
-  <!-- Ingress -->
-  <g filter="url(#shadow)">
-    <rect x="330" y="40" width="320" height="120" class="accent-box"/>
-    <text x="350" y="90" class="label">Nginx Gateway</text>
+  <!-- client nodes -->
+  <g filter="url(#node-shadow)">
+    <rect x="240" y="30" width="230" height="110" class="node"/>
+    <text x="270" y="100" class="title">Researchers</text>
   </g>
-
-  <!-- Compose -->
-  <g filter="url(#shadow)">
-    <rect x="700" y="40" width="330" height="120" class="box"/>
-    <text x="720" y="85" class="label">Docker Compose / Infrastructure</text>
+  <g filter="url(#node-shadow)">
+    <rect x="520" y="30" width="230" height="110" class="node"/>
+    <text x="555" y="100" class="title">Editors & Curators</text>
   </g>
-
-  <!-- Frontend -->
-  <g filter="url(#shadow)">
-    <rect x="80" y="220" width="320" height="150" class="box"/>
-    <text x="100" y="260" class="label">Next.js Frontend</text>
+  <g filter="url(#node-shadow)">
+    <rect x="800" y="30" width="230" height="110" class="node"/>
+    <text x="850" y="100" class="title">Programmatic Clients</text>
   </g>
 
-  <!-- API -->
-  <g filter="url(#shadow)">
-    <rect x="430" y="220" width="320" height="180" class="accent-box"/>
-    <text x="450" y="260" class="label">Django REST API</text>
+  <!-- edge -->
+  <g filter="url(#node-shadow)">
+    <rect x="350" y="190" width="500" height="130" class="node-gold"/>
+    <text x="470" y="265" class="title">Nginx Gateway</text>
   </g>
 
-  <!-- Data layer -->
-  <g filter="url(#shadow)">
-    <rect x="50" y="430" width="260" height="180" class="box"/>
-    <text x="70" y="470" class="label">Postgres</text>
+  <!-- application layer -->
+  <g filter="url(#node-shadow)">
+    <rect x="180" y="350" width="260" height="160" class="node"/>
+    <text x="240" y="440" class="title">Next.js Frontend</text>
   </g>
-
-  <g filter="url(#shadow)">
-    <rect x="340" y="430" width="240" height="180" class="box"/>
-    <text x="360" y="470" class="label">Elasticsearch</text>
+  <g filter="url(#node-shadow)">
+    <rect x="480" y="330" width="300" height="200" class="node-accent"/>
+    <text x="545" y="430" class="title">Django REST API</text>
   </g>
-
-  <g filter="url(#shadow)">
-    <rect x="610" y="430" width="210" height="180" class="box"/>
-    <text x="630" y="470" class="label">Redis</text>
+  <g filter="url(#node-shadow)">
+    <rect x="820" y="350" width="220" height="160" class="node"/>
+    <text x="880" y="440" class="title">Celery Workers</text>
   </g>
 
-  <g filter="url(#shadow)">
-    <rect x="850" y="430" width="220" height="180" class="box"/>
-    <text x="870" y="470" class="label">SIPI IIIF Server</text>
+  <!-- data + media -->
+  <g filter="url(#node-shadow)">
+    <rect x="120" y="540" width="220" height="150" class="node"/>
+    <text x="190" y="620" class="title">Postgres</text>
+  </g>
+  <g filter="url(#node-shadow)">
+    <rect x="380" y="540" width="220" height="150" class="node"/>
+    <text x="437" y="620" class="title">Elasticsearch</text>
+  </g>
+  <g filter="url(#node-shadow)">
+    <rect x="640" y="540" width="200" height="150" class="node"/>
+    <text x="705" y="620" class="title">Redis</text>
+  </g>
+  <g filter="url(#node-shadow)">
+    <rect x="880" y="540" width="220" height="150" class="node"/>
+    <text x="935" y="620" class="title">SIPI IIIF</text>
   </g>
 
-  <!-- Workers -->
-  <g filter="url(#shadow)">
-    <rect x="780" y="220" width="250" height="180" class="accent-box"/>
-    <text x="800" y="260" class="label">Celery Workers</text>
+  <!-- delivery -->
+  <g filter="url(#node-shadow)">
+    <rect x="250" y="700" width="320" height="70" class="node"/>
+    <text x="275" y="745" class="title">GitHub Actions · GHCR</text>
+  </g>
+  <g filter="url(#node-shadow)">
+    <rect x="620" y="700" width="320" height="70" class="node"/>
+    <text x="675" y="745" class="title">Docker Compose Infrastructure</text>
   </g>
 
-  <!-- Compose footer -->
-  <text x="70" y="665" class="caption">GitHub Actions ➔ GitHub Container Registry ➔ docker compose deploy</text>
-  <line x1="60" y1="640" x2="1040" y2="640" stroke="rgba(255,255,255,0.15)" stroke-width="1.5" stroke-dasharray="6 4"/>
+  <!-- flows -->
+  <path d="M355 140 L600 190" class="flow-default"/>
+  <path d="M600 140 L600 190" class="flow-default"/>
+  <path d="M845 140 L700 190" class="flow-default"/>
 
-  <!-- Connectors -->
-  <path d="M290 160 L410 160" class="connector"/>
-  <path d="M660 160 L700 160" class="connector"/>
+  <path d="M470 320 L310 350" class="flow-default"/>
+  <path d="M600 320 L600 330" class="flow-default"/>
+  <path d="M730 320 L880 350" class="flow-default"/>
 
-  <path d="M170 160 L170 220" class="connector"/>
-  <path d="M490 160 L490 220" class="connector"/>
+  <path d="M310 510 L230 540" class="flow-default"/>
+  <path d="M560 510 L490 540" class="flow-default"/>
+  <path d="M640 510 L720 540" class="flow-default"/>
+  <path d="M760 510 L920 540" class="flow-default"/>
 
-  <path d="M240 370 L240 430" class="connector"/>
-  <path d="M560 400 L460 430" class="connector"/>
-  <path d="M590 400 L720 430" class="connector"/>
-  <path d="M620 250 L610 200 L860 200" class="connector" opacity="0.6"/>
-  <path d="M600 250 L960 430" class="connector"/>
+  <path d="M180 430 L120 540" class="flow-default"/>
+  <path d="M820 430 L840 540" class="flow-async"/>
+  <path d="M700 460 L740 540" class="flow-default"/>
+  <path d="M600 460 L600 540" class="flow-default"/>
 
-  <path d="M900 400 L940 430" class="connector"/>
-  <path d="M900 370 L900 430" class="connector"/>
+  <path d="M410 700 L410 640 L600 620" class="flow-default"/>
+  <path d="M780 700 L780 640 L720 620" class="flow-default"/>
 
-  <path d="M890 360 L720 360" class="connector-alt"/>
-  <path d="M520 370 L520 430" class="connector"/>
-  <path d="M680 370 L900 430" class="connector"/>
+  <path d="M600 200 L310 200" class="flow-default"/>
+  <path d="M600 200 L890 200" class="flow-default"/>
 
-  <!-- Labels on connectors -->
-  <text x="300" y="150" class="sub">HTTPS</text>
-  <text x="510" y="150" class="sub">Docker network</text>
-  <text x="190" y="405" class="sub">SQL</text>
-  <text x="370" y="405" class="sub">Query API</text>
-  <text x="640" y="405" class="sub">Cache + jobs</text>
-  <text x="940" y="405" class="sub">IIIF</text>
+  <!-- captions -->
+  <text x="260" y="690" class="caption">CI/CD pipeline publishes images</text>
+  <text x="630" y="690" class="caption">Compose orchestrates runtime stack</text>
 </svg>
 
