Skip to content

Commit

Permalink
Merge branch 'master' into netlify-wf-update
Browse files Browse the repository at this point in the history
  • Loading branch information
@anshgoyalevil
anshgoyalevil authored Sep 16, 2024
2 parents 8486ebd + 30aeec6 commit ea2f7de
Show file tree
Hide file tree
Showing 12 changed files with 167 additions and 137 deletions.
1 change: 1 addition & 0 deletions assets/docs/fragments/bindings-overview.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
Bindings in AsyncAPI provide a way to add protocol-specific information to the AsyncAPI documentation. They can be added to different document parts, such as servers, channels, or messages; they specify standard details specific to a particular protocol. The purpose of bindings is to enhance the API's understanding and usage by providing additional context and configuration options for different protocols.
24 changes: 10 additions & 14 deletions components/tools/ToolsCard.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { useEffect, useRef, useState } from 'react';
import TextTruncate from 'react-text-truncate';

import type { ToolData, VisibleDataListType } from '@/types/components/tools/ToolDataType';
import { HeadingTypeStyle } from '@/types/typography/Heading';
Expand All @@ -23,21 +22,16 @@ interface ToolsCardProp {
*/
export default function ToolsCard({ toolData }: ToolsCardProp) {
const [showDescription, setShowDescription] = useState<boolean>(false);
const [showMoreDescription, setShowMoreDescription] = useState<boolean>(false);
const [isTruncated, setIsTruncated] = useState<boolean>(false);
const [readMore, setReadMore] = useState<boolean>(false);
const descriptionRef = useRef<HTMLDivElement>(null);

// Decide whether to show full description or not in the card based on the number of lines occupied by the description.
useEffect(() => {
const divHeight = descriptionRef.current?.offsetHeight || 0;
const numberOfLines = divHeight / 20;

if (numberOfLines > 3) {
setShowMoreDescription(true);
} else {
setShowMoreDescription(false);
if (descriptionRef.current) {
setIsTruncated(descriptionRef.current?.scrollHeight! > descriptionRef.current?.clientHeight!);
}
}, []);
}, [descriptionRef.current]);

let onGit = false;

Expand Down Expand Up @@ -91,17 +85,19 @@ export default function ToolsCard({ toolData }: ToolsCardProp) {
<div className='relative'>
<Paragraph typeStyle={ParagraphTypeStyle.sm}>
<span
ref={descriptionRef}
className={`w-full ${showMoreDescription ? 'cursor-pointer' : ''}`}
className={`w-full ${isTruncated ? 'cursor-pointer' : ''}`}
onMouseEnter={() =>
setTimeout(() => {
if (showMoreDescription) setShowDescription(true);
if (isTruncated) setShowDescription(true);
}, 500)
}
>
<TextTruncate element='span' line={3} text={toolData.description} />
<div ref={descriptionRef} className={`line-clamp-3 ${isTruncated && 'after:content-["..."]'}`}>
{toolData.description}
</div>
</span>
</Paragraph>

{showDescription && (
<div
className='absolute top-0 z-10 w-full border border-gray-200 bg-white p-2 shadow-md'
Expand Down
73 changes: 37 additions & 36 deletions components/tools/ToolsDashboard.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import { useRouter } from 'next/router';
import { useContext, useEffect, useRef, useState } from 'react';
import { createRef, useContext, useEffect, useMemo, useRef, useState } from 'react';

import AsyncAPIColorIcon from '@/components/icons/AsyncAPIColorIcon';
import type { ToolsListData } from '@/types/components/tools/ToolDataType';

import ToolsDataList from '../../config/tools.json';
Expand All @@ -10,7 +9,6 @@ import ArrowDown from '../icons/ArrowDown';
import Cross from '../icons/Cross';
import FilterIcon from '../icons/Filter';
import SearchIcon from '../icons/Search';
import Loader from '../Loader';
import CategoryDropdown from './CategoryDropdown';
import Filters from './Filters';
import ToolsList from './ToolsList';
Expand All @@ -22,16 +20,13 @@ const ToolsData = ToolsDataList as ToolsListData;
*/
export default function ToolsDashboard() {
const router = useRouter();

const [loading, setLoading] = useState<boolean>(false); // used to handle the preloader on the page
const filterRef = useRef<HTMLDivElement>(); // used to provide ref to the Filter menu and outside click close feature
const categoryRef = useRef<HTMLDivElement>(); // used to provide ref to the Category menu and outside click close feature
const [openFilter, setOpenFilter] = useState<boolean>(false);
const [openCategory, setopenCategory] = useState<boolean>(false);
// filter parameters extracted from the context
const { isPaid, isAsyncAPIOwner, languages, technologies, categories } = useContext(ToolFilterContext);
const [searchName, setSearchName] = useState<string>(''); // state variable used to get the search name
const [toolsList, setToolsList] = useState<ToolsListData>({}); // state variable used to set the list of tools according to the filters applied
const [checkToolsList, setCheckToolsList] = useState<boolean>(true); // state variable used to check whether any tool is available according to the needs of the user.

// useEffect function to enable the close Modal feature when clicked outside of the modal
Expand All @@ -49,14 +44,6 @@ export default function ToolsDashboard() {
};
});

// sets the preloader on the page for 1 second
useEffect(() => {
setLoading(true);
setTimeout(() => {
setLoading(false);
}, 1000);
}, []);

// useEffect function to enable the close Category dropdown Modal feature when clicked outside of the modal
useEffect(() => {
const checkIfClickOutside = (event: MouseEvent) => {
Expand All @@ -72,8 +59,8 @@ export default function ToolsDashboard() {
};
});

// Function to update the list of tools according to the current filters applied
const updateToolsList = () => {
// useMemo function to filter the tools according to the filters applied by the user
const toolsList = useMemo(() => {
let tempToolsList: ToolsListData = {};

// Tools data list is first filtered according to the category filter if applied by the user.
Expand Down Expand Up @@ -150,18 +137,36 @@ export default function ToolsDashboard() {
}
});

setToolsList(tempToolsList);
};
Object.keys(tempToolsList).map((category) => {
tempToolsList[category].elementRef = createRef();

return tempToolsList;
});

return tempToolsList;
}, [isPaid, isAsyncAPIOwner, languages, technologies, categories, searchName]);

// useEffect to scroll to the opened category when url has category as element id
useEffect(() => {
const { hash } = window.location;

if (hash) {
const elementID = decodeURIComponent(hash.slice(1));
const element = toolsList[elementID]?.elementRef!;

if (element.current) {
document.documentElement.style.scrollPaddingTop = '6rem';
element.current.scrollIntoView({ behavior: 'smooth' });
document.documentElement.style.scrollPaddingTop = '0';
}
}
}, []);
// Function to update the list of tools according to the current filters applied
const clearFilters = () => {
setOpenFilter(false);
router.push('/tools', undefined, { shallow: true });
};

useEffect(() => {
updateToolsList();
}, [isPaid, isAsyncAPIOwner, languages, technologies, categories, searchName]);

const isFiltered = Boolean(
isPaid !== 'all' || isAsyncAPIOwner || languages.length || technologies.length || categories.length
);
Expand Down Expand Up @@ -226,20 +231,16 @@ export default function ToolsDashboard() {
<span className='ml-3'>Clear Filters</span>
</div>
)}
{loading ? (
<Loader loaderText='Loading Tools...' loaderIcon={<AsyncAPIColorIcon alt='Loading...' />} pulsating />
) : (
<div className='mt-0'>
{checkToolsList ? (
<ToolsList toolsListData={toolsList} />
) : (
<div className='p-4'>
<img src='/img/illustrations/not-found.webp' alt='not found' className='m-auto w-1/2' />
<div className='text-center text-lg'> Sorry, we don&apos;t have tools according to your needs. </div>
</div>
)}
</div>
)}
<div className='mt-0'>
{checkToolsList ? (
<ToolsList toolsListData={toolsList} />
) : (
<div className='p-4'>
<img src='/img/illustrations/not-found.webp' alt='not found' className='m-auto w-1/2' />
<div className='text-center text-lg'> Sorry, we don&apos;t have tools according to your needs. </div>
</div>
)}
</div>
</div>
</ToolFilter>
);
Expand Down
2 changes: 1 addition & 1 deletion components/tools/ToolsList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ export default function ToolsList({ toolsListData }: ToolsListProp) {
{Object.keys(toolsListData).map((categoryName, index) => {
if (toolsListData[categoryName].toolsList.length > 0) {
return (
<div className='my-8' key={index} id={categoryName}>
<div className='my-8' key={index} id={categoryName} ref={toolsListData[categoryName].elementRef}>
<Heading typeStyle={HeadingTypeStyle.mdSemibold} className='my-2'>
{categoryName}
</Heading>
Expand Down
15 changes: 11 additions & 4 deletions config/MAINTAINERS.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -276,8 +276,7 @@
"template-for-generator-templates",
"community",
"diff",
"chatbot",
"infra"
"chatbot"
],
"githubID": 6995927
},
Expand Down Expand Up @@ -447,8 +446,7 @@
"go-watermill-template",
"template-for-go-projects",
"parser-api",
"server-api",
"infra"
"server-api"
],
"githubID": 1083296
},
Expand Down Expand Up @@ -972,5 +970,14 @@
"kotlin-asyncapi"
],
"githubID": 39913716
},
{
"name": "Jonas S\u00fcskind",
"github": "sueskind",
"isTscMember": false,
"repos": [
"kotlin-asyncapi"
],
"githubID": 52210599
}
]
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/Golang","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":"Nest Js","color":"bg-[#E1224E]","borderColor":"border-[#B9012b]"},{"name":"TypeScript","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"Socket.IO","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"Liquid","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"Kotlin","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"Gradle","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"Spring Cloud Streams","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"JHipster JDL","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":"VSCode","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"SmartPaste","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"JetBrains","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"IntelliJ IDEA","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"Java","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"HTML","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"}]}
{"languages":[{"name":"Go/Golang","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":"Nest Js","color":"bg-[#E1224E]","borderColor":"border-[#B9012b]"},{"name":"TypeScript","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"Socket.IO","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"Liquid","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"Kotlin","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"Gradle","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"Spring Cloud Streams","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"JHipster JDL","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":"JetBrains","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"IntelliJ IDEA","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"VSCode","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"SmartPaste","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"Java","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"HTML","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"}]}
Loading

0 comments on commit ea2f7de

Please sign in to comment.