Sync integration-tutorials with master

components/learn/pattern/CodeView.js

@@ -4,7 +4,7 @@ import { FaRegCopy, FaCheck } from 'react-icons/fa';
 import styles from './CodeView.module.css';
 import { useState } from 'react'
 
-export default function Counter(props) {
+export default function CodeView(props) {
   const [visible, setVisible] = useState(false);
 
   const [copied, setCopied] = useState(false);
@@ -21,6 +21,7 @@ export default function Counter(props) {
   return (
     <div>
         <div className={styles.code}>
+            {props.name && <h5 className={styles.title}>{props.name}</h5>}
             <CopyToClipboard className={styles.copyToClipboard} text={props.raw} onCopy={() => codeCopy()}>
             {
                 copied ? <FaCheck className={styles.copied} title="Copied" /> : <FaRegCopy title="Copy" />

components/learn/pattern/CodeView.module.css

@@ -22,3 +22,8 @@
 .copied {
  color: #20b6b0;
 }
+
+.title {
+  font-size: 1rem;
+  color: gray;
+}

components/learn/pattern/readPattern.js

@@ -3,32 +3,50 @@ 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 } };
+    return readPatternContent({}, pattern, [pattern + ".bal"]);
   }
   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 };
+  var loadedProps = load(yml) || {};
+  return readPatternContent(loadedProps, pattern, loadedProps.files || [pattern + ".bal"]);
+}
+
+ async function readPatternContent(loadedProps, pattern, files) {
+  const name = pattern.replace(/-.|^./g, x => " " + x.slice(-1).toUpperCase());
+  const baseDirectory = path.resolve("pages/learn/enterprise-integration-patterns/enterprise-integration-patterns");
+  loadedProps.content = [];
+  for (let i = 0; i < files.length; i++) {
+    const file = files[i];
+    const filePath = path.join(baseDirectory, pattern, file);
+    const content = fs.readFileSync(filePath, "utf-8");
+    const [header, main] = split(content);
+    const headerCode = await highlight(header);
+    const mainCode = await highlight(main);
+    loadedProps.content.push({ headerCode, mainCode, raw: content, name: file });
+  }
+  loadedProps.name = loadedProps.name ?? name;
+  return { props: loadedProps };
 }
 
+const regex = /\n(service|function|public function)/g;
+
 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)];
 }
+
+const highlighterPromise = getHighlighter({ theme: 'github-light' });
+
+async function highlight(src){
+  if (!src) {
+    return "";
+  }
+  return (await highlighterPromise).codeToHtml(src, { lang: 'ballerina' });
+}

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

@@ -34,7 +34,7 @@ import CodeView from '../../../components/learn/pattern/CodeView';
 import { readPattern } from '../../../components/learn/pattern/readPattern';
 
 export async function getStaticProps({ params }) {
-  return readPattern(params.pattern);
+  return await readPattern(params.pattern);
 }
 
 const baseDirectory = path.resolve("pages/learn/enterprise-integration-patterns/enterprise-integration-patterns");
