asyncapi · BhaswatiRoy · Jun 17, 2023 · Jun 17, 2023 · Jun 17, 2023 · Jun 17, 2023
diff --git a/.all-contributorsrc b/.all-contributorsrc
@@ -454,6 +454,71 @@
       "contributions": [
         "doc"
       ]
+    },
+    {
+      "login": "Florence-Njeri",
+      "name": "Florence Njeri",
+      "avatar_url": "https://avatars.githubusercontent.com/u/40742916?v=4",
+      "profile": "https://florence-njeri.github.io/NjeriPortfolio",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "anshgoyalevil",
+      "name": "Ansh Goyal",
+      "avatar_url": "https://avatars.githubusercontent.com/u/94157520?v=4",
+      "profile": "https://ansh.live",
+      "contributions": [
+        "code",
+        "review"
+      ]
+    },
+    {
+      "login": "SumantxD",
+      "name": "Sumant.xD",
+      "avatar_url": "https://avatars.githubusercontent.com/u/65810424?v=4",
+      "profile": "https://github.com/SumantxD",
+      "contributions": [
+        "infra"
+      ]
+    },
+    {
+      "login": "Shriansh2002",
+      "name": "Shriansh Agarwal",
+      "avatar_url": "https://avatars.githubusercontent.com/u/41548480?v=4",
+      "profile": "http://shrianshagarwal.in",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "reachaadrika",
+      "name": "Aadrika Bhargava",
+      "avatar_url": "https://avatars.githubusercontent.com/u/64789514?v=4",
+      "profile": "https://github.com/reachaadrika",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "vishvamsinh28",
+      "name": "Vishvamsinh Vaghela",
+      "avatar_url": "https://avatars.githubusercontent.com/u/90895835?v=4",
+      "profile": "https://github.com/vishvamsinh28",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "AnimeshKumar923",
+      "name": "Animesh Kumar",
+      "avatar_url": "https://avatars.githubusercontent.com/u/99868037?v=4",
+      "profile": "https://github.com/AnimeshKumar923",
+      "contributions": [
+        "doc",
+        "review"
+      ]
     }
   ],
   "contributorsPerLine": 7,

diff --git a/.eslintrc.js b/.eslintrc.js
@@ -3,7 +3,7 @@ module.exports = {
     "browser": true,
     "es6": true,
   },
-  "extends": ["eslint:recommended", "plugin:react/recommended" , "plugin:cypress/recommended"],
+  "extends": ["eslint:recommended", "plugin:react/recommended", "plugin:cypress/recommended"],
   "globals": {
     "Atomics": "readonly",
     "SharedArrayBuffer": "readonly",

diff --git a/.github/workflows/cypress-tests.yml b/.github/workflows/cypress-tests.yml
@@ -0,0 +1,27 @@
+name: Run tests
+on:
+  push:
+    branches:
+      - master
+  pull_request:
+    types: [opened, reopened, synchronize, ready_for_review]
+
+jobs:
+  cypress-run:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+
+      - name: Use Node.js 16.x
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16.x
+
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Cypress Tests are running
+        run : node  ./scripts/index.js && npm run test
diff --git a/.github/workflows/help-command.yml b/.github/workflows/help-command.yml
@@ -27,13 +27,13 @@ jobs:
               repo: context.repo.repo,
               body: `Hello, @${{ github.actor }}! 👋🏼 
 
-                    I'm Genie from the magic lamp. Looks like somebody needs a hand! 🆘 
+                    I'm 🧞🧞🧞 Genie 🧞🧞🧞 from the magic lamp. Looks like somebody needs a hand!
 
                     At the moment the following comments are supported in pull requests:
 
-                    - `/ready-to-merge` or `/rtm` - This comment will trigger automerge of PR in case all required checks are green, approvals in place and do-not-merge label is not added
-                    - `/do-not-merge` or `/dnm` - This comment will block automerging even if all conditions are met and ready-to-merge label is added
-                    - `/autoupdate` or `/au` - This comment will add `autoupdate` label to the PR and keeps your PR up-to-date to the target branch's future changes. Unless there is a merge conflict or it is a draft PR.`
+                    - \`/ready-to-merge\` or \`/rtm\` - This comment will trigger automerge of PR in case all required checks are green, approvals in place and do-not-merge label is not added
+                    - \`/do-not-merge\` or \`/dnm\` - This comment will block automerging even if all conditions are met and ready-to-merge label is added
+                    - \`/autoupdate\` or \`/au\` - This comment will add \`autoupdate\` label to the PR and keeps your PR up-to-date to the target branch's future changes. Unless there is a merge conflict or it is a draft PR.`
             })
 
   create_help_comment_issue:
@@ -51,10 +51,10 @@ jobs:
               repo: context.repo.repo,
               body: `Hello, @${{ github.actor }}! 👋🏼 
 
-              I'm Genie from the magic lamp. Looks like somebody needs a hand! 🆘 
+              I'm 🧞🧞🧞 Genie 🧞🧞🧞 from the magic lamp. Looks like somebody needs a hand!
 
               At the moment the following comments are supported in issues:
 
-              - `/good-first-issue {js | ts | java | go | docs | design | ci-cd} ` or `/gfi {js | ts | java | go | docs | design | ci-cd} ` - label an issue as a `good first issue`.
-              example: `/gfi js` or `/good-first-issue ci-cd`
-            })
+              - \`/good-first-issue {js | ts | java | go | docs | design | ci-cd}\` or \`/gfi {js | ts | java | go | docs | design | ci-cd}\` - label an issue as a \`good first issue\`.
+              example: \`/gfi js\` or \`/good-first-issue ci-cd\``
+            })
diff --git a/.github/workflows/lighthouse-ci.yml b/.github/workflows/lighthouse-ci.yml
@@ -32,7 +32,7 @@ jobs:
           )
         id: should_run
         name: Should Run
-        run: echo "::set-output name=shouldrun::true"
+        run: echo "shouldrun=true" >> $GITHUB_OUTPUT
 
       - if: steps.should_run.outputs.shouldrun == 'true'
         uses: actions/checkout@v3

diff --git a/.gitignore b/.gitignore
@@ -13,3 +13,5 @@ yarn.lock
 meetings.json
 .netlify
 .env
+cypress/screenshots
+cypress/videos
diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1 @@
+**
diff --git a/CODEOWNERS b/CODEOWNERS
@@ -5,12 +5,12 @@
 # For more details, read the following article on GitHub: https://help.github.com/articles/about-codeowners/.
 
 # The default owners are automatically added as reviewers when you open a pull request unless different owners are specified in the file.
-* @derberg @mcturco @akshatnema @magicmatatjahu @asyncapi-bot-eve
+* @derberg @akshatnema @magicmatatjahu @mayaleeeee @asyncapi-bot-eve
 
 # All .md files
 *.md @alequetzalli @asyncapi-bot-eve
 
 pages/blog/*.md @thulieblack @alequetzalli
 pages/community/*.md @thulieblack @alequetzalli
 
-README.md @alequetzalli @derberg @mcturco @akshatnema @magicmatatjahu @asyncapi-bot-eve
+README.md @alequetzalli @derberg @akshatnema @magicmatatjahu @mayaleeeee @asyncapi-bot-eve
diff --git a/README.md b/README.md
@@ -2,11 +2,24 @@
 
 ---
 
-<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
-[![All Contributors](https://img.shields.io/badge/all_contributors-45-orange.svg?style=flat-square)](#contributors-)
-<!-- ALL-CONTRIBUTORS-BADGE:END -->
-
-[![Netlify Status](https://api.netlify.com/api/v1/badges/b2137407-b765-46c4-95b5-a72d9b1592ab/deploy-status)](https://app.netlify.com/sites/asyncapi-website/deploys)
+<br/>
+<p align="center">
+    <a href="https://github.com/asyncapi/website/graphs/contributors" alt="AsyncAPI GitHub website contributors">
+      <img src="https://img.shields.io/github/contributors/asyncapi/website?color=orange" />
+    </a>
+    <a href="https://github.com/asyncapi/website/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22" alt="Good First AsyncAPI issue">
+      <img src="https://img.shields.io/github/issues/asyncapi/website/good%20first%20issue.svg?color=%23DDDD00" />
+    </a>
+    <a href="https://asyncapi.slack.com/" alt="AsyncAPI Slack">
+      <img src="https://img.shields.io/badge/[email protected]?logo=slack&color=yellow" />
+    </a>
+    <a href="https://app.netlify.com/sites/asyncapi-website/deploys">
+      <img src="https://api.netlify.com/api/v1/badges/b2137407-b765-46c4-95b5-a72d9b1592ab/deploy-status" />
+    </a>
+    <a href="https://github.com/asyncapi/website" alt="AsyncAPI Apache License">
+      <img src="https://img.shields.io/github/license/asyncapi/website.svg" />
+    </a>
+</p>
 
 ## Overview
 
@@ -140,7 +153,27 @@ This repository has the following structure:
   └── tailwind.config.js          # TailwindCSS configuration file
 ```
 
-## Contributors
+## Connect with AsyncAPI Community
+
+<p align="left">
+    <a href="https://asyncapi.slack.com/" target="blank">
+      <img align="center" src="https://img.icons8.com/color/48/null/slack-new.png" alt="AsyncAPI Slack" height="30" width="40" />
+    </a>
+    <a href="https://twitter.com/asyncapispec" target="blank">
+      <img align="center" src="https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/twitter.svg" alt="AsyncAPI Twitter" height="30" width="40" />
+    </a>
+    <a href="https://www.linkedin.com/company/asyncapi" target="blank">
+      <img align="center" src="https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/linked-in-alt.svg" alt="AsyncAPI LinkedIn" height="30" width="40" />
+    </a>
+    <a href="https://www.youtube.com/c/asyncapi" target="blank">
+      <img align="center" src="https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/youtube.svg" alt="AsyncAPI YouTube" height="30" width="40" />
+    </a>
+    <a href="https://www.twitch.tv/asyncapi" target="blank">
+      <img align="center" src="https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/twitch.svg" alt="AsyncAPI Twitch" height="30" width="40" />
+    </a>
+</p>
+
+## AsyncAPI Contributors ✨
 
 Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
 
@@ -207,6 +240,15 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
       <td align="center" valign="top" width="14.28%"><a href="https://linkfree.eddiehub.io/rukundob451"><img src="https://avatars.githubusercontent.com/u/67878128?v=4?s=100" width="100px;" alt="Benjamin Rukundo"/><br /><sub><b>Benjamin Rukundo</b></sub></a><br /><a href="https://github.com/asyncapi/website/commits?author=rukundob451" title="Code">💻</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/tthijm"><img src="https://avatars.githubusercontent.com/u/59415467?v=4?s=100" width="100px;" alt="tthijm"/><br /><sub><b>tthijm</b></sub></a><br /><a href="#infra-tthijm" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a></td>
       <td align="center" valign="top" width="14.28%"><a href="http://cynthiapeter.com"><img src="https://avatars.githubusercontent.com/u/33583060?v=4?s=100" width="100px;" alt="Cynthia Peter"/><br /><sub><b>Cynthia Peter</b></sub></a><br /><a href="https://github.com/asyncapi/website/commits?author=CynthiaPeter" title="Documentation">📖</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://florence-njeri.github.io/NjeriPortfolio"><img src="https://avatars.githubusercontent.com/u/40742916?v=4?s=100" width="100px;" alt="Florence Njeri"/><br /><sub><b>Florence Njeri</b></sub></a><br /><a href="https://github.com/asyncapi/website/commits?author=Florence-Njeri" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://ansh.live"><img src="https://avatars.githubusercontent.com/u/94157520?v=4?s=100" width="100px;" alt="Ansh Goyal"/><br /><sub><b>Ansh Goyal</b></sub></a><br /><a href="https://github.com/asyncapi/website/commits?author=anshgoyalevil" title="Code">💻</a> <a href="https://github.com/asyncapi/website/pulls?q=is%3Apr+reviewed-by%3Aanshgoyalevil" title="Reviewed Pull Requests">👀</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/SumantxD"><img src="https://avatars.githubusercontent.com/u/65810424?v=4?s=100" width="100px;" alt="Sumant.xD"/><br /><sub><b>Sumant.xD</b></sub></a><br /><a href="#infra-SumantxD" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="http://shrianshagarwal.in"><img src="https://avatars.githubusercontent.com/u/41548480?v=4?s=100" width="100px;" alt="Shriansh Agarwal"/><br /><sub><b>Shriansh Agarwal</b></sub></a><br /><a href="https://github.com/asyncapi/website/commits?author=Shriansh2002" title="Code">💻</a></td>
+    </tr>
+    <tr>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/reachaadrika"><img src="https://avatars.githubusercontent.com/u/64789514?v=4?s=100" width="100px;" alt="Aadrika Bhargava"/><br /><sub><b>Aadrika Bhargava</b></sub></a><br /><a href="https://github.com/asyncapi/website/commits?author=reachaadrika" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/vishvamsinh28"><img src="https://avatars.githubusercontent.com/u/90895835?v=4?s=100" width="100px;" alt="Vishvamsinh Vaghela"/><br /><sub><b>Vishvamsinh Vaghela</b></sub></a><br /><a href="https://github.com/asyncapi/website/commits?author=vishvamsinh28" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/AnimeshKumar923"><img src="https://avatars.githubusercontent.com/u/99868037?v=4?s=100" width="100px;" alt="Animesh Kumar"/><br /><sub><b>Animesh Kumar</b></sub></a><br /><a href="https://github.com/asyncapi/website/commits?author=AnimeshKumar923" title="Documentation">📖</a> <a href="https://github.com/asyncapi/website/pulls?q=is%3Apr+reviewed-by%3AAnimeshKumar923" title="Reviewed Pull Requests">👀</a></td>
     </tr>
   </tbody>
 </table>

diff --git a/assets/docs/fragments/how-to-contribute.md b/assets/docs/fragments/how-to-contribute.md
@@ -0,0 +1,23 @@
+## How to contribute to AsyncAPI Docs
+
+Did you know that you can contribute Docs to AsyncAPI as well? Code isn't the only way to contribute to OSS; Dev Docs are a **huge** help that benefit the entire OSS ecosystem. At AsyncAPI, we value Doc contributions as much as every other type of contribution. ❤️
+
+To get started as a Docs contributor:
+
+1. Familiarize yourself with our [project's Contribution Guide](https://github.com/asyncapi/community/blob/master/CONTRIBUTING.md) and our [Code of Conduct](https://github.com/asyncapi/.github/blob/master/CODE_OF_CONDUCT.md).
+
+2. Head over to our Docs GH Board [here](https://github.com/orgs/asyncapi/projects/12).
+
+3. Pick an issue you would like to contribute to and leave a comment introducing yourself. This is also the perfect place to leave any questions you may have on how to get started.
+
+4. If there is no work done in that Docs issue yet, feel free to open a PR and get started!
+
+### Tag me in your AsyncAPI Doc PRs
+
+Do you have a documentation contributor question and you're wondering how to tag me into a GitHub discussion or PR? Never fear!
+
+Tag me in your AsyncAPI Doc PRs or [GitHub Discussions](https://github.com/asyncapi/community/discussions/categories/docs) via my GitHub handle, [`/alequetzalli`](https://github.com/alequetzalli) 🐙.
+
+### Talk to me
+
+I want and need to listen 👂🏽 to all of your perspectives and ideas. Please don't be shy to express to me what you think needs to be documented first or what is missing. 📝 There's a lot of good work ahead, but **you** determine _our content roadmap_ because the OSS community needs should always come first.✨
diff --git a/components/AlgoliaSearch.js b/components/AlgoliaSearch.js
@@ -11,7 +11,7 @@ export const DOCS_INDEX_NAME = 'asyncapi-docs';
 const APP_ID = 'Z621OGRI9Y';
 const API_KEY = '5a4122ae46ce865146d23d3530595d38';
 
-const SearchContext = createContext()
+const SearchContext = createContext({});
 
 export default function AlgoliaSearch({ children }) {
   const [isOpen, setIsOpen] = useState(false);
@@ -47,14 +47,7 @@ export default function AlgoliaSearch({ children }) {
       <Head>
         <link rel="preconnect" href={`https://${APP_ID}-dsn.algolia.net`} crossOrigin="true" />
       </Head>
-      <SearchContext.Provider
-        value={{
-          isOpen,
-          onOpen,
-          onClose,
-          onInput,
-        }}
-      >
+      <SearchContext.Provider value={{ isOpen, onOpen, onClose, onInput }}>
         {children}
       </SearchContext.Provider>
       {isOpen && <AlgoliaModal initialQuery={initialQuery} onClose={onClose} indexName={indexName} />}
@@ -169,6 +162,7 @@ export function SearchButton({ children, indexName = INDEX_NAME, ...props }) {
         onOpen(indexName);
       }} 
       {...props}
+      data-testid="Search-Button"
     >
       {typeof children === 'function' ? children({ actionKey }) : children}
     </button>

diff --git a/components/AuthorAvatars.js b/components/AuthorAvatars.js
@@ -1,15 +1,25 @@
+import React from 'react'
 export default function AuthorAvatars({ authors = [] }) {
   return (
     authors.map((author, index) => {
-      let avatar = <img
-        key={index}
-        title={author.name}
-        className={`${index > 0 ? `absolute left-${index * 7} top-0` : `relative mr-${(authors.length - 1) * 7}`} z-${(authors.length - 1 - index) * 10} h-10 w-10 border-2 border-white rounded-full object-cover hover:z-50`}
-        src={author.photo}
-        loading="lazy"
-      />
+      let avatar = (
+        <img
+          key={index}
+          title={author.name}
+          className={`${index > 0 ? `absolute left-${index * 7} top-0` : `relative mr-${(authors.length - 1) * 7}`} z-${(authors.length - 1 - index) * 10} h-10 w-10 border-2 border-white rounded-full object-cover hover:z-50`}
+          src={author.photo}
+          loading="lazy"
+          data-testid="AuthorAvatars-img"
+        />
+      );
 
-      return author.link ? <a alt={author.name} href={author.link}>{avatar}</a> : {avatar}
+      return author.link ? (
+        <a alt={author.name} href={author.link} data-testid="AuthorAvatars-link">
+          {avatar}
+        </a>
+      ) : (
+        <React.Fragment key={index}>{avatar}</React.Fragment>
+      );
     })
-  )
-}
+  );
+}
diff --git a/components/Calendar.js b/components/Calendar.js
@@ -2,8 +2,12 @@ import eventsData from '../config/meetings.json';
 import GoogleCalendarButton from './buttons/GoogleCalendarButton';
 import Heading from './typography/Heading';
 import { getEvents } from '../lib/staticHelpers';
+import { useTranslation } from '../lib/i18n';
 
 export default function Calendar({ className = '', size, text="text-left" }) {
+
+  const { t } = useTranslation('common');
+
   const CALENDAR_URL =
     'https://calendar.google.com/calendar/embed?src=c_q9tseiglomdsj6njuhvbpts11c%40group.calendar.google.com&ctz=UTC';
   const eventsExist = eventsData.length > 0;
@@ -12,11 +16,11 @@ export default function Calendar({ className = '', size, text="text-left" }) {
       className={`rounded-md border border-gray-200 overflow-hidden bg-white p-4`}
     >
       <Heading level="h2" typeStyle="heading-md-semibold">
-        Upcoming events
+        {t("calendar.title")}
       </Heading> 
       <ul>
         {getEvents(eventsData, size).map((event, index) => (
-          <li key={index}>
+          <li key={index} data-testid="Calendar-list-item">
             <a
               href={event.url}
               className="flex-grow flex sm:items-center items-start flex-col sm:flex-row mb-1 mt-2"
@@ -40,15 +44,15 @@ export default function Calendar({ className = '', size, text="text-left" }) {
         ))}
       </ul>
       {eventsExist ? 
-        <div className='pt-4'>
+        <div className='pt-4' data-testid="Calendar-button">
           <GoogleCalendarButton 
             href={CALENDAR_URL}
-            text="View Calendar"
+            text={t("calendar.viewCalendarBtn")}
           />
         </div>
         :
         <div className="mt-2 text-gray-700">
-          There are no meetings scheduled for next few days.
+        {t("calendar.noMeetingsMessage")}
         </div>
       }
     </div>