Merge branch 'campaignTests' of https://github.com/reachaadrika/website…

… into campaignTests
asyncapi · Jul 16, 2023 · 6027dd5 · 6027dd5
2 parents 015b510 + 2cd75e7
commit 6027dd5
Show file tree

Hide file tree

Showing 68 changed files with 1,819 additions and 430 deletions.
diff --git a/.all-contributorsrc b/.all-contributorsrc
@@ -500,6 +500,25 @@
       "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/.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 @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 @akshatnema @magicmatatjahu @asyncapi-bot-eve
+README.md @alequetzalli @derberg @akshatnema @magicmatatjahu @mayaleeeee @asyncapi-bot-eve
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-50-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)
@@ -214,6 +214,8 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
     </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/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} />}

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/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/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>

diff --git a/components/Profile.js b/components/Profile.js
@@ -3,9 +3,10 @@ export default function Profile({profiles = [], className}) {
     return null;
   }
     return (
-      <div className="p-4 grid grid-cols-2 sm:grid-cols-4 gap-5 border border-slate-100 mt-4 rounded drop-shadow-md">
+      <div className="p-4 grid grid-cols-2 sm:grid-cols-4 gap-5 border border-slate-100 mt-4 rounded drop-shadow-md" data-testid="Profiles-main">
         {profiles.map((profile) => (
-          <a
+          <a  
+            data-testid="Profiles-link"
             href={profile.link}
             key={profile.name}
             target="_blank"

diff --git a/components/Remember.js b/components/Remember.js
@@ -2,10 +2,10 @@ import LightBulb from './icons/LightBulb'
 
 export default function Remember({ title = 'Remember', className, children }) {
   return (
-    <div className={`${className} p-4 mt-4 mb-8 bg-secondary-100 rounded text-gray-900`}>
-      <h5 className="pb-2 mb-4 border-b border-gray-900 text-lg">
+    <div className={`${className} p-4 mt-4 mb-8 bg-secondary-100 rounded text-gray-900`} data-testid="Remember-main">
+      <h5 className="pb-2 mb-4 border-b border-gray-900 text-lg" data-testid="Remember-heading">
         <LightBulb className="mr-2 -mt-0.5 h-8 inline-block" />
-        <span className="inline-block ml-2 font-medium font-sans antialiased">{title}</span>
+        <span className="inline-block ml-2 font-medium font-sans antialiased" data-testid="Remember-title">{title}</span>
       </h5>
     <div>
       { children }

diff --git a/components/Warning.js b/components/Warning.js
@@ -2,16 +2,16 @@ import IconExclamation from "./icons/Exclamation";
 
 export default function Warning({ className = '', title, description }) {
   return (
-    <div className={`${className} rounded-md bg-yellow-50 p-4`}>
+    <div className={`${className} rounded-md bg-yellow-50 p-4`} data-testid="Warning-main">
       <div className="flex">
         <div className="flex-shrink-0">
           <IconExclamation className="h-5 w-5" />
         </div>
         <div className="ml-3">
-          <h3 className="text-sm leading-5 font-medium text-yellow-800 uppercase">
+          <h3 className="text-sm leading-5 font-medium text-yellow-800 uppercase" data-testid="Warning-title">
             {title}
           </h3>
-          <div className="mt-2 text-sm leading-5 text-yellow-700">
+          <div className="mt-2 text-sm leading-5 text-yellow-700" data-testid="Warning-description">
             <p>{description}</p>
           </div>
         </div>

diff --git a/components/buttons/Button.js b/components/buttons/Button.js
@@ -19,16 +19,16 @@ export default function Button({
 
   if (!href) {
     return (
-      <button {...props} type={type} className={buttonSize === 'small' ? smallButtonClasses : classNames}>
+      <button {...props} type={type} className={buttonSize === 'small' ? smallButtonClasses : classNames} data-testid="Button-main" > 
         {
           icon && iconPosition === 'left' && (
-            <span className="inline-block mr-2">{icon}</span>
+            <span className="inline-block mr-2" data-testid="Button-icon-left">{icon}</span>
           )
         }
         <span className="inline-block">{text}</span>
         {
           icon && iconPosition === 'right' && (
-            <span className="inline-block ml-2">{icon}</span>
+            <span className="inline-block ml-2" data-testid="Button-icon-right">{icon}</span>
           )
         }
       </button>
@@ -37,7 +37,7 @@ export default function Button({
 
   return (
     <Link href={href} passHref>
-      <a {...props} target={target} rel="noopener noreferrer" className={buttonSize === 'small' ? smallButtonClasses : classNames}>
+      <a {...props} target={target} rel="noopener noreferrer" className={buttonSize === 'small' ? smallButtonClasses : classNames} data-testid="Button-link">
         {
           icon && iconPosition === 'left' && (
             <span className="inline-block mr-2">{icon}</span>

diff --git a/components/buttons/ChapterSuggestion.js b/components/buttons/ChapterSuggestion.js
@@ -16,6 +16,7 @@ export default function ChapterSuggestion({
         rel="noopener noreferrer"
         title={description}
         className={`${className} flex flex-col mt-4 p-6 max-w-lg rounded shadow-md border border-gray-200 text-gray-900 transition-all duration-300 ease-in-out hover:shadow-lg hover:border-gray-300`}
+       data-testid="ChapterSuggestion-link"
       >
         <h5 className="text-lg font-medium font-sans antialiased mb-2">{title}</h5>
         <p className="flex-1 mb-2 font-normal text-gray-600 font-sans antialiased">{description}</p>

diff --git a/components/buttons/DocsButton.js b/components/buttons/DocsButton.js
@@ -7,7 +7,7 @@ export default function DocsButton({ post, className='' }) {
         { post?.prevPage && <Link href={post.prevPage.href} passHref>
             <a>
             <div className="p-4 rounded shadow-md border border-gray-200 transition-all duration-300 ease-in-out hover:shadow-lg hover:border-gray-300 text-center lg:text-left cursor-pointer">
-              <div className="text-secondary-500">
+              <div className="text-secondary-500" data-testid="DocsButton-Prevdiv">
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
                   className="h-6 w-6 inline mr-1"
@@ -26,7 +26,7 @@ export default function DocsButton({ post, className='' }) {
                   Go Back
                 </div>
               </div>
-              <div className="font-medium text-base my-2">{post.prevPage.title}</div>
+              <div className="font-medium text-base my-2" data-testid="DocsButton-PrevPage" >{post.prevPage.title}</div>
             </div>
             </a>
           </Link>
@@ -36,7 +36,7 @@ export default function DocsButton({ post, className='' }) {
         { post?.nextPage && <Link href={post.nextPage.href} className='h-auto' passHref>
             <a>
             <div className="p-4 rounded shadow-md border border-gray-200 transition-all duration-300 ease-in-out hover:shadow-lg hover:border-gray-300 text-center lg:text-right cursor-pointer">
-              <div className="text-secondary-500">
+              <div className="text-secondary-500" data-testid="DocsButton-Nextdiv">
                 <div className="font-bold my-auto text-sm inline uppercase">
                   Up Next
                 </div>
@@ -55,7 +55,7 @@ export default function DocsButton({ post, className='' }) {
                   />
                 </svg>
               </div>
-              <div className="font-medium text-base my-2">{post.nextPage.title}</div>
+              <div className="font-medium text-base my-2" data-testid="DocsButton-NextPage">{post.nextPage.title}</div>
             </div>
             </a>
           </Link>

diff --git a/components/buttons/GitHubIssue.js b/components/buttons/GitHubIssue.js
@@ -2,7 +2,7 @@ import React from 'react'
 
 export default function GitHubIssue({className=''}) {
     return (
-        <a className={`bg-black text-white flex flex-row lg:w-6/12 shadow-md hover:shadow-lg transition-all duration-500 ease-in-out py-2 rounded justify-center ${className}`} href='https://github.com/asyncapi/website/issues/new?assignees=alequetzalli+-&labels=%F0%9F%93%91+docs&template=docs.yml&title=%5B%F0%9F%93%91+Docs%5D%3A+' target='_blank' rel='noopener noreferrer'>
+        <a className={`bg-black text-white flex flex-row lg:w-6/12 shadow-md hover:shadow-lg transition-all duration-500 ease-in-out py-2 rounded justify-center ${className}`} href='https://github.com/asyncapi/website/issues/new?assignees=alequetzalli+-&labels=%F0%9F%93%91+docs&template=docs.yml&title=%5B%F0%9F%93%91+Docs%5D%3A+' target='_blank' rel='noopener noreferrer' data-testid="GithubIssue-Link">
             <img src='/img/logos/github-fill.svg' className='mr-2' alt="Github:AsyncAPI" />
             Create Issue on GitHub
         </a>

diff --git a/components/buttons/ICSFileButton.js b/components/buttons/ICSFileButton.js
@@ -1,7 +1,7 @@
 import Button from './Button';
 import IconCalendar from '../icons/Calendar';
 
-export default function GoogleCalendarButton({
+export default function ICSFButton({
   text = 'Download ICS File',
   href,
   target = '_blank',