Merge branch 'main' into deep

.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/SocialMedia/SocialMediaIconsList.tsx

@@ -35,7 +35,7 @@ export const SocialMediaIconsList: FC<{
             <IconContext.Provider
               value={{ className: 'shared-class', size: '24' }}
             >
-              <FaDiscord className="hover:text-discord transition duration-300 ease-in-out" />
+              <FaDiscord className="hover:text-violet-500 transition duration-300 ease-in-out" />
             </IconContext.Provider>
           </a>
         </li>
@@ -51,7 +51,7 @@ export const SocialMediaIconsList: FC<{
             <IconContext.Provider
               value={{ className: 'shared-class', size: '24' }}
             >
-              <FaGithub className="hover:text-github transition duration-300 ease-in-out" />
+              <FaGithub className="hover:text-violet-500 transition duration-300 ease-in-out" />
             </IconContext.Provider>
           </a>
         </li>
@@ -67,7 +67,7 @@ export const SocialMediaIconsList: FC<{
             <IconContext.Provider
               value={{ className: 'shared-class', size: '24' }}
             >
-              <FaTwitter className="hover:text-twitter transition duration-300 ease-in-out" />
+              <FaTwitter className="hover:text-violet-500 transition duration-300 ease-in-out" />
             </IconContext.Provider>
           </a>
         </li>
@@ -85,9 +85,3 @@ export const SocialMediaIconsList: FC<{
     </ul>
   )
 }
-
-// colors: {
-//   discord: '#7289DA',
-//   github: '#211F1F',
-//   twitter: '#1DA1F2',
-// },

data/maintainersData.ts

@@ -0,0 +1,5 @@
+export const maintainersData = [
+  { login: 'rupali-codes', name: 'Rupali Codes' },
+  { login: 'CBID2', name: 'CBID2' },
+  { login: 'ujjawaltyagii', name: 'Ujjawal Tyagi' },
+]

database/backend/authentication.json

@@ -19,5 +19,12 @@
     "url": "https://appwrite.io/docs/authentication",
     "category": "backend",
     "subcategory": "authentication"
+  },
+  {
+    "name": "Passport Authentication",
+    "description": "Passport is authentication middleware for Node.js. Extremely flexible and modular, this tool can be unobtrusively dropped in to any Express-based web application. It also provides a comprehensive set of support authentication strategies for usernames, passwords, Facebook, Twitter, and more.",
+    "url": "https://www.passportjs.org/",
+    "category": "backend",
+    "subcategory": "authentication"
   }
-]
+]

database/frontend/react.json

@@ -1,15 +1,15 @@
 [
   {
     "name": "React js",
-    "description": "Free online course for learning react js",
+    "description": "Free online course for learning React js",
     "url": "https://scrimba.com/learn/learnreact#",
     "category": "frontend",
     "subcategory": "react",
     "language": "english"
   },
   {
     "name": "React js",
-    "description": "Free React course in order to learn fundamentals of React by FreeCodeCamp. This course is beginner friendly and easy to understand and to apply in large codebase.",
+    "description": "This freecodecamp course is beginner friendly and provides information that developers can apply in large codebases.",
     "url": "https://youtu.be/4UZrsTqkcW4",
     "category": "frontend",
     "subcategory": "react",
@@ -84,5 +84,12 @@
     "url": "https://youtu.be/nDGA3km5He4",
     "category": "frontend",
     "subcategory": "react"
+  },
+  {
+    "name": "DEVHINTS.IO React.js Cheatsheet",
+    "description": "This React.js cheatsheet gives comprehensive information on the language's fundamental concepts and implements a knowledge management approach to help developers understand them.",
+    "url": "https://devhints.io/react",
+    "category": "frontend",
+    "subcategory": "react"
   }
 ]

database/resources/blogs.json

@@ -145,5 +145,12 @@
     "url": "https://app.daily.dev/",
     "category": "resources",
     "subcategory": "blogs"
+  },
+  {
+    "name": "Notion",
+    "description": "A new tool that blends your everyday work apps into one. It's the all-in-one workspace for you and your team.",
+    "url": "https://www.notion.so/personal",
+    "category": "resources",
+    "subcategory": "blogs"
   }
-]
+]

database/resources/official-docs.json

@@ -54,5 +54,12 @@
     "url": "https://nuxtjs.org/",
     "category": "resources",
     "subcategory": "officialdocs"
+  },
+  {
+    "name": "Node.js",
+    "description": "Node.js is built on top of the Google Chrome V8 JavaScript engine, and it's mainly used to create web servers - but it can be used for other purposes too.",
+    "url": "https://nodejs.dev/en/learn/",
+    "category": "resources",
+    "subcategory": "officialdocs"
   }
 ]

database/youtube/data-structures.json

@@ -105,10 +105,18 @@
   },
   {
     "name": "TAP ACADEMY",
-    "description": "A well-structured DSA playlist from beginner to advanced level in Java",
+    "description": "A well-structured DSA playlist that provides beginner to advanced level tutorials in Java.",
     "url": "https://youtube.com/playlist?list=PLU83Ru7iGtAvP1rqt65MCDSBPFCzUKGXG",
     "category": "youtube",
     "subcategory": "data-structures",
     "language": "english"
+  },
+  {
+    "name": "CODING NINJAS",
+    "description": "This channel provides DSA course in Python from beginner to advance level.",
+    "url": "https://youtube.com/playlist?list=PLrk5tgtnMN6TYBW0-U4YhIRyYEVpqVEnJ",
+    "category": "youtube",
+    "subcategory": "data-structures",
+    "language": "english"
   }
 ]

docker-compose.yml

@@ -0,0 +1,15 @@
+version: '3.9'
+services:
+  app:
+    build: .
+    ports:
+      - "3000:3000"
+    expose:
+      - 3000
+    volumes:
+      - .:/app:rw
+    command:
+      - pnpm
+      - run
+      - dev
+

pages/contributors.tsx

@@ -2,6 +2,9 @@ import { FC } from 'react'
 import Image from 'next/image'
 import Link from 'next/link'
 import type { GetStaticProps } from 'next'
+import { useTheme } from 'next-themes'
+import { maintainersData } from '../data/maintainersData'
+import { useState } from 'react'
 
 interface Contributor {
   id: number
@@ -60,6 +63,8 @@ export const getStaticProps: GetStaticProps<{
 const ContributorsPage: FC<{ contributors: Contributor[] }> = ({
   contributors,
 }) => {
+  const [hoveredContributor, setHoveredContributor] = useState<string>('')
+  const { resolvedTheme } = useTheme()
   const filteredContributors = contributors.filter(
     (contributor) => contributor.contributions >= 6
   )
@@ -77,6 +82,12 @@ const ContributorsPage: FC<{ contributors: Contributor[] }> = ({
     className: buttonStyles,
   }
 
+  const isDarkMode = resolvedTheme === 'dark'
+
+  const imageInfo = `image-effect w-9 h-9 rounded-full bg-gray-100 border text-lg text-gray-900 pl-[9px] pt-1 ${
+    isDarkMode ? '' : 'border-dashed border-violet-400'
+  } `
+
   return (
     <div>
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5 mt-8">
@@ -85,14 +96,33 @@ const ContributorsPage: FC<{ contributors: Contributor[] }> = ({
             key={contributor.id}
             className="bg-gray-100 rounded-3xl py-5 px-2 border border-dashed border-violet-500 dark:border-violet-400 shadow-lg dark:bg-gray-900 dark:text-gray-300 dark:shadow-sm flex flex-col hover:scale-105 transition-transform duration-300 cursor-pointer m-1"
           >
-            <div className="flex justify-center">
+            <div className="flex justify-center image-wrapper">
               <Image
                 src={contributor.avatar_url}
                 alt={contributor.login}
                 width={110}
                 height={110}
                 className=" rounded-full mb-4 border-2 border-violet-500 dark:border-violet-400 transition-transform duration-300 hover:scale-105 hover:border-dotted m-2"
               />
+              <span
+                className={imageInfo}
+                onMouseEnter={() => setHoveredContributor(contributor.login)}
+                onMouseLeave={() => setHoveredContributor('')}
+              >
+                {maintainersData.some(
+                  (data) => data.login === contributor.login
+                ) ? (
+                  hoveredContributor === contributor.login ? (
+                    <span>Maintainer</span>
+                  ) : (
+                    <span>M</span>
+                  )
+                ) : hoveredContributor === contributor.login ? (
+                  <span>Contributor</span>
+                ) : (
+                  <span>C</span>
+                )}
+              </span>
             </div>
             <div className="text-center">
               <div className="text-2xl text-violet-600 dark:text-violet-400 m-2">

styles/globals.css

@@ -170,8 +170,33 @@ pre {
   scrollbar-width: thin;
   scrollbar-color: var(--scroll-thumb) var(--scroll-track);
 }
-@media (min-width:597px) and (max-width:800px){
-    .grid-cols-1 {
-      grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
+@media (min-width: 597px) and (max-width: 800px) {
+  .grid-cols-1 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
   }
+}
+
+.image-wrapper {
+  position: relative;
+}
+
+.image-effect {
+  position: relative;
+  top: 20px;
+  right: 15px;
+}
+
+.image-effect:hover span {
+  position: absolute;
+  top: -2px;
+  left: -1px;
+  white-space: nowrap;
+  padding: 0.3rem 1rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+  background-color: #6b46c1;
+  color: white;
+  border-radius: 2rem;
+  border-top-left-radius: 2rem;
+  border-bottom-left-radius: 2rem;
+}

tailwind.config.js

@@ -7,11 +7,6 @@ module.exports = {
   ],
   theme: {
     extend: {
-      colors: {
-        discord: '#7289DA',
-        github: '#211F1F',
-        twitter: '#1DA1F2',
-      },
       screens: {
         xs: '200px',
       },