update

terrastruct · Jul 30, 2023 · 6127138 · 6127138
1 parent 7d9db79
commit 6127138
Show file tree

Hide file tree

Showing 11 changed files with 1,102 additions and 481 deletions.
diff --git a/docs/tour/globs.md b/docs/tour/globs.md
@@ -48,6 +48,19 @@ Donkey Kong
 
 <div style={{width: 600}} className="embedSVG" dangerouslySetInnerHTML={{__html: require('@site/static/img/generated/globs-casing.svg2')}}></div>
 
+## Globs can appear multiple times
+
+```d2
+teacher
+thriller
+thrifter
+
+
+t*h*r.shape: person
+```
+
+<div style={{width: 600}} className="embedSVG" dangerouslySetInnerHTML={{__html: require('@site/static/img/generated/globs-multiple.svg2')}}></div>
+
 ## Glob connections
 
 You can use globs to create connections.
@@ -68,6 +81,11 @@ Spiderman 3
 
 <div style={{width: 600}} className="embedSVG" dangerouslySetInnerHTML={{__html: require('@site/static/img/generated/globs-connections.svg2')}}></div>
 
+:::info
+Notice how self-connections were omitted. While not entirely consistent with what you may
+expect from globs, we feel it is more pragmatic for this to be the behavior.
+:::
+
 You can also use globs to target modifying existing connections.
 
 ```d2
@@ -132,16 +150,39 @@ zone-A: {
   }
 }
 
-# Connect everything in zone-A to the load balancer
 zone-A.** -> load balancer
 ```
 
 <div style={{width: 600}} className="embedSVG" dangerouslySetInnerHTML={{__html: require('@site/static/img/generated/globs-recursive-2.svg2')}}></div>
 
+
+:::info
+Notice how `machine B` was not captured. Similar to the exception with `* -> *` omitting
+self-connections, recursive globs in connections also make an exception for practical
+diagramming: it only applies to non-container (AKA leaf) shapes.
+:::
+
 ## Filters
 
 Use `&` to filter what globs target.
 
+```d2
+bravo team.shape: person
+charlie team.shape: person
+command center.shape: cloud
+hq.shape: rectangle
+
+*: {
+  &shape: person
+  style.multiple: true
+}
+```
+
+<div style={{width: 600}} className="embedSVG" dangerouslySetInnerHTML={{__html: require('@site/static/img/generated/globs-filter.svg2')}}></div>
+
+If the filtered attribute has an array value, the filter will match if it matches any
+element of the array.
+
 ```d2
 the-little-cannon: {
   class: [server; deployed]
@@ -159,4 +200,33 @@ catapult: {
 }
 ```
 
-<div style={{width: 600}} className="embedSVG" dangerouslySetInnerHTML={{__html: require('@site/static/img/generated/globs-filter.svg2')}}></div>
+<div style={{width: 600}} className="embedSVG" dangerouslySetInnerHTML={{__html: require('@site/static/img/generated/globs-filter-2.svg2')}}></div>
+
+## Nested globs
+
+You can nest globs, combining the features above.
+
+```d2
+conversation 1: {
+  shape: sequence_diagram
+  alice -> bob: hi
+  bob -> alice: hi
+}
+
+conversation 2: {
+  shape: sequence_diagram
+  alice -> bob: hello again
+  alice -> bob: hello?
+  bob -> alice: hello
+}
+
+# Recursively target all shapes...
+**: {
+  # ... that are sequence diagrams
+  &shape: sequence_diagram
+  # Then recursively set all shapes in them to person
+  **: { shape: person }
+}
+```
+
+<div style={{width: 600}} className="embedSVG" dangerouslySetInnerHTML={{__html: require('@site/static/img/generated/globs-nested.svg2')}}></div>
diff --git a/static/d2/globs-filter-2.d2 b/static/d2/globs-filter-2.d2
@@ -0,0 +1,14 @@
+the-little-cannon: {
+  class: [server; deployed]
+}
+dino: {
+  class: [internal; deployed]
+}
+catapult: {
+  class: [server]
+}
+
+*: {
+  &class: server
+  style.multiple: true
+}
diff --git a/static/d2/globs-filter.d2 b/static/d2/globs-filter.d2
@@ -1,14 +1,9 @@
-the-little-cannon: {
-  class: [server; deployed]
-}
-dino: {
-  class: [internal; deployed]
-}
-catapult: {
-  class: [server]
-}
+bravo team.shape: person
+charlie team.shape: person
+command center.shape: cloud
+hq.shape: rectangle
 
 *: {
-  &class: server
+  &shape: person
   style.multiple: true
 }
diff --git a/static/d2/globs-multiple.d2 b/static/d2/globs-multiple.d2
@@ -0,0 +1,5 @@
+teacher
+thriller
+thrifter
+
+t*h*r.shape: person
diff --git a/static/d2/globs-nested.d2 b/static/d2/globs-nested.d2
@@ -0,0 +1,17 @@
+conversation 1: {
+  shape: sequence_diagram
+  alice -> bob: hi
+  bob -> alice: hi
+}
+
+conversation 2: {
+  shape: sequence_diagram
+  alice -> bob: hello again
+  alice -> bob: hello?
+  bob -> alice: hello
+}
+
+**: {
+  &shape: sequence_diagram
+  **: { shape: person }
+}
diff --git a/static/img/generated/globs-connections.svg2 b/static/img/generated/globs-connections.svg2
diff --git a/static/img/generated/globs-filter-2.svg2 b/static/img/generated/globs-filter-2.svg2
diff --git a/static/img/generated/globs-filter.svg2 b/static/img/generated/globs-filter.svg2
diff --git a/static/img/generated/globs-multiple.svg2 b/static/img/generated/globs-multiple.svg2
@@ -0,0 +1,169 @@
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" d2Version="v0.6.0-HEAD" preserveAspectRatio="xMidYMid meet" viewBox="0 0 326 93"><svg id="d2-svg" class="d2-2145690608" width="326" height="93" viewBox="-1 -1 326 93"><rect x="-1.000000" y="-1.000000" width="326.000000" height="93.000000" rx="0.000000" class=" fill-N7" stroke-width="0" /><style type="text/css"><![CDATA[
+.d2-2145690608 .text-bold {
+	font-family: "d2-2145690608-font-bold";
+}
+@font-face {
+	font-family: d2-2145690608-font-bold;
+	src: url("data:application/font-woff;base64,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");
+}]]></style><style type="text/css"><![CDATA[.shape {
+  shape-rendering: geometricPrecision;
+  stroke-linejoin: round;
+}
+.connection {
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+.blend {
+  mix-blend-mode: multiply;
+  opacity: 0.5;
+}
+
+		.d2-2145690608 .fill-N1{fill:#0A0F25;}
+		.d2-2145690608 .fill-N2{fill:#676C7E;}
+		.d2-2145690608 .fill-N3{fill:#9499AB;}
+		.d2-2145690608 .fill-N4{fill:#CFD2DD;}
+		.d2-2145690608 .fill-N5{fill:#DEE1EB;}
+		.d2-2145690608 .fill-N6{fill:#EEF1F8;}
+		.d2-2145690608 .fill-N7{fill:#FFFFFF;}
+		.d2-2145690608 .fill-B1{fill:#0D32B2;}
+		.d2-2145690608 .fill-B2{fill:#0D32B2;}
+		.d2-2145690608 .fill-B3{fill:#E3E9FD;}
+		.d2-2145690608 .fill-B4{fill:#E3E9FD;}
+		.d2-2145690608 .fill-B5{fill:#EDF0FD;}
+		.d2-2145690608 .fill-B6{fill:#F7F8FE;}
+		.d2-2145690608 .fill-AA2{fill:#4A6FF3;}
+		.d2-2145690608 .fill-AA4{fill:#EDF0FD;}
+		.d2-2145690608 .fill-AA5{fill:#F7F8FE;}
+		.d2-2145690608 .fill-AB4{fill:#EDF0FD;}
+		.d2-2145690608 .fill-AB5{fill:#F7F8FE;}
+		.d2-2145690608 .stroke-N1{stroke:#0A0F25;}
+		.d2-2145690608 .stroke-N2{stroke:#676C7E;}
+		.d2-2145690608 .stroke-N3{stroke:#9499AB;}
+		.d2-2145690608 .stroke-N4{stroke:#CFD2DD;}
+		.d2-2145690608 .stroke-N5{stroke:#DEE1EB;}
+		.d2-2145690608 .stroke-N6{stroke:#EEF1F8;}
+		.d2-2145690608 .stroke-N7{stroke:#FFFFFF;}
+		.d2-2145690608 .stroke-B1{stroke:#0D32B2;}
+		.d2-2145690608 .stroke-B2{stroke:#0D32B2;}
+		.d2-2145690608 .stroke-B3{stroke:#E3E9FD;}
+		.d2-2145690608 .stroke-B4{stroke:#E3E9FD;}
+		.d2-2145690608 .stroke-B5{stroke:#EDF0FD;}
+		.d2-2145690608 .stroke-B6{stroke:#F7F8FE;}
+		.d2-2145690608 .stroke-AA2{stroke:#4A6FF3;}
+		.d2-2145690608 .stroke-AA4{stroke:#EDF0FD;}
+		.d2-2145690608 .stroke-AA5{stroke:#F7F8FE;}
+		.d2-2145690608 .stroke-AB4{stroke:#EDF0FD;}
+		.d2-2145690608 .stroke-AB5{stroke:#F7F8FE;}
+		.d2-2145690608 .background-color-N1{background-color:#0A0F25;}
+		.d2-2145690608 .background-color-N2{background-color:#676C7E;}
+		.d2-2145690608 .background-color-N3{background-color:#9499AB;}
+		.d2-2145690608 .background-color-N4{background-color:#CFD2DD;}
+		.d2-2145690608 .background-color-N5{background-color:#DEE1EB;}
+		.d2-2145690608 .background-color-N6{background-color:#EEF1F8;}
+		.d2-2145690608 .background-color-N7{background-color:#FFFFFF;}
+		.d2-2145690608 .background-color-B1{background-color:#0D32B2;}
+		.d2-2145690608 .background-color-B2{background-color:#0D32B2;}
+		.d2-2145690608 .background-color-B3{background-color:#E3E9FD;}
+		.d2-2145690608 .background-color-B4{background-color:#E3E9FD;}
+		.d2-2145690608 .background-color-B5{background-color:#EDF0FD;}
+		.d2-2145690608 .background-color-B6{background-color:#F7F8FE;}
+		.d2-2145690608 .background-color-AA2{background-color:#4A6FF3;}
+		.d2-2145690608 .background-color-AA4{background-color:#EDF0FD;}
+		.d2-2145690608 .background-color-AA5{background-color:#F7F8FE;}
+		.d2-2145690608 .background-color-AB4{background-color:#EDF0FD;}
+		.d2-2145690608 .background-color-AB5{background-color:#F7F8FE;}
+		.d2-2145690608 .color-N1{color:#0A0F25;}
+		.d2-2145690608 .color-N2{color:#676C7E;}
+		.d2-2145690608 .color-N3{color:#9499AB;}
+		.d2-2145690608 .color-N4{color:#CFD2DD;}
+		.d2-2145690608 .color-N5{color:#DEE1EB;}
+		.d2-2145690608 .color-N6{color:#EEF1F8;}
+		.d2-2145690608 .color-N7{color:#FFFFFF;}
+		.d2-2145690608 .color-B1{color:#0D32B2;}
+		.d2-2145690608 .color-B2{color:#0D32B2;}
+		.d2-2145690608 .color-B3{color:#E3E9FD;}
+		.d2-2145690608 .color-B4{color:#E3E9FD;}
+		.d2-2145690608 .color-B5{color:#EDF0FD;}
+		.d2-2145690608 .color-B6{color:#F7F8FE;}
+		.d2-2145690608 .color-AA2{color:#4A6FF3;}
+		.d2-2145690608 .color-AA4{color:#EDF0FD;}
+		.d2-2145690608 .color-AA5{color:#F7F8FE;}
+		.d2-2145690608 .color-AB4{color:#EDF0FD;}
+		.d2-2145690608 .color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}@media screen and (prefers-color-scheme:dark){
+		.d2-2145690608 .fill-N1{fill:#CDD6F4;}
+		.d2-2145690608 .fill-N2{fill:#BAC2DE;}
+		.d2-2145690608 .fill-N3{fill:#A6ADC8;}
+		.d2-2145690608 .fill-N4{fill:#585B70;}
+		.d2-2145690608 .fill-N5{fill:#45475A;}
+		.d2-2145690608 .fill-N6{fill:#313244;}
+		.d2-2145690608 .fill-N7{fill:#1E1E2E;}
+		.d2-2145690608 .fill-B1{fill:#CBA6f7;}
+		.d2-2145690608 .fill-B2{fill:#CBA6f7;}
+		.d2-2145690608 .fill-B3{fill:#6C7086;}
+		.d2-2145690608 .fill-B4{fill:#585B70;}
+		.d2-2145690608 .fill-B5{fill:#45475A;}
+		.d2-2145690608 .fill-B6{fill:#313244;}
+		.d2-2145690608 .fill-AA2{fill:#f38BA8;}
+		.d2-2145690608 .fill-AA4{fill:#45475A;}
+		.d2-2145690608 .fill-AA5{fill:#313244;}
+		.d2-2145690608 .fill-AB4{fill:#45475A;}
+		.d2-2145690608 .fill-AB5{fill:#313244;}
+		.d2-2145690608 .stroke-N1{stroke:#CDD6F4;}
+		.d2-2145690608 .stroke-N2{stroke:#BAC2DE;}
+		.d2-2145690608 .stroke-N3{stroke:#A6ADC8;}
+		.d2-2145690608 .stroke-N4{stroke:#585B70;}
+		.d2-2145690608 .stroke-N5{stroke:#45475A;}
+		.d2-2145690608 .stroke-N6{stroke:#313244;}
+		.d2-2145690608 .stroke-N7{stroke:#1E1E2E;}
+		.d2-2145690608 .stroke-B1{stroke:#CBA6f7;}
+		.d2-2145690608 .stroke-B2{stroke:#CBA6f7;}
+		.d2-2145690608 .stroke-B3{stroke:#6C7086;}
+		.d2-2145690608 .stroke-B4{stroke:#585B70;}
+		.d2-2145690608 .stroke-B5{stroke:#45475A;}
+		.d2-2145690608 .stroke-B6{stroke:#313244;}
+		.d2-2145690608 .stroke-AA2{stroke:#f38BA8;}
+		.d2-2145690608 .stroke-AA4{stroke:#45475A;}
+		.d2-2145690608 .stroke-AA5{stroke:#313244;}
+		.d2-2145690608 .stroke-AB4{stroke:#45475A;}
+		.d2-2145690608 .stroke-AB5{stroke:#313244;}
+		.d2-2145690608 .background-color-N1{background-color:#CDD6F4;}
+		.d2-2145690608 .background-color-N2{background-color:#BAC2DE;}
+		.d2-2145690608 .background-color-N3{background-color:#A6ADC8;}
+		.d2-2145690608 .background-color-N4{background-color:#585B70;}
+		.d2-2145690608 .background-color-N5{background-color:#45475A;}
+		.d2-2145690608 .background-color-N6{background-color:#313244;}
+		.d2-2145690608 .background-color-N7{background-color:#1E1E2E;}
+		.d2-2145690608 .background-color-B1{background-color:#CBA6f7;}
+		.d2-2145690608 .background-color-B2{background-color:#CBA6f7;}
+		.d2-2145690608 .background-color-B3{background-color:#6C7086;}
+		.d2-2145690608 .background-color-B4{background-color:#585B70;}
+		.d2-2145690608 .background-color-B5{background-color:#45475A;}
+		.d2-2145690608 .background-color-B6{background-color:#313244;}
+		.d2-2145690608 .background-color-AA2{background-color:#f38BA8;}
+		.d2-2145690608 .background-color-AA4{background-color:#45475A;}
+		.d2-2145690608 .background-color-AA5{background-color:#313244;}
+		.d2-2145690608 .background-color-AB4{background-color:#45475A;}
+		.d2-2145690608 .background-color-AB5{background-color:#313244;}
+		.d2-2145690608 .color-N1{color:#CDD6F4;}
+		.d2-2145690608 .color-N2{color:#BAC2DE;}
+		.d2-2145690608 .color-N3{color:#A6ADC8;}
+		.d2-2145690608 .color-N4{color:#585B70;}
+		.d2-2145690608 .color-N5{color:#45475A;}
+		.d2-2145690608 .color-N6{color:#313244;}
+		.d2-2145690608 .color-N7{color:#1E1E2E;}
+		.d2-2145690608 .color-B1{color:#CBA6f7;}
+		.d2-2145690608 .color-B2{color:#CBA6f7;}
+		.d2-2145690608 .color-B3{color:#6C7086;}
+		.d2-2145690608 .color-B4{color:#585B70;}
+		.d2-2145690608 .color-B5{color:#45475A;}
+		.d2-2145690608 .color-B6{color:#313244;}
+		.d2-2145690608 .color-AA2{color:#f38BA8;}
+		.d2-2145690608 .color-AA4{color:#45475A;}
+		.d2-2145690608 .color-AA5{color:#313244;}
+		.d2-2145690608 .color-AB4{color:#45475A;}
+		.d2-2145690608 .color-AB5{color:#313244;}.appendix text.text{fill:#CDD6F4}.md{--color-fg-default:#CDD6F4;--color-fg-muted:#BAC2DE;--color-fg-subtle:#A6ADC8;--color-canvas-default:#1E1E2E;--color-canvas-subtle:#313244;--color-border-default:#CBA6f7;--color-border-muted:#CBA6f7;--color-neutral-muted:#313244;--color-accent-fg:#CBA6f7;--color-accent-emphasis:#CBA6f7;--color-attention-subtle:#BAC2DE;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-B2{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-B3{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-B4{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-B5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B6{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AA2{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-AA4{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AA5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AB4{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AB5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N1{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N2{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N6{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N7{fill:url(#streaks-darker);mix-blend-mode:lighten}.light-code{display: none}.dark-code{display: block}}]]></style><g id="teacher"><g class="shape" ><path d="M 70 66 H 0 V 65 C 0 54 8 44 20 39 C 13 35 9 28 9 21 C 9 10 21 0 35 0 C 49 0 61 10 61 21 C 61 28 57 34 50 38 C 62 43 70 53 70 64 V 65 H 70 Z" class=" stroke-B1 fill-B3" style="stroke-width:2;" /></g><text x="35.000000" y="87.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">teacher</text></g><g id="thriller"><g class="shape" ><path d="M 196 66 H 130 V 65 C 130 54 137 44 149 39 C 142 35 139 28 139 21 C 139 10 150 0 163 0 C 176 0 187 10 187 21 C 187 28 183 34 177 38 C 188 43 196 53 196 64 V 65 H 196 Z" class=" stroke-B1 fill-B3" style="stroke-width:2;" /></g><text x="163.000000" y="87.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">thriller</text></g><g id="thrifter"><g class="shape" ><path d="M 324 66 H 256 V 65 C 256 54 263 44 275 39 C 269 35 265 28 265 21 C 265 10 276 0 290 0 C 304 0 315 10 315 21 C 315 28 311 34 305 38 C 317 43 324 53 324 64 V 65 H 324 Z" class=" stroke-B1 fill-B3" style="stroke-width:2;" /></g><text x="290.000000" y="87.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">thrifter</text></g><mask id="d2-2145690608" maskUnits="userSpaceOnUse" x="-1" y="-1" width="326" height="93">
+<rect x="-1" y="-1" width="326" height="93" fill="white"></rect>
+<rect x="7.500000" y="71.000000" width="55" height="21" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="137.500000" y="71.000000" width="51" height="21" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="263.500000" y="71.000000" width="53" height="21" fill="rgba(0,0,0,0.75)"></rect>
+</mask></svg></svg>