Skip to content

Commit

Permalink
Merge pull request #234 from terrastruct/post-0.6.7-update
Browse files Browse the repository at this point in the history
update batch
  • Loading branch information
alixander authored Sep 30, 2024
2 parents 72c2cba + a2d10c3 commit bf01f11
Show file tree
Hide file tree
Showing 7 changed files with 664 additions and 11 deletions.
40 changes: 31 additions & 9 deletions docs/tour/grid-diagrams.md
Original file line number Diff line number Diff line change
Expand Up @@ -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`
Expand Down Expand Up @@ -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.
Expand Down Expand Up @@ -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>
45 changes: 44 additions & 1 deletion src/theme/CodeBlock/CodeBlock.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
}
22 changes: 21 additions & 1 deletion src/theme/CodeBlock/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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");
Expand All @@ -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) {
Expand Down Expand Up @@ -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")}
Expand Down Expand Up @@ -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>
);
}
Expand Down
97 changes: 97 additions & 0 deletions static/d2/grid-padding-1.d2
Original file line number Diff line number Diff line change
@@ -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
99 changes: 99 additions & 0 deletions static/d2/grid-padding-2.d2
Original file line number Diff line number Diff line change
@@ -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
Loading

0 comments on commit bf01f11

Please sign in to comment.