Playgroundlink

blog/powerpoint.md

@@ -6,6 +6,8 @@ tags: [powerpoint, show-and-tell]
 image: https://raw.githubusercontent.com/terrastruct/d2-docs/master/static/img/screenshots/wcc_pptx.png
 hide_table_of_contents: false
 ---
+import CodeBlock from '@theme/CodeBlock';
+import Cult from '@site/static/bespoke-d2/cult.d2';
 
 D2 is a diagramming language, and it's versatile unlike any other. For example, you can
 create full PowerPoint presentations with just text.
@@ -31,71 +33,9 @@ To produce this:
 - copy the below
 - run `d2 input.d2 cult.pptx`.
 
-```d2
-text: |md
-  # Introduction
-
-  ## How to start a cult
-
-  This presentation educates the public on starting a cult
-
-  This is an abridged presentation
-|
-
-layers: {
-  1: {
-    text: |md
-      # What is a cult?
-      - *Definition*: A group or movement with a shared devotion to a charismatic leader, an ideology, or a set of rituals and beliefs
-      - *Characteristics*: Totalitarian control, manipulative practices, and exploitation of members
-    |
-  }
-  2: {
-    text: |md
-      # Charismatic Leader
-
-      ## Role
-
-      Cult leaders have a strong, magnetic personality, and are typically seen as an authority figure
-
-      ## Tips:
-
-      - Cultivate a unique and compelling persona
-      - Be convincing and persuasive
-      - Establish yourself as an authority figure with exclusive knowledge or abilities
-    |
-  }
-  3: {
-    text: |md
-      # Recruitment
-      - *Importance*: New members are vital for the growth and sustainability of a cult
-      - *Methods*: Targeting vulnerable individuals, offering solutions to personal problems, and using social pressure
-    |
-  }
-  4: {
-    text: |md
-      # Control and manipulation
-
-      ## Purpose
-      To maintain power over members and ensure loyalty
-
-      ## Techniques
-      Information control, emotional manipulation, and behavior control
-
-      ## Tips:
-
-      - Limit members' access to outside information and discourage critical thinking
-      - Use guilt, shame, and fear to manipulate members' emotions
-      - Create strict rules and rituals to control behavior
-    |
-  }
-  5: {
-    text: |md
-      # Enjoy your cult
-    |
-  }
-}
-```
+<CodeBlock className="language-d2-incomplete">
+    {Cult}
+</CodeBlock>
 
 ## Complex example
 

blog/sketch.md

@@ -6,6 +6,8 @@ tags: [hand-drawn, show-and-tell]
 image: https://raw.githubusercontent.com/terrastruct/d2-docs/master/static/img/blog/sketch.png
 hide_table_of_contents: false
 ---
+import CodeBlock from '@theme/CodeBlock';
+import Animated from '@site/static/blog/sketch/animated.d2';
 
 Sketch mode started out as a "wouldn't it be cool" weekend feature, and has since turned
 into one of the things people love most about D2.
@@ -58,8 +60,8 @@ brightness of fills.
 
 It even works with animated connections!
 
-```d2
-winter.snow -> summer.sun -> trees -> winter.snow: { style.animated: true }
-```
+<CodeBlock className="language-d2">
+    {Animated}
+</CodeBlock>
 
 <div style={{width:'30%'}} dangerouslySetInnerHTML={{__html: require('@site/static/blog/sketch/animated.svg2')}}></div>

docs/tour/api.md

@@ -1,3 +1,7 @@
+---
+pagination_next: tour/studio
+---
+
 # D2 Oracle
 
 D2 has an API built on top of its AST for **programmatically creating diagrams in Go**.
@@ -63,7 +67,7 @@ _, newKey, _ = d2oracle.Create(g, nil, "a -> b")
 
 If you have a multi-board diagram like so:
 
-```d2
+```d2-incomplete
 x
 
 layers: {

docs/tour/classes.md

@@ -1,43 +1,16 @@
+import CodeBlock from '@theme/CodeBlock';
+import StyleClasses1 from '@site/static/d2/style-classes-1.d2';
+import StyleClasses2 from '@site/static/d2/style-classes-2.d2';
+import MultipleClasses from '@site/static/d2/multiple-classes.d2';
+import OrderedClasses from '@site/static/d2/ordered-classes.d2';
+
 # Classes
 
 Classes let you aggregate attributes and reuse them.
 
-```d2
-direction: right
-classes: {
-  load balancer: {
-    label: load\nbalancer
-    width: 100
-    height: 200
-    style: {
-      stroke-width: 0
-      fill: "#44C7B1"
-      shadow: true
-      border-radius: 5
-    }
-  }
-  unhealthy: {
-    style: {
-      fill: "#FE7070"
-      stroke: "#F69E03"
-    }
-  }
-}
-
-web traffic -> web lb
-web lb.class: load balancer
-
-web lb -> api1
-web lb -> api2
-web lb -> api3
-
-api2.class: unhealthy
-
-api1 -> cache lb
-api3 -> cache lb
-
-cache lb.class: load balancer
-```
+<CodeBlock className="language-d2">
+    {StyleClasses1}
+</CodeBlock>
 
 <div className="embedSVG" dangerouslySetInnerHTML={{__html: require('@site/static/img/generated/style-classes-1.svg2')}}></div>
 
@@ -65,56 +38,29 @@ a -> b
 If your object defines an attribute that the class also has defined, the object's
 attribute overrides the class attribute.
 
-```d2
-classes: {
-  unhealthy: {
-    style.fill: red
-  }
-}
-x.class: unhealthy
-x.style.fill: orange
-```
+<CodeBlock className="language-d2">
+    {StyleClasses2}
+</CodeBlock>
 
 <div style={{width: 100, margin: "0 auto"}} className="embedSVG" dangerouslySetInnerHTML={{__html: require('@site/static/img/generated/style-classes-2.svg2')}}></div>
 
 ## Multiple classes
 
 You may use arrays for the value as well to apply multiple classes.
 
-```d2
-classes: {
-  d2: {
-    label: ""
-    icon: https://play.d2lang.com/assets/icons/d2-logo.svg
-  }
-  sphere: {
-    shape: circle
-    style.stroke-width: 0
-  }
-}
-
-logo.class: [d2; sphere]
-```
+<CodeBlock className="language-d2">
+    {MultipleClasses}
+</CodeBlock>
 
 <div style={{width: 200, margin: "0 auto"}} className="embedSVG" dangerouslySetInnerHTML={{__html: require('@site/static/img/generated/multiple-classes.svg2')}}></div>
 
 ### Order matters
 
 When multiple classes are given, they are applied left-to-right.
 
-```d2
-classes: {
-  uno: {
-    label: 1
-  }
-  dos: {
-    label: 2
-  }
-}
-
-x.class: [uno; dos]
-y.class: [dos; uno]
-```
+<CodeBlock className="language-d2">
+    {OrderedClasses}
+</CodeBlock>
 
 <div style={{width: 200, margin: "0 auto"}} className="embedSVG" dangerouslySetInnerHTML={{__html: require('@site/static/img/generated/ordered-classes.svg2')}}></div>
 

docs/tour/composition.md

@@ -28,14 +28,14 @@ Each one serves different use cases. The example above is achieved by defining a
 
 Thus far, all D2 diagrams we've encountered are single-board diagrams, the root board.
 
-```d2
+```d2-incomplete
 # Root board
 x -> y
 ```
 
 Composition in D2 is when you use one of those keywords to declare another board.
 
-```d2
+```d2-incomplete
 # Root board
 x -> y
 layers: {

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>