feat: add adopters section to case study page (#2232)

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

.gitignore

@@ -7,6 +7,7 @@ node_modules
 out
 config/posts.json
 config/case-studies.json
+config/adopters.json
 public/rss.xml
 .env.local
 yarn.lock

config/adopters.yml

@@ -0,0 +1,47 @@
+- companyName: Reiffeisen Bank
+  useCase: Continuous Integration and Continuous Delivery (CI/CD) pipeline based on GitOps to deploy a topology built on Async API definitions using a Kubernetes operator to an Apache Pulsar cluster.
+  resources:
+    - title: Video - From an AsyncAPI Definition to a Deployed Pulsar Topology Via GitOps
+      link: https://www.youtube.com/watch?v=_MwzLZMwFN8
+
+- companyName: LEGO Group
+  useCase: Broker management, where developers do not access the management console themselves, but rely on uploading AsyncAPI documents to a self service API that provisions access and topics specified in documents.
+  resources:
+    - title: Video - Documentation as Configuration for Management of Apache Pulsar
+      link: https://www.youtube.com/watch?v=m8I0fYjx6Cc
+
+- companyName: LEGO Group
+  useCase: Define, document and distribute event-driven APIs. Ensuring consistency and governance
+  resources:
+    - title: Video - Cross-Domain Events with AsyncAPI and AWS
+      link: https://www.youtube.com/watch?v=qjarcJQVLOg
+
+- companyName: Bank of New Zealand
+  useCase: Decentralized company-wide governance strategy for API. A self service for publishing APIs and docs.
+  resources:
+    - title: "Video - Self-service Events & Decentralised Governance with AsyncAPI: A Real World Example"
+      link: https://www.confluent.io/events/kafka-summit-apac-2021/self-service-events-and-decentralised-governance-with-asyncapi-a-real-world/
+
+- companyName: Zora Robotics
+  useCase: Documenting lot products public MQTT API and building a developers portal.
+  resources:
+    - title: Video - Buliding and managing an extensive API for Robotics and loT
+      link: https://www.youtube.com/watch?v=yjHgT0n2BtA
+    - title: Docs - Buliding and managing an extensive API for Robotics and loT
+      link: https://docs.zorabots.be/dev-mqtt-docs/latest/index.html
+
+- companyName: Walmart
+  useCase: Managing a central API Hub for internal teams. Using AsyncAPI for events discoverability an visibility in a single place. AsyncAPI also enabled company-wide governance on asynchronous APIs.
+  resources:
+    - title: Video - Time For AsyncAPI Specification
+      link: https://www.youtube.com/watch?v=SxTpGRaNIPo
+
+- companyName: eBay
+  useCase: Enabling partners to build with eBay through asynchronous communication. Public AsyncAPI documents enable code generation and faster integration. It also enables governance and standardisation.
+  resources:
+    - title: "Video - AsyncAPI 2.0: Enabling the Event-Driven World"
+      link: https://www.youtube.com/watch?v=SxTpGRaNIPo
+    - title: "Article - AsyncAPI 2.0: Enabling the Event-Driven World"
+      link: https://innovation.ebayinc.com/tech/engineering/asyncapi-2-0-enabling-the-event-driven-world/
+    - title: Docs - Overview of Notification API with public AsyncAPI documents
+      link: https://developer.ebay.com/api-docs/commerce/notification/overview.html

cypress/test/components/CaseStudyCard.cy.js

@@ -1,7 +1,10 @@
 import React from 'react';
 import { mount } from 'cypress/react';
 import CaseStudyCard from '../../../components/CaseStudyCard';
-import CaseStudiesList from "../../../config/case-studies.json";
+import CaseStudiesList from '../../../config/case-studies.json';
+import AdoptersList from '../../../config/adopters.json';
+import Casestudies from '../../../pages/casestudies';
+
 describe('CaseStudyCard Component', () => {
 
   it('renders the CaseStudyCard component with study data', () => {

cypress/test/pages/casestudies/index.cy.js

@@ -1,14 +1,41 @@
 import Casestudies from "../../../../pages/casestudies";
 import MockApp from "../../../utils/MockApp";
-import {mount} from 'cypress/react';
+import { mount } from 'cypress/react';
+import AdoptersList from "../../../../config/adopters.json"
+
 describe('Test for Case Study Pages', () => {
     it('renders correctly', () => {
         mount(
             <MockApp>
                 <Casestudies />
             </MockApp>
         );
-    cy.get('[data-testid="CaseStudy-main"]').should('exist');
-    cy.get('[data-testid="CaseStudy-card"]').should('exist');
+        cy.get('[data-testid="CaseStudy-main"]').should('exist');
+        cy.get('[data-testid="CaseStudy-card"]').should('exist');
     });
+
+    it('Adopters section renders correctly', () => {
+        mount(
+            <MockApp>
+                <Casestudies />
+            </MockApp>
+        );
+        cy.get('[data-testid="Adopters"]').should('have.length', AdoptersList.length);
+
+        cy.get('table')
+            .should('exist')
+            .within(() => {
+                // Check table headers
+                cy.get('th').eq(0).should('have.text', 'Company name');
+                cy.get('th').eq(1).should('have.text', 'Use Case');
+                cy.get('th').eq(2).should('have.text', 'Resources');
+
+                // Check table data
+                cy.get('tbody tr').should('have.length', AdoptersList.length);
+                AdoptersList.forEach((entry, index) => {
+                    cy.get('tbody tr').eq(index).find('td').eq(0).should('have.text', entry.companyName);
+                    cy.get('tbody tr').eq(index).find('td').eq(1).should('have.text', entry.useCase);
+                });
+            });
+    })
 });

pages/casestudies/index.js

@@ -4,6 +4,7 @@ import Paragraph from '../../components/typography/Paragraph';
 import TextLink from '../../components/typography/TextLink';
 import Heading from "../../components/typography/Heading";
 import CaseStudiesList from "../../config/case-studies.json";
+import AdoptersList from "../../config/adopters.json"
 
 export default function Casestudies() {
   const description =
@@ -41,7 +42,61 @@ export default function Casestudies() {
           <CaseStudyCard studies={CaseStudiesList}
           />
         </div>
+
+        <div className="adopters">
+          <div className="grid lg:grid-cols-9 lg:gap-8 lg:text-center mt-8">
+            <div className="col-start-3 col-span-5">
+              <Heading level="h1" typeStyle="heading-lg">
+                Adopters
+              </Heading>
+              <Paragraph typeStyle="body-md" className="my-4 max-w-4xl" >
+                Check out how different companies use AsyncAPI and what problems they solve.
+              </Paragraph>
+              <Paragraph typeStyle="body-md" className="my-4 max-w-4xl">
+                Feel free to <a className="underline" href="https://github.com/asyncapi/website/tree/master/config/adopters/adopters.yml">submit a pull request</a> with information about how your company uses AsyncAPI. We know that
+                writing an official case study might be time consuming and requires too much internal paper work.
+                Let's make sure we can at least capture a use case that is already a great learning information for the
+                community.
+              </Paragraph>
+            </div>
+          </div>
+        </div>
+
+        <center>
+          <div className="overflow-x-auto">
+          <table className="my-8 w-full max-w-full border-collapse border">
+            <thead>
+              <tr>
+                <th className="border p-2 font-bold">Company name</th>
+                <th className="border-2 p-2 font-bold">Use Case</th>
+                <th className="border-2 p-2 font-bold">Resources</th>
+              </tr>
+            </thead>
+            <tbody>
+              {AdoptersList.map((entry, index) => (
+                <tr key={index} data-testid="Adopters">
+                  <td className="border-2 p-2">{entry.companyName}</td>
+                  <td className="border-2 p-2">{entry.useCase}</td>
+                  <td className="border-2 p-2">
+                    <ul>
+                      {entry.resources.map((resource, resourceIndex) => (
+                        <li className="p-2" key={resourceIndex}>
+                          <a className="text-cyan-500 underline" href={resource.link}>
+                            {resource.title}
+                          </a>
+                        </li>
+                      ))}
+                    </ul>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+          </div>
+        </center>
       </div>
     </GenericLayout>
   );
 }
+
+

scripts/adopters/index.js

@@ -0,0 +1,18 @@
+const { promises: { readFile, writeFile } } = require('fs');
+const { convertToJson } = require('../utils');
+const { resolve } = require('path');
+
+module.exports = async function buildAdoptersList() {
+    try {
+        const AdoptersContent = await readFile('config/adopters.yml', 'utf-8');
+        const jsonContent = convertToJson(AdoptersContent);
+
+        await writeFile(
+            resolve(__dirname, '../../config', 'adopters.json'),
+            JSON.stringify(jsonContent)
+        );
+    } catch (err) {
+        console.error(err);
+        throw err;
+    }
+};

scripts/index.js

@@ -1,6 +1,7 @@
 const rssFeed = require('./build-rss');
 const buildPostList = require('./build-post-list');
 const buildCaseStudiesList = require('./casestudies');
+const buildAdoptersList = require('./adopters')
 const buildFinanceInfoList = require('./finance')
 
 async function start() {
@@ -18,6 +19,7 @@ async function start() {
     'jobs/rss.xml'
   );
   await buildCaseStudiesList();
+  await buildAdoptersList();
   await buildFinanceInfoList();
 }