Merge branch 'master' into addCodecov

.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
+

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'

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>
   );

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>

jest.config.js

@@ -4,4 +4,6 @@ module.exports = {
   collectCoverageFrom: ['scripts/**/*.js'],
   coverageReporters: ['text', 'lcov', 'json-summary'],
   coverageDirectory: 'coverage'
-};
+  // To disallow netlify edge function tests from running
+  testMatch: ['**/tests/**/*.test.*', '!**/netlify/**/*.test.*'],
+};

markdown/blog/2022-summary.md

@@ -11,7 +11,6 @@ authors:
     link: https://twitter.com/derberq
     byline: AsyncAPI Maintainer and Dev Comm Keeper
 excerpt: 'tl;dr We do not see any negative trends indicating that the interest in the project got stale and that the community is not growing anymore.'
-featured: true
 ---
 
 It is a good practice to sometimes stop and turn back. Sometimes you need to see what you left behind, what successes made you go that far, and what things you missed and never had time to enjoy or explore. The more often you do it, the better your decisions may be in the future. It is essential to do it at least once a year in open source.

markdown/blog/2023-mentorship-summary.md

@@ -11,7 +11,6 @@ authors:
     photo: /img/avatars/ace.webp
     link: https://twitter.com/_acebuild
     byline: AsyncAPI Preacher
-featured: true
 ---
 
 

markdown/blog/2023-summary.md

@@ -11,7 +11,6 @@ authors:
     link: https://www.linkedin.com/in/v-thulisile-sibanda/
     byline: AsyncAPI Community Manager
 excerpt: '2023 Year in Review'
-featured: true
 ---
 
 It's almost unbelievable that we are in 2024. And if you are reading this, Happy New Year to you and your loved ones. Continuing the tradition, we look at how the community has grown over the last 365 days and look forward to our next phase.

markdown/blog/2024-Q1-docs-report.md

@@ -12,7 +12,6 @@ authors:
     link: https://www.linkedin.com/in/alejandra-quetzalli/
     byline: During Q1 2024, AsyncAPI docs had a total of 26,923 sessions and 8,128 unique users. 
 excerpt: During Q1 2024, AsyncAPI docs had a total of 26,923 sessions and 8,128 unique users.
-featured: true
 ---
 
 # AsyncAPI Documentation Report - Q1 2024

markdown/blog/a_straight_guide_to_apis_and_architecture_concepts.md

@@ -12,7 +12,6 @@ authors:
     photo: /img/avatars/barbano.webp
     link: https://www.linkedin.com/in/barbano-gonzalez-moreno
 excerpt: Basic concepts about APIs and architectures for beginners and non-developers.
-featured: true
 ---
 
 It has not been such a long journey into the technology realm for me. Then I started to work at AsyncAPI, and suddenly, I needed to understand a complex world. New terms, code, and ways of seeing things were waiting for me. Coming from other fields of knowledge, the challenge was huge. How to begin? How to have a clue?

markdown/blog/asyncapi-ambassador-program.md

@@ -10,7 +10,6 @@ authors:
     photo: /img/avatars/barbano.webp
     link: https://www.linkedin.com/in/barbano-gonzalez-moreno
 excerpt: Information about AsyncAPI Ambassador Program.
-featured: true
 ---
 
 AsyncAPI and its community have grown exponentially during the last few months. As a feedback exercise, both the project and the community are getting stronger with one another. The community is the driving force that leads the initiative and the bigger it gets, the greater the consistency and potential it has. It’s amazing to see a vast number of people who invest their time in disseminating and promoting the initiative through talks, articles, workshops, and program direction... 

markdown/blog/asyncapi-say-hi-to-triggermesh.md

@@ -10,7 +10,6 @@ authors:
     link: https://twitter.com/j_michaux
     byline: Product at TriggerMesh
 excerpt: TriggerMesh makes it easy to reliably pipe events from any source to any destination. Let's use it to read from AsyncAPI channels, and see how to autogenerate the TriggerMesh config.
-featured: true
 ---
 
 This tutorial demonstrates how to use AsyncAPI with TriggerMesh. It shows how the two play nicely together because TriggerMesh can easily ingest, transform, filter, and route events from channels defined in an AsyncAPI definition. This is one of many possible ways to use the two technologies together. This post assumes you have basic knowledge of AsyncAPI already, but are potentially new to TriggerMesh.

markdown/blog/asyncapi-website-migration.md

@@ -13,7 +13,6 @@ authors:
     link: https://ashmit.dev/
     byline: Modelina Website Maintainer
 excerpt: 'Migration journey of the AsyncAPI Website, features introduced, and future plans.'
-featured: true
 ---
 
 We're thrilled to announce the successful migration of the AsyncAPI website from JavaScript and Next.js v12 to TypeScript and Next.js v14! This exciting upgrade unlocks a new chapter for the website, paving the way for improved scalability, streamlined feature implementation, and the powerful capabilities of Next.js. As a bonus, this migration also enabled a well-documented codebase and streamlined our testing process by reducing the reliance on Cypress tests. In this blog post, we'll delve into the exciting journey behind the migration and share what's new on the website. I'll share insights into our team's efforts, the research and planning involved, the challenges we tackled, the valuable lessons learned, and what exciting plans lie ahead for the AsyncAPI website.

markdown/blog/beyond-boundaries.md

@@ -12,8 +12,7 @@ authors:
   - name: Azeez Elegbede
     photo: /img/avatars/ace.webp
     link: https://twitter.com/_acebuild
-    byline: AsyncAPI Preacher
-featured: true    
+    byline: AsyncAPI Preacher 
 ---
 
 In 2022 we piloted our innovative mentorship program that focuses on open-source software(OSS). We envisioned a platform where aspiring developers could learn, grow, and contribute to exciting projects while receiving guidance from experienced mentors.

markdown/blog/conference-2022.md

@@ -5,7 +5,6 @@ type: Conference
 tags:
   - Conference
 cover: /img/posts/conference-2022.webp
-featured: true
 authors:
   - name: Azeez Elegbede
     photo: /img/avatars/ace.webp

markdown/blog/conference-2023.md

@@ -11,7 +11,6 @@ authors:
     link: https://www.linkedin.com/in/v-thulisile-sibanda/
     byline: AsyncAPI Community Manager
 excerpt: In 2023, we hosted our very first in-person conference edition. Find out how it all went down!
-featured: true
 ---
 
 For three consecutive years, we have hosted online conferences, and in 2023, we decided to take it up a notch and move to in-person events.

markdown/blog/gravitee-annoucement.md

@@ -11,7 +11,6 @@ authors:
     link: https://www.linkedin.com/in/atinuke-oluwabamikemi-kayode-5b838b1b7/
     byline: AsyncAPI Community Marketing Specialist
 excerpt: 'Gravitee Sponsorship Announcement'
-featured: true
 ---
 
 ## Gravitee Sponsorship Announcement

markdown/blog/hacktoberfest-2022.md

@@ -5,7 +5,6 @@ type: Community
 tags:
   - Hacktoberfest
 cover: /img/posts/asyncapiXhacktoberfest.webp
-featured: true
 authors:
   - name: Azeez Elegbede
     photo: /img/avatars/ace.webp