diff --git a/docs/tour/grid-diagrams.md b/docs/tour/grid-diagrams.md index 3966e8c..ae5bf4b 100644 --- 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 @@ -16,9 +18,9 @@ Grid diagrams let you display objects in a structured grid.
-:::info -Source code for this is at the bottom of the page. -::: + + {Grid} + Two keywords do all the magic: - `grid-rows` @@ -120,15 +122,17 @@ 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
> [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
@@ -136,6 +140,8 @@ Setting `grid-gap` is equivalent to setting both `vertical-gap` and `horizontal- {Table} +### 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
-## Source code +## Troubleshooting -This is the script for the image at the top of this page. +### Why is there extra padding in one cell? - - {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. + + + {GridPadding1} + +
+ +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. + + + {GridPadding2} + + +
diff --git a/src/theme/CodeBlock/CodeBlock.scss b/src/theme/CodeBlock/CodeBlock.scss index c0e1c97..ffe8008 100644 --- a/src/theme/CodeBlock/CodeBlock.scss +++ b/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; +} diff --git a/src/theme/CodeBlock/index.js b/src/theme/CodeBlock/index.js index 5567e9b..2900cf6 100644 --- a/src/theme/CodeBlock/index.js +++ b/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 ( -
+
)} 
{children}
+ {props.expandeable && ( +
+ +
+ )}
); } diff --git a/static/d2/grid-padding-1.d2 b/static/d2/grid-padding-1.d2 new file mode 100644 index 0000000..60adf4f --- /dev/null +++ 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 new file mode 100644 index 0000000..45bab37 --- /dev/null +++ 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 diff --git a/static/img/generated/grid-padding-1.svg2 b/static/img/generated/grid-padding-1.svg2 new file mode 100644 index 0000000..0204863 --- /dev/null +++ b/static/img/generated/grid-padding-1.svg2 @@ -0,0 +1,186 @@ +KubernetesBackend NodeFrontend NodeClusterIPService 1Deployment 1ClusterIPService 2Deployment 2NEXT POD 1NEXT POD 2NEXT POD 3FLASK POD 1FLASK POD 2FLASK POD 3 + + + + + + + + + + + + + + + diff --git a/static/img/generated/grid-padding-2.svg2 b/static/img/generated/grid-padding-2.svg2 new file mode 100644 index 0000000..82855a7 --- /dev/null +++ b/static/img/generated/grid-padding-2.svg2 @@ -0,0 +1,186 @@ +KubernetesBackend NodeFrontend NodeClusterIPService 1Deployment 1ClusterIPService 2Deployment 2NEXT POD 1NEXT POD 2NEXT POD 3FLASK POD 1FLASK POD 2FLASK POD 3 + + + + + + + + + + + + + + +