Merge branch 'master' into fix/roadmap_modal

asyncapi · Jul 17, 2023 · 2a33a46 · 2a33a46
2 parents 2858c75 + 3708aef
commit 2a33a46
Show file tree

Hide file tree

Showing 45 changed files with 1,480 additions and 363 deletions.
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/campaigns/AnnoucementHero.js b/components/campaigns/AnnoucementHero.js
@@ -28,15 +28,15 @@ export default function AnnouncementHero({ className = '', small = false, hideVi
       <div
         className={`bg-gray-50 border border-gray-200 py-6 rounded ${className} ${
           small ? 'mb-4' : 'mx-3 mt-3 p-3 mb-6'
-        }`}
+        }`} data-testid = "AnnouncementHero-main-div"
       >
         <Heading
           className="countdown-text-gradient"
           level="h2"
-          typeStyle="heading-lg"
-        >
+          typeStyle="heading-lg" >
           AsyncAPI Conf on Tour 2023
         </Heading>
+
         <Heading
           className="countdown-text-gradient"
           level="h3"
@@ -53,6 +53,7 @@ export default function AnnouncementHero({ className = '', small = false, hideVi
             href="https://conference.asyncapi.com/"
             target="_blank"
             text="Submit a session"
+            data-testid="AnnouncementHero-submit-session"
           />
         </div>
       </div>

diff --git a/components/campaigns/AnnouncementRamainingDays.js b/components/campaigns/AnnouncementRamainingDays.js
@@ -17,7 +17,7 @@ export default function AnnouncementRemainingDays({ dateTime, eventName }) {
   }
 
   return (
-    <span className="font-extrabold countdown-text-gradient block">
+    <span className="font-extrabold countdown-text-gradient block" data-testid="AnnouncementRemainingDays-text">
       {text} until {eventName}
     </span>
   )

diff --git a/components/campaigns/Banner.js b/components/campaigns/Banner.js
@@ -19,8 +19,8 @@ export default function Banner({}) {
   }
 
   return (
-    <div className="bg-gray-100">
-      <div className="mx-auto max-w-screen-xl py-1 px-3 sm:px-6 lg:px-8">
+    <div className="bg-gray-100" data-testid="Banner-main-div">
+      <div className="mx-auto max-w-screen-xl py-1 px-3 sm:px-6 lg:px-8" >
         <div className="flex items-center justify-between flex-wrap">
           <div className="flex md:hidden w-0 flex-1 flex items-center text-xs">
             <p className="font-medium text-gray-700">
@@ -37,7 +37,7 @@ export default function Banner({}) {
             </p>
           </div>
           <div className="flex">
-            <a
+            <a data-testid="Banner-link"
               href="https://www.youtube.com/playlist?list=PLbi1gRlP7pijRiA32SU36hD_FW-2qyPhl"
               className="flex items-center justify-center px-4 py-1 border border-transparent rounded-md shadow-sm text-xs font-medium text-indigo-600 focus:text-indigo-600 bg-white hover:bg-indigo-50"
               target="_blank" rel="noopener noreferrer"

diff --git a/components/layout/BlogLayout.js b/components/layout/BlogLayout.js
@@ -1,56 +1,71 @@
-import { useRouter } from 'next/router'
-import HtmlHead from 'next/head'
-import ErrorPage from 'next/error'
-import moment from 'moment'
-import Head from '../Head'
-import BlogContext from '../../context/BlogContext'
-import TOC from '../TOC'
-import NavBar from '../navigation/NavBar'
-import Container from './Container'
-import AuthorAvatars from '../AuthorAvatars'
-import StickyNavbar from '../navigation/StickyNavbar'
-import AnnouncementHero from '../campaigns/AnnoucementHero'
+import { useRouter } from 'next/router';
+import HtmlHead from 'next/head';
+import ErrorPage from 'next/error';
+import moment from 'moment';
+import Head from '../Head';
+import BlogContext from '../../context/BlogContext';
+import TOC from '../TOC';
+import NavBar from '../navigation/NavBar';
+import Container from './Container';
+import AuthorAvatars from '../AuthorAvatars';
+import StickyNavbar from '../navigation/StickyNavbar';
+import AnnouncementHero from '../campaigns/AnnoucementHero';
 
 export default function BlogLayout({ post, children }) {
-  if (!post) return <ErrorPage statusCode={404} />
-  if (post.title === undefined) throw new Error('Post title is required')
+  if (!post) return <ErrorPage statusCode={404} />;
+  if (post.title === undefined) throw new Error('Post title is required');
 
-  const router = useRouter()
+  const router = useRouter();
   if (!router.isFallback && !post?.slug) {
-    return <ErrorPage statusCode={404} />
+    return <ErrorPage statusCode={404} />;
   }
 
   return (
     <BlogContext.Provider value={{ post }}>
-      <StickyNavbar>
+      <StickyNavbar data-testid="BlogLayout-Navbar">
         <NavBar className="max-w-screen-xl block px-4 sm:px-6 lg:px-8 mx-auto" />
       </StickyNavbar>
-      <AnnouncementHero className='my-4 mx-8' />
+      <AnnouncementHero className="my-4 mx-8" />
       <Container cssBreakingPoint="lg" flex flexReverse>
-        <TOC toc={post.toc} cssBreakingPoint="lg" className="bg-blue-100 mt-4 p-4 sticky top-20 overflow-y-auto max-h-screen lg:bg-transparent lg:mt-2 lg:pt-0 lg:pb-8 lg:top-24 lg:max-h-(screen-16) lg:border-l lg:border-gray-200 lg:min-w-40 lg:max-w-64 lg:-mr-20 xl:min-w-72 xl:-mr-36" />
+        <TOC
+          toc={post.toc}
+          cssBreakingPoint="lg"
+          className="bg-blue-100 mt-4 p-4 sticky top-20 overflow-y-auto max-h-screen lg:bg-transparent lg:mt-2 lg:pt-0 lg:pb-8 lg:top-24 lg:max-h-(screen-16) lg:border-l lg:border-gray-200 lg:min-w-40 lg:max-w-64 lg:-mr-20 xl:min-w-72 xl:-mr-36"
+        />
         <main className="mt-8 px-4 sm:px-6 lg:pr-8 lg:pl-0 lg:flex-1 lg:max-w-172 xl:max-w-172">
           <header className="pr-4 sm:pr-6 md:pr-8">
-            <h1 className="text-4xl font-normal text-gray-800 font-sans antialiased">{post.title}</h1>
+            <h1
+              className="text-4xl font-normal text-gray-800 font-sans antialiased"
+              data-testid="BlogLayout-main"
+            >
+              {post.title}
+            </h1>
             <div className="mt-6 flex items-center">
               <div className="relative flex-shrink-0">
                 <AuthorAvatars authors={post.authors} />
               </div>
               <div className="ml-3">
                 <p className="text-sm leading-5 font-medium text-gray-900">
                   <span className="hover:underline">
-                    {post.authors.map((author, index) => author.link ? <a key={index} alt={author.name} href={author.link}>{author.name}</a> : author.name).reduce((prev, curr) => [prev, ' & ', curr])}
+                    {post.authors
+                      .map((author, index) =>
+                        author.link ? (
+                          <a key={index} alt={author.name} href={author.link}>
+                            {author.name}
+                          </a>
+                        ) : (
+                          author.name
+                        )
+                      )
+                      .reduce((prev, curr) => [prev, ' & ', curr])}
                   </span>
                 </p>
                 <div className="flex text-sm leading-5 text-gray-500">
                   <time dateTime={post.date}>
                     {moment(post.date).format('MMMM D, YYYY')}
                   </time>
-                  <span className="mx-1">
-                    &middot;
-                  </span>
-                  <span>
-                    {post.readingTime} min read
-                  </span>
+                  <span className="mx-1">&middot;</span>
+                  <span>{post.readingTime} min read</span>
                 </div>
               </div>
             </div>
@@ -62,7 +77,11 @@ export default function BlogLayout({ post, children }) {
               image={post.cover}
             />
             <HtmlHead>
-              <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5cb852c7b57ed596" async />
+              <script
+                type="text/javascript"
+                src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5cb852c7b57ed596"
+                async
+              />
               <style>{`
                 /* AddThis hack */
 
@@ -82,11 +101,16 @@ export default function BlogLayout({ post, children }) {
               `}</style>
               {post.canonical && <link rel="canonical" href={post.canonical} />}
             </HtmlHead>
-            <img src={post.cover} alt={post.coverCaption} title={post.coverCaption} className="mt-6 mb-6 w-full" />
+            <img
+              src={post.cover}
+              alt={post.coverCaption}
+              title={post.coverCaption}
+              className="mt-6 mb-6 w-full"
+            />
             {children}
           </article>
         </main>
       </Container>
     </BlogContext.Provider>
-  )
-}
+  );
+}