Merge branch 'master' into feature/add-bindings-index-page

asyncapi · Sep 16, 2024 · c59802d · c59802d
2 parents 6aac78c + 12280d4
commit c59802d
Show file tree

Hide file tree

Showing 49 changed files with 683 additions and 238 deletions.
diff --git a/.github/workflows/netlify-edge-functions-test.yml b/.github/workflows/netlify-edge-functions-test.yml
@@ -0,0 +1,20 @@
+name: Run tests for netlify edge-functions
+
+on:
+  workflow_dispatch
+
+jobs:
+  netlify-tests:
+    strategy:
+      matrix:
+        deno-version: [1.30.0]
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Setup Deno
+        uses: denolib/setup-deno@v2
+        with:
+          deno-version: ${{ matrix.deno-version }}
+      - name: Test with Deno
+        run: deno test --allow-env --trace-ops
+
diff --git a/components/tools/ToolsCard.tsx b/components/tools/ToolsCard.tsx
@@ -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';
@@ -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;
 
@@ -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'

diff --git a/components/tools/ToolsDashboard.tsx b/components/tools/ToolsDashboard.tsx
@@ -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';
@@ -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';
@@ -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
@@ -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) => {
@@ -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.
@@ -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
   );
@@ -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>
   );

diff --git a/components/tools/ToolsList.tsx b/components/tools/ToolsList.tsx
@@ -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>

diff --git a/config/MAINTAINERS.json b/config/MAINTAINERS.json
@@ -276,8 +276,7 @@
             "template-for-generator-templates",
             "community",
             "diff",
-            "chatbot",
-            "infra"
+            "chatbot"
         ],
         "githubID": 6995927
     },
@@ -447,8 +446,7 @@
             "go-watermill-template",
             "template-for-go-projects",
             "parser-api",
-            "server-api",
-            "infra"
+            "server-api"
         ],
         "githubID": 1083296
     },
@@ -972,5 +970,14 @@
             "kotlin-asyncapi"
         ],
         "githubID": 39913716
+    },
+    {
+        "name": "Jonas S\u00fcskind",
+        "github": "sueskind",
+        "isTscMember": false,
+        "repos": [
+            "kotlin-asyncapi"
+        ],
+        "githubID": 52210599
     }
 ]
diff --git a/config/all-tags.json b/config/all-tags.json
@@ -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]"}]}