docs: Update how to asyncapi document tutorial

.all-contributorsrc

@@ -454,6 +454,43 @@
       "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"
+      ]
     }
   ],
   "contributorsPerLine": 7,

.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\``
+            })

.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

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 @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 @asyncapi-bot-eve

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-49-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,10 @@ 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>
   </tbody>
 </table>

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.✨

components/TOC.js

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

components/campaigns/AnnoucementHero.js

@@ -4,24 +4,24 @@ import Heading from '../typography/Heading'
 import Container from '../layout/Container'
 import AnnouncementRemainingDays from './AnnouncementRamainingDays'
 
-function shouldShowBanner() {
-  const month = new Date().getUTCMonth();
-  const year = new Date().getUTCFullYear();
-  
-  //month=4 is May
-  if (year > 2023 || month !== 4) {
+function shouldShowBanner(cfpDeadline) {
+  const currentDate = new Date(); // Get the current date
+  const deadline = new Date(cfpDeadline); // Convert the cfpDeadline string to a Date object
+
+  // Check if the current date is after the deadline
+  if (currentDate > deadline) {
     return false;
   }
+
   return true;
 }
-
 export default function AnnouncementHero({ className = '', small = false, hideVideo = false }) {
   //return null;
 
-  const showBanner = shouldShowBanner();
+    const cfpDeadline = '2023-07-28T06:00:00Z'
+    const showBanner = shouldShowBanner(cfpDeadline);
   if (!showBanner) return null;
 
-  const cfpDeadline = '2023-05-31T06:00:00Z'
 
   return (
     <Container wide as="section" padding='' className='text-center'>
@@ -42,15 +42,15 @@ export default function AnnouncementHero({ className = '', small = false, hideVi
           level="h3"
           typeStyle="heading-sm"
         >
-          Madrid Edition
+          London Edition
         </Heading>
         <Paragraph typeStyle="body-lg">
-          October, 2023 | Madrid, Spain
+          20th of September, 2023 | London, UK
         </Paragraph>
-        <AnnouncementRemainingDays dateTime={cfpDeadline} eventName="the end for Call for Speakers." />
+        <AnnouncementRemainingDays dateTime={cfpDeadline} eventName="the end of Call for Speakers." />
         <div className="mt-6 pb-2 space-x-2">
           <Button
-            href="https://sessionize.com/aacot-madrid/"
+            href="https://conference.asyncapi.com/"
             target="_blank"
             text="Submit a session"
           />

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

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>

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>

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>

components/docs/DocsCards.js

@@ -6,28 +6,30 @@ import { buckets } from '../data/buckets';
 
 export function DocsCards() {
   return (
-    <div className='grid gap-4 grid-cols-1 sm:grid-cols-2'>
+    <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>