Merge branch 'main' into searchbar

.dockerignore

@@ -0,0 +1,4 @@
+# ignoring files that are necessary for the project to run/develop
+*.md
+node_modules/
+LICENSE

Dockerfile

@@ -0,0 +1,14 @@
+FROM node:lts-slim
+
+RUN npm install -g pnpm
+
+WORKDIR /app
+EXPOSE 3000
+
+# Copy the package.json and pnpm-lock.yaml
+COPY package.json .
+COPY pnpm-lock.yaml .
+
+RUN npm run dev-setup
+
+COPY . .

README.md

@@ -5,17 +5,17 @@
 ## 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 favorite links to the Hub? make sure to follow CONTRIBUTING guidelines._](#want-to-add-your-favorite-links-into-the-hub-make-sure-to-follow-contributing-guidelines)
-- [Add or update description](#want-to-add-or-update-the-descriptions-of-subcategories)
-- [Building with Gitpod 💣](#building-with-gitpod-)
-- [Our Contributors ✨](#our-contributors-)
-- [License 📝](#license-)
-- [Support ⭐](#support-)
+  - [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>
 
@@ -99,6 +99,18 @@ You can see the live demo at: https://linkshub.vercel.app
    pnpm run dev
    ```
 
+> **P.S**: If you have `docker` installed in your system, you can follow these steps to set up the environment:
+> 1. After forking and cloning the repo(as mentioned above), get into the project directory:
+> ```bash
+> cd LinksHub/
+> ```
+> 2. Start the docker container with:
+> ```bash 
+> docker compose up
+> ```
+> 3. Now start adding your changes.
+> **Note:** You don't need to restart the container again and again after starting it once, because the changes you make will reflect into the container instantly.
+
 7. Make your changes before staging them.
 
 8. Stage your changes

components/BackToTop/BackToTopButton.tsx

@@ -40,7 +40,7 @@ export const BackToTopButton = () => {
     return null
   }
 
-  const buttonClasses = `focus:animate-button-press rounded-full border border-white bg-violet-600 p-4 text-white shadow-xl duration-300 transition-colors focus:ring group-hover:border-dashed group-hover:border-violet-400 group-hover:bg-white dark:drop-shadow-[5px_5px_8px_rgba(124,58,237,0.25)] dark:group-hover:bg-[#101623] md:border-violet-600 ${
+  const buttonClasses = `focus:animate-button-press rounded-full border border-light-primary bg-theme-secondary p-4 text-light-primary shadow-xl duration-300 transition-colors focus:ring group-hover:border-dashed group-hover:border-theme-primary group-hover:bg-light-primary dark:drop-shadow-[5px_5px_8px_rgba(124,58,237,0.25)] dark:group-hover:bg-[#101623] md:border-violet-600 ${
     status === 'preEnter' || status === 'exiting'
       ? 'opacity-0 translate-y-3'
       : ''
@@ -53,7 +53,7 @@ export const BackToTopButton = () => {
         onClick={handleClick}
         title="Back to top"
       >
-        <FaArrowUp className="group-hover:text-violet-500" />
+        <FaArrowUp className="group-hover:text-theme-secondary" />
       </button>
       <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">
         👾

components/Backdrop/Backdrop.tsx

@@ -1,11 +1,20 @@
-import { FC } from 'react'
+import { FC, useEffect } from 'react'
 import { createPortal } from 'react-dom'
+import { useTransition } from 'react-transition-state'
 
 export const Backdrop: FC<{
   onClick: (() => void) | undefined
   className?: string | undefined
 }> = (props) => {
   const { onClick, className } = props
+  const [{ status }, toggle] = useTransition({
+    timeout: 500,
+    preEnter: true,
+  })
+
+  useEffect(() => {
+    toggle(true)
+  }, [toggle])
 
   const overlayRoot = document.getElementById('overlay-root')
 
@@ -15,7 +24,11 @@ export const Backdrop: FC<{
 
   return createPortal(
     <div
-      className={`fixed inset-0 z-50 h-full w-full cursor-pointer bg-black/80 ${className}`}
+      className={`fixed inset-0 z-50 h-full w-full cursor-pointer bg-black/80
+         ${className}
+         ${status === 'preEnter' || status === 'entering' ? '' : 'opacity-0'}
+         ${status === 'entered' ? 'opacity-100' : ''}
+         `}
       onClick={onClick}
     ></div>,
     overlayRoot

components/Cards/Card.tsx

@@ -22,11 +22,11 @@ const Card: FC<CardProps> = ({ data }) => {
   }, [])
 
   return (
-    <article className="z-10 h-full w-full rounded-3xl border border-dashed border-violet-500 dark:border-violet-400 bg-gray-100 shadow-lg dark:bg-gray-900 dark:text-gray-300 dark:shadow-sm">
+    <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">
           <h2
-            className="cursor-default md:truncate ... text-xl text-violet-600 dark:text-violet-400"
+            className="cursor-default md:truncate ... text-xl text-theme-secondary dark:text-theme-primary"
             title={name}
           >
             {name}
@@ -41,7 +41,7 @@ const Card: FC<CardProps> = ({ data }) => {
             {description}
           </div>
           {isOverflow && (
-            <p className="text-sm underline text-violet-600 dark:text-violet-400 text-right hover:text-violet-400 dark:hover:text-violet-300">
+            <p className="text-sm underline text-theme-secondary dark:text-theme-primary text-right hover:text-theme-primary dark:hover:text-text-primary">
               Read More
             </p>
           )}
@@ -53,7 +53,7 @@ const Card: FC<CardProps> = ({ data }) => {
             target="_blank"
             rel="noopener noreferrer"
             className={
-              'mt-2 flex w-full items-center justify-center gap-2 rounded-2xl border border-dashed border-transparent bg-violet-600 px-6 py-2 text-center text-white duration-100 hover:border-violet-400 hover:bg-transparent hover:text-violet-500 dark:hover:text-violet-400'
+              'mt-2 flex w-full items-center justify-center gap-2 rounded-2xl border border-dashed border-transparent bg-theme-secondary px-6 py-2 text-center text-light-primary duration-100 hover:border-theme-primary hover:bg-transparent hover:text-theme-secondary dark:hover:text-theme-primary'
             }
           >
             Visit site

components/CopyToClipboard/CopyToClipboard.tsx

@@ -18,11 +18,11 @@ export const CopyToClipboard = ({ url }: CopyToClipboardProps): JSX.Element => {
     <div className="dropdown dropdown-left dropdown-hover">
       <FaRegCopy
         size={'1.3rem'}
-        className="text-violet-500 cursor-pointer"
+        className="text-theme-primary cursor-pointer"
         title="Copy link"
         onClick={(e) => handleCopy(e)}
       />
-      <p className="dropdown-content bg-violet-500 text-white text-sm rounded-lg p-1.5 cursor-default">
+      <p className="dropdown-content bg-theme-secondary text-white text-sm rounded-lg px-3 py-1 cursor-default">
         {success ? 'Copied!' : 'Copy'}
       </p>
     </div>

components/Footer/Footer.tsx

@@ -7,12 +7,12 @@ export const Footer: FC = () => {
   const isDarkMode = resolvedTheme === 'dark'
 
   const nameStyles = `underline ${
-    isDarkMode ? 'text-gray-200' : 'text-violet-700'
+    isDarkMode ? 'text-light-primary' : 'text-theme-secondary'
   } `
 
   return (
     <footer className="z-10 mb-4 flex w-full items-baseline justify-center rounded-lg py-2 backdrop-blur-md sm:py-3">
-      <p className="leading-7 tracking-wide text-center text-black dark:text-violet-400">
+      <p className="leading-7 tracking-wide text-center text-black dark:text-theme-primary">
         <span>&copy; {new Date().getFullYear()} LinksHub | </span>
         Developed by{' '}
         <Link

components/ForkButton/GitHubForkButton.tsx

@@ -20,8 +20,6 @@ export const GitHubForkButton: FC<{ repo: string }> = ({ repo }) => {
     fetchForkCount()
   }, [repo])
 
-  // Other Styles for Light Mode: [bg-violet-500 text-white] OR [text-black-500 border border-black]
-
   return (
     <Link
       href={`https://github.com/${repo}/fork`}
@@ -30,13 +28,8 @@ export const GitHubForkButton: FC<{ repo: string }> = ({ repo }) => {
       rel="noopener noreferrer"
       aria-label={`Fork ${repo} on GitHub`}
     >
-      <div 
-        className={
-          `${`inline-flex items-center px-4 py-1 text-sm font-semibold bg-transparent text-violet-500 border 
-            border-violet-500 border-transparent rounded-sm transition-colors shadow-md transition duration-300
-            ease-in-out hover:text-black hover:border-black dark:hover:text-gray-300 dark:hover:border-gray-300`
-            }`
-        }
+      <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"
       >
         <FaCodeBranch className="mr-1" />
         <span className="font-semibold">Fork</span>

components/Header/Header.tsx

@@ -1,7 +1,7 @@
 import { FC, useContext } from 'react'
 import Link from 'next/link'
 import { AiOutlineMenu } from 'react-icons/ai'
-import Logo from 'components/logo'
+import Logo from 'components/logo/logo'
 import { GlobalContext } from 'context/GlobalContext'
 import { ThemeToggler } from '../ThemeToggler/themeToggler'
 import { TopBar } from '../TopBar/TopBar'
@@ -11,18 +11,21 @@ export const Header: FC = () => {
   const { toggleNav } = useContext(GlobalContext)
 
   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">
-      <div className="bg-base-200 h-full w-fit flex-none px-6 py-4 dark:bg-gray-900 lg:w-[290px]">
+    <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="/">
           <Logo className="text-3xl" />
         </Link>
       </div>
-      <div className="bg-base-200 relative h-full grow px-8 dark:bg-gray-900 lg:bg-gray-100 lg:dark:bg-[#101623]">
+      <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" />
         <div className="absolute right-8 flex h-full gap-4">
           <SocialMediaIconsList className="hidden lg:flex" />
           <ThemeToggler />
-          <button className="dark:text-gray-300 lg:hidden" onClick={toggleNav}>
+          <button
+            className="dark:text-text-primary lg:hidden"
+            onClick={toggleNav}
+          >
             <AiOutlineMenu size={24} />
           </button>
         </div>

components/NewIssue/NewIssue.tsx

@@ -3,19 +3,16 @@ import Link from 'next/link'
 
 const NewIssue: FC = () => {
   return (
-    <p className="pt-6 md:p-0 coming-soon">
-      <span className="text-2xl">
-        Be the first to add by creating a GitHub issue
-      </span>{' '}
-      <span className="motion-safe:animate-pulse text-2xl text-purple-500">
-        <Link
+    <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"
         >
-          <u>here</u>
+          here
         </Link>
-      </span>
-    </p>
+    </div>
   )
 }
 

components/Searchbar/Searchbar.tsx

@@ -80,15 +80,15 @@ export const Searchbar: React.FC<SearchbarProps> = ({
           <input
             type="text"
             id="simple-search"
-            className="block p-2.5 w-full bg-transparent text-sm text-gray-900 dark:text-gray-200 border border-dashed border-gray-400 dark:border-gray-500 focus:border-violet-500 dark:focus:border-violet-500 dark:focus:ring-violet-500 focus:ring-violet-500 dark:placeholder-gray-400 outline-none transition-all ease-in-out duration-300 rounded-lg"
-            placeholder="Start searching..."
+            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}
             required
           />
           <button
             type="submit"
-            className="ml-2 px-4 py-2.5 bg-violet-500 text-white rounded-md border border-dashed border-transparent hover:border-violet-400 hover:bg-transparent hover:text-violet-400 dark:hover:text-violet-400"
+            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"
           >
             <SearchIcon className="w-5 h-5" />
           </button>

components/SideNavbar/SideNavbar.tsx

@@ -25,7 +25,10 @@ export const SideNavbar: FC = () => {
 
   return (
     <>
-      <Backdrop onClick={closeNav} className="lg:hidden" />
+      <Backdrop
+        onClick={closeNav}
+        className="lg:hidden transition duration-300 delay-200"
+      />
       {createPortal(
         <div
           className={`fixed top-0 left-0 z-[100] h-full w-[310px] transition-all lg:hidden
@@ -34,7 +37,7 @@ export const SideNavbar: FC = () => {
         >
           <SideNavbarHeader />
           <SocialMediaIconsList
-            className="bg-gray-100 px-6 py-2 dark:bg-gray-900"
+            className="bg-light-primary px-6 py-2 dark:bg-dark"
             showGithubButtons={true} // to show the Star & Fork Button below social media icons
           />
           <SideNavbarBody />

components/SideNavbar/SideNavbarBody.tsx

@@ -16,11 +16,11 @@ export const SideNavbarBody: FC = () => {
   return (
     <div
       className={classNames(
-        `bg-base-200 h-full w-full overflow-x-hidden whitespace-nowrap transition-all ease-in dark:bg-gray-900 dark:text-gray-300`,
+        `bg-[rgba(255,255,255,0.3)] 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-base-200 transiton-all w-full p-4 transition-none ease-in dark:bg-gray-900">
+      <div className="bg-primary-light transiton-all w-full p-4 transition-none ease-in dark:bg-dark">
         <Searchbar {...searchState} dispatchSearch={dispatchSearch} />
       </div>
       <MemoizedSideNavbarCategoryList query={searchState.categoryQuery} />

components/SideNavbar/SideNavbarCategory.tsx

@@ -23,7 +23,7 @@ export const SideNavbarCategory: FC<{
   }
 
   return (
-    <li className="relative w-full transition-all ease-in-out text-violet-600 dark:text-violet-400 dark:bg-opacity-5 hover:text-violet-500 dark:hover:text-violet-300 rounded-md focus-visible:outline-none focus-visible:ring focus-visible:ring-violet-400">
+    <li className="relative w-full transition-all ease-in-out text-theme-secondary dark:text-theme-primary dark:bg-opacity-5 hover:text-theme-secondary dark:hover:text-theme-primary rounded-md focus-visible:outline-none focus-visible:ring focus-visible:ring-theme-primary">
       <button
         className="flex w-full cursor-pointer justify-between py-2"
         onClick={handleToggle}
@@ -40,7 +40,7 @@ export const SideNavbarCategory: FC<{
           isOpen ? 'max-h-screen' : ''
         }`}
       >
-        <ul className="relative ml-1 border-l-2 border-slate-300 dark:border-slate-700 -pl-0.5">
+        <ul className="relative ml-1 border-l-2 dark:border-zinc-500 border-zinc-300 -pl-0.5">
           {sortedSubcategoryList}
         </ul>
       </div>

components/SideNavbar/SideNavbarElement.tsx

@@ -14,12 +14,12 @@ export const SideNavbarElement = ({ name, url }: SubCategories) => {
       onClick={closeNav}
       className={`${
         router.asPath === url
-          ? 'border-l-4 border-violet-500 text-violet-700 dark:text-violet-400 '
-          : 'text-slate-600 dark:text-slate-400'
-      } collapse w-full text-start pl-3 hover:text-violet-500 dark:hover:text-violet-300 
-      focus-visible:outline-none focus-visible:ring focus-visible:ring-violet-400 focus-visible:rounded-lg`}
+          ? 'border-l-4 border-theme-primary text-theme-secondary dark:text-theme-primary '
+          : 'text-text-secondary dark:text-gray-text'
+      } collapse w-full text-start pl-3 hover:text-theme-secondary dark:hover:text-violet-300 
+      focus-visible:outline-none focus-visible:ring focus-visible:ring-theme-primary focus-visible:rounded-lg`}
     >
-      <div className="ml-2 text-lg py-2 capitalize transition-all duration-300 hover:pl-2 dark:border-violet-500">
+      <div className="ml-2 text-lg py-2 capitalize transition-all duration-300 hover:pl-2 dark:border-theme-secondary">
         {name}
       </div>
     </Link>

components/SideNavbar/SideNavbarHeader.tsx

@@ -3,7 +3,7 @@ import Link from 'next/link'
 import { useContext } from 'react'
 import { AiOutlineClose } from 'react-icons/ai'
 import { GlobalContext } from 'context/GlobalContext'
-import Logo from '../logo'
+import Logo from '../logo/logo'
 import { IContext } from 'types'
 
 export const SideNavbarHeader: FC = () => {

components/SkipLink/SkipLink.tsx

@@ -4,7 +4,7 @@ export const SkipLink: FC = () => (
   <div className="z-40 flex absolute left-1/2 transform -translate-x-1/2">
     <a
       href="#main"
-      className="-translate-y-20   focus:transform-none mt-2 flex items-center justify-center gap-2 rounded-2xl border border-dashed border-transparent bg-violet-600 px-6 py-2 text-center text-white"
+      className="-translate-y-20 focus:transform-none mt-2 flex items-center justify-center gap-2 rounded-2xl border border-dashed border-transparent bg-theme-secondary px-6 py-2 text-center text-light-primary"
     >
       Skip to main content
     </a>