Add code collapse feature to EIPs

components/learn/pattern/CodeView.js

@@ -0,0 +1,35 @@
+'use client'
+import { CopyToClipboard } from 'react-copy-to-clipboard';
+import { FaRegCopy, FaCheck } from 'react-icons/fa';
+import styles from './CodeView.module.css';
+import { useState } from 'react'
+
+export default function Counter(props) {
+  const [visible, setVisible] = useState(false);
+
+  const [copied, setCopied] = useState(false);
+
+  const codeCopy = () => {
+    setCopied(true);
+    setTimeout(() => {
+      setCopied(false);
+    }, 3000);
+  }
+
+  const headerStyle = visible ? {} : {display: "none"};
+  const showToggler = props.header.length > 0;
+  return (
+    <div>
+        <div className={styles.code}>
+            <CopyToClipboard className={styles.copyToClipboard} text={props.raw} onCopy={() => codeCopy()}>
+            {
+                copied ? <FaCheck className={styles.copied} title="Copied" /> : <FaRegCopy title="Copy" />
+            }
+            </CopyToClipboard>
+            {showToggler && <div dangerouslySetInnerHTML={{ __html: props.header }} style={headerStyle}/>}
+            {showToggler && <div className={styles.collapse} onClick={() => setVisible(!visible)}>{visible?"↥":"⋯"}</div> }
+            <div dangerouslySetInnerHTML={{ __html: props.main }} />
+        </div>
+    </div>
+  )
+}

components/learn/pattern/CodeView.module.css

@@ -0,0 +1,24 @@
+.code {
+    background: #eeeeee;
+    padding: 10px;
+    border-radius: 5px;
+    margin-top: 20px;
+    background-color: #eeeeee !important;
+}
+
+.collapse {
+    background: #ddd;
+    padding-left: 15px;
+    margin-right: 25px;
+    user-select: none;
+    cursor: pointer;
+}
+
+.copyToClipboard {
+    float: right;
+    margin-top: 4px;
+}
+
+.copied {
+ color: #20b6b0;
+}

components/learn/pattern/readPattern.js

@@ -0,0 +1,34 @@
+import path from 'path';
+import fs from 'fs';
+import { getHighlighter } from "shiki";
+import { load } from "js-yaml";
+
+export async function readPattern(pattern) {
+  const baseDirectory = path.resolve("pages/learn/enterprise-integration-patterns/enterprise-integration-patterns");
+  const highlighter = await getHighlighter({ theme: 'github-light' });
+  const ymlPath = path.join(baseDirectory, pattern, pattern + ".yml");
+  const source = fs.readFileSync(path.join(baseDirectory, pattern, pattern + ".bal"), "utf-8");
+  const [header, main] = split(source);
+  const headerCode = header.length > 0 ? highlighter.codeToHtml(header, { lang: 'ballerina' }) : "";
+  const mainCode = highlighter.codeToHtml(main, { lang: 'ballerina' });
+  const name = pattern.replace(/-.|^./g, x => " " + x.slice(-1).toUpperCase());
+  if (!fs.existsSync(ymlPath)) {
+    return { props: { mainCode, headerCode, name } };
+  }
+  const yml = fs.readFileSync(ymlPath, "utf-8");
+  var patternProps = load(yml) || {};
+  patternProps.headerCode = headerCode;
+  patternProps.mainCode = mainCode;
+  patternProps.name = patternProps.name ?? name;
+  patternProps.raw = source;
+  return { props: patternProps };
+}
+
+function split(content){
+    const regex = /\n(service|function|public function)/g;
+    const i = content.search(regex);
+    if(i < 80) {
+        return ["", content];
+    }
+    return [content.slice(0, i), content.slice(i)];
+}

pages/learn/enterprise-integration-patterns/[pattern].js

@@ -24,33 +24,21 @@ import React from "react";
 import Link from "next/link";
 import Head from "next/head";
 import { Row, Container, Col, Badge, Table } from "react-bootstrap";
-import { CopyToClipboard } from 'react-copy-to-clipboard';
 import Layout from "../../../layouts/LayoutLearn";
 import { useRouter } from "next/router";
 import { getHighlighter } from "shiki";
 import styles from './Patterns.module.css';
 import ReactMarkdown from 'react-markdown';
-import { FaRegCopy, FaCheck, FaExternalLinkAlt } from 'react-icons/fa';
-
-const baseDirectory = path.resolve("pages/learn/enterprise-integration-patterns/enterprise-integration-patterns");
+import { FaExternalLinkAlt } from 'react-icons/fa';
+import CodeView from '../../../components/learn/pattern/CodeView';
+import { readPattern } from '../../../components/learn/pattern/readPattern';
 
 export async function getStaticProps({ params }) {
-  const highlighter = await getHighlighter({ theme: 'github-light' });
-  const ymlPath = path.join(baseDirectory, params.pattern, params.pattern + ".yml");
-  const content = fs.readFileSync(path.join(baseDirectory, params.pattern, params.pattern + ".bal"), "utf-8");
-  const code = highlighter.codeToHtml(content, { lang: 'ballerina' });
-  const name = params.pattern.replace(/-.|^./g, x => " " + x.slice(-1).toUpperCase());
-  if (!fs.existsSync(ymlPath)) {
-    return { props: { code, name, content } };
-  }
-  const yml = fs.readFileSync(ymlPath, "utf-8");
-  var props = load(yml) || {};
-  props.code = code;
-  props.name = props.name ?? name;
-  props.content = content;
-  return { props };
+  return readPattern(params.pattern);
 }
 
+const baseDirectory = path.resolve("pages/learn/enterprise-integration-patterns/enterprise-integration-patterns");
+
 export async function getStaticPaths() {
   const files = fs.readdirSync(baseDirectory);
   var paths = [];
@@ -68,16 +56,6 @@ export async function getStaticPaths() {
 
 export default function Pattern(props) {
   const router = useRouter();
-
-  const [copied, setCopied] = React.useState(false);
-
-  const codeCopy = () => {
-    setCopied(true);
-    setTimeout(() => {
-      setCopied(false);
-    }, 3000);
-  }
-
   return (
     <>
       <Head>
@@ -223,22 +201,7 @@ export default function Pattern(props) {
           <Row className="pageContentRow llanding" >
             <Col xs={12}>
               <Container>
-
-                <div style={{
-                  background: "#eeeeee", padding: "10px",
-                  borderRadius: "5px",
-                  marginTop: "20px",
-                  backgroundColor: "#eeeeee !important"
-                }}>
-                  <CopyToClipboard text={props.content}
-                    onCopy={() => codeCopy()} style={{ float: "right" }}>
-                    {
-                      copied ? <FaCheck style={{ color: "20b6b0" }} title="Copied" /> : <FaRegCopy title="Copy" />
-                    }
-                  </CopyToClipboard>
-
-                  <div className="highlight" dangerouslySetInnerHTML={{ __html: props.code }} />
-                </div>
+                <CodeView header={props.headerCode} main={props.mainCode} raw={props.raw}/>
               </Container>
             </Col>
           </Row>