Merge branch 'main' into Deep

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}
@@ -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/Searchbar/Searchbar.tsx

@@ -82,8 +82,7 @@ export const Searchbar: React.FC<SearchbarProps> = ({ setSearch }) => {
           />
           <button
             type="submit"
-            aria-role="button"
-            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" aria-hidden="true" />
           </button>

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"

components/SideNavbar/SideNavbarBody.tsx

@@ -1,30 +1,32 @@
 import { FC } from 'react'
-import { Searchbar } from '../Searchbar'
+import { Searchbar } from 'components/Searchbar/Searchbar'
 import useSidebarSearch from 'hooks/useSidebarSearch'
 import classNames from 'classnames'
 import { useTheme } from 'next-themes'
 import { SideNavbarCategoryList } from './SideNavbarCategoryList'
 
 export const SideNavbarBody: FC = () => {
   const { theme } = useTheme()
-
   const { setSearch, searchResults, debouncedSearch } = useSidebarSearch()
 
   return (
-    <div
-      className={classNames(
-        `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-primary-light transiton-all w-full p-4 transition-none ease-in dark:bg-dark">
+    <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">
         <Searchbar setSearch={setSearch} />
       </div>
-      <SideNavbarCategoryList
-        items={searchResults}
-        isSearching={debouncedSearch.length > 0}
-        openByDefault={''}
-      />
+
+      <div
+        className={classNames(
+          theme === 'light' ? 'scrollColorLight' : 'scrollColorDark'
+        )}
+        style={{ maxHeight: 'calc(100vh - 4rem)' }}
+      >
+        <SideNavbarCategoryList
+          items={searchResults}
+          isSearching={debouncedSearch.length > 0}
+          openByDefault={''}
+        />
+      </div>
     </div>
   )
 }

components/TopBar/CategoryDescriptions.ts

@@ -3,6 +3,13 @@ type CategoryDescriptions = {
 }
 
 const categoryDescriptions: CategoryDescriptions = {
+  // devops
+  cicd: 'Continuous integration and continuous delivery (CI/CD) is a set of practices that combines continuous integration (CI) and continuous delivery (CD) to automate the process of software development and deployment.',
+  devopsLifecycle: 'DevOps is a set of practices that combines software development (Dev) and information technology operations (Ops) to shorten the systems development life cycle while delivering features, fixes, and updates frequently in close alignment with business objectives.',
+  devopsMethodologies: 'DevOps methodologies are a set of practices that combine software development and information technology operations to shorten the systems development life cycle while delivering features, fixes, and updates frequently in close alignment with business objectives.',
+  docker: 'Docker is a software platform that allows you to build, test, and deploy applications quickly. Docker packages software into standardized units called containers. These are isolated from one another and bundle their own software, libraries, and configuration files; they can also communicate with each other through well-defined channels.',
+  kubernetes: 'Kubernetes is an open-source container orchestration platform that automates the deployment, scaling, and management of containerized applications.',
+  microservices: 'Microservices are a software development technique—a variant of the service-oriented architecture (SOA) architectural style that structures an application as a collection of loosely coupled services.',
   //frontend
   accessibility: 'Accessibility is the concept of whether a product or service can be used by everyone—however they encounter it. Accessibility laws exist to aid people with disabilities, but designers should try to accommodate all potential users in many contexts of use anyway. ',
   animations: 'Animation is the state of being full of life and energy, like a room full of excited kids at a birthday party. It is a method of photographing successive drawings, models, or even puppets, to create an illusion of movement in a sequence.',
@@ -45,7 +52,7 @@ const categoryDescriptions: CategoryDescriptions = {
   // resources
   blogs: 'The term “blog” is short for “weblog.” Blogs are usually maintained by an individual with regular entries of commentary, descriptions of events, or other material such as graphics or video.',
   ebook: 'An ebook (short for electronic book) is a book publication made available in digital form, consisting of text, images, or both readable on the flat-panel display of computers or other electronic devices.',
-  hosting: 'Web hosting is an online service that makes your content of your website accessible on the internet. When you purchase a hosting plan, you are renting space on a physical server to store all the files and data.',
+  hosting: 'Web hosting is an online service that makes the content of your website accessible on the internet. When you purchase a hosting plan, you are renting space on a physical server to store all the files and data.',
   officialdocs: 'Official docs is short for official documentation. Official documentation is an important resource for users of software products and services as it provides a comprehensive guide to using the software.',
   'project ideas': 'Projects play an important role in your resume. So here is a list of some great projects and their repositories.',
   // youtube

components/TopBar/TopBar.tsx

@@ -4,6 +4,7 @@ import { FaSlackHash, FaInfoCircle } from 'react-icons/fa'
 import PopupDesc from 'components/popup/popupCategoryDesc'
 import { ICategoryData } from 'types'
 import categoryDescriptions from './CategoryDescriptions'
+import { Tooltip } from 'react-tooltip'
 
 export const TopBar: FC<{ className?: string | undefined }> = (props) => {
   const { className } = props
@@ -36,17 +37,24 @@ export const TopBar: FC<{ className?: string | undefined }> = (props) => {
       className={`flex items-center text-xl dark:text-gray-300 ${className}`}
     >
       <FaSlackHash className="mr-2 text-gray-600 dark:text-gray-300" />
-      <span className="flex uppercase text-gray-900 dark:text-gray-100">
+      <span className="text-gray-900 dark:text-gray-100 uppercase">
         {category.split('-').join(' ')}
-        <FaInfoCircle
-          className="ml-4 mt-2 text-sm cursor-pointer"
-          onClick={handleCardClick}
-        />
+      </span>
+      <button
+          data-tooltip-id="info-tooltip"
+          data-tooltip-content="Description"
+          data-tooltip-place="bottom"
+        >
+          <FaInfoCircle
+            className="ml-4 mt-2 text-sm cursor-pointer hover:text-theme-primary"
+            onClick={handleCardClick}
+          />
+        </button>
+        <Tooltip id="info-tooltip" style={{ backgroundColor: '#8b5cf6', fontSize: '13px', paddingLeft: '6px', paddingRight: '6px', paddingTop: '2px', paddingBottom: '2px' }} />
         <PopupDesc
           currentCategory={currentCategory}
           onClose={removeCurrentCard}
         />
-      </span>
     </div>
   )
 }

components/popup/index.tsx → components/popup/popupInfo.tsx

@@ -4,9 +4,9 @@ import { BsGlobe } from 'react-icons/bs'
 import { Backdrop } from 'components/Backdrop/Backdrop'
 import { createPortal } from 'react-dom'
 import useDelayUnmount from 'hooks/useDelayUnmount'
-import { CopyToClipboard } from 'components/CopyToClipboard'
+import { CopyToClipboard } from 'components/CopyToClipboard/CopyToClipboard'
 
-const Popup: React.FC<{
+export const PopupInfo: React.FC<{
   currentCard: IData | null
   onClose: () => void
 }> = ({ currentCard, onClose }) => {
@@ -83,4 +83,3 @@ const Popup: React.FC<{
   )
 }
 
-export default Popup

data/maintainersData.ts

@@ -1,5 +1,6 @@
 export const maintainersData = [
-  { login: 'rupali-codes', name: 'Rupali Codes' },
-  { login: 'CBID2', name: 'CBID2' },
+  { login: 'rupali-codes', name: 'Rupali Haldiya' },
+  { login: 'CBID2', name: 'Christine Belzie' },
   { login: 'ujjawaltyagii', name: 'Ujjawal Tyagi' },
+  { login: 'k-deepak04', name: 'Deepak Singh' },
 ]

database/DevOps/cicd.json

@@ -0,0 +1,9 @@
+[
+    {
+        "name": "Learn CI/CD by building projects",
+        "description": "This is an amazing blog provides projects to help you understand CI/CD.",
+        "url": "https://www.freecodecamp.org/news/what-is-ci-cd/",
+        "category": "DevOps",
+        "subcategory": "cicd"
+    }
+]

database/DevOps/devopsLifecycle.json

@@ -0,0 +1,9 @@
+[
+    {
+        "name": "DevOps Lifecycle",
+        "description": "Learn everything about 7 different phases of the DevOps lifecycle",
+        "url": "https://www.simform.com/blog/devops-lifecycle/",
+        "category": "DevOps",
+        "subcategory": "devopsLifecycle"
+    }
+]