feat(clayui.com): Collapsible code in Markup/CSS tab

Author: kresimir-coko

clayui.com/plugins/gatsby-remark-use-clipboard/index.js

@@ -12,9 +12,28 @@ module.exports = ({markdownAST}) => {
 			return;
 		}
 
-		node.value = `<div class="code-container">
-            <button class="btn btn-sm btn-copy" title="Copy"><svg class="lexicon-icon"><use xlink:href="/images/icons/icons.svg#paste"></use></svg></button>
-            ${node.value}
-        </div>`;
+		node.value = `
+			<div class="code-container">
+				<button class="btn btn-sm btn-copy btn-monospaced btn-unstyled" title="Copy">
+					<svg class="lexicon-icon">
+						<use xlink:href="/images/icons/icons.svg#paste"></use>
+					</svg>
+				</button>
+				
+				<button class="btn btn-sm btn-collapse btn-collapse--collapse btn-monospaced btn-unstyled" title="Collapse">
+					<svg class="lexicon-icon icon-collapse">
+						<use xlink:href="/images/icons/icons.svg#angle-down"></use>
+					</svg>
+				</button>
+				
+				<button class="btn btn-sm btn-collapse btn-collapse--expand btn-monospaced btn-unstyled hide" title="Expand">
+					<svg class="lexicon-icon icon-collapse">
+						<use xlink:href="/images/icons/icons.svg#angle-right"></use>
+					</svg>
+				</button>
+
+				${node.value}
+			</div>
+		`;
 	});
 };

clayui.com/src/html.js

@@ -43,6 +43,7 @@ export default props => {
 					id="___gatsby"
 				/>
 				{props.postBodyComponents}
+				<script src="/js/code-collapse.js" />
 				<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js" />
 			</body>
 		</html>

clayui.com/static/js/code-collapse.js

@@ -0,0 +1,61 @@
+function closestAncestor(node, s) {
+	const el = node;
+	let ancestor = node;
+
+	if (!document.documentElement.contains(el)) {
+		return null;
+	}
+
+	do {
+		if (ancestor.matches(s)) {
+			return ancestor;
+		}
+
+		ancestor = ancestor.parentElement;
+	} while (ancestor !== null);
+
+	return null;
+}
+
+if (document.body) {
+	document.body.addEventListener('click', event => {
+		const target = event.target;
+		const targetClassList = target.classList;
+
+		if (
+			targetClassList.contains('btn-collapse') ||
+			targetClassList.contains('icon-collapse') ||
+			(target.tagName === 'use' &&
+				target.parentNode.classList.contains('icon-collapse'))
+		) {
+			const codeContainer = closestAncestor(target, '.code-container');
+
+			if (codeContainer) {
+				const gatsbyCode = codeContainer.querySelector(
+					'code[class^="gatsby-code-"]'
+				);
+
+				if (gatsbyCode) {
+					const btnCollapse = codeContainer.querySelector(
+						'.btn-collapse--collapse'
+					);
+					const btnExpand = codeContainer.querySelector(
+						'.btn-collapse--expand'
+					);
+
+					if (gatsbyCode.style.display === 'none') {
+						btnCollapse.classList.remove('hide');
+						btnExpand.classList.add('hide');
+
+						gatsbyCode.style.display = 'block';
+					} else {
+						btnCollapse.classList.add('hide');
+						btnExpand.classList.remove('hide');
+
+						gatsbyCode.style.display = 'none';
+					}
+				}
+			}
+		}
+	});
+}