Merge branch 'master' into community

Signed-off-by: akshatnema <[email protected]>

assets/docs/fragments/cli-installation.md

@@ -0,0 +1,62 @@
+### CLI Installation
+Follow the [AsyncAPI CLI installation](https://github.com/asyncapi/cli#installation) instructions below, based on your computer’s operating system.
+
+<details>
+<summary>MacOS</summary>
+
+`brew`
+<br/>
+You can install in MacOS via brew: `brew install asyncapi`.
+
+`pkg`
+<br/>
+Each release of CLI produces a MacOS dedicated pkg file that enables you to install this CLI as MacOS application.
+
+```
+# Download latest release. To download specific release, your link should look similar to https://github.com/asyncapi/cli/releases/download/v0.13.0/asyncapi.pkg. All releases are listed in https://github.com/asyncapi/cli/releases
+curl -OL https://github.com/asyncapi/cli/releases/latest/download/asyncapi.pkg
+# Install AsyncAPI CLI
+sudo installer -pkg asyncapi.pkg -target /
+```
+
+</details>
+
+<details>
+<summary>Linux</summary>
+
+You can install in Linux via `dpkg`, a debian package manager:
+
+1. `curl -OL https://github.com/asyncapi/cli/releases/latest/download/asyncapi.deb` 
+2. `sudo dpkg -i asyncapi.deb`
+
+</details>
+
+<details>
+<summary>Other OS</summary>
+
+[Read further AsyncAPI CLI installation instructions for different operating systems](https://github.com/asyncapi/cli#installation).
+</details>
+
+#### Using NPM and Node.js
+Alternitavely, you can install the [AsyncAPI CLI](https://github.com/asyncapi/cli#installation) with Node.js `>=v10` and [NPM](https://nodejs.org/en/download/package-manager/).
+
+<details>
+<summary>Install CLI globally</summary>
+
+Install AsyncAPI CLI _globally_ with the following command:
+
+```
+npm install -g @asyncapi/cli
+```
+</details>
+
+<details>
+<summary>Install specific CLI version</summary>
+
+To install a specific version of the AsyncAPI CLI, pass the `verion` during installation:
+
+```
+npm install -g @asyncapi/cli@{version}
+```
+
+</details>

components/Calendar.js

@@ -52,14 +52,18 @@ export default function Calendar({ className = '', size, text="text-left" }) {
           </li>
         ))}
       </ul>
-      {eventsExist && (
+      {eventsExist ? 
         <div className='pt-4'>
           <GoogleCalendarButton 
             href={CALENDAR_URL}
             text="View Calendar"
           />
         </div>
-      )}
+        :
+        <div className="mt-2 text-gray-700">
+          There are no meetings scheduled for next few days.
+        </div>
+      }
     </div>
   );
 }

components/MDX.js

