From 1ab6e4ab89fab27c03602783e19cec2235e28dc6 Mon Sep 17 00:00:00 2001
From: Akshit Gupta <96991785+akkshitgupta@users.noreply.github.com>
Date: Wed, 24 Jul 2024 21:48:27 +0530
Subject: [PATCH] feat: add rendering of case study asyncapi document (#2770)

Co-authored-by: Akshat Nema <76521428+akshatnema@users.noreply.github.com>%0ACo-authored-by: Lukasz Gornicki <lpgornicki@gmail.com>
---
 components/helpers/read-yaml-file.js | 12 ++++++++++++
 components/helpers/read-yaml-file.ts | 12 ++++++++++++
 pages/casestudies/[id].tsx           |  6 ++++++
 utils/staticHelpers.ts               |  5 +++++
 4 files changed, 35 insertions(+)
 create mode 100644 components/helpers/read-yaml-file.js
 create mode 100644 components/helpers/read-yaml-file.ts

diff --git a/components/helpers/read-yaml-file.js b/components/helpers/read-yaml-file.js
new file mode 100644
index 00000000000..8cfbe521746
--- /dev/null
+++ b/components/helpers/read-yaml-file.js
@@ -0,0 +1,12 @@
+import fs from 'fs/promises';
+
+export const readYamlFile = async (fileName) => {
+  try {
+    const data = await fs.readFile(`./public/${fileName}`, 'utf-8');
+    const yamlString = `\`\`\`yaml\n${data}\`\`\``;
+
+    return yamlString;
+  } catch (error) {
+    throw new Error(`Error: something went wrong while reading ${fileName} file: ${error.message}`);
+  }
+};
diff --git a/components/helpers/read-yaml-file.ts b/components/helpers/read-yaml-file.ts
new file mode 100644
index 00000000000..f8c1e361b1e
--- /dev/null
+++ b/components/helpers/read-yaml-file.ts
@@ -0,0 +1,12 @@
+import fs from 'fs/promises';
+
+export const readYamlFile = async (fileName: string) => {
+  try {
+    const data = await fs.readFile(`./public/${fileName}`, 'utf-8');
+    const yamlString = `\`\`\`yaml\n${data}\`\`\``;
+
+    return yamlString;
+  } catch (error: any) {
+    throw new Error(`Error: something went wrong while reading ${fileName} file: ${error.message}`);
+  }
+};
diff --git a/pages/casestudies/[id].tsx b/pages/casestudies/[id].tsx
index 4c0f781806c..d0668740edb 100644
--- a/pages/casestudies/[id].tsx
+++ b/pages/casestudies/[id].tsx
@@ -14,6 +14,7 @@ import Heading from '../../components/typography/Heading';
 import Paragraph from '../../components/typography/Paragraph';
 import CaseStudiesList from '../../config/case-studies.json';
 import { generateCaseStudyContent } from '../../utils/staticHelpers';
+import { readYamlFile } from '@/components/helpers/read-yaml-file';
 
 interface IndexProps {
   casestudy: ICaseStudy;
@@ -34,6 +35,7 @@ interface IndexProps {
   asyncapiBindings: MDXRemoteSerializeResult;
   asyncapiTools: MDXRemoteSerializeResult;
   additionalResources: MDXRemoteSerializeResult;
+  fullExample: MDXRemoteSerializeResult;
 }
 
 const renderContent = (
@@ -96,6 +98,7 @@ const renderContent = (
  */
 export async function getStaticProps({ params }: { params: { id: string } }) {
   const data = CaseStudiesList.filter((p: { id: string }) => p.id === params.id);
+  const asyncApiDoc = await readYamlFile(data[0].asyncapi.fullExample);
 
   return {
     props: {
@@ -116,6 +119,7 @@ export async function getStaticProps({ params }: { params: { id: string } }) {
       asyncapiDocumentation: await serialize(data[0].asyncapi.documentation),
       asyncapiBindings: await serialize(data[0].asyncapi.bindings),
       asyncapiTools: await serialize(data[0].asyncapi.tools),
+      fullExample: await serialize(asyncApiDoc),
       additionalResources: await serialize(data[0].additionalResources)
     }
   };
@@ -153,6 +157,7 @@ const Index: React.FC<IndexProps> = ({
   asyncapiDocumentation,
   asyncapiBindings,
   asyncapiTools,
+  fullExample,
   additionalResources
 }) => {
   const image = '/img/social/website-card.png';
@@ -177,6 +182,7 @@ const Index: React.FC<IndexProps> = ({
     asyncapiBindings,
     asyncapiTools,
     additionalResources,
+    fullExample,
     casestudy
   });
 
diff --git a/utils/staticHelpers.ts b/utils/staticHelpers.ts
index 230f26da6ee..e8280fa88d4 100644
--- a/utils/staticHelpers.ts
+++ b/utils/staticHelpers.ts
@@ -64,6 +64,7 @@ export const generateCaseStudyContent = (data: any) => {
     asyncapiBindings,
     asyncapiTools,
     additionalResources,
+    fullExample,
     casestudy
   } = data;
   const { languages } = casestudy.technical;
@@ -166,6 +167,10 @@ export const generateCaseStudyContent = (data: any) => {
           ]
         }
       ]
+    },
+    {
+      title: "Production-use AsyncAPI document",
+      content: fullExample,
     }
   ];
 };