refactor getting-started

docs/tour/connections.md

@@ -1,3 +1,11 @@
+import CodeBlock from '@theme/CodeBlock';
+import Connections1 from '@site/static/d2/connections-1.d2';
+import Connections2 from '@site/static/d2/connections-2.d2';
+import Connections3 from '@site/static/d2/connections-3.d2';
+import Connections4 from '@site/static/d2/connections-4.d2';
+import Connections5 from '@site/static/d2/connections-5.d2';
+import ConnectionsReference from '@site/static/d2/connections-reference.d2';
+
 # Connections
 
 Connections define relationships between shapes.
@@ -49,79 +57,47 @@ be -> fe
 
 ## Example
 
-```d2
-Write Replica Canada <-> Write Replica Australia
-
-Read Replica <- Master
-
-x -- y
-
-super long shape id here --\
-  -> super long shape id even longer here
-```
+<CodeBlock className="language-d2">
+    {Connections1}
+</CodeBlock>
 
 <div className="embedSVG" dangerouslySetInnerHTML={{__html: require('@site/static/img/generated/connections-1.svg2')}}></div>
 
 ## Repeated connections
 
 Repeated connections do not override existing connections. They declare new ones.
 
-```d2
-Database -> S3: backup
-Database -> S3
-Database -> S3: backup
-```
+<CodeBlock className="language-d2">
+    {Connections2}
+</CodeBlock>
 
 <div className="embedSVG" dangerouslySetInnerHTML={{__html: require('@site/static/img/generated/connections-2.svg2')}}></div>
 
 ## Connection chaining
 
 For readability, it may look more natural to define multiple connection in a single line.
 
-```d2
-# The label applies to each connection in the chain.
-High Mem Instance -> EC2 <- High CPU Instance: Hosted By
-```
+<CodeBlock className="language-d2">
+    {Connections3}
+</CodeBlock>
 
 <div className="embedSVG" dangerouslySetInnerHTML={{__html: require('@site/static/img/generated/connections-3.svg2')}}></div>
 
 ## Cycles are okay
 
-```d2
-Stage One -> Stage Two -> Stage Three -> Stage Four
-Stage Four -> Stage One: repeat
-```
+<CodeBlock className="language-d2">
+    {Connections4}
+</CodeBlock>
 
 <div className="embedSVG" dangerouslySetInnerHTML={{__html: require('@site/static/img/generated/connections-4.svg2')}}></div>
 
 ## Arrowheads
 
 To override the default arrowhead shape or give a label next to arrowheads, define a special shape on connections named `source-arrowhead` and/or `target-arrowhead`.
 
-```d2
-a: The best way to avoid responsibility is to say, "I've got responsibilities"
-b: Whether weary or unweary, O man, do not rest
-c: I still maintain the point that designing a monolithic kernel in 1991 is a
-
-a -> b: To err is human, to moo bovine {
-  source-arrowhead: 1
-  target-arrowhead: * {
-    shape: diamond
-  }
-}
-
-b <-> c: "Reality is just a crutch for people who can't handle science fiction" {
-  source-arrowhead.label: 1
-  target-arrowhead: * {
-    shape: diamond
-    style.filled: true
-  }
-}
-
-d: A black cat crossing your path signifies that the animal is going somewhere
-
-d -> a -> c
-```
+<CodeBlock className="language-d2">
+    {Connections5}
+</CodeBlock>
 
 <div className="embedSVG" dangerouslySetInnerHTML={{__html: require('@site/static/img/generated/connections-5.svg2')}}></div>
 
@@ -159,12 +135,8 @@ x -> y: {
 
 You can reference a connection by specifying the original ID followed by its index.
 
-```d2
-x -> y: hi
-x -> y: hello
-
-(x -> y)[0].style.stroke: red
-(x -> y)[1].style.stroke: blue
-```
+<CodeBlock className="language-d2">
+    {ConnectionsReference}
+</CodeBlock>
 
 <div className="embedSVG" dangerouslySetInnerHTML={{__html: require('@site/static/img/generated/connections-reference.svg2')}}></div>

docs/tour/containers.md

@@ -1,36 +1,24 @@
-# Containers
-
-```d2
-server
-# Declares a shape inside of another shape
-server.process
+import CodeBlock from '@theme/CodeBlock';
+import Containers1 from '@site/static/d2/containers-1.d2';
+import Containers2 from '@site/static/d2/containers-2.d2';
+import Containers3 from '@site/static/d2/containers-3.d2';
+import ContainersUnderscore from '@site/static/d2/containers-underscore.d2';
 
-# Can declare the container and child in same line
-im a parent.im a child
+# Containers
 
-# Since connections can also declare keys, this works too
-apartment.Bedroom.Bathroom -> office.Spare Room.Bathroom: Portal
-```
+<CodeBlock className="language-d2">
+    {Containers1}
+</CodeBlock>
 
 <div className="embedSVG" dangerouslySetInnerHTML={{__html: require('@site/static/img/generated/containers-1.svg2')}}></div>
 
 ## Nested syntax
 
 You can avoid repeating containers by creating nested maps.
 
-```d2
-clouds: {
-  aws: {
-    load_balancer -> api
-    api -> db
-  }
-  gcloud: {
-    auth -> db
-  }
-
-  gcloud -> aws
-}
-```
+<CodeBlock className="language-d2">
+    {Containers2}
+</CodeBlock>
 
 <div className="embedSVG" dangerouslySetInnerHTML={{__html: require('@site/static/img/generated/containers-2.svg2')}}></div>
 
@@ -57,24 +45,9 @@ gcloud: {
 
 ## Example
 
-```d2
-clouds: {
-  aws: AWS {
-    load_balancer -> api
-    api -> db
-  }
-  gcloud: Google Cloud {
-    auth -> db
-  }
-
-  gcloud -> aws
-}
-
-users -> clouds.aws.load_balancer
-users -> clouds.gcloud.auth
-
-ci.deploys -> clouds
-```
+<CodeBlock className="language-d2">
+    {Containers3}
+</CodeBlock>
 
 <div className="embedSVG" dangerouslySetInnerHTML={{__html: require('@site/static/img/generated/containers-3.svg2')}}></div>
 
@@ -83,15 +56,8 @@ ci.deploys -> clouds
 Sometimes you want to reference something outside of the container from within. The
 underscore (`_`) refers to parent.
 
-```d2
-christmas: {
-  presents
-}
-birthdays: {
-  presents
-  _.christmas.presents -> presents: regift
-  _.christmas.style.fill: "#ACE1AF"
-}
-```
+<CodeBlock className="language-d2">
+    {ContainersUnderscore}
+</CodeBlock>
 
 <div className="embedSVG" dangerouslySetInnerHTML={{__html: require('@site/static/img/generated/containers-underscore.svg2')}}></div>

docs/tour/hello-world.md

@@ -1,11 +1,14 @@
 ---
 pagination_next: tour/shapes
 ---
+import CodeBlock from '@theme/CodeBlock';
+import HelloWorld from '@site/static/d2/hello-world.d2';
+
 # Hello World
 
-```d2
-x -> y: hello world
-```
+<CodeBlock className="language-d2">
+    {HelloWorld}
+</CodeBlock>
 
 <div
 className="embedSVG" dangerouslySetInnerHTML={{__html: require('@site/static/img/generated/hello-world.svg2')}}></div>

docs/tour/intro.md

@@ -2,7 +2,6 @@
 sidebar_label: What is D2
 pagination_next: tour/experience
 ---
-
 import CodeBlock from '@theme/CodeBlock';
 import Example from '@site/static/bespoke-d2/terminal-theme.d2';
 

docs/tour/shapes.md

@@ -1,18 +1,16 @@
+import CodeBlock from '@theme/CodeBlock';
+import Shapes1 from '@site/static/d2/shapes-1.d2';
+import Shapes2 from '@site/static/d2/shapes-2.d2';
+
 # Shapes
 
 ## Basics
 
 You can declare shapes like so:
 
-```d2
-imAShape
-im_a_shape
-im a shape
-i'm a shape
-# notice that one-hyphen is not a connection
-# whereas, `a--shape` would be a connection
-a-shape
-```
+<CodeBlock className="language-d2">
+    {Shapes1}
+</CodeBlock>
 
 <div className="embedSVG" dangerouslySetInnerHTML={{__html: require('@site/static/img/generated/shapes-1.svg2')}}></div>
 
@@ -37,12 +35,9 @@ Cloud.shape: cloud
 
 ## Example
 
-```d2
-pg: PostgreSQL
-Cloud: my cloud
-Cloud.shape: cloud
-SQLite; Cassandra
-```
+<CodeBlock className="language-d2">
+    {Shapes2}
+</CodeBlock>
 
 <div className="embedSVG" dangerouslySetInnerHTML={{__html: require('@site/static/img/generated/shapes-2.svg2')}}></div>