grid faq example

terrastruct · Sep 30, 2024 · a2d10c3 · a2d10c3
1 parent 979bd27
commit a2d10c3
Show file tree

Hide file tree

Showing 7 changed files with 602 additions and 2 deletions.
diff --git a/docs/tour/grid-diagrams.md b/docs/tour/grid-diagrams.md
@@ -9,6 +9,8 @@ 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
 
@@ -195,3 +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>
 
+## Troubleshooting
+
+### Why is there extra padding in one cell?
+
+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>
diff --git a/src/theme/CodeBlock/CodeBlock.scss b/src/theme/CodeBlock/CodeBlock.scss
@@ -147,3 +147,7 @@
 .CodeBlock.expanded pre::before {
   display: none;
 }
+
+.CodeBlock.expanded.expandeable pre {
+  padding-bottom: 4rem;
+}
diff --git a/src/theme/CodeBlock/index.js b/src/theme/CodeBlock/index.js
@@ -80,7 +80,7 @@ export default function D2CodeBlock(props) {
     // Just a large enough value to fit all
     maxHeight: isExpanded ? "6000px" : "200px",
     overflow: "hidden",
-    transition: "max-height 0.5s ease",
+    transition: "max-height 1s ease",
   };
   const { colorMode } = docusaurusThemeCommon.useColorMode();
   switch (colorMode) {
@@ -153,7 +153,10 @@ export default function D2CodeBlock(props) {
 
   return (
     <section
-      className={clsx("CodeBlock", props.containerClassName, { expanded: isExpanded })}
+      className={clsx("CodeBlock", props.containerClassName, {
+        expanded: isExpanded,
+        expandeable: props.expandeable,
+      })}
     >
       <button
         className="Copy"

diff --git a/static/d2/grid-padding-1.d2 b/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
diff --git a/static/d2/grid-padding-2.d2 b/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