feat: manual tools added to the Tools Dashboard

components/navigation/communityItems.js

@@ -10,7 +10,7 @@ import IconNewsroom from '../icons/Newsroom'
 
 export default [
 
-  { icon: IconTools, title: 'Tools & Services', href: '/docs/tools', description: 'Explore the tools and services our awesome community has created.' },
+  { icon: IconTools, title: 'Tools & Services', href: '/tools', description: 'Explore the tools and services our awesome community has created.' },
   { icon: IconGithubOrganization, title: 'GitHub Organization', href: 'https://github.com/asyncapi', target: '_blank', description: 'Want to sneak in the code? Everything we do is open-sourced in our GitHub organization.' },
   { icon: IconSlack, title: 'Slack Workspace', href: 'https://asyncapi.com/slack-invite', target: '_blank', description: `Need help? Want to share something? Join our Slack workspace. We're nice people :)` },
   { icon: IconContributing, title: 'Contributing', href: 'https://github.com/asyncapi?type=source#-contribute-to-asyncapi', target: '_blank', description: `We are always welcoming and looking for contributions. If you are interested check out our contribution guide.` },

components/tools/Filters.js

@@ -48,7 +48,7 @@ export default function Filters({setOpenFilter}) {
   }
 
   return (
-    <div className="bg-white z-10 py-4 border rounded-lg border-gray-300 shadow-md">
+    <div className="bg-white z-20 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>
@@ -57,11 +57,11 @@ export default function Filters({setOpenFilter}) {
           </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={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={() => (checkPaid === "free" ? setCheckPaid("all") : 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={`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={() => (checkPaid === "paid" ? setCheckPaid("all") : setCheckPaid("paid"))}>
             <div className='text-sm'>Commercial</div>
             <img src="/img/illustrations/icons/PaidIcon.svg" />
           </div>

components/tools/ToolDashboard.js

@@ -103,7 +103,7 @@ export default function ToolDashboard() {
                             <div>Filter</div>
                         </div>
                         {openFilter && (
-                            <div className="z-10 absolute top-16 min-w-[20rem]">
+                            <div className="z-20 absolute top-16 min-w-[20rem]">
                                 <Filters setOpenFilter={setOpenFilter} />
                             </div>
                         )}

components/tools/ToolsCard.js

@@ -10,34 +10,37 @@ export default function ToolsCard({ toolData }) {
   const descriptionRef = useRef(null)
   useEffect(() => {
     let divHeight = descriptionRef.current.offsetHeight;
-    let numberOfLines = divHeight/20;
-    if(numberOfLines > 3) setShowMoreDescription(true)
+    let numberOfLines = divHeight / 20;
+    if (numberOfLines > 3) setShowMoreDescription(true)
     else setShowMoreDescription(false)
   }, [])
 
+
   let onGit = false;
-  const url = new URL(toolData.links.repoUrl)
-  if (url.host == 'github.com') onGit = true
-  else onGit = false
+  if (toolData.links.repoUrl) {
+    const url = new URL(toolData.links.repoUrl)
+    if (url.host == 'github.com') onGit = true
+    else onGit = false
+  }
 
   return (
-    <div className="border shadow-md rounded-lg">
+    <div className="border shadow-md h-auto flex flex-col rounded-lg">
       <div className="pt-8 px-6 mb-6">
         <div className="flex flex-col gap-2">
           <div className="flex gap-4 justify-between w-full">
             <Heading typeStyle="heading-sm-semibold">{toolData.title}</Heading>
-            <div className='bg-green-100 border border-green-600 text-green-600 p-1 text-center text-xs w-fit h-fit rounded-md'>
+            <div className='bg-green-100 border border-green-600 text-green-600 p-1 text-center text-xs w-fit min-w-[5.3rem] h-fit rounded-md'>
               {toolData.filters.hasCommercial === false ? 'Open Source' : 'Commercial'}
             </div>
           </div>
           <div className='relative'>
             <Paragraph typeStyle="body-sm">
-              <div ref={descriptionRef} className={`w-full ${showMoreDescription ? 'cursor-pointer': '' }`} onMouseEnter={() =>(setTimeout(() => {if(showMoreDescription) setShowDescription(true)}, 500))}>
-              <TextTruncate
-                element="span"
-                line={3}
-                text={toolData.description}
-              /></div>
+              <div ref={descriptionRef} className={`w-full ${showMoreDescription ? 'cursor-pointer' : ''}`} onMouseEnter={() => (setTimeout(() => { if (showMoreDescription) setShowDescription(true) }, 500))}>
+                <TextTruncate
+                  element="span"
+                  line={3}
+                  text={toolData.description}
+                /></div>
             </Paragraph>
             {showDescription && <div className="absolute top-0 p-2 z-10 bg-white w-full border border-gray-200 shadow-md" onMouseLeave={() => (setShowDescription(false))}>
               <Paragraph typeStyle="body-sm" className=''>
@@ -48,8 +51,8 @@ export default function ToolsCard({ toolData }) {
         </div>
       </div>
       <hr className="mx-6" />
-      {(toolData?.filters?.language || toolData?.filters?.technology?.length>0) &&
-        <div className="my-6">
+      <div className="grow">
+        {(toolData?.filters?.language || toolData?.filters?.technology?.length > 0) ? <div className="my-6">
           {toolData.filters.language && <div className="flex flex-col gap-2 mx-6">
             <div className="text-gray-700 text-sm font-semibold">LANGUAGES</div>
             <div className="flex gap-2">
@@ -60,7 +63,7 @@ export default function ToolsCard({ toolData }) {
               />
             </div>
           </div>}
-          {toolData.filters.technology.length > 0 && <><div className="flex flex-col gap-2 my-4 mx-6">
+          {toolData.filters.technology.length > 0 && <div className="flex flex-col gap-2 my-4 mx-6">
             <div className="text-gray-700 text-sm font-semibold">TECHNOLOGIES</div>
             <div className="flex gap-2 flex-wrap">
               {toolData.filters.technology.map((item, index) => (
@@ -71,37 +74,48 @@ export default function ToolsCard({ toolData }) {
                 />
               ))}
             </div>
-          </div></>}
+          </div>}
+        </div> :
+        <div className="w-full relative p-8 text-center h-full text-gray-700">
+          <div className='absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2'> No further details provided </div>
         </div>}
-      {(toolData.links.repoUrl || toolData.links.websiteUrl) && <>
-        <hr className="" />
-        <div className="flex">
-          {onGit ?
-            <a className="w-full text-center py-6 hover:bg-gray-200 cursor-pointer" href={toolData.links.repoUrl} target='_blank' rel='noreferrer'>
-              <div className="m-auto flex w-fit gap-2">
-                <img src="/img/logos/github-black.svg" className="w-5" />
-                <div className="text-gray-700 text-sm">View on Github</div>
-              </div>
-            </a> :
-            <a className="w-full text-center py-6 hover:bg-gray-200 cursor-pointer" href={toolData.links.repoUrl} target='_blank' rel='noreferrer'>
-              <div className="m-auto flex w-fit gap-2">
-                <div className="text-gray-700 text-sm">View Source Code</div>
-              </div>
-            </a>
-          }
-          {toolData.links.websiteUrl && (
-            <>
-              <div className='border border-gray-200 h-auto'></div>
-              <a className="w-full text-center py-6 hover:bg-gray-200 cursor-pointer" href={toolData.links.repoUrl} target='_blank' rel='noreferrer'>
+      </div>
+        {(toolData.links.repoUrl || toolData.links.websiteUrl || toolData.links.docsUrl) && <>
+          <hr className="" />
+          <div className="flex">
+            {toolData.links.repoUrl && <>
+              {onGit ?
+                <a className="w-full text-center border-x py-6 px-1 hover:bg-gray-200 cursor-pointer" href={toolData.links.repoUrl} target='_blank' rel='noreferrer'>
+                  <div className="m-auto flex w-fit gap-2">
+                    <img src="/img/logos/github-black.svg" className="w-5" />
+                    <div className="text-gray-700 text-sm">View Github</div>
+                  </div>
+                </a> :
+                <a className="w-full text-center border-x border-gray-200 py-6 px-1 hover:bg-gray-200 cursor-pointer" href={toolData.links.repoUrl} target='_blank' rel='noreferrer'>
+                  <div className="m-auto flex w-fit gap-2">
+                    <div className="text-gray-700 text-sm">View Source Code</div>
+                  </div>
+                </a>
+              }
+            </>}
+            {toolData.links.websiteUrl && (
+              <a className="w-full text-center py-6 px-1 hover:bg-gray-200 border-x border-gray-200 cursor-pointer" href={toolData.links.websiteUrl} target='_blank' rel='noreferrer'>
                 <div className="m-auto flex w-fit gap-2">
                   <img src="/img/illustrations/icons/share.svg" className="w-5" />
                   <div className="text-gray-700 text-sm">Visit Website</div>
                 </div>
               </a>
-            </>
-          )}
-        </div>
-      </>}
-    </div>
-  );
+            )}
+            {toolData.links.docsUrl && (
+              <a className="w-full text-center py-6 px-1 hover:bg-gray-200 border-x border-gray-200 cursor-pointer" href={toolData.links.docsUrl} target='_blank' rel='noreferrer'>
+                <div className="m-auto flex w-fit gap-2">
+                  <img src="/img/illustrations/icons/docs-icon.svg" className="w-5" />
+                  <div className="text-gray-700 text-sm">Visit Docs</div>
+                </div>
+              </a>
+            )}
+          </div>
+        </>}
+      </div>
+    );
 }

components/tools/ToolsList.js

@@ -14,7 +14,7 @@ export default function toolsList({ toolsData }) {
             {toolsData[categoryName].description}
           </Paragraph>
           <hr className='my-8' />
-          <div className="lg:grid grid-cols-3 gap-8">
+          <div className="flex flex-col lg:grid grid-cols-3 gap-8">
             {toolsData[categoryName].toolsList.map((tool, toolIndex) => (
               <ToolsCard key={toolIndex} toolData={tool} />
             ))}

config/all-tags.json

@@ -1 +1 @@
-{"languages":[{"name":"Go","color":"bg-[#8ECFDF]","borderColor":"border-[#00AFD9]"},{"name":"Java","color":"bg-[#ECA2A4]","borderColor":"border-[#EC2125]"},{"name":"JavaScript","color":"bg-[#F2F1C7]","borderColor":"border-[#BFBE86]"},{"name":"HTML","color":"bg-[#E2A291]","borderColor":"border-[#E44D26]"},{"name":"C/C++","color":"bg-[#93CDEF]","borderColor":"border-[#0080CC]"},{"name":"C#","color":"bg-[#E3AFE0]","borderColor":"border-[#9B4F96]"},{"name":"Python","color":"bg-[#A8D0EF]","borderColor":"border-[#3878AB]"},{"name":"TypeScript","color":"bg-[#7DBCFE]","borderColor":"border-[#2C78C7]"},{"name":"Kotlin","color":"bg-[#B1ACDF]","borderColor":"border-[#756BD9]"},{"name":"Scala","color":"bg-[#FFA299]","borderColor":"border-[#DF301F]"},{"name":"Markdown","color":"bg-[#BABEBF]","borderColor":"border-[#445B64]"},{"name":"YAML","color":"bg-[#FFB764]","borderColor":"border-[#F1901F]"},{"name":"R","color":"bg-[#84B5ED]","borderColor":"border-[#246BBE]"},{"name":"Ruby","color":"bg-[#FF8289]","borderColor":"border-[#FF000F]"},{"name":"Rust","color":"bg-[#FFB8AA]","borderColor":"border-[#E43716]"},{"name":"Shell","color":"bg-[#87D4FF]","borderColor":"border-[#389ED7]"},{"name":"Groovy","color":"bg-[#B6D5E5]","borderColor":"border-[#609DBC]"}],"technologies":[{"name":"Node js","color":"bg-[#BDFF67]","borderColor":"border-[#84CE24]"},{"name":"Hermes","color":"bg-[#8AEEBD]","borderColor":"border-[#2AB672]"},{"name":"React JS","color":"bg-[#9FECFA]","borderColor":"border-[#08D8FE]"},{"name":".NET","color":"bg-[#A184FF]","borderColor":"border-[#5026D4]"},{"name":"ASP.NET","color":"bg-[#71C2FB]","borderColor":"border-[#1577BC]"},{"name":"Springboot","color":"bg-[#98E279]","borderColor":"border-[#68BC44]"},{"name":"AWS","color":"bg-[#FF9F59]","borderColor":"border-[#EF6703]"},{"name":"Docker","color":"bg-[#B8E0FF]","borderColor":"border-[#2596ED]"},{"name":"Node-red","color":"bg-[#FF7474]","borderColor":"border-[#8F0101]"},{"name":"Maven","color":"bg-[#FF6B80]","borderColor":"border-[#CA1A33]"},{"name":"Saas","color":"bg-[#6AB8EC]","borderColor":"border-[#2275AD]"},{"name":"Kubernetes-native","color":"bg-[#D7C7F2]","borderColor":"border-[#A387D2]"},{"name":"Scala","color":"bg-[#D7C7F2]","borderColor":"border-[#A387D2]"},{"name":"Azure","color":"bg-[#4B93FF]","borderColor":"border-[#015ADF]"},{"name":"Jenkins","color":"bg-[#D7C7F2]","borderColor":"border-[#A387D2]"},{"name":"Flask","color":"bg-[#D7C7F2]","borderColor":"border-[#A387D2]"},{"name":"WebComponents","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"AsyncAPI Generator","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"TypeScript","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"VSCode","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"SmartPaste","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"}]}
+{"languages":[{"name":"Go","color":"bg-[#8ECFDF]","borderColor":"border-[#00AFD9]"},{"name":"Java","color":"bg-[#ECA2A4]","borderColor":"border-[#EC2125]"},{"name":"JavaScript","color":"bg-[#F2F1C7]","borderColor":"border-[#BFBE86]"},{"name":"HTML","color":"bg-[#E2A291]","borderColor":"border-[#E44D26]"},{"name":"C/C++","color":"bg-[#93CDEF]","borderColor":"border-[#0080CC]"},{"name":"C#","color":"bg-[#E3AFE0]","borderColor":"border-[#9B4F96]"},{"name":"Python","color":"bg-[#A8D0EF]","borderColor":"border-[#3878AB]"},{"name":"TypeScript","color":"bg-[#7DBCFE]","borderColor":"border-[#2C78C7]"},{"name":"Kotlin","color":"bg-[#B1ACDF]","borderColor":"border-[#756BD9]"},{"name":"Scala","color":"bg-[#FFA299]","borderColor":"border-[#DF301F]"},{"name":"Markdown","color":"bg-[#BABEBF]","borderColor":"border-[#445B64]"},{"name":"YAML","color":"bg-[#FFB764]","borderColor":"border-[#F1901F]"},{"name":"R","color":"bg-[#84B5ED]","borderColor":"border-[#246BBE]"},{"name":"Ruby","color":"bg-[#FF8289]","borderColor":"border-[#FF000F]"},{"name":"Rust","color":"bg-[#FFB8AA]","borderColor":"border-[#E43716]"},{"name":"Shell","color":"bg-[#87D4FF]","borderColor":"border-[#389ED7]"},{"name":"Groovy","color":"bg-[#B6D5E5]","borderColor":"border-[#609DBC]"}],"technologies":[{"name":"Node.js","color":"bg-[#BDFF67]","borderColor":"border-[#84CE24]"},{"name":"Hermes","color":"bg-[#8AEEBD]","borderColor":"border-[#2AB672]"},{"name":"React JS","color":"bg-[#9FECFA]","borderColor":"border-[#08D8FE]"},{"name":".NET","color":"bg-[#A184FF]","borderColor":"border-[#5026D4]"},{"name":"ASP.NET","color":"bg-[#71C2FB]","borderColor":"border-[#1577BC]"},{"name":"Springboot","color":"bg-[#98E279]","borderColor":"border-[#68BC44]"},{"name":"AWS","color":"bg-[#FF9F59]","borderColor":"border-[#EF6703]"},{"name":"Docker","color":"bg-[#B8E0FF]","borderColor":"border-[#2596ED]"},{"name":"Node-RED","color":"bg-[#FF7474]","borderColor":"border-[#8F0101]"},{"name":"Maven","color":"bg-[#FF6B80]","borderColor":"border-[#CA1A33]"},{"name":"Saas","color":"bg-[#6AB8EC]","borderColor":"border-[#2275AD]"},{"name":"Kubernetes-native","color":"bg-[#D7C7F2]","borderColor":"border-[#A387D2]"},{"name":"Scala","color":"bg-[#D7C7F2]","borderColor":"border-[#A387D2]"},{"name":"Azure","color":"bg-[#4B93FF]","borderColor":"border-[#015ADF]"},{"name":"Jenkins","color":"bg-[#D7C7F2]","borderColor":"border-[#A387D2]"},{"name":"Flask","color":"bg-[#D7C7F2]","borderColor":"border-[#A387D2]"},{"name":"Liquid","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"Kotlin","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"Spring Cloud Streams","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"Groovy","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"Markdown","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"Shell","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"WebComponents","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"Babel","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"Storybook","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"AsyncAPI Generator","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"TypeScript","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"VSCode","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"SmartPaste","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"}]}