Merge branch 'main' into closes-issue-#1492-patch-2

.github/workflows/spellcheck.yml

@@ -0,0 +1,24 @@
+name: Spellcheck
+
+on:
+  push:
+    branches:
+      - main # Adjust this branch name if needed
+  pull_request:
+    types:
+      - opened
+      - synchronize
+
+jobs:
+  spellcheck:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v2
+
+      - name: Install codespell
+        run: pip install codespell
+
+      - name: Run spellcheck
+        run: codespell --quiet-level=2 --check-filenames -- ./**/*.json

CONTRIBUTING.md

@@ -178,6 +178,54 @@ When adding _YouTube_ channel link, please specify _the language_ of the channel
 
 ---
 
+### Commit Message Guidelines using Commitlint
+
+We follow a standardized commit message format using Commitlint to ensure consistency and clarity in our commit history. Each commit message should adhere to the following guidelines:
+
+1. **Type**: The commit type must be one of the following:
+
+   - `feat`: A new feature or enhancement.
+   - `fix`: A bug fix.
+   - `docs`: Documentation changes.
+   - `style`: Code style changes (e.g., formatting, semicolons).
+   - `refactor`: Code refactorings with no feature changes or bug fixes.
+   - `test`: Adding or improving tests.
+   - `chore`: General maintenance tasks, build changes, etc.
+
+2. **Scope** (Optional): The scope provides context for the commit, indicating the specific part of the project being affected. Use a short description in lowercase (e.g., `auth`, `navbar`, `README`).
+
+3. **Description**: A brief and meaningful description of the changes made. Start with a capital letter and use the imperative mood (e.g., "Add new feature" instead of "Added new feature").
+
+4. **Issue reference** (Optional): Include the issue number associated with the commit (e.g., `#123`).
+
+### Examples:
+
+#### Valid Commit Messages:
+
+- `feat: Add user authentication feature`
+- `fix(auth): Resolve login page redirect issue`
+- `docs: Update installation instructions`
+- `style: Format code according to project guidelines`
+- `refactor(navbar): Improve responsiveness`
+- `test: Add unit tests for API endpoints`
+- `chore: Update dependencies to latest versions`
+- `fix: Handle edge case in data processing (#456)`
+
+#### Invalid Commit Messages:
+
+- `Added new stuff`
+- `Fixed a bug`
+- `Updated code`
+- `auth feature update`
+- `chore: fixed some stuff`
+
+### Commit Example with Commitlint:
+
+```bash
+git commit -m "feat(auth): Implement user signup process (#789)"
+```
+  <hr>
+
 ## 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))

components/BackToTop/BackToTopButton.tsx

@@ -52,6 +52,8 @@ export const BackToTopButton = () => {
       <button
         className={buttonClasses}
         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"

components/Footer/Footer.tsx

@@ -19,11 +19,17 @@ export const Footer: FC = () => {
           href="https://linkfree.io/rupali-codes"
           target="_blank"
           rel="noopener noreferrer"
+          aria-label="GitHub Profile of Rupali Haldiya"
         >
           <span className={nameStyles}>Rupali Haldiya</span>
         </Link>{' '}
         and{' '}
-        <Link href="/contributors" rel="noopener noreferrer" target="_blank">
+        <Link
+          href="/contributors"
+          rel="noopener noreferrer"
+          target="_blank"
+          aria-label="List of Contributors in LinksHub"
+        >
           <span className={nameStyles}>Open Source Community</span>
         </Link>
       </p>

components/Header/Header.tsx

@@ -6,25 +6,31 @@ import { GlobalContext } from 'context/GlobalContext'
 import { ThemeToggler } from '../ThemeToggler/themeToggler'
 import { TopBar } from '../TopBar/TopBar'
 import { SocialMediaIconsList } from 'components/SocialMedia/SocialMediaIconsList'
+import { useResults } from 'hooks/ResultsContext'
 
 export const Header: FC = () => {
   const { toggleNav } = useContext(GlobalContext)
+  const { results } = useResults()
 
   return (
     <header className="fixed top-0 left-0 z-30 row-start-1 row-end-2 flex h-[76px] w-screen items-center justify-between bg-light-primary dark:bg-dark">
       <div className="bg-[rgba(255,255,255,0.3)] h-full w-fit flex-none px-6 py-4 dark:bg-dark lg:w-[290px]">
-        <Link href="/">
+        <Link href="/" aria-label="LinksHub Logo">
           <Logo className="text-3xl" />
         </Link>
       </div>
       <div className="bg-light-primary relative h-full grow px-8 dark:bg-dark lg:dark:bg-dark-primary">
-        <TopBar className="absolute left-8 hidden h-full md:flex" />
+        <TopBar
+          className="absolute left-8 hidden h-full md:flex"
+          results={results}
+        />
         <div className="absolute right-8 flex h-full gap-4">
           <SocialMediaIconsList className="hidden lg:flex" />
           <ThemeToggler />
           <button
             className="dark:text-text-primary lg:hidden"
             onClick={toggleNav}
+            aria-label="toggle button"
           >
             <AiOutlineMenu size={24} />
           </button>

components/NewIssue/NewIssue.tsx

@@ -5,13 +5,14 @@ const NewIssue: FC = () => {
   return (
     <div className="pt-6 md:p-0 text-xl w-fit m-auto">
       <span>Be the first to add by creating a GitHub issue </span>
-        <Link 
-           className="dark:text-theme-primary text-theme-secondary underline"
-          href="https://github.com/rupali-codes/LinksHub/issues/new?assignees=&labels=add+link&template=add_link.yml&title=%5BAdd%5D+%3Cname%3E"
-          target="_blank"
-        >
-          here
-        </Link>
+      <Link
+        className="dark:text-theme-primary text-theme-secondary underline"
+        href="https://github.com/rupali-codes/LinksHub/issues/new?assignees=&labels=add+link&template=add_link.yml&title=%5BAdd%5D+%3Cname%3E"
+        target="_blank"
+        aria-label="Page to create new Issue"
+      >
+        here
+      </Link>
     </div>
   )
 }

components/Searchbar/Searchbar.tsx

@@ -67,8 +67,10 @@ export const Searchbar: React.FC<SearchbarProps> = ({ setSearch }) => {
   return (
     <form onSubmit={handleSubmit} noValidate>
       <div className="relative">
-        <div className="flex items-center" aria-role="search">
-          <label htmlFor="simple-search" className="sr-only">Quickly search any resources</label>
+        <div className="flex items-center" role="search">
+          <label htmlFor="simple-search" className="sr-only">
+            Quickly search any resources
+          </label>
           <input
             type="text"
             id="simple-search"
@@ -83,6 +85,7 @@ 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 duration-300 ease-in-out"
+            aria-label="submit query button"
           >
             <SearchIcon className="w-5 h-5" aria-hidden="true" />
           </button>

components/Share/Share.tsx

@@ -8,6 +8,7 @@ type ShareProps = {
 };
 
 export const Share: React.FC<ShareProps> = ({ url, title }) => {
+  const showShareOptions = false
   async function handleShare() {
     if (navigator.share) {
       try {
@@ -55,8 +56,25 @@ export const Share: React.FC<ShareProps> = ({ url, title }) => {
           paddingRight: "6px",
           paddingTop: "2px",
           paddingBottom: "2px",
-        }}
-      />
+          }}
+        />
+
+      {showShareOptions && (
+        <p
+          className="bg-theme-secondary text-white text-sm rounded-lg px-3 py-1"
+          style={{
+            position: 'absolute',
+            top: '100%',
+            left: '50%',
+            transform: 'translateX(-50%)',
+            zIndex: 1,
+            boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
+            cursor: 'default',
+          }}
+        >
+          Share
+        </p>
+      )}
     </div>
   );
 };

components/SideNavbar/SideNavbarBody.tsx

@@ -10,8 +10,13 @@ export const SideNavbarBody: FC = () => {
   const { setSearch, searchResults, debouncedSearch } = useSidebarSearch()
 
   return (
-    <div className="bg-[rgba(255,255,255,0.3)] w-full overflow-x-hidden whitespace-nowrap transition-all ease-in dark:bg-dark dark:text-text-primary">
-      <div className="bg-light-primary p-4 pt-0 transition-all ease-in dark:bg-dark">
+    <div
+      className={classNames(
+        `bg-[rgba(243,244,246,1)] h-full w-full overflow-x-hidden whitespace-nowrap transition-all ease-in dark:bg-dark dark:text-text-primary`,
+        theme === 'light' ? 'scrollColorLight' : 'scrollColorDark'
+      )}
+    >
+      <div className="bg-primary-light transiton-all w-full p-4 transition-none ease-in dark:bg-dark">
         <Searchbar setSearch={setSearch} />
       </div>
 

components/SideNavbar/SideNavbarCategory.tsx

@@ -27,6 +27,7 @@ export const SideNavbarCategory: FC<{
       <button
         className="flex w-full cursor-pointer justify-between py-2"
         onClick={handleToggle}
+        aria-label="toggle category"
       >
         <h1 className="font-bold uppercase">{item.category}</h1>
         <FaAngleDown

components/SideNavbar/SideNavbarElement.tsx

@@ -11,6 +11,7 @@ export const SideNavbarElement = ({ name, url }: SubCategories) => {
   return (
     <Link
       href={url}
+      aria-label="Side Navbar Elements"
       onClick={closeNav}
       className={`${
         router.asPath === url

components/SideNavbar/SideNavbarHeader.tsx

@@ -12,12 +12,13 @@ export const SideNavbarHeader: FC = () => {
   return (
     <header>
       <div className="flex items-center justify-between bg-gray-100 p-4 dark:bg-gray-900">
-        <Link href={'/'}>
+        <Link href={'/'} aria-label="Side Navbar Header Linking with Logo">
           <Logo className="text-3xl" />
         </Link>
         <button
           className="h-[24px] w-[24px] dark:text-gray-300 lg:hidden"
           onClick={toggleNav}
+          aria-label="Toggle sidebar navigation"
         >
           <AiOutlineClose size={24} id="hamburger" />
         </button>

components/ThemeToggler/themeToggler.tsx

@@ -27,11 +27,18 @@ export function ThemeToggler() {
     <button
       onClick={handleThemeToggle}
       title={`Toggle dark mode (current state: ${resolvedTheme})`}
+      aria-label="Toggle dark mode"
     >
       {resolvedTheme === 'dark' ? (
-        <HiSun {...iconProps} className='text-light-primary hover:text-theme-primary transition duration-300 ease-in-out' />
+        <HiSun
+          {...iconProps}
+          className="text-light-primary hover:text-theme-primary transition duration-300 ease-in-out"
+        />
       ) : (
-        <HiMoon {...iconProps} className='text-text-secondary hover:text-theme-primary transition duration-300 ease-in-out' />
+        <HiMoon
+          {...iconProps}
+          className="text-text-secondary hover:text-theme-primary transition duration-300 ease-in-out"
+        />
       )}
     </button>
   )