feat: add rendering of case study asyncapi document (asyncapi#2770)

Co-authored-by: Akshat Nema <[email protected]>%0ACo-authored-by: Lukasz Gornicki <[email protected]>

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}`);
+  }
+};

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}`);
+  }
+};

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
   });
 

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,
     }
   ];
 };