[Docs Site] Use ranges rather than duplication in Workers Isolates di…

…agram (#13376)
cloudflare · Mar 12, 2024 · 8685d0c · 8685d0c
1 parent 24e1569
commit 8685d0c
Showing 1 changed file with 6 additions and 124 deletions.
diff --git a/layouts/shortcodes/architecture-diagram.html b/layouts/shortcodes/architecture-diagram.html
@@ -1,143 +1,25 @@
 <div class="ArchitectureDiagram">
   <div class="ArchitectureDiagram--diagram">
     <div class="ArchitectureDiagram--content">
+      {{ range seq 9 }}
       <div class="ArchitectureDiagram--process-overhead">
         <div class="ArchitectureDiagram--user-code"></div>
         <div class="ArchitectureDiagram--process-overhead-background"></div>
       </div>
-      <div class="ArchitectureDiagram--process-overhead">
-        <div class="ArchitectureDiagram--user-code"></div>
-        <div class="ArchitectureDiagram--process-overhead-background"></div>
-      </div>
-      <div class="ArchitectureDiagram--process-overhead">
-        <div class="ArchitectureDiagram--user-code"></div>
-        <div class="ArchitectureDiagram--process-overhead-background"></div>
-      </div>
-      <div class="ArchitectureDiagram--process-overhead">
-        <div class="ArchitectureDiagram--user-code"></div>
-        <div class="ArchitectureDiagram--process-overhead-background"></div>
-      </div>
-      <div class="ArchitectureDiagram--process-overhead">
-        <div class="ArchitectureDiagram--user-code"></div>
-        <div class="ArchitectureDiagram--process-overhead-background"></div>
-      </div>
-      <div class="ArchitectureDiagram--process-overhead">
-        <div class="ArchitectureDiagram--user-code"></div>
-        <div class="ArchitectureDiagram--process-overhead-background"></div>
-      </div>
-      <div class="ArchitectureDiagram--process-overhead">
-        <div class="ArchitectureDiagram--user-code"></div>
-        <div class="ArchitectureDiagram--process-overhead-background"></div>
-      </div>
-      <div class="ArchitectureDiagram--process-overhead">
-        <div class="ArchitectureDiagram--user-code"></div>
-        <div class="ArchitectureDiagram--process-overhead-background"></div>
-      </div>
-      <div class="ArchitectureDiagram--process-overhead">
-        <div class="ArchitectureDiagram--user-code"></div>
-        <div class="ArchitectureDiagram--process-overhead-background"></div>
-      </div>
+      {{ end }}
     </div>
     <div class="ArchitectureDiagram--caption">Traditional architecture</div>
   </div>
   <div class="ArchitectureDiagram--diagram">
     <div class="ArchitectureDiagram--content">
+      {{ range seq 8 }}
       <div class="ArchitectureDiagram--process-overhead">
+        {{ range seq 9 }}
         <div class="ArchitectureDiagram--user-code"></div>
-        <div class="ArchitectureDiagram--user-code"></div>
-        <div class="ArchitectureDiagram--user-code"></div>
-        <div class="ArchitectureDiagram--user-code"></div>
-        <div class="ArchitectureDiagram--user-code"></div>
-        <div class="ArchitectureDiagram--user-code"></div>
-        <div class="ArchitectureDiagram--user-code"></div>
-        <div class="ArchitectureDiagram--user-code"></div>
-        <div class="ArchitectureDiagram--user-code"></div>
-        <div class="ArchitectureDiagram--process-overhead-background"></div>
-      </div>
-      <div class="ArchitectureDiagram--process-overhead">
-        <div class="ArchitectureDiagram--user-code"></div>
-        <div class="ArchitectureDiagram--user-code"></div>
-        <div class="ArchitectureDiagram--user-code"></div>
-        <div class="ArchitectureDiagram--user-code"></div>
-        <div class="ArchitectureDiagram--user-code"></div>
-        <div class="ArchitectureDiagram--user-code"></div>
-        <div class="ArchitectureDiagram--user-code"></div>
-        <div class="ArchitectureDiagram--user-code"></div>
-        <div class="ArchitectureDiagram--user-code"></div>
-        <div class="ArchitectureDiagram--process-overhead-background"></div>
-      </div>
-      <div class="ArchitectureDiagram--process-overhead">
-        <div class="ArchitectureDiagram--user-code"></div>
-        <div class="ArchitectureDiagram--user-code"></div>
-        <div class="ArchitectureDiagram--user-code"></div>
-        <div class="ArchitectureDiagram--user-code"></div>
-        <div class="ArchitectureDiagram--user-code"></div>
-        <div class="ArchitectureDiagram--user-code"></div>
-        <div class="ArchitectureDiagram--user-code"></div>
-        <div class="ArchitectureDiagram--user-code"></div>
-        <div class="ArchitectureDiagram--user-code"></div>
-        <div class="ArchitectureDiagram--process-overhead-background"></div>
-      </div>
-      <div class="ArchitectureDiagram--process-overhead">
-        <div class="ArchitectureDiagram--user-code"></div>
-        <div class="ArchitectureDiagram--user-code"></div>
-        <div class="ArchitectureDiagram--user-code"></div>
-        <div class="ArchitectureDiagram--user-code"></div>
-        <div class="ArchitectureDiagram--user-code"></div>
-        <div class="ArchitectureDiagram--user-code"></div>
-        <div class="ArchitectureDiagram--user-code"></div>
-        <div class="ArchitectureDiagram--user-code"></div>
-        <div class="ArchitectureDiagram--user-code"></div>
-        <div class="ArchitectureDiagram--process-overhead-background"></div>
-      </div>
-      <div class="ArchitectureDiagram--process-overhead">
-        <div class="ArchitectureDiagram--user-code"></div>
-        <div class="ArchitectureDiagram--user-code"></div>
-        <div class="ArchitectureDiagram--user-code"></div>
-        <div class="ArchitectureDiagram--user-code"></div>
-        <div class="ArchitectureDiagram--user-code"></div>
-        <div class="ArchitectureDiagram--user-code"></div>
-        <div class="ArchitectureDiagram--user-code"></div>
-        <div class="ArchitectureDiagram--user-code"></div>
-        <div class="ArchitectureDiagram--user-code"></div>
-        <div class="ArchitectureDiagram--process-overhead-background"></div>
-      </div>
-      <div class="ArchitectureDiagram--process-overhead">
-        <div class="ArchitectureDiagram--user-code"></div>
-        <div class="ArchitectureDiagram--user-code"></div>
-        <div class="ArchitectureDiagram--user-code"></div>
-        <div class="ArchitectureDiagram--user-code"></div>
-        <div class="ArchitectureDiagram--user-code"></div>
-        <div class="ArchitectureDiagram--user-code"></div>
-        <div class="ArchitectureDiagram--user-code"></div>
-        <div class="ArchitectureDiagram--user-code"></div>
-        <div class="ArchitectureDiagram--user-code"></div>
-        <div class="ArchitectureDiagram--process-overhead-background"></div>
-      </div>
-      <div class="ArchitectureDiagram--process-overhead">
-        <div class="ArchitectureDiagram--user-code"></div>
-        <div class="ArchitectureDiagram--user-code"></div>
-        <div class="ArchitectureDiagram--user-code"></div>
-        <div class="ArchitectureDiagram--user-code"></div>
-        <div class="ArchitectureDiagram--user-code"></div>
-        <div class="ArchitectureDiagram--user-code"></div>
-        <div class="ArchitectureDiagram--user-code"></div>
-        <div class="ArchitectureDiagram--user-code"></div>
-        <div class="ArchitectureDiagram--user-code"></div>
-        <div class="ArchitectureDiagram--process-overhead-background"></div>
-      </div>
-      <div class="ArchitectureDiagram--process-overhead">
-        <div class="ArchitectureDiagram--user-code"></div>
-        <div class="ArchitectureDiagram--user-code"></div>
-        <div class="ArchitectureDiagram--user-code"></div>
-        <div class="ArchitectureDiagram--user-code"></div>
-        <div class="ArchitectureDiagram--user-code"></div>
-        <div class="ArchitectureDiagram--user-code"></div>
-        <div class="ArchitectureDiagram--user-code"></div>
-        <div class="ArchitectureDiagram--user-code"></div>
-        <div class="ArchitectureDiagram--user-code"></div>
+        {{ end }}
         <div class="ArchitectureDiagram--process-overhead-background"></div>
       </div>
+      {{ end }}
       <div class="ArchitectureDiagram--process-overhead">
         <div class="ArchitectureDiagram--user-code"></div>
         <div class="ArchitectureDiagram--process-overhead-background"></div>