Skip to content

Commit

Permalink
feat: manual tools added to the Tools Dashboard (#1191)
Browse files Browse the repository at this point in the history 
Co-authored-by: Alejandra Quetzalli <alejandra.olvera.novack@gmail.com>
Co-authored-by: Lukasz Gornicki <lpgornicki@gmail.com>
  • Loading branch information
@akshatnema @alequetzalli @derberg
3 people committed Jan 18, 2023
1 parent 8014f40 commit 7588b7a
Show file tree
Hide file tree
Showing 18 changed files with 1,120 additions and 108 deletions.
2 changes: 1 addition & 1 deletion components/navigation/communityItems.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.` },
Expand Down
6 changes: 3 additions & 3 deletions components/tools/Filters.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion components/tools/ToolDashboard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
)}
Expand Down
100 changes: 57 additions & 43 deletions components/tools/ToolsCard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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=''>
Expand All @@ -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">
Expand All @@ -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) => (
Expand All @@ -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>
);
}
2 changes: 1 addition & 1 deletion components/tools/ToolsList.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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} />
))}
Expand Down
2 changes: 1 addition & 1 deletion config/all-tags.json
View file
Original file line number Diff line number Diff line change
@@ -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]"}]}

0 comments on commit 7588b7a

Please sign in to comment.