add see more button

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

Hide file tree

Showing 3 changed files with 67 additions and 14 deletions.
diff --git a/docs/tour/grid-diagrams.md b/docs/tour/grid-diagrams.md
@@ -16,9 +16,9 @@ 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 +120,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 +195,3 @@ 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
-
-This is the script for the image at the top of this page.
-
-<CodeBlock className="language-d2">
-    {Grid}
-</CodeBlock>
diff --git 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,42 @@
 .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;
+}
diff --git 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 0.5s ease",
   };
   const { colorMode } = docusaurusThemeCommon.useColorMode();
   switch (colorMode) {
@@ -144,7 +152,9 @@ export default function D2CodeBlock(props) {
   }
 
   return (
-    <section className={clsx("CodeBlock", props.containerClassName)}>
+    <section
+      className={clsx("CodeBlock", props.containerClassName, { expanded: isExpanded })}
+    >
       <button
         className="Copy"
         onMouseLeave={() => setClipboardTooltipText("Copy to clipboard")}
@@ -175,6 +185,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>
   );
 }