@@ -38,7 +38,7 @@ function getMDXComponents() {
     h1: props => <h1 {...props} className={`${props.className || ''} my-4 font-heading antialiased font-semibold tracking-heading text-gray-900 text-2xl`} />,
     h2: props => <h2 {...props} className={`${props.className || ''} mb-4 mt-6 font-heading antialiased font-semibold tracking-heading text-gray-900 text-2xl`} />,
     h3: props => <h3 {...props} className={`${props.className || ''} mb-4 mt-6 font-heading antialiased font-medium tracking-heading text-gray-900 text-lg`} />,
-    h4: props => <h4 {...props} className={`${props.className || ''} my-4 font-heading antialiased font-medium text-lg text-gray-900`} />,
+    h4: props => <h4 {...props} className={`${props.className || ''} my-4 font-heading antialiased font-medium text-md text-gray-900`} />,
     h5: props => <h5 {...props} className={`${props.className || ''} my-4 font-heading antialiased text-md font-bold`} />,
     h6: props => <h6 {...props} className={`${props.className || ''} my-4 font-heading antialiased text-sm font-bold text-gray-900 uppercase`} />,
     blockquote: props => <blockquote {...props} className={`${props.className || ''} italic font-body antialiased text-gray-700 border-l-4 border-gray-400 pl-4 pt-1 pb-1 pr-1 my-4 bg-white`} />,

components/buttons/Button.js

@@ -14,8 +14,8 @@ export default function Button({
   ...props
 }) {
 
-  const smallButtonClasses = twMerge(` ${bgClassName} ${textClassName} transition-all duration-500 ease-in-out rounded-md px-3 py-2 text-sm font-medium tracking-heading ${className || ''}`)
-  const classNames = twMerge(` ${bgClassName} ${textClassName} transition-all duration-500 ease-in-out rounded-md px-4 py-3 text-md font-semibold tracking-heading ${className || ''}`)
+  const smallButtonClasses = twMerge(`${bgClassName} ${textClassName} transition-all duration-500 ease-in-out rounded-md px-3 py-2 text-sm font-medium tracking-heading ${className || ''}`)
+  const classNames = twMerge(`${bgClassName} ${textClassName} transition-all duration-500 ease-in-out rounded-md px-4 py-3 text-md font-semibold tracking-heading ${className || ''}`)
 
   if (!href) {
     return (

components/icons/ArrowDown.js

@@ -0,0 +1,7 @@
+export default function IconArrowDown({ className= '' }) {
+    return (
+        <svg width="11" height="7" viewBox="0 0 11 7" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
+            <path d="M1 1.25L5.5 5.75L10 1.25" stroke="#8B9394" />
+        </svg>
+    )
+}

components/icons/Filter.js

@@ -0,0 +1,14 @@
+export default function IconFilter({className=''}) {
+    return (
+        <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
+            <g clipPath="url(#clip0_894_656)">
+                <path d="M1.11536 0.615479H15.8846V3.38471L10.3461 7.63646V13.2309L6.65382 15.3847V7.63646L1.11536 3.38471V0.615479Z" stroke="#556061" strokeWidth="1.5" strokeLinejoin="round" />
+            </g>
+            <defs>
+                <clipPath id="clip0_894_656">
+                    <rect width="16" height="16" fill="white" transform="translate(0.5)" />
+                </clipPath>
+            </defs>
+        </svg>
+    )
+}

components/icons/Search.js

@@ -0,0 +1,7 @@
+export default function IconSearch({className = ''}) {
+    return (
+        <svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
+            <path d="M14.875 14.8751L11.6974 11.6918L14.875 14.8751ZM13.4583 7.43758C13.4583 9.03441 12.824 10.5658 11.6949 11.695C10.5657 12.8241 9.03432 13.4584 7.4375 13.4584C5.84067 13.4584 4.30925 12.8241 3.18013 11.695C2.051 10.5658 1.41666 9.03441 1.41666 7.43758C1.41666 5.84076 2.051 4.30933 3.18013 3.18021C4.30925 2.05108 5.84067 1.41675 7.4375 1.41675C9.03432 1.41675 10.5657 2.05108 11.6949 3.18021C12.824 4.30933 13.4583 5.84076 13.4583 7.43758V7.43758Z" stroke="#556061" strokeWidth="2" strokeLinecap="round" />
+        </svg>
+    )
+}

components/navigation/DocsNav.js

@@ -44,9 +44,9 @@ export default function DocsNav({
     <li className='mb-4' key={item.item.title}>
       <DocsNavItem {...item.item} activeSlug={active} defaultClassName='font-body text-sm text-black hover:font-semibold' inactiveClassName='font-regular' activeClassName='font-semibold' bucket={buckets[item.item.rootSectionId]} onClick={onClick} />
       <ul className='border-l border-gray-200 pl-4 ml-3 mt-1'>
-        {Object.values(subCategories).map((subCategory, index) => (
+        {Object.values(subCategories).map((subCategory) => (
           <li key={subCategory.item.title}>
-            <DocsNavItem {...subCategory.item} indexDocument={index === 0} activeSlug={active} defaultClassName={`font-body text-sm text-black leading-8 ${subCategory.children ? 'hover:font-semibold' : 'hover:text-secondary-600'}`} inactiveClassName='font-regular' activeClassName={subCategory.children ? 'font-semibold' : 'text-secondary-600'} onClick={onClick} />
+            <DocsNavItem {...subCategory.item} activeSlug={active} defaultClassName={`font-body text-sm text-black leading-8 ${subCategory.children ? 'hover:font-semibold' : 'hover:text-secondary-600'}`} inactiveClassName='font-regular' activeClassName={subCategory.children ? 'font-semibold' : 'text-secondary-600'} onClick={onClick} />
             <ul className='border-l border-gray-200 pl-4'>
               {subCategory.children && subCategory.children.map(subItem => (
                 <li key={subItem.title}>

components/navigation/DocsNavItem.js

@@ -1,14 +1,18 @@
 import Link from 'next/link';
 
-function isActiveSlug(slug, activeSlug) {
+function isActiveSlug(slug, activeSlug, sectionSlug) {
+  if(slug === '/docs' || (sectionSlug !== undefined && slug === sectionSlug)) {
+    return (slug == activeSlug)
+  }
+
   const partialSlug = slug.split('/');
   const partialActiveSlug = activeSlug.split('/');
   const activeParts = partialActiveSlug.filter((a, idx) => a === partialSlug[idx]);
   return activeParts.length === partialSlug.length;
 }
 
-export default function DocsNavItem({ title, slug, href, indexDocument, activeSlug, onClick = () => {}, defaultClassName = '', inactiveClassName = '', activeClassName = '', bucket }) {
-  const isActive = slug === '/docs' || indexDocument ? slug === activeSlug : isActiveSlug(slug, activeSlug);
+export default function DocsNavItem({ title, slug, href, activeSlug, sectionSlug, onClick = () => {}, defaultClassName = '', inactiveClassName = '', activeClassName = '', bucket }) {
+  const isActive = isActiveSlug(slug, activeSlug, sectionSlug);
   const classes = `${isActive ? activeClassName : inactiveClassName} ${defaultClassName} inline-block`;
 
   return (
@@ -27,4 +31,4 @@ export default function DocsNavItem({ title, slug, href, indexDocument, activeSl
       </div>
     </div>
   );
-}
+}

components/navigation/communityItems.js

@@ -17,7 +17,7 @@ export default [
   {
     icon: IconTools,
     title: 'Tools & Services',
-    href: '/docs/community/tooling',
+    href: '/docs/tools',
     description:
       'Explore the tools and services our awesome community has created.',
   },

components/tools/Filters.js

@@ -0,0 +1,134 @@
+import { useState, useContext } from 'react';
+import {twMerge} from 'tailwind-merge'
+import {ToolFilterContext} from '../../context/ToolFilterContext'
+import ArrowDown from '../icons/ArrowDown';
+import FiltersDropdown from './FiltersDropdown';
+import Button from '../buttons/Button'
+import tags from '../../config/all-tags.json'
+import {categoryList} from '../../scripts/tools/categorylist'
+
+export default function Filters({setOpenFilter}) {
+  // all the filter state variables and functions are extracted from the Context to set filters according to the UI.
+  const {isPaid, isAsyncAPIOwner, languages, technologies, categories, setCategories, setLanguages, setTechnologies, setisPaid, setAsyncAPIOwner} = useContext(ToolFilterContext)
+
+  // State variables to operate dropdowns of respective filters
+  const [openLanguage, setopenLanguage] = useState(false)
+  const [openTechnology, setopenTechnology] = useState(false)
+  const [openCategory, setopenCategory] = useState(false)
+
+  // Filter state variables for user checked values are created, initialising it with the values already set by user. 
+  const [checkPaid, setCheckPaid] = useState(isPaid)
+  const [checkedLanguage, setCheckedLanguage] = useState(languages)
+  const [checkedTechnology, setCheckedTechnology] = useState(technologies)
+  const [checkedCategory, setCheckedCategory] = useState(categories)
+  const [checkOwner, setCheckOwner] = useState(isAsyncAPIOwner)
+
+  // contains the list of languages and technologies
+  let languageList = tags["languages"]
+  let technologyList = tags["technologies"]
+
+  // function to apply all the filters, which are selected, when `Apply Filters` is clicked.
+  const handleApplyFilters = () => {
+    setLanguages(checkedLanguage);
+    setTechnologies(checkedTechnology)
+    setCategories(checkedCategory)
+    setisPaid(checkPaid)
+    setAsyncAPIOwner(checkOwner)
+    setOpenFilter(false)
+  }
+
+  // function to clear all the filters when `Clear Filters` is clicked.
+  const clearFilters =() => {
+    setLanguages([])
+    setTechnologies([])
+    setCategories([])
+    setisPaid("all")
+    setAsyncAPIOwner(false)
+    setOpenFilter(false)
+  }
+
+  return (
+    <div className="bg-white z-10 py-4 border rounded-lg border-gray-300 shadow-md">
+      <div className="flex flex-col gap-2 mx-4">
+        <div className="flex gap-2 items-baseline justify-between">
+          <div className="text-sm text-gray-500 uppercase">Pricing</div>
+          <div className="text-xs mb-0 flex cursor-pointer hover:underline gap-0.5" onClick={clearFilters}>
+            Clear Filters
+          </div>
+        </div>
+        <div className="flex gap-2">
+          <div className={twMerge(`bg-gray-200 px-4 py-2 flex gap-1 rounded-md hover:bg-secondary-100 border hover:border-secondary-500 cursor-pointer ${checkPaid==="free" ? 'bg-secondary-100 border-secondary-500' : ''}`)} onClick={() => setCheckPaid("free")}>
+            <div className='text-sm'>Open Source</div>
+            <img src="/img/illustrations/icons/FreeIcon.svg" />
+          </div>
+          <div className={`bg-gray-200 px-4 py-2 flex gap-1 rounded-md hover:bg-secondary-100 border hover:border-secondary-500 cursor-pointer ${checkPaid==="paid" ? 'bg-secondary-100 border-secondary-500' : ''}`} onClick={() => setCheckPaid("paid")}>
+            <div className='text-sm'>Commercial</div>
+            <img src="/img/illustrations/icons/PaidIcon.svg" />
+          </div>
+        </div>
+      </div>
+      <hr className="my-4" />
+      <div className="flex flex-col gap-2 mx-4">
+        <div className="text-sm text-gray-500">OWNERSHIP</div>
+        <div className="flex gap-4">
+          <label className="inline-flex relative items-center cursor-pointer">
+            <input type="checkbox" value={checkOwner} className="sr-only peer" onChange={() => setCheckOwner(!checkOwner)} />
+            <div className={twMerge(`w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all ${checkOwner ? "after:translate-x-full after:border-white bg-secondary-500" : ''}`)}></div>
+          </label>
+          <div className="font-medium text-sm">
+            Show only AsyncAPI-owned tools
+          </div>
+        </div>
+      </div>
+      <hr className="my-4" />
+      <div className="flex flex-col gap-2 mx-4">
+        <div className="text-sm text-gray-500">LANGUAGE</div>
+        <div className="w-full">
+          <div className={twMerge(`px-4 py-2 flex justify-between rounded-lg border border-gray-400 w-full bg-gray-200 text-gray-700 shadow text-sm cursor-pointer ${openLanguage ? 'rounded-b-none' : ''}`)} onClick={() => setopenLanguage(!openLanguage)}>
+            <div className="flex items-center text-dark">
+              Select Languages...
+            </div>
+            <ArrowDown className={`my-auto ${openLanguage ? 'rotate-180' : ''}`} />
+          </div>
+          {openLanguage && <div className="bg-gray-200 border border-gray-400 w-auto rounded-b-lg duration-150 overflow-x-auto">
+            <FiltersDropdown dataList={languageList} checkedOptions={checkedLanguage} setStateFunction={setCheckedLanguage} />
+          </div>} 
+        </div>
+      </div>
+      <hr className="my-4" />
+      <div className="flex flex-col gap-2 mx-4">
+        <div className="text-sm text-gray-500">TECHNOLOGY</div>
+        <div className="w-full">
+        <div className={twMerge(`px-4 py-2 flex justify-between rounded-lg border border-gray-400 w-full bg-gray-200 text-gray-700 shadow text-sm cursor-pointer ${openTechnology ? 'rounded-b-none' : ''}`)} onClick={() => setopenTechnology(!openTechnology)}>
+          <div className="flex items-center text-dark">
+            Select technologies...
+          </div>
+          <ArrowDown className={`my-auto ${openTechnology ? 'rotate-180' : ''}`} />
+        </div>
+        {openTechnology && <div className="bg-gray-200 border border-gray-400 w-auto rounded-b-lg duration-150 overflow-x-auto">
+            <FiltersDropdown dataList={technologyList} checkedOptions={checkedTechnology} setStateFunction={setCheckedTechnology} />
+          </div>}
+        </div>
+      </div>
+      <hr className="my-4" />
+      <div className="flex flex-col gap-2 mx-4">
+        <div className="text-sm text-gray-500">CATEGORY</div>
+        <div className="w-full">
+        <div className={twMerge(`px-4 py-2 flex justify-between rounded-lg border border-gray-400 w-full bg-gray-200 text-gray-700 shadow text-sm cursor-pointer ${openCategory ? 'rounded-b-none' : ''}`)} onClick={() => setopenCategory(!openCategory)}>
+          <div className="flex items-center text-dark">
+            Select categories...
+          </div>
+          <ArrowDown className={`my-auto ${openCategory ? 'rotate-180' : ''}`} />
+        </div>
+        {openCategory && <div className="bg-gray-200 border border-gray-400 w-auto rounded-b-lg duration-150 overflow-x-auto">
+            <FiltersDropdown dataList={categoryList} checkedOptions={checkedCategory} setStateFunction={setCheckedCategory} />
+          </div>}
+        </div>
+      </div>
+      <hr className="my-4" />
+      <div className='w-auto my-6 mx-4 mb-0' onClick={handleApplyFilters}>
+        <Button text='Apply Filters' className='w-full' />
+      </div>
+    </div>
+  );
+}

components/tools/FiltersDropdown.js

@@ -0,0 +1,27 @@
+import { twMerge } from "tailwind-merge";
+
+export default function FiltersDropdown({dataList=[], checkedOptions=[], setStateFunction, className=''}) {
+
+  const handleClickOption = (e, option) => {
+    let tempValueArray = [...checkedOptions]
+    let index = checkedOptions.indexOf(option)
+    if(index>-1){
+      tempValueArray.splice(index, 1);
+    }else{
+      tempValueArray.push(option);
+    }
+    setStateFunction(tempValueArray)
+  }
+  return (
+    <div className={twMerge(`max-w-lg flex gap-2 flex-wrap p-2 duration-200 delay-150 ${className}`)}>
+      {dataList.map((data, index) => {
+        let checked = checkedOptions.indexOf(data.name)!=-1 ? true : false
+        return (
+          <div key={index} className={twMerge(`border border-secondary-600 text-secondary-600 p-1 pb-0 rounded-2xl flex gap-1 cursor-pointer items-start ${checked ? 'bg-secondary-600 text-white' : ''}`)} onClick={(e) => handleClickOption(e, data.name)}>
+            {checked ? <img src='/img/illustrations/icons/CheckedIcon.svg' /> : <img src='/img/illustrations/icons/UncheckedIcon.svg' />}
+            <div className='text-xs -mt-[1px] mb-[1px]'>{data.name}</div>
+        </div>
+        )})}
+    </div>
+  )
+}

components/tools/Tags.js

@@ -0,0 +1,7 @@
+export default function SelectTags({name='', bgColor, borderColor}) {
+  return (
+    <div className={`text-center text-sm py-1 px-2 rounded-lg ${bgColor} border ${borderColor}`}>
+      {name} 
+    </div>
+  )
+}