Merge pull request #170 from terrastruct/label-near

docs on label near
terrastruct · Jul 29, 2023 · 151f0c2 · 151f0c2
2 parents 339cda0 + f2979b6
commit 151f0c2
Show file tree

Hide file tree

Showing 136 changed files with 19,981 additions and 19,352 deletions.
diff --git a/docs/tour/icons.md b/docs/tour/icons.md
@@ -66,6 +66,10 @@ vpc: VPC 1 10.1.0.0./16 {
 
 <div className="embedSVG" dangerouslySetInnerHTML={{__html: require('@site/static/img/generated/icon-placement.svg2')}}></div>
 
+:::info
+Icons can be positioned with the `near` keyword [introduced later](/tour/positions#label-and-icon-positioning).
+:::
+
 ## Add `shape: image` for standalone icon shapes
 
 ```d2
@@ -83,3 +87,4 @@ server -> github
 ```
 
 <div className="embedSVG" dangerouslySetInnerHTML={{__html: require('@site/static/img/generated/icons-image.svg2')}}></div>
+
diff --git a/docs/tour/positions.md b/docs/tour/positions.md
@@ -96,6 +96,46 @@ Server.Online Model Server
 
 <div className="embedSVG" dangerouslySetInnerHTML={{__html: require('@site/static/img/generated/near-explanation.svg2')}}></div>
 
+## Label and icon positioning
+
+The `near` can be nested to `label` and `icon` to specify their positions.
+
+```d2
+direction: right
+x -> y
+
+x: worker {
+  label.near: top-center
+  icon: https://icons.terrastruct.com/essentials%2F005-programmer.svg
+  icon.near: outside-top-right
+}
+
+y: profits {
+  label.near: bottom-right
+  icon: https://icons.terrastruct.com/essentials%2Fprofits.svg
+  icon.near: outside-top-left
+}
+```
+
+<div className="embedSVG" dangerouslySetInnerHTML={{__html: require('@site/static/img/generated/near-label-icon.svg2')}}></div>
+
+:::info Extra values
+
+When positioning labels and icons, in addition to the values that `near` can take
+elsewhere, an `outside-` prefix can be added to specify positioning outside the bounding
+box of the shape.
+
+`outside-top-left`, `outside-top-center`, `outside-top-right`,
+
+`outside-left-center`, `outside-right-center`,
+
+`outside-bottom-left`, `outside-bottom-center`, `outside-bottom-right`
+
+
+Note that `outside-left-center` is a different order than `center-left`.
+:::
+
+
 ## Near objects
 
 :::info

diff --git a/docs/tour/themes.md b/docs/tour/themes.md
@@ -12,9 +12,13 @@ into blogs and wikis.
 
 ### They apply to special shapes like tables too
 
-<!-- <img width={600} src={require('@site/static/img/screenshots/themes/theme_table_1.png').default} alt="table neutral theme"/> -->
-<!-- <img width={600} src={require('@site/static/img/screenshots/themes/theme_table_2.png').default} alt="table mixed berry blue theme"/> -->
-<!-- <img width={600} src={require('@site/static/img/screenshots/themes/theme_table_3.png').default} alt="table vanilla nitro cola theme"/> -->
+# Rendered with theme "Grape soda"
+
+<div className="embedSVG" dangerouslySetInnerHTML={{__html: require('@site/static/img/generated/theme-table.svg2')}}></div>
+
+# Rendered with theme "Vanilla nitro cola"
+
+<div className="embedSVG" dangerouslySetInnerHTML={{__html: require('@site/static/img/generated/theme-table-2.svg2')}}></div>
 
 ## Setting theme on the CLI
 

diff --git a/static/d2/near-label-icon.d2 b/static/d2/near-label-icon.d2
@@ -0,0 +1,14 @@
+direction: right
+x -> y
+
+x: worker {
+  label.near: top-center
+  icon: https://icons.terrastruct.com/essentials%2F005-programmer.svg
+  icon.near: outside-top-right
+}
+
+y: profits {
+  label.near: bottom-right
+  icon: https://icons.terrastruct.com/essentials%2Fprofits.svg
+  icon.near: outside-top-left
+}
diff --git a/static/d2/theme-table-2.d2 b/static/d2/theme-table-2.d2
@@ -0,0 +1,25 @@
+vars: {
+  d2-config: {
+    theme-id: 100
+  }
+}
+
+direction: right
+
+costumes: {
+  shape: sql_table
+  id: int {constraint: primary_key}
+  silliness: int
+  monster: int
+  last_updated: timestamp
+}
+
+monsters: {
+  shape: sql_table
+  id: int {constraint: primary_key}
+  movie: string
+  weight: int
+  last_updated: timestamp
+}
+
+costumes.monster -> monsters.id
diff --git a/static/d2/theme-table.d2 b/static/d2/theme-table.d2
@@ -0,0 +1,25 @@
+vars: {
+  d2-config: {
+    theme-id: 6
+  }
+}
+
+direction: right
+
+costumes: {
+  shape: sql_table
+  id: int {constraint: primary_key}
+  silliness: int
+  monster: int
+  last_updated: timestamp
+}
+
+monsters: {
+  shape: sql_table
+  id: int {constraint: primary_key}
+  movie: string
+  weight: int
+  last_updated: timestamp
+}
+
+costumes.monster -> monsters.id
diff --git a/static/img/generated/animated.svg2 b/static/img/generated/animated.svg2
diff --git a/static/img/generated/cat.pdf b/static/img/generated/cat.pdf
diff --git a/static/img/generated/chicken.svg2 b/static/img/generated/chicken.svg2
diff --git a/static/img/generated/classes-1.svg2 b/static/img/generated/classes-1.svg2
diff --git a/static/img/generated/classes-2.svg2 b/static/img/generated/classes-2.svg2
diff --git a/static/img/generated/code-2.svg2 b/static/img/generated/code-2.svg2
diff --git a/static/img/generated/code.svg2 b/static/img/generated/code.svg2
diff --git a/static/img/generated/connections-1.svg2 b/static/img/generated/connections-1.svg2
diff --git a/static/img/generated/connections-2.svg2 b/static/img/generated/connections-2.svg2
diff --git a/static/img/generated/connections-3.svg2 b/static/img/generated/connections-3.svg2
diff --git a/static/img/generated/connections-4.svg2 b/static/img/generated/connections-4.svg2
diff --git a/static/img/generated/connections-5.svg2 b/static/img/generated/connections-5.svg2
diff --git a/static/img/generated/connections-reference.svg2 b/static/img/generated/connections-reference.svg2
diff --git a/static/img/generated/containers-1.svg2 b/static/img/generated/containers-1.svg2
diff --git a/static/img/generated/containers-2.svg2 b/static/img/generated/containers-2.svg2
diff --git a/static/img/generated/containers-3.svg2 b/static/img/generated/containers-3.svg2
diff --git a/static/img/generated/containers-underscore.svg2 b/static/img/generated/containers-underscore.svg2
diff --git a/static/img/generated/cult.pptx b/static/img/generated/cult.pptx
diff --git a/static/img/generated/dimensions.svg2 b/static/img/generated/dimensions.svg2
diff --git a/static/img/generated/direction-right.svg2 b/static/img/generated/direction-right.svg2
diff --git a/static/img/generated/direction-up.svg2 b/static/img/generated/direction-up.svg2
diff --git a/static/img/generated/grid-2.svg2 b/static/img/generated/grid-2.svg2
diff --git a/static/img/generated/grid-3.svg2 b/static/img/generated/grid-3.svg2
diff --git a/static/img/generated/grid-4.svg2 b/static/img/generated/grid-4.svg2
diff --git a/static/img/generated/grid-column-dominant.svg2 b/static/img/generated/grid-column-dominant.svg2
diff --git a/static/img/generated/grid-connected.svg2 b/static/img/generated/grid-connected.svg2
diff --git a/static/img/generated/grid-dimensions.svg2 b/static/img/generated/grid-dimensions.svg2
diff --git a/static/img/generated/grid-fill.svg2 b/static/img/generated/grid-fill.svg2
diff --git a/static/img/generated/grid-nested-grid.svg2 b/static/img/generated/grid-nested-grid.svg2
diff --git a/static/img/generated/grid-row-dominant.svg2 b/static/img/generated/grid-row-dominant.svg2
diff --git a/static/img/generated/grid.svg2 b/static/img/generated/grid.svg2
diff --git a/static/img/generated/hello-world.svg2 b/static/img/generated/hello-world.svg2
diff --git a/static/img/generated/icon-placement.svg2 b/static/img/generated/icon-placement.svg2
diff --git a/static/img/generated/icons-1.svg2 b/static/img/generated/icons-1.svg2
diff --git a/static/img/generated/icons-image.svg2 b/static/img/generated/icons-image.svg2
diff --git a/static/img/generated/imports-classes-main.svg2 b/static/img/generated/imports-classes-main.svg2
diff --git a/static/img/generated/imports-mv-access-view.svg2 b/static/img/generated/imports-mv-access-view.svg2
diff --git a/static/img/generated/imports-mv-models.svg2 b/static/img/generated/imports-mv-models.svg2
diff --git a/static/img/generated/imports-mv-ssh-view.svg2 b/static/img/generated/imports-mv-ssh-view.svg2
diff --git a/static/img/generated/imports-nested-data.svg2 b/static/img/generated/imports-nested-data.svg2
diff --git a/static/img/generated/imports-nested-serviceB/data.svg2 b/static/img/generated/imports-nested-serviceB/data.svg2
diff --git a/static/img/generated/imports-nested-serviceB/index.svg2 b/static/img/generated/imports-nested-serviceB/index.svg2
diff --git a/static/img/generated/imports-nested.pdf b/static/img/generated/imports-nested.pdf
diff --git a/static/img/generated/imports-normal-x.svg2 b/static/img/generated/imports-normal-x.svg2
diff --git a/static/img/generated/imports-normal.svg2 b/static/img/generated/imports-normal.svg2
diff --git a/static/img/generated/imports-targeted-people.svg2 b/static/img/generated/imports-targeted-people.svg2
diff --git a/static/img/generated/imports-targeted.svg2 b/static/img/generated/imports-targeted.svg2
diff --git a/static/img/generated/imports-template.svg2 b/static/img/generated/imports-template.svg2
diff --git a/static/img/generated/imports-vv-history.svg2 b/static/img/generated/imports-vv-history.svg2
diff --git a/static/img/generated/imports-vv-users-current.svg2 b/static/img/generated/imports-vv-users-current.svg2
diff --git a/static/img/generated/imports-vv-users-v0.1.svg2 b/static/img/generated/imports-vv-users-v0.1.svg2
diff --git a/static/img/generated/japan.svg2 b/static/img/generated/japan.svg2
diff --git a/static/img/generated/johnwick.svg2 b/static/img/generated/johnwick.svg2
diff --git a/static/img/generated/language.svg2 b/static/img/generated/language.svg2
diff --git a/static/img/generated/latex.svg2 b/static/img/generated/latex.svg2
diff --git a/static/img/generated/links.svg2 b/static/img/generated/links.svg2
diff --git a/static/img/generated/lotr.pdf b/static/img/generated/lotr.pdf
diff --git a/static/img/generated/markdown.svg2 b/static/img/generated/markdown.svg2
diff --git a/static/img/generated/multiple-classes.svg2 b/static/img/generated/multiple-classes.svg2
diff --git a/static/img/generated/near-constant.svg2 b/static/img/generated/near-constant.svg2
diff --git a/static/img/generated/near-container.svg2 b/static/img/generated/near-container.svg2
diff --git a/static/img/generated/near-explanation.svg2 b/static/img/generated/near-explanation.svg2
diff --git a/static/img/generated/near-label-icon.svg2 b/static/img/generated/near-label-icon.svg2
diff --git a/static/img/generated/non-markdown-text.svg2 b/static/img/generated/non-markdown-text.svg2
diff --git a/static/img/generated/ordered-classes.svg2 b/static/img/generated/ordered-classes.svg2
diff --git a/static/img/generated/overrides-1.svg2 b/static/img/generated/overrides-1.svg2
diff --git a/static/img/generated/overrides-2.svg2 b/static/img/generated/overrides-2.svg2
diff --git a/static/img/generated/pill.svg2 b/static/img/generated/pill.svg2
diff --git a/static/img/generated/pizza.svg2 b/static/img/generated/pizza.svg2
diff --git a/static/img/generated/sequence-diagrams-1.svg2 b/static/img/generated/sequence-diagrams-1.svg2
diff --git a/static/img/generated/sequence-diagrams-2.svg2 b/static/img/generated/sequence-diagrams-2.svg2
diff --git a/static/img/generated/sequence-diagrams-3.svg2 b/static/img/generated/sequence-diagrams-3.svg2
diff --git a/static/img/generated/sequence-diagrams-4.svg2 b/static/img/generated/sequence-diagrams-4.svg2
diff --git a/static/img/generated/sequence-diagrams-group.svg2 b/static/img/generated/sequence-diagrams-group.svg2
diff --git a/static/img/generated/sequence-diagrams-lifeline.svg2 b/static/img/generated/sequence-diagrams-lifeline.svg2
diff --git a/static/img/generated/sequence-diagrams-note.svg2 b/static/img/generated/sequence-diagrams-note.svg2
diff --git a/static/img/generated/sequence-diagrams-scope.svg2 b/static/img/generated/sequence-diagrams-scope.svg2
diff --git a/static/img/generated/sequence-diagrams-self.svg2 b/static/img/generated/sequence-diagrams-self.svg2
diff --git a/static/img/generated/shapes-1.svg2 b/static/img/generated/shapes-1.svg2
diff --git a/static/img/generated/shapes-2.svg2 b/static/img/generated/shapes-2.svg2
diff --git a/static/img/generated/shapes-3.svg2 b/static/img/generated/shapes-3.svg2
diff --git a/static/img/generated/strings-1.svg2 b/static/img/generated/strings-1.svg2
diff --git a/static/img/generated/strings-2.svg2 b/static/img/generated/strings-2.svg2
diff --git a/static/img/generated/style-classes-1.svg2 b/static/img/generated/style-classes-1.svg2
diff --git a/static/img/generated/style-classes-2.svg2 b/static/img/generated/style-classes-2.svg2
diff --git a/static/img/generated/styles-3d.svg2 b/static/img/generated/styles-3d.svg2
diff --git a/static/img/generated/styles-animated.svg2 b/static/img/generated/styles-animated.svg2
diff --git a/static/img/generated/styles-base.svg2 b/static/img/generated/styles-base.svg2
diff --git a/static/img/generated/styles-border-radius.svg2 b/static/img/generated/styles-border-radius.svg2
diff --git a/static/img/generated/styles-double-border.svg2 b/static/img/generated/styles-double-border.svg2
diff --git a/static/img/generated/styles-fill-pattern.svg2 b/static/img/generated/styles-fill-pattern.svg2
diff --git a/static/img/generated/styles-fill-transparent.svg2 b/static/img/generated/styles-fill-transparent.svg2
diff --git a/static/img/generated/styles-fill.svg2 b/static/img/generated/styles-fill.svg2
diff --git a/static/img/generated/styles-font-color.svg2 b/static/img/generated/styles-font-color.svg2
diff --git a/static/img/generated/styles-font-size.svg2 b/static/img/generated/styles-font-size.svg2
diff --git a/static/img/generated/styles-font.svg2 b/static/img/generated/styles-font.svg2
diff --git a/static/img/generated/styles-multiple.svg2 b/static/img/generated/styles-multiple.svg2
diff --git a/static/img/generated/styles-opacity.svg2 b/static/img/generated/styles-opacity.svg2
diff --git a/static/img/generated/styles-root.svg2 b/static/img/generated/styles-root.svg2
diff --git a/static/img/generated/styles-shadow.svg2 b/static/img/generated/styles-shadow.svg2
diff --git a/static/img/generated/styles-stroke-dash.svg2 b/static/img/generated/styles-stroke-dash.svg2
diff --git a/static/img/generated/styles-stroke-width.svg2 b/static/img/generated/styles-stroke-width.svg2
diff --git a/static/img/generated/styles-stroke.svg2 b/static/img/generated/styles-stroke.svg2
diff --git a/static/img/generated/styles-table-color.svg2 b/static/img/generated/styles-table-color.svg2
diff --git a/static/img/generated/styles-table-fill.svg2 b/static/img/generated/styles-table-fill.svg2
diff --git a/static/img/generated/styles-table-stroke.svg2 b/static/img/generated/styles-table-stroke.svg2
diff --git a/static/img/generated/styles-text-decoration.svg2 b/static/img/generated/styles-text-decoration.svg2
diff --git a/static/img/generated/styles-text-transform.svg2 b/static/img/generated/styles-text-transform.svg2
diff --git a/static/img/generated/table.svg2 b/static/img/generated/table.svg2
diff --git a/static/img/generated/tables-1.svg2 b/static/img/generated/tables-1.svg2
diff --git a/static/img/generated/tables-2.svg2 b/static/img/generated/tables-2.svg2
diff --git a/static/img/generated/tables-3.svg2 b/static/img/generated/tables-3.svg2
diff --git a/static/img/generated/tax.svg2 b/static/img/generated/tax.svg2
diff --git a/static/img/generated/terminal-theme.svg2 b/static/img/generated/terminal-theme.svg2
diff --git a/static/img/generated/text-2.svg2 b/static/img/generated/text-2.svg2
diff --git a/static/img/generated/theme-table-2.svg2 b/static/img/generated/theme-table-2.svg2
diff --git a/static/img/generated/theme-table.svg2 b/static/img/generated/theme-table.svg2
diff --git a/static/img/generated/tiktok.pdf b/static/img/generated/tiktok.pdf
diff --git a/static/img/generated/tooltip.svg2 b/static/img/generated/tooltip.svg2
diff --git a/static/img/generated/unicode.svg2 b/static/img/generated/unicode.svg2
diff --git a/static/img/generated/vars-config.svg2 b/static/img/generated/vars-config.svg2
diff --git a/static/img/generated/vars-escaped.svg2 b/static/img/generated/vars-escaped.svg2
diff --git a/static/img/generated/vars-intro.svg2 b/static/img/generated/vars-intro.svg2
diff --git a/static/img/generated/vars-nested.svg2 b/static/img/generated/vars-nested.svg2
diff --git a/static/img/generated/vars-scoped.svg2 b/static/img/generated/vars-scoped.svg2
diff --git a/static/img/generated/vars-spread.svg2 b/static/img/generated/vars-spread.svg2
diff --git a/static/img/generated/wcc.pptx b/static/img/generated/wcc.pptx
diff --git a/static/img/screenshots/themes/theme_table_1.png b/static/img/screenshots/themes/theme_table_1.png
diff --git a/static/img/screenshots/themes/theme_table_2.png b/static/img/screenshots/themes/theme_table_2.png
diff --git a/static/img/screenshots/themes/theme_table_3.png b/static/img/screenshots/themes/theme_table_3.png