update batch

docs/tour/grid-diagrams.md

@@ -9,16 +9,18 @@ import GridNestedGrid from '@site/static/d2/grid-nested-grid.d2';
 import Table from '@site/static/d2/table.d2';
 import GridUnaligned from '@site/static/d2/grid-unaligned.d2';
 import GridAligned from '@site/static/d2/grid-aligned.d2';
+import GridPadding1 from '@site/static/d2/grid-padding-1.d2';
+import GridPadding2 from '@site/static/d2/grid-padding-2.d2';
 
 # Grid Diagrams
 
 Grid diagrams let you display objects in a structured grid.
 
 <div className="embedSVG" dangerouslySetInnerHTML={{__html: require('@site/static/img/generated/grid.svg2')}}></div>
 
-:::info
-Source code for this is at the bottom of the page.
-:::
+<CodeBlock className="language-d2" expandeable={true}>
+    {Grid}
+</CodeBlock>
 
 Two keywords do all the magic:
 - `grid-rows`
@@ -120,22 +122,26 @@ Setting `grid-gap` is equivalent to setting both `vertical-gap` and `horizontal-
 
 `vertical-gap` and `horizontal-gap` can override `grid-gap`.
 
+### Gap size 0
+
 `grid-gap: 0` in particular can create some interesting constructions:
 
-### Like this map of Japan
+#### Like this map of Japan
 
 <div className="embedSVG" dangerouslySetInnerHTML={{__html: require('@site/static/img/generated/japan.svg2')}}></div>
 
 > [D2 source](https://github.com/terrastruct/d2/blob/master/docs/examples/japan-grid/japan.d2)
 
-### Or a table of data
+#### Or a table of data
 
 <div className="embedSVG" dangerouslySetInnerHTML={{__html: require('@site/static/img/generated/table.svg2')}}></div>
 
 <CodeBlock className="language-d2">
     {Table}
 </CodeBlock>
 
+### Gap size 0
+
 ## Connections
 
 Connections for grids themselves work normally as you'd expect.
@@ -191,10 +197,26 @@ It'd be nicer if it were centered. This can be achieved by adding 2 invisible el
 
 <div className="embedSVG" dangerouslySetInnerHTML={{__html: require('@site/static/img/generated/grid-aligned.svg2')}}></div>
 
-## Source code
+## Troubleshooting
 
-This is the script for the image at the top of this page.
+### Why is there extra padding in one cell?
 
-<CodeBlock className="language-d2">
-    {Grid}
+Elements in a grid column have the same width and elements in a grid row have the same
+height.
+
+So in this example, a small empty space in "Backend Node" is present.
+
+<CodeBlock className="language-d2" expandeable={true}>
+    {GridPadding1}
 </CodeBlock>
+
+<div className="embedSVG" dangerouslySetInnerHTML={{__html: require('@site/static/img/generated/grid-padding-1.svg2')}}></div>
+
+It's due to the label of "Flask Pod" being slightly longer than "Next Pod". So the way we
+fix that is to set `width`s to match.
+
+<CodeBlock className="language-d2" expandeable={true}>
+    {GridPadding2}
+</CodeBlock>
+
+<div className="embedSVG" dangerouslySetInnerHTML={{__html: require('@site/static/img/generated/grid-padding-2.svg2')}}></div>

src/theme/CodeBlock/CodeBlock.scss

@@ -45,10 +45,10 @@
   right: 1.2rem;
   background: var(--copy-bg);
   border: 1px solid var(--copy-border);
+  border-radius: 4px;
   display: flex;
   align-items: center;
   justify-content: center;
-  border-radius: 4px;
   width: 2rem;
   height: 2rem;
   cursor: pointer;
@@ -108,3 +108,46 @@
 .PlaygroundLink {
   right: 3.6rem;
 }
+
+.ExpandToggleWrapper {
+  position: absolute;
+  bottom: 10px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  justify-content: center;
+  width: 100%;
+}
+
+.ExpandToggle {
+  background-color: transparent;
+  border: 1px solid var(--copy-border);
+  border-radius: 4px;
+  padding: 5px 10px;
+  font-size: 14px;
+  color: var(--blue-800);
+  cursor: pointer;
+}
+
+.CodeBlock pre::before {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 50px;
+  background: linear-gradient(
+    to bottom,
+    rgba(255, 255, 255, 0) 0%,
+    rgba(255, 255, 255, 1) 100%
+  );
+  pointer-events: none;
+}
+
+.CodeBlock.expanded pre::before {
+  display: none;
+}
+
+.CodeBlock.expanded.expandeable pre {
+  padding-bottom: 4rem;
+}

src/theme/CodeBlock/index.js

@@ -50,6 +50,10 @@ export default function D2CodeBlock(props) {
     scope = `source.${lang.replace(/^language-/, "")}`;
   }
 
+  const [isExpanded, setIsExpanded] = React.useState(!props.expandeable);
+  const toggleExpand = () => {
+    setIsExpanded((prev) => !prev);
+  };
   let [tmGrammar, setTMGrammar] = React.useState(getTextMateGrammar(scope));
   const [clipboardTooltipText, setClipboardTooltipText] =
     React.useState("Copy to clipboard");
@@ -73,6 +77,10 @@ export default function D2CodeBlock(props) {
   let preStyle = {
     position: "relative",
     lineHeight: "25px",
+    // Just a large enough value to fit all
+    maxHeight: isExpanded ? "6000px" : "200px",
+    overflow: "hidden",
+    transition: "max-height 1s ease",
   };
   const { colorMode } = docusaurusThemeCommon.useColorMode();
   switch (colorMode) {
@@ -144,7 +152,12 @@ export default function D2CodeBlock(props) {
   }
 
   return (
-    <section className={clsx("CodeBlock", props.containerClassName)}>
+    <section
+      className={clsx("CodeBlock", props.containerClassName, {
+        expanded: isExpanded,
+        expandeable: props.expandeable,
+      })}
+    >
       <button
         className="Copy"
         onMouseLeave={() => setClipboardTooltipText("Copy to clipboard")}
@@ -175,6 +188,13 @@ export default function D2CodeBlock(props) {
         </button>
       )}
       <pre style={preStyle}>{children}</pre>
+      {props.expandeable && (
+        <div className="ExpandToggleWrapper">
+          <button className="ExpandToggle" onMouseDown={toggleExpand}>
+            {isExpanded ? "See less" : "See more"}
+          </button>
+        </div>
+      )}
     </section>
   );
 }

static/d2/grid-padding-1.d2

@@ -0,0 +1,97 @@
+classes: {
+  kuber: {
+    style: {
+      fill: "white"
+      stroke: "#aeb5bd"
+      border-radius: 4
+      stroke-dash: 3
+    }
+  }
+  sys: {
+    label: ""
+    style: {
+      fill: "#AFBFDF"
+      stroke: "#aeb5bd"
+    }
+  }
+  node: {
+    grid-gap: 0
+    style: {
+      fill: "#ebf3e6"
+      border-radius: 8
+      stroke: "#aeb5bd"
+    }
+  }
+  clust: {
+    style: {
+      fill: "#A7CC9E"
+      stroke: "#aeb5bd"
+    }
+  }
+  deploy: {
+    grid-gap: 0
+    style: {
+      fill: "#ffe6d5"
+      stroke: "#aeb5bd"
+      # border-radius: 4
+    }
+  }
+  nextpod: {
+    icon: https://www.svgrepo.com/show/378440/nextjs-fill.svg
+    style: {
+      fill: "#ECECEC"
+      stroke: "#aeb5bd"
+      # border-radius: 4
+    }
+  }
+  flaskpod: {
+    icon: https://www.svgrepo.com/show/508915/flask.svg
+    style: {
+      fill: "#ECECEC"
+      stroke: "#aeb5bd"
+      # border-radius: 4
+    }
+  }
+}
+
+classes
+
+Kubernetes: {
+  grid-columns: 2
+  system: {
+    grid-columns: 1
+    Backend Node: {
+      grid-columns: 2
+      ClusterIP\nService 1
+      Deployment 1: {
+        grid-rows: 3
+        NEXT POD 1
+        NEXT POD 2
+        NEXT POD 3
+      }
+    }
+    Frontend Node: {
+      grid-columns: 2
+      ClusterIP\nService 2
+      Deployment 2: {
+        grid-rows: 3
+        FLASK POD 1
+        FLASK POD 2
+        FLASK POD 3
+      }
+    }
+  }
+}
+
+kubernetes.class: kuber
+kubernetes.system.class: sys
+
+kubernetes.system.backend node.class: node
+kubernetes.system.backend node.clusterip\nservice 1.class: clust
+kubernetes.system.backend node.deployment 1.class: deploy
+kubernetes.system.backend node.deployment 1.next pod*.class: nextpod
+
+kubernetes.system.frontend node.class: node
+kubernetes.system.frontend node.clusterip\nservice 2.class: clust
+kubernetes.system.frontend node.deployment 2.class: deploy
+kubernetes.system.frontend node.deployment 2.flask pod*.class: flaskpod

static/d2/grid-padding-2.d2

@@ -0,0 +1,99 @@
+classes: {
+  kuber: {
+    style: {
+      fill: "white"
+      stroke: "#aeb5bd"
+      border-radius: 4
+      stroke-dash: 3
+    }
+  }
+  sys: {
+    label: ""
+    style: {
+      fill: "#AFBFDF"
+      stroke: "#aeb5bd"
+    }
+  }
+  node: {
+    grid-gap: 0
+    style: {
+      fill: "#ebf3e6"
+      border-radius: 8
+      stroke: "#aeb5bd"
+    }
+  }
+  clust: {
+    style: {
+      fill: "#A7CC9E"
+      stroke: "#aeb5bd"
+    }
+  }
+  deploy: {
+    grid-gap: 0
+    style: {
+      fill: "#ffe6d5"
+      stroke: "#aeb5bd"
+      # border-radius: 4
+    }
+  }
+  nextpod: {
+    width: 180
+    icon: https://www.svgrepo.com/show/378440/nextjs-fill.svg
+    style: {
+      fill: "#ECECEC"
+      stroke: "#aeb5bd"
+      # border-radius: 4
+    }
+  }
+  flaskpod: {
+    width: 180
+    icon: https://www.svgrepo.com/show/508915/flask.svg
+    style: {
+      fill: "#ECECEC"
+      stroke: "#aeb5bd"
+      # border-radius: 4
+    }
+  }
+}
+
+classes
+
+Kubernetes: {
+  grid-columns: 2
+  system: {
+    grid-columns: 1
+    Backend Node: {
+      grid-columns: 2
+      ClusterIP\nService 1
+      Deployment 1: {
+        grid-rows: 3
+        NEXT POD 1
+        NEXT POD 2
+        NEXT POD 3
+      }
+    }
+    Frontend Node: {
+      grid-columns: 2
+      ClusterIP\nService 2
+      Deployment 2: {
+        grid-rows: 3
+        FLASK POD 1
+        FLASK POD 2
+        FLASK POD 3
+      }
+    }
+  }
+}
+
+kubernetes.class: kuber
+kubernetes.system.class: sys
+
+kubernetes.system.backend node.class: node
+kubernetes.system.backend node.clusterip\nservice 1.class: clust
+kubernetes.system.backend node.deployment 1.class: deploy
+kubernetes.system.backend node.deployment 1.next pod*.class: nextpod
+
+kubernetes.system.frontend node.class: node
+kubernetes.system.frontend node.clusterip\nservice 2.class: clust
+kubernetes.system.frontend node.deployment 2.class: deploy
+kubernetes.system.frontend node.deployment 2.flask pod*.class: flaskpod