Merge branch 'main' into hack_aria_label

.github/labeler-config.yml

@@ -0,0 +1,80 @@
+filters:
+  - label: 'goal: new-feature'
+    regexs:
+      - /\bfeat\b/
+      - /feature/i
+    events: [pull_request]
+    targets: [title]
+
+  - label: 'documentation'
+    regexs:
+      - /docs/i
+    events: [pull_request]
+    targets: [title]
+
+  - label: 'bug'
+    regexs:
+      - /bug/i
+    events: [pull_request]
+    targets: [title]
+  - label: 'bug'
+    regexs:
+      - /fix/i
+    events: [pull_request]
+    targets: [title]
+
+  - label: 'chore'
+    regexs:
+      - /category/i
+    events: [pull_request]
+    targets: [title]
+  - label: 'goal: new-category'
+    regexs:
+      - /category/i
+    events: [pull_request]
+    targets: [title]
+
+  - label: 'chore'
+    regexs:
+      - /\blink\b/
+      - /link/i
+    events: [pull_request]
+    targets: [title]
+  - label: 'goal: new-link'
+    regexs:
+      - /\blink\b/
+      - /link/i
+    events: [pull_request]
+    targets: [title]
+
+  - label: 'chore'
+    regexs:
+      - /description/i
+    events: [pull_request]
+    targets: [title]
+
+  - label: 'chore'
+    regexs:
+      - /chore/i
+    events: [pull_request]
+    targets: [title]
+
+  - label: 'goal: build'
+    regexs:
+      - /build/i
+    events: [pull_request]
+    targets: [title]
+
+  - label: 'goal: refactor'
+    regexs:
+      - /\brefactor\b/
+      - /refactor/i
+    events: [pull_request]
+    targets: [title]
+
+  - label: 'accessibility'
+    regexs:
+      - /\baccessibility\b/
+      - /accessibility/i
+    events: [issues, pull_request] # default
+    targets: [title, comment] # default

.github/workflows/add-labels-pr.yml

@@ -0,0 +1,24 @@
+# reference: https://github.com/hoho4190/issue-pr-labeler
+name: PR Labeler
+
+on:
+  pull_request_target:
+    types:
+      - opened
+      - reopened
+
+jobs:
+  main:
+    runs-on: ubuntu-latest
+
+    permissions:
+      contents: read # to read configuration yml file
+      pull-requests: write # to add labels to pull requests
+
+    steps:
+      - name: Run PR Labeler
+        uses: hoho4190/issue-pr-labeler@v1
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          config-file-name: labeler-config.yml
+        #   disable-bot: true  # this will prevent issues, PRs created by bots

README.md

@@ -2,21 +2,6 @@
 <img src="https://user-images.githubusercontent.com/78981177/232279811-a219b1b5-6383-4ace-9614-24c6b258fec0.png" alt="LinksHub Logo" />
 </article><hr>
 
-## Table of Contents
-
-- [Welcome to LinksHub 👋](#welcome-to-linkshub-)
-  - [Demo 💻](#demo-)
-  - [Tech stack 📚](#tech-stack-)
-  - [Socials 📱](#socials-)
-  - [Getting Started 👩‍💻](#getting-started-)
-    - [Let's jump right in🌟](#lets-jump-right-in)
-      - [_Want to add your favourite links to the Hub? make sure to follow CONTRIBUTING guidelines._](#want-to-add-your-favourite-links-to-the-hub-make-sure-to-follow-contributing-guidelines)
-      - [Want to add or update the descriptions of subcategories?](#want-to-add-or-update-the-descriptions-of-subcategories)
-  - [Building with Gitpod 💣](#building-with-gitpod-)
-  - [Top 50 Contributors ✨](#top-50-contributors-)
-  - [License 📝](#license-)
-  - [Support ⭐](#support-)
-
 <a name="welcome-to-linkshub"></a>
 
 # Welcome to LinksHub 👋
@@ -27,6 +12,21 @@ We recognize that there's a wealth of information available, but often, it's a m
 
 <a name="demo"></a>
 
+## Table of Contents
+
+- [Welcome to LinksHub 👋](#welcome-to-linkshub-)
+- [Demo 💻](#demo-)
+- [Tech stack 📚](#tech-stack-)
+- [Socials 📱](#socials-)
+- [Getting Started 👩‍💻](#getting-started-)
+  - [Let's jump right in🌟](#lets-jump-right-in)
+  - [_Want to add your favourite links to the Hub? make sure to follow CONTRIBUTING guidelines._](#want-to-add-your-favourite-links-to-the-hub-make-sure-to-follow-contributing-guidelines)
+  - [Want to add or update the descriptions of subcategories?](#want-to-add-or-update-the-descriptions-of-subcategories)
+- [Building with Gitpod 💣](#building-with-gitpod-)
+- [Top 50 Contributors ✨](#top-50-contributors-)
+- [License 📝](#license-)
+- [Support ⭐](#support-)
+
 ## Demo 💻
 
 You can see the live demo at: https://linkshub.vercel.app

components/BackToTop/BackToTopButton.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react'
 import { useTransition } from 'react-transition-state'
 import { FaArrowUp } from 'react-icons/fa'
 import { SCROLL_LIMIT } from 'app/constants'
+import { Tooltip } from 'react-tooltip'
 
 export const BackToTopButton = () => {
   const [scrollY, setScrollY] = useState(0)
@@ -53,9 +54,13 @@ export const BackToTopButton = () => {
         onClick={handleClick}
         title="Back to top"
         aria-label="Back to top button"
+        data-tooltip-id="btn-tooltip"
+        data-tooltip-content="Back to Top"
+        data-tooltip-place="top"
       >
         <FaArrowUp className="group-hover:text-theme-secondary" />
       </button>
+        <Tooltip id="btn-tooltip" style={{ backgroundColor: '#8b5cf6', fontSize: '13px', paddingLeft: '6px', paddingRight: '6px', paddingTop: '2px', paddingBottom: '2px' }} />
       <span className="absolute left-1/2 top-1/2 -z-10 hidden -translate-x-1/2 -translate-y-1/2 rotate-0 text-2xl transition-all duration-100 ease-in-out group-hover:ml-8 group-hover:block group-hover:rotate-45">
         👾
       </span>

components/Cards/Card.tsx

@@ -1,14 +1,14 @@
 import { FC, useState, useRef, useEffect } from 'react'
 import { BsBoxArrowUpRight } from 'react-icons/bs'
-import { CopyToClipboard } from 'components/CopyToClipboard'
-import { Share } from 'components/Share'
+import { CopyToClipboard } from 'components/CopyToClipboard/CopyToClipboard'
+import Share from 'components/Share/Share'
 import type { IData } from 'types'
 
 interface CardProps {
   data: IData
 }
 
-const Card: FC<CardProps> = ({ data }) => {
+export const Card: FC<CardProps> = ({ data }) => {
   const { name, description, url } = data
   const descriptionRef = useRef<HTMLParagraphElement>(null)
   const [isOverflow, setIsOverflow] = useState(false)
@@ -25,7 +25,7 @@ const Card: FC<CardProps> = ({ data }) => {
   return (
     <article className="z-10 h-full w-full rounded-3xl border border-dashed border-theme-secondary dark:border-theme-primary bg-[rgba(255,255,255,0.3)] shadow-md dark:bg-dark dark:text-text-primary dark:shadow-sm">
       <div className="card-body">
-        <header className="flex justify-between items-center">
+        <header className="flex justify-between items-center gap-2">
           <h2
             className="cursor-default md:truncate ... text-xl text-theme-secondary dark:text-theme-primary"
             title={name}
@@ -69,4 +69,3 @@ const Card: FC<CardProps> = ({ data }) => {
   )
 }
 
-export default Card

components/Cards/CardsList.tsx

@@ -1,6 +1,6 @@
 import { FC, useState } from 'react'
 import { BackToTopButton } from '../BackToTop/BackToTopButton'
-import Popup from 'components/popup'
+import { PopupInfo } from 'components/popup/popupInfo'
 import CardsListItem from './CardsListItem'
 import type { IData } from 'types'
 
@@ -29,7 +29,7 @@ const CardsList: FC<{ cards: IData[] }> = ({ cards }) => {
         ))}
       </ul>
       <BackToTopButton />
-      <Popup currentCard={currentCard} onClose={removeCurrentCard} />
+      <PopupInfo currentCard={currentCard} onClose={removeCurrentCard} />
     </>
   )
 }

components/Cards/CardsListItem.tsx

@@ -1,5 +1,5 @@
 import { FC } from 'react'
-import Card from './Card'
+import { Card } from './Card'
 import type { IData } from 'types'
 
 const CardsListItem: FC<{ data: IData; onClick: () => void }> = (props) => {

components/CopyToClipboard/CopyToClipboard.tsx

@@ -1,14 +1,14 @@
 import useCopyToClipboard from 'hooks/useCopyToClipboard'
-import React, { useState } from 'react'
+import React from 'react'
 import { FaRegCopy } from 'react-icons/fa'
+import { Tooltip } from 'react-tooltip'
 
 type CopyToClipboardProps = {
   url: string
 }
 
 export const CopyToClipboard = ({ url }: CopyToClipboardProps): JSX.Element => {
   const [copyToClipboard, { success }] = useCopyToClipboard()
-  const [isHovering, setIsHovering] = useState(false)
 
   function handleCopy(e: React.MouseEvent<SVGElement, MouseEvent>) {
     e.stopPropagation()
@@ -17,34 +17,17 @@ export const CopyToClipboard = ({ url }: CopyToClipboardProps): JSX.Element => {
 
   return (
     <div
-      className="dropdown dropdown-left dropdown-hover"
-      onMouseEnter={() => setIsHovering(true)}
-      onMouseLeave={() => setIsHovering(false)}
-    >
+      className="dropdown dropdown-left dropdown-hover">
       <div style={{ position: 'relative' }}>
-        <FaRegCopy
+      <button data-tooltip-id="copy-tooltip" data-tooltip-content={success ? 'Copied!' : 'Copy'} data-tooltip-place="top">
+      <FaRegCopy
           size={'1.3rem'}
           className="text-theme-primary cursor-pointer"
-          title="Copy link"
           onClick={(e) => handleCopy(e)}
         />
-        {isHovering && (
-          <p
-            className="bg-theme-secondary text-white text-sm rounded-lg px-3 py-1 cursor-default"
-            style={{
-              position: 'absolute',
-              top: '-2rem', // Adjust this value to position the text above the icon
-              left: '50%',
-              transform: 'translateX(-50%)',
-              zIndex: 1,
-            }}
-          >
-            {success ? 'Copied!' : 'Copy'}
-          </p>
-        )}
+        </button>
+      <Tooltip id='copy-tooltip' style={{ backgroundColor: '#8b5cf6', fontSize: '13px', paddingLeft: '6px', paddingRight: '6px', paddingTop: '2px', paddingBottom: '2px' }} />
       </div>
     </div>
   )
 }
-
-export default CopyToClipboard

components/ForkButton/GitHubForkButton.tsx

@@ -28,9 +28,7 @@ export const GitHubForkButton: FC<{ repo: string }> = ({ repo }) => {
       rel="noopener noreferrer"
       aria-label={`Fork ${repo} on GitHub`}
     >
-      <div
-        className="inline-flex items-center py-1 text-sm font-semibold bg-transparent text-theme-secondary rounded-sm transition-colors transition duration-300 ease-in-out hover:text-text-secondary transition duration-300 ease-in-out dark:hover:text-text-primary dark:text-theme-primary"
-      >
+      <div className="inline-flex items-center py-1 text-sm font-semibold bg-transparent text-theme-secondary rounded-sm hover:text-text-secondary transition duration-300 ease-in-out dark:hover:text-text-primary dark:text-theme-primary">
         <FaCodeBranch className="mr-1" />
         <span className="font-semibold">Fork</span>
         <span className="ml-2">{forkCount}</span>

components/Searchbar/Searchbar.tsx

@@ -67,10 +67,12 @@ export const Searchbar: React.FC<SearchbarProps> = ({ setSearch }) => {
   return (
     <form onSubmit={handleSubmit} noValidate>
       <div className="relative">
-        <div className="flex items-center">
+        <div className="flex items-center" aria-role="search">
+          <label htmlFor="simple-search" className="sr-only">Quickly search any resources</label>
           <input
             type="text"
             id="simple-search"
+            name="simple-search"
             className="block p-2.5 w-full bg-transparent text-sm text-dark dark:text-text-primary border border-dashed border-gray-text focus:border-theme-secondary dark:focus:border-theme-primary dark:focus:ring-theme-primary focus:ring-theme-secondary dark:placeholder-gray-text outline-none transition-all ease-in-out duration-300 rounded-lg capitalize"
             placeholder="Quick search..."
             value={searchQuery}
@@ -80,10 +82,10 @@ export const Searchbar: React.FC<SearchbarProps> = ({ setSearch }) => {
           />
           <button
             type="submit"
-            className="ml-2 px-4 py-2.5 bg-theme-secondary text-light-primary rounded-md border border-dashed border-transparent hover:border-theme-primary hover:bg-transparent hover:text-theme-primary dark:hover:text-theme-primary transition-colors transition duration-300 ease-in-out"
+            className="ml-2 px-4 py-2.5 bg-theme-secondary text-light-primary rounded-md border border-dashed border-transparent hover:border-theme-primary hover:bg-transparent hover:text-theme-primary dark:hover:text-theme-primary transition-colors duration-300 ease-in-out"
             aria-label="submit query button"
           >
-            <SearchIcon className="w-5 h-5" />
+            <SearchIcon className="w-5 h-5" aria-hidden="true" />
           </button>
         </div>
         {suggestions.length > 0 && (

components/Share/Share.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
-import { FaShareAlt } from 'react-icons/fa'
+import { FiShare2 } from 'react-icons/fi'
+import { Tooltip } from 'react-tooltip'
 
 type ShareProps = {
   url: string
@@ -16,7 +17,6 @@ export const Share: React.FC<ShareProps> = ({ url, title }) => {
           title: title,
           url: url,
         })
-        console.log('Share was successful.')
       } catch (error) {
         console.error('Error sharing:', error)
       }
@@ -33,15 +33,16 @@ export const Share: React.FC<ShareProps> = ({ url, title }) => {
         position: 'relative',
         display: 'inline-block',
       }}
-      onMouseEnter={() => setShowShareOptions(true)}
-      onMouseLeave={() => setShowShareOptions(false)}
     >
-      <FaShareAlt
+      <button data-tooltip-id="share-tooltip" data-tooltip-content="Share" data-tooltip-place="bottom">
+      <FiShare2
         size={'1.2rem'}
         className="text-theme-primary cursor-pointer"
-        title="Share link"
         onClick={handleShare}
       />
+        </button>
+      <Tooltip id='share-tooltip' style={{ backgroundColor: '#8b5cf6', fontSize: '13px', paddingLeft: '6px', paddingRight: '6px', paddingTop: '2px', paddingBottom: '2px' }} />
+
       {showShareOptions && (
         <p
           className="bg-theme-secondary text-white text-sm rounded-lg px-3 py-1"