@@ -46,16 +46,31 @@ export async function getStaticPaths() {
     const file = files[i];
     const filePath = path.join(baseDirectory, file);
     const stats = fs.statSync(filePath);
-    const bal = path.join(filePath, file + ".bal");
-    if (stats.isDirectory() && fs.existsSync(bal)) {
+    const balPath = path.join(filePath, file + ".bal");
+    const ymlPath = path.join(baseDirectory, file, file + ".yml");
+    if (stats.isDirectory() && (fs.existsSync(balPath) || fs.existsSync(ymlPath))) {
       paths.push({ params: { pattern: file } });
     }
   }
   return { paths, fallback: false, };
 }
 
 export default function Pattern(props) {
-  const router = useRouter();
+  const rows = [];
+  const content = props.content;
+  const namedCodeViews = content.length > 1;
+  for (let i = 0; i < content.length; i++) {
+    const row = content[i];
+    rows.push(
+          <Row className="pageContentRow llanding" key={i}>
+            <Col xs={12}>
+              <Container>
+                <CodeView header={row.headerCode} main={row.mainCode} raw={row.raw} name={ namedCodeViews ? row.name : "" }/>
+              </Container>
+            </Col>
+          </Row>
+    );
+  }
   return (
     <>
       <Head>
@@ -198,13 +213,7 @@ export default function Pattern(props) {
             </Col>
           </Row>
 
-          <Row className="pageContentRow llanding" >
-            <Col xs={12}>
-              <Container>
-                <CodeView header={props.headerCode} main={props.mainCode} raw={props.raw}/>
-              </Container>
-            </Col>
-          </Row>
+          {rows}
 
         </Col>
       </Layout >

pages/learn/enterprise-integration-patterns/enterprise-integration-patterns/claim-check/claim-check.yml

@@ -2,6 +2,7 @@ tagline: Reduce message volume and send across the system without losing message
 desc: Claim Check will store messages in a persistent storage and send a claim to another application to access the origin stored message.
 category: Message Transformation
 index: 39
-helps:
+helps: Ballerina supports the persistent storage of messages. Popular storage technologies such as SQL, AWS S3 and Redis are available as Ballerina packages.
 tags: ["Claim Check", "Content Enricher", "Content Filter"]
 link: https://www.enterpriseintegrationpatterns.com/patterns/messaging/StoreInLibrary.html
+files: ["claim-check-consumer.bal", "claim-check-producer.bal"]

pages/learn/enterprise-integration-patterns/enterprise-integration-patterns/publish-subscribe-channel/publish-subscribe-channel.yml

@@ -1,3 +1,9 @@
+name: Publish-Subscribe Channel
 category: Messaging Channels
+tagline: Delivers a copy of a particular event to each receiver
 index: 7
+desc: Publish-Subscribe Channel delivers a copy of a particular event to each receiver.
+helps: Ballerina has a rich set of libraries to interact with various messaging protocols. These include protocols that support publish-subscribe semantics such as Kafka, MQTT, and WebSocket.
+tags: ["Publish-Subscribe Channel", "Message Channel", "Message Endpoint", "Message Router"]
 link: https://www.enterpriseintegrationpatterns.com/patterns/messaging/PublishSubscribeChannel.html
+files: ["publisher.bal", "subscriber.bal"]

pages/learn/enterprise-integration-patterns/enterprise-integration-patterns/routing-slip/routing-slip.yml

@@ -5,3 +5,4 @@ index: 33
 helps: Ballerina excels in enabling the seamless integration of diverse services with inherent concurrent support, as well as in data binding, type enforcement, and native error-handling capabilities.
 tags: ["Routing Slip", "Message Channel", "Message Endpoint", "Message Router"]
 link: https://www.enterpriseintegrationpatterns.com/patterns/messaging/RoutingTable.html
+files: ["routing-slip-main.bal", "loyalty-point-service.bal"]

pages/learn/enterprise-integration-patterns/index.js

@@ -36,11 +36,11 @@ export async function getStaticProps() {
     const file = files[i];
     const filePath = path.join(baseDirectory, file);
     const stats = fs.statSync(filePath);
-    const bal = path.join(filePath, file + ".bal");
-    if (!stats.isDirectory() || !fs.existsSync(bal)) {
+    const balPath = path.join(filePath, file + ".bal");
+    const ymlPath = path.join(baseDirectory, file, file + ".yml");
+    if (!stats.isDirectory() || !(fs.existsSync(balPath) || fs.existsSync(ymlPath))) {
       continue;
     }
-    const ymlPath = path.join(baseDirectory, file, file + ".yml");
     const name = file.replace(/-.|^./g, x => " " + x.slice(-1).toUpperCase()).trim();
     var pattern = loadYml(ymlPath) || {};
     pattern.name = pattern.name ?? name;