Merge branch 'main' into hack_improve_sidebar

.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

CONTRIBUTING.md

@@ -57,12 +57,14 @@ Thank you for taking the time to contribute to our project. Please take a moment
 
       > For example, if you are adding a subcategory using the file `online-code-editors.json`, add `online-code-editors` to the `export type` statement in the appropriate style.
 
-  - If you are adding a subcategory, go to `components/TopBar/CategoryDescriptions.ts` and add the subcategory name used when exporting the name in `database/index.ts`, along with a proper description in the correct format.
+  - If you are adding a subcategory, go to `components/TopBar/CategoryDescriptions.ts` and add the subcategory name used when exporting the name in `database/index.ts`, along with a concise description in the correct format.
 
     > For example, if you export the subcategory name as `onlineCodeEditors` in `database/index.ts`, add the same name to `CategoryDescriptions.ts` using the following style:
 
     > subcategoryName: 'description of this subcategory'
 
+  - You can check out similar examples [here](components/TopBar/CategoryDescriptions.ts). It's essential to add a description when submitting a pull request to add a subcategory; to merge it in the codebase.
+
 ### Appending new Links 🔗
 
 > ✨ You can also create [issue(s)](https://github.com/rupali-codes/LinksHub/issues/new/choose) to suggest new links, and someone else will take care of them.
@@ -178,4 +180,4 @@ When adding _YouTube_ channel link, please specify _the language_ of the channel
 
 ## Remarks ✅
 
-- If something is missing here, or you feel something is not well described, either create a PR, [raise an issue](https://github.com/rupali-codes/LinksHub/issues), or [do a code review of the person’s PR](https://www.freecodecamp.org/news/code-review-tips/) (ensure that your review conforms to the [Code of Conduct](https://github.com/CBID2/LinksHub-my-version-/blob/main/CODE_OF_CONDUCT.md))
+- If something is missing here, or you feel something is not well described, either create a PR, [raise an issue](https://github.com/rupali-codes/LinksHub/issues), or [do a code review of the person’s PR](https://www.freecodecamp.org/news/code-review-tips/) (ensure that your review conforms to the [Code of Conduct](https://github.com/CBID2/LinksHub-my-version-/blob/main/CODE_OF_CONDUCT.md))

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)
@@ -51,10 +52,13 @@ export const BackToTopButton = () => {
       <button
         className={buttonClasses}
         onClick={handleClick}
-        title="Back to top"
+        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}
@@ -34,7 +34,7 @@ const Card: FC<CardProps> = ({ data }) => {
           </h2>
           <div className="flex items-center gap-1">
             <CopyToClipboard url={url} />
-            <Share url={url} title={name} />
+            <Share url={`${url}?ref=LinksHub`} title={name} />
           </div>
         </header>
         <div className="h-[7rem]">
@@ -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,6 +1,7 @@
 import useCopyToClipboard from 'hooks/useCopyToClipboard'
 import React from 'react'
 import { FaRegCopy } from 'react-icons/fa'
+import { Tooltip } from 'react-tooltip'
 
 type CopyToClipboardProps = {
   url: string
@@ -15,18 +16,18 @@ export const CopyToClipboard = ({ url }: CopyToClipboardProps): JSX.Element => {
   }
 
   return (
-    <div className="dropdown dropdown-left dropdown-hover">
+    <div
+      className="dropdown dropdown-left dropdown-hover">
+      <div style={{ position: 'relative' }}>
+      <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)}
-      />
-      <p className="dropdown-content bg-theme-secondary text-white text-sm rounded-lg px-3 py-1 cursor-default">
-        {success ? 'Copied!' : 'Copy'}
-      </p>
+          size={'1.3rem'}
+          className="text-theme-primary cursor-pointer"
+          onClick={(e) => handleCopy(e)}
+        />
+        </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

@@ -6,7 +6,7 @@ import { subcategoryArray } from '../../types'
 interface SearchbarProps {
   setSearch: (search: string) => void
 }
-  
+
 export const Searchbar: React.FC<SearchbarProps> = ({ setSearch }) => {
   const router = useRouter()
   const query = router.query.query
@@ -67,21 +67,24 @@ 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}
             onChange={handleSearchChange}
+            autoComplete="off"
             required
           />
           <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"
           >
-            <SearchIcon className="w-5 h-5" />
+            <SearchIcon className="w-5 h-5" aria-hidden="true" />
           </button>
         </div>
         {suggestions.length > 0 && (