Merge branch 'asyncapi:master' into master

anshgoyalevil · Jul 22, 2023 · a525645 · a525645
2 parents 847df59 + 4e0470a
commit a525645
Show file tree

Hide file tree

Showing 93 changed files with 2,586 additions and 615 deletions.
diff --git a/.all-contributorsrc b/.all-contributorsrc
@@ -509,6 +509,16 @@
       "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/README.md b/README.md
@@ -3,7 +3,7 @@
 ---
 
 <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
-[![All Contributors](https://img.shields.io/badge/all_contributors-51-orange.svg?style=flat-square)](#contributors-)
+[![All Contributors](https://img.shields.io/badge/all_contributors-52-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)
@@ -215,6 +215,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
     <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/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/Feedback.js b/components/Feedback.js
@@ -50,7 +50,7 @@ export default function Feedback(className = '') {
                 <div className='block mx-auto w-fit'>
                     <img src='/img/illustrations/icons/icon-check.svg' className='md:w-14' />
                 </div>
-                <div className='text-center mx-auto text-lg mt-4'>
+                <div className='text-center mx-auto text-lg mt-4' data-testid="Feedback-div">
                     Thank you for your feedback!
                 </div>
                 <div className='text-center mx-auto text-md text-gray-500'>
@@ -71,7 +71,7 @@ export default function Feedback(className = '') {
             <div className='block mx-auto w-fit'>
                 <img src='/img/illustrations/icons/icon-x.svg' className='md:w-14' />
             </div>
-            <div className='text-center mx-auto text-lg mt-4'>
+            <div className='text-center mx-auto text-lg mt-4' data-testid="Feedback-error">
                 Oops! Something went wrong...
             </div>
             <div className='text-center mx-auto text-md text-gray-500'>

diff --git a/components/Figure.js b/components/Figure.js
@@ -12,9 +12,9 @@ export default function Figure ({ src, caption, widthClass, className, float, al
   }
 
   return (
-    <figure className={`${className} ${floatClassNames} ${widthClass || 'w-full'}`}>
+    <figure className={`${className} ${floatClassNames} ${widthClass || 'w-full'}`} data-testid="Figure-div">
       <div className='flex flex-col'>
-        <img className={`${imageClass}`} src={src} alt={alt} />
+        <img className={`${imageClass}`} src={src} alt={alt} data-testid="Figure-img" />
         { caption && (<Caption>{caption}</Caption>) }
       </div>
     </figure>

diff --git a/components/Head.js b/components/Head.js
@@ -1,24 +1,33 @@
-import { useContext } from 'react'
-import Head from 'next/head'
-import AppContext from '../context/AppContext'
-import ReactGA from 'react-ga'
-import TagManager from 'react-gtm-module'
+import { useContext, useEffect } from 'react';
+import Head from 'next/head';
+import AppContext from '../context/AppContext';
+import ReactGA from 'react-ga';
+import TagManager from 'react-gtm-module';
 
 export default function HeadComponent({
   title,
   description = 'Open source tools to easily build and maintain your event-driven architecture. All powered by the AsyncAPI specification, the industry standard for defining asynchronous APIs.',
   image = '/img/social/website-card.jpg',
   rssTitle = 'RSS Feed for AsyncAPI Initiative Blog',
-  rssLink = '/rss.xml'
+  rssLink = '/rss.xml',
 }) {
-  const url = process.env.DEPLOY_PRIME_URL || process.env.DEPLOY_URL || "http://localhost:3000"
-  const { path = '' } = useContext(AppContext)
-  const permalink = `${url}${path}`
-  let type = 'website'
-  if (path.startsWith('/docs') || path.startsWith('/blog')) type = 'article'
-  if (!image.startsWith('http') && !image.startsWith('https')) image = `${url}${image}`
-  const permTitle = 'AsyncAPI Initiative for event-driven APIs'
-  title = title ? `${title} | ${permTitle}` : permTitle
+  const url = process.env.DEPLOY_PRIME_URL || process.env.DEPLOY_URL || 'http://localhost:3000';
+  const appContext = useContext(AppContext);
+  const { path = '' } = appContext || {};
+
+  const permalink = `${url}${path}`;
+  let type = 'website';
+
+  if (path.startsWith('/docs') || path.startsWith('/blog')) {
+    type = 'article';
+  }
+
+  if (!image.startsWith('http') && !image.startsWith('https')) {
+    image = `${url}${image}`;
+  }
+
+  const permTitle = 'AsyncAPI Initiative for event-driven APIs';
+  title = title ? `${title} | ${permTitle}` : permTitle;
 
   //enable google analytics
   if (typeof window !== 'undefined') {
@@ -27,6 +36,7 @@ export default function HeadComponent({
     ReactGA.pageview(window.location.pathname + window.location.search)
   }
 
+
   return (
     <Head>
       <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
@@ -50,13 +60,13 @@ export default function HeadComponent({
       <meta itemProp="name" content={title} />
       <meta itemProp="description" content={description} />
       <meta itemProp="image" content={image} />
-      
+
       {/* Twitter Card data */}
       <meta name="twitter:card" value="summary_large_image" />
       <meta name="twitter:title" content={title} />
       <meta name="twitter:description" content={description} />
       <meta name="twitter:image" content={image} />
-      
+
       {/* Open Graph data */}
       <meta property="og:title" content={title} />
       <meta property="og:type" content={type} />
@@ -66,5 +76,5 @@ export default function HeadComponent({
 
       <title>{title}</title>
     </Head>
-  )
+  );
 }
diff --git a/components/Hero.js b/components/Hero.js
@@ -6,7 +6,7 @@ import DemoAnimation from './DemoAnimation'
 import AnnouncementHero from '../components/campaigns/AnnoucementHero'
 import Heading from './typography/Heading'
 import Paragraph from './typography/Paragraph'
-import { SearchButton } from './AlgoliaSearch';
+import AlgoliaSearch, { SearchButton } from './AlgoliaSearch'; // Import AlgoliaSearch component
 import IconLoupe from './icons/Loupe';
 
 export default function Hero({ className = ''}) {
@@ -28,28 +28,32 @@ export default function Hero({ className = ''}) {
             <strong>industry standard</strong> for defining asynchronous APIs.
           </Heading>
           <div className='flex flex-row items-center justify-center'>
-            <Button className="block md:inline-block" text="Read the docs" href="/docs" icon={<ArrowRight className="-mb-1 h-5 w-5" />} />
-            <SearchButton 
-              className="hidden sm:flex items-center text-left space-x-3 px-4 py-3 ml-2 bg-white border-secondary-500 border text-secondary-500 hover:text-white shadow-md bg-secondary-100 hover:bg-secondary-500 transition-all duration-500 ease-in-out rounded-md"
-            >
-              {({ actionKey }) => (
-                <>
-                  <IconLoupe />
-                  <span className="flex-auto">Quick search...</span>
-                  {actionKey && (
-                    <kbd className="font-sans font-semibold">
-                      <abbr
-                        title={actionKey.key}
-                        className="no-underline"
-                      >
-                        {actionKey.shortKey}
-                      </abbr>{' '}
-                      K
-                    </kbd>
-                  )}
-                </>
-              )}
-            </SearchButton>
+            <Button className="block md:inline-block" text="Read the docs" href="/docs" icon={<ArrowRight className="-mb-1 h-5 w-5" />} 
+            data-testid="Hero-Button"/>
+            {/* Wrap SearchButton with AlgoliaSearch component */}
+            <AlgoliaSearch>
+              <SearchButton 
+                className="sm:flex items-center text-left space-x-3 px-4 py-3 ml-2 bg-white border-secondary-500 border text-secondary-500 hover:text-white shadow-md bg-secondary-100 hover:bg-secondary-500 transition-all duration-500 ease-in-out rounded-md"
+              >
+                {({ actionKey }) => (
+                  <>
+                    <IconLoupe />
+                    <span className="flex-auto">Quick search...</span>
+                    {actionKey && (
+                      <kbd className="font-sans font-semibold">
+                        <abbr
+                          title={actionKey.key}
+                          className="no-underline"
+                        >
+                          {actionKey.shortKey}
+                        </abbr>{' '}
+                        K
+                      </kbd>
+                    )}
+                  </>
+                )}
+              </SearchButton>
+            </AlgoliaSearch>
           </div>
           <Paragraph typeStyle="body-sm" className="mt-4" textColor="text-gray-500">
             Proud to be part of the {" "}
@@ -66,3 +70,4 @@ export default function Hero({ className = ''}) {
     </>
   );
 }
+
diff --git a/components/InlineHelp.js b/components/InlineHelp.js
@@ -18,10 +18,10 @@ export default function InlineHelp({
     <div className={className}>
       {
         isHelpVisible && (
-          <div className="absolute left-0 right-0 mt-6 p-2 bg-gray-800 text-center text-white text-xs rounded normal-case lg:-ml-4 lg:w-48">{text}</div>
+          <div className="absolute left-0 right-0 mt-6 p-2 bg-gray-800 text-center text-white text-xs rounded normal-case lg:-ml-4 lg:w-48" data-testid="InlineHelp">{text}</div>
         )
       }
-      <QuestionMark className="cursor-pointer h-4 -mt-0.5 inline-block text-gray-500" onClick={() => setIsHelpVisible(!isHelpVisible)} onMouseEnter={() => setIsHelpVisible(true)} onMouseLeave={() => setIsHelpVisible(false)} />
+      <QuestionMark className="cursor-pointer h-4 -mt-0.5 inline-block text-gray-500" onClick={() => setIsHelpVisible(!isHelpVisible)} onMouseEnter={() => setIsHelpVisible(true)} onMouseLeave={() => setIsHelpVisible(false)} data-testid="InlineHelp-icon" />
     </div>
   )
 }
diff --git a/components/MacWindow.js b/components/MacWindow.js
@@ -7,17 +7,17 @@ export default function MacWindow({
   children,
 }) {
   return (
-    <div className={`${className} rounded`}>
-      <div className="flex text-left px-4 py-2">
+    <div className={`${className} rounded`} data-testid="MacWindow-main">
+      <div className="flex text-left px-4 py-2" data-testid="MacWindow-div">
         <div>
           <span className="inline-block rounded-full w-2.5 h-2.5 bg-mac-window-close mr-2"></span>
           <span className="inline-block rounded-full w-2.5 h-2.5 bg-mac-window-minimize mr-2"></span>
           <span className="inline-block rounded-full w-2.5 h-2.5 bg-mac-window-maximize mr-2"></span>
         </div>
-        <div className="flex-1 text-gray-400 text-sm px-2 truncate text-left sm:text-center" title={title}>
+        <div className="flex-1 text-gray-400 text-sm px-2 truncate text-left sm:text-center" title={title} data-testid="MacWindow-title-div">
           {title}
         </div>
-        <div className="hidden sm:block"> {/* This block is used for aligning the title on the center */}
+        <div className="hidden sm:block" data-testid="MacWindow-title-center"> {/* This block is used for aligning the title on the center */}
           <span className="inline-block w-2.5 h-2.5 mr-2"></span>
           <span className="inline-block w-2.5 h-2.5 mr-2"></span>
           <span className="inline-block w-2.5 h-2.5 mr-2"></span>

diff --git a/components/Meeting.js b/components/Meeting.js
@@ -14,21 +14,21 @@ export default function Meeting({
 }) {
 
   return (
-    <a href={youtube} target="_blank" rel="noreferrer">
+    <a href={youtube} target="_blank" rel="noreferrer"  data-testid="Meeting-link">
       <div
         className={`meeting-card overflow-hidden p-4 bg-${bg} w-full lg:w-[300px] h-[300px] cursor-pointer hover:bg-dark hover:text-white flex flex-col justify-between`}
       >
         <div>
-          <h3 className="text-xl">{name}</h3>
-          <div>
+          <h3 className="text-xl" data-testid="Meeting-heading">{name}</h3>
+          <div data-testid="Meeting-paragraph">
             <Paragraph typeStyle="body-sm" className="my-4" textColor="white">
               {purpose}
             </Paragraph>
           </div>
         </div>
         <div className="flex items-center justify-between">
           <Paragraph typeStyle="body-md" className="my-4">
-            <strong>Host:</strong>
+            <strong  data-testid="Meeting-host">Host:</strong>
             {hostProfile ? (
               <TextLink
                 href={hostProfile}

diff --git a/components/Modal.js b/components/Modal.js
@@ -22,8 +22,8 @@ export default function Modal({
   }
 
   return (
-    <div ref={modalRef} tabIndex={-1} className="backdrop-blur bg-black/30 fixed inset-0 z-30 flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0" onClick={backdropClickHandler} onKeyUp={onKeyUpHandler}>
-      <div className="relative transform overflow-hidden rounded-lg bg-white px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-4xl sm:p-6">
+    <div ref={modalRef} tabIndex={-1} className="backdrop-blur bg-black/30 fixed inset-0 z-30 flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0 my-auto mt-2" onClick={backdropClickHandler} onKeyUp={onKeyUpHandler}>
+      <div className="relative transform overflow-hidden rounded-lg bg-white px-4 pt-5 pb-4 text-left shadow-xl transition-all m-auto sm:w-full sm:max-w-4xl sm:p-6">
         <div className="flex justify-between mb-6">
           <h1 className="text-lg font-bold truncate mr-4">{title}</h1>
           <button onClick={() => onModalClose()} data-testid="Modal-close">
@@ -32,7 +32,7 @@ export default function Modal({
             </svg>
           </button>
         </div>
-        <div className="w-full overflow-auto max-h-120">
+        <div className="w-full overflow-auto lg:max-h-[70vh] max-h-[65vh]">
           {children}
         </div>
       </div>

diff --git a/components/NewsletterSubscribe.js b/components/NewsletterSubscribe.js
@@ -13,7 +13,7 @@ export default function NewsletterSubscribe ({
   const paragraphTextColor = dark ? 'text-gray-300' : ''
 
   return (
-    <div className={className}>
+    <div className={className} data-testid="NewsletterSubscribe-main">
       <Heading 
         level="h3"
         textColor={headTextColor}
@@ -28,8 +28,8 @@ export default function NewsletterSubscribe ({
       <form name="form 1" method="POST" className="md:flex" data-netlify="true">
         <input type="hidden" name="form-name" value="form 1" />
         <input type="hidden" name="type" value={type} />
-        <input type="text" name="name" placeholder="Your name" className="form-input block w-full sm:text-sm sm:leading-5 md:mr-2 md:mt-0 md:flex-1 rounded-md" required />
-        <input type="email" name="email" placeholder="Your email" className="form-input block w-full mt-2 sm:text-sm sm:leading-5 md:mr-2 md:mt-0 md:flex-1 rounded-md" required />
+        <input type="text" name="name" placeholder="Your name" className="form-input block w-full sm:text-sm sm:leading-5 md:mr-2 md:mt-0 md:flex-1 rounded-md" required data-testid="NewsletterSubscribe-text-input"/>
+        <input type="email" name="email" placeholder="Your email" className="form-input block w-full mt-2 sm:text-sm sm:leading-5 md:mr-2 md:mt-0 md:flex-1 rounded-md" required data-testid="NewsletterSubscribe-email-input"/>
         <Button type="submit" text="Subscribe" className="w-full mt-2 md:mr-2 md:mt-0 md:flex-1" />
       </form>
     </div>