Merge branch 'master' into fix-1726

asyncapi · Jun 22, 2023 · 4ed7e30 · 4ed7e30
2 parents a692b3e + 86ffbb2
commit 4ed7e30
Show file tree

Hide file tree

Showing 56 changed files with 1,933 additions and 1,574 deletions.
diff --git a/.all-contributorsrc b/.all-contributorsrc
@@ -454,6 +454,24 @@
       "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"
+      ]
     }
   ],
   "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-45-orange.svg?style=flat-square)](#contributors-)
+[![All Contributors](https://img.shields.io/badge/all_contributors-47-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)
@@ -207,6 +207,8 @@ 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></td>
     </tr>
   </tbody>
 </table>

diff --git a/components/TOC.js b/components/TOC.js
@@ -47,7 +47,7 @@ export default function TOC({
                 href={`#${item.slug}`}
                 key={index}
               >
-                {item.content}
+                {item.content.replaceAll('`', '')}
               </a>
             ))
           }

diff --git a/components/community/Card.js b/components/community/Card.js
@@ -15,20 +15,20 @@ export default function SmallHomeCards({icon, tagline, taglineBg, type="large",
             <div className="p-2 rounded-xl bg-gray-100 text-center w-min text-xs flex justify-between">
               <span>{icon}</span> <span className="ml-[5px]">{tagline}</span>
             </div>
-            <div className="mt-3">
+            <div className="mt-3" data-testid="Card-heading">
               <Heading level="h1" typeStyle="heading-md">
                 {heading}
               </Heading>
             </div>
-            <div className="mt-2">
+            <div className="mt-2" data-testid="Card-desc">
               <Paragraph
                 textColor={bg ? 'text-black' : 'text-gray-600'}
                 typeStyle="body-sm"
               >
                 {description}
               </Paragraph>
             </div>
-            <div className="text-right w-full flex justify-end">
+            <div className="text-right w-full flex justify-end" data-testid="Card-icon">
               <IconArrowUp className="w-[20px]" />
             </div>
           </div>
@@ -48,7 +48,7 @@ export default function SmallHomeCards({icon, tagline, taglineBg, type="large",
         <span>{icon}</span> <span className="ml-[5px]">{tagline}</span>
       </div>
 
-      <div className="mt-10">
+      <div className="mt-10" data-testid="Card-heading-lg">
         <Heading
           level="h1"
           typeStyle="heading-lg"
@@ -57,7 +57,7 @@ export default function SmallHomeCards({icon, tagline, taglineBg, type="large",
           {heading}
         </Heading>
       </div>
-      <div className="mt-6">
+      <div className="mt-6" data-testid="Card-desc-lg">
         <Paragraph textColor={bg && 'text-gray-400'}>{description}</Paragraph>
       </div>
       <div className="mt-10">

diff --git a/components/community/Header.js b/components/community/Header.js
@@ -5,28 +5,29 @@ import Button from '../buttons/Button';
 
 export default function Header({className = ''}) {
   return (
-      <div className="text-center flex justify-center flex-col items-center mt-10 md:mt-0">
+      <div className="text-center flex justify-center flex-col items-center mt-10 md:mt-0" data-testid="Header-hero-heading">
         <Heading
           className="countdown-text-gradient font-bold"
           level="h6"
           typeStyle="heading-xs"
         >
           AsyncAPI Community
         </Heading>
-        <div className="mt-10">
+        <div className="mt-10" data-testid="Header-heading-1">
           <Heading level="h1" typeStyle="heading-xl" className="">
             <span className="title block md:-mt-1 leading-[3rem]">
               Welcome to the
               <br /> AsyncAPI Community
             </span>
           </Heading>
         </div>
-        <div className="mt-5 w-5/6">
+        <div className="mt-5 w-5/6" data-testid="Header-heading-2">
           <Heading
             level="h2"
             typeStyle="body-md"
             textColor="text-gray-700"
             className="text-slate-500 text-sm"
+
           >
             We're an OSS community that's passionate about AsyncAPI. Join us in
             building the future of Event Driven APIs by asking questions,
@@ -39,7 +40,7 @@ export default function Header({className = ''}) {
             text="AsyncAPI Discussions"
             href="https://github.com/orgs/asyncapi/discussions"
             target="_blank"
-            icon={<IconRocket className="w-5 h-5 -mb-1 ml-1" />}
+            icon={<IconRocket className="w-5 h-5 -mb-1 ml-1" data-testid="Header-IconRocket" />}
           />
         </div>
       </div>

diff --git a/components/community/Hero.js b/components/community/Hero.js
@@ -5,28 +5,28 @@ export default function Hero({ className = '' }) {
   return (
     <>
       <div className="overflow-hidden orbits">
-        <div className="orbit-container">
-          <div id="first-orbit" className="orbit">
+        <div className="orbit-container" data-testid="orbit-div">
+          <div id="first-orbit" className="orbit" data-testid="Hero-first">
             {orbitData[0].map((orbit) => (
               <div key={orbit.id} className={orbit.id}>
-                <img src={orbit.img} alt={orbit.alt} className="orbit-img" />
+                <img src={orbit.img} alt={orbit.alt} className="orbit-img" data-testid="Hero-firstimg" />
               </div>
             ))}
             <div className="w-full absolute h-full flex justify-center z-40">
               <Header />
             </div>
           </div>
-          <div id="second-orbit" className="orbit">
+          <div id="second-orbit" className="orbit" data-testid="Hero-second">
             {orbitData[1].map((orbit) => (
               <div key={orbit.id} className={orbit.id}>
-                <img src={orbit.img} alt={orbit.alt} />
+                <img src={orbit.img} alt={orbit.alt} data-testid="Hero-secondimg" />
               </div>
             ))}
           </div>
-          <div id="third-orbit" className="orbit">
+          <div id="third-orbit" className="orbit" data-testid="Hero-third">
             {orbitData[2].map((orbit) => (
               <div key={orbit.id} className={orbit.id}>
-                <img src={orbit.img} alt={orbit.alt} />
+                <img src={orbit.img} alt={orbit.alt} data-testid="Hero-thirdimg"/>
               </div>
             ))}
           </div>

diff --git a/components/community/HomeCard.js b/components/community/HomeCard.js
@@ -6,17 +6,18 @@ export default function HomeCards({headline, title, description, btnText, link,
   return (
     <div className="z-40 mt-20 bg-white w-full md:h-130 rounded-lg shadow-xl md:flex md:justify-between">
       <div className="p-10 flex justify-between w-full md:w-2/5 h-auto flex-col text-center md:text-left">
-        <div>
+        <div  data-testid="HomeCard-main">
           <Heading
             level="h2"
             typeStyle="heading-md"
             textColor="text-purple-300"
+
           >
             {headline}
           </Heading>
         </div>
-        <div>
-          <Heading level="h2" typeStyle="heading-lg" className="mt-10">
+        <div data-testid="HomeCard-title">
+          <Heading level="h2" typeStyle="heading-lg" className="mt-10" >
             {title}
           </Heading>
           <Heading
@@ -27,7 +28,7 @@ export default function HomeCards({headline, title, description, btnText, link,
           >
             {description}
           </Heading>
-          <div className="mt-10">
+          <div className="mt-10" data-testid="HomeCard-button">
             <Button text={btnText} buttonSize="medium" href={link} />
           </div>
         </div>

diff --git a/components/data/buckets.js b/components/data/buckets.js
@@ -0,0 +1,70 @@
+import IconGettingStarted from '../icons/GettingStarted'
+import IconTutorials from '../icons/Tutorials'
+import IconUseCases from '../icons/UseCases'
+import IconGuide from '../icons/Guide'
+import IconSpec from '../icons/Spec'
+import IconUsers from '../icons/Users'
+
+export const buckets = [
+  {
+    name: 'concepts',
+    title: 'Concepts',
+    description: 'Our Concepts section defines the concepts of AsyncAPI features and capabilities.',
+    link: '/docs/concepts',
+    className: 'bg-secondary-200',
+    borderClassName: 'border-secondary-200',
+    Icon: IconGettingStarted,
+  },
+  {
+    name: 'tutorials',
+    title: 'Tutorials',
+    description: 'Our Tutorials section teaches beginner processes with AsyncAPI, guiding you from Point A to Point B.',
+    link: '/docs/tutorials',
+    className: 'bg-pink-100',
+    borderClassName: 'border-pink-100',
+    Icon: IconTutorials,
+  },
+  {
+    name: 'guides',
+    title: 'Guides',
+    description: "Our Guides section teaches AsyncAPI's capabilities at a high level.",
+    link: '/docs/guides',
+    className: 'bg-primary-200',
+    borderClassName: 'border-primary-200',
+    Icon: IconGuide,
+  },
+  {
+    name: 'tools',
+    title: 'Tools',
+    description: 'Our Tools section documents the AsyncAPI tools ecosystem.',
+    link: '/docs/tools',
+    className: 'bg-green-200',
+    borderClassName: 'border-green-200',
+    Icon: IconUseCases,
+  },
+  {
+    name: 'reference',
+    title: 'Reference',
+    description: 'Our Reference section documents the AsyncAPI specification.',
+    link: '/docs/reference',
+    className: 'bg-yellow-200',
+    borderClassName: 'border-yellow-200',
+    Icon: IconSpec,
+  },
+    {
+    name: 'community',
+    title: 'Community',
+    description: 'Our Community section documents the community guidelines and resources.',
+    link: '/docs/community',
+    className: 'bg-orange-200',
+    borderClassName: 'border-orange-200',
+    Icon: IconUsers,
+  },
+].map(bucket => {
+  // we need such a mapping for some parts of website, e.g navigation blocks use the `icon` property, not `Icon` etc. 
+  return {
+    ...bucket,
+    href: bucket.link,
+    icon: bucket.Icon,
+  };
+});
diff --git a/components/docs/DocsCards.js b/components/docs/DocsCards.js
@@ -2,74 +2,34 @@ import Link from 'next/link';
 import Heading from '../typography/Heading';
 import Paragraph from '../typography/Paragraph';
 
-import IconGettingStarted from '../icons/GettingStarted'
-import IconTutorials from '../icons/Tutorials'
-import IconUseCases from '../icons/UseCases'
-import IconGuide from '../icons/Guide'
-import IconSpec from '../icons/Spec'
-
-const cards = [
-  {
-    title: 'Concepts',
-    description: 'Our Concepts section defines the concepts of AsyncAPI features and capabilities.',
-    link: '/docs/concepts',
-    className: 'bg-secondary-200',
-    Icon: IconGettingStarted,
-  },
-  {
-    title: 'Tutorials',
-    description: 'Our Tutorials section teaches beginner processes with AsyncAPI, guiding you from Point A to Point B.',
-    link: '/docs/tutorials',
-    className: 'bg-pink-100',
-    Icon: IconTutorials,
-  },
-  {
-    title: 'Tools',
-    description: 'Our Tools section documents the AsyncAPI tools ecosystem.',
-    link: '/docs/tools',
-    className: 'bg-green-200',
-    Icon: IconUseCases,
-  },
-  {
-    title: 'Guides',
-    description: "Our Guides section teaches AsyncAPI's capabilities at a high level.",
-    link: '/docs/guides',
-    className: 'bg-primary-200',
-    Icon: IconGuide,
-  },
-  {
-    title: 'Reference',
-    description: 'Our Reference section documents the AsyncAPI specification.',
-    link: '/docs/reference',
-    className: 'bg-yellow-200',
-    Icon: IconSpec,
-  }
-];
+import { buckets } from '../data/buckets';
 
 export function DocsCards() {
   return (
-    <div className='grid gap-4 grid-cols-1 sm:grid-cols-2'>
-      {cards.map(card => (
+    <div className='grid gap-4 grid-cols-1 sm:grid-cols-2' data-testid="Docs-main-div" >
+      {buckets.map(card => (
         <Card key={card.title} {...card} />
+
       ))}
+
     </div>
   );
 }
 
 function Card({ title, description, link, className, Icon }) {
   return (
     <Link href={link}>
-      <a href={link} className='cursor-pointer'>
+      <a href={link} className='cursor-pointer' data-testid="Docs-link">
         <div className="h-full border border-gray-200 shadow-md hover:shadow-lg transition-all duration-300 ease-in-out rounded-lg p-6">
-          <div>
+          <div data-testid="Docs-div-contents">
             <Heading 
               level="h3"
               typeStyle="heading-sm-semibold"
               className='pb-4 border-b border-gray-300'
             >
               <div className='flex flex-row items-center'>
-                <div className={`flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-lg ${className} text-gray-900 sm:h-12 sm:w-12`}>
-                  <Icon className="h-6 w-6"/>
+                <div className={`flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-lg ${className} text-gray-900 sm:h-12 sm:w-12`} data-testid="Docs-icon">
+                  <Icon className="h-6 w-6" />
                 </div>
                 <span className='ml-4'>{title}</span>
               </div>