Merge branch 'main' into codebase-structure

CODE_OF_CONDUCT.md

@@ -61,7 +61,7 @@ representative at an online or offline event.
 
 Instances of abusive, harassing, or otherwise unacceptable behavior may be
 reported to the community leaders responsible for enforcement at
-[INSERT CONTACT METHOD].
+[email protected].
 All complaints will be reviewed and investigated promptly and fairly.
 
 All community leaders are obligated to respect the privacy and security of the

components/Breadcrumbs/index.tsx

@@ -10,7 +10,7 @@ const BreadCrumbs: React.FC<ComponentProps> = ({ sections }) => {
       <div className="hidden sm:flex py-3">
         <Link
           href={`/`}
-          className="flex gap-x-2 bg-theme-quinary bg-opacity-20 text-text-primary-light dark:text-text-quaternary text-lg py-0.5 px-2.5 rounded-lg cursor-pointer"
+          className="flex gap-x-2 dark:bg-theme-tertiary/50 border border-theme-secondary/25 bg-theme-primary-light/20 dark:border dark:border-theme-primary/8 text-text-primary-light dark:text-text-quaternary text-lg py-0.5 px-2.5 rounded-lg cursor-pointer"
         >
           <Icons.Home className="h-4 w-4 m-auto text-text-primary-light dark:text-text-quaternary" />
           <div>Home</div>
@@ -22,7 +22,7 @@ const BreadCrumbs: React.FC<ComponentProps> = ({ sections }) => {
           <Link
             key={i}
             href={section.url}
-            className="flex gap-x-2 bg-theme-quinary bg-opacity-20 text-text-primary-light dark:text-text-quaternary text-lg py-0.5 px-2.5 rounded-lg capitalize cursor-pointer"
+            className="flex gap-x-2 border border-theme-secondary/25 bg-theme-primary-light/20 dark:bg-theme-tertiary/50 dark:border dark:border-theme-primary/8 text-text-primary-light dark:text-text-quaternary text-lg py-0.5 px-2.5 rounded-lg capitalize cursor-pointer"
           >
             {section.name?.split('-').join(' ')}
           </Link>

components/Cards/Card.tsx

@@ -7,7 +7,7 @@ import type { IData } from 'types'
 import Bookmark from 'components/Bookmark/Bookmark'
 
 interface CardProps {
-  data: IData,
+  data: IData
   onClick: () => void
 }
 
@@ -27,7 +27,7 @@ export const Card: FC<CardProps> = ({ data, onClick }) => {
   }, [])
 
   return (
-    <article className="z-10 h-full w-full rounded-3xl dark:bg-slate-800 dark:text-text-primary dark:shadow-sm bg-light-white">
+    <article className="z-10 h-full w-full rounded-3xl dark:bg-slate-800 dark:border dark:border-theme-primary/8 dark:text-text-primary dark:shadow-sm bg-theme-primary-light border border border-theme-secondary/25">
       <div className="card-body">
         <header className="flex justify-between items-center gap-2">
           <h2
@@ -48,23 +48,26 @@ export const Card: FC<CardProps> = ({ data, onClick }) => {
             {description}
           </div>
           {isOverflow && (
-            <span onClick={onClick} className="text-sm float-right hover:underline dark:hover:text-theme-primary text-right hover:text-theme-primary dark:text-text-primary">
+            <span
+              onClick={onClick}
+              className="text-sm float-right hover:underline dark:hover:text-theme-primary text-right hover:text-theme-primary dark:text-text-primary"
+            >
               ...Read More
             </span>
           )}
         </div>
         <footer className="grid grid-cols-2 gap-x-4 md:grid-cols-1 lg:grid-cols-2">
-        <CopyToClipboard url={url} />
+          <CopyToClipboard url={url} />
           <a
             onClick={(e) => e.stopPropagation()}
             href={url}
             target="_blank"
             rel="noopener noreferrer"
             className={
-              'mt-2 flex w-full items-center justify-center gap-2 rounded-lg  bg-theme-secondary px-3 py-2 text-center text-light-primary duration-100'
+              'mt-2 flex w-full items-center justify-center gap-2 rounded-lg bg-theme-secondary px-3 py-2 text-center text-light-primary duration-100'
             }
           >
-            <span className='truncate ...'>Visit site</span>
+            <span className="truncate ...">Visit site</span>
             {youtubeRegex.test(url) ? (
               <BsYoutube size="1.3em" />
             ) : subcategory === 'e-book' ? (

components/CopyToClipboard/CopyToClipboard.tsx

@@ -16,7 +16,7 @@ export const CopyToClipboard = ({ url }: CopyToClipboardProps): JSX.Element => {
   }
   return (
     <div
-      className="flex items-center justify-center text-center text-theme-secondary dark:text-white gap-x-2 bg-light-primary dark:bg-light-primary dark:bg-opacity-10 dark:hover:bg-opacity-20 rounded-lg mt-2 cursor-pointer relative py-2 px-2 truncate ..."
+      className="flex items-center justify-center text-center dark:border-none border border-theme-secondary/25 text-theme-secondary dark:text-white gap-x-2 bg-light-primary dark:bg-light-primary dark:bg-opacity-10 dark:hover:bg-opacity-20 rounded-lg mt-2 cursor-pointer relative py-2 px-2 truncate ..."
       onClick={(e) => handleCopy(e)}
     >
       <span className="truncate ...">Copy Link</span>

components/Footer/Footer.tsx

@@ -1,11 +1,7 @@
 import Link from 'next/link'
 import type { FC } from 'react'
-import { useTheme } from 'next-themes'
 
 export const Footer: FC = () => {
-  const { resolvedTheme } = useTheme()
-  const isDarkMode = resolvedTheme === 'dark'
-
   return (
     <footer className="z-10 flex w-full items-baseline justify-center rounded-lg text-center px-2">
       <div className="text-sm leading-7 md:tracking-wide text-center text-black dark:text-theme-secondary-light">
@@ -19,11 +15,7 @@ export const Footer: FC = () => {
             rel="noopener noreferrer"
             aria-label="GitHub Profile of Rupali Haldiya"
           >
-            <span
-              className={`underline mr-1 ${
-                isDarkMode ? 'text-primary-light' : 'theme-tertiary-light'
-              } `}
-            >
+            <span className="underline mr-1 duration-300 transition-all hover:text-theme-secondary">
               Rupali Haldiya
             </span>
           </Link>{' '}
@@ -34,11 +26,7 @@ export const Footer: FC = () => {
             target="_blank"
             aria-label="List of Contributors in LinksHub"
           >
-            <span
-              className={`underline ml-1 ${
-                isDarkMode ? 'text-primary-light' : 'theme-tertiary-light'
-              } `}
-            >
+            <span className="underline ml-1 duration-300 transition-all hover:text-theme-secondary">
               Open Source Community
             </span>
           </Link>

components/Pagination/Pagination.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react'
+import React, { useEffect, useState, useRef } from 'react'
 import { useTheme } from 'next-themes'
 import clsx from 'clsx'
 import { MdArrowForwardIos } from 'react-icons/md'
@@ -20,14 +20,31 @@ export default function Pagination({
 }: PaginationProps) {
   const { resolvedTheme } = useTheme()
   const isDarkMode = resolvedTheme === 'dark'
+  const [scrollingElement, setScrollingElement] = useState<HTMLElement | Window | undefined>()
+  const paginationRef = useRef<HTMLDivElement>(null);
+
   const scrollToTop = () => {
-    window.scrollTo({ top: 0, behavior: 'smooth' })
+    if (scrollingElement) scrollingElement.scrollTo({ top: 0, behavior: 'smooth' })
   }
 
   const changePage = (page: number) => {
     handlePageChange(page)
   }
 
+  useEffect(() => {
+    if (paginationRef.current) {
+      const findClosestScrollElement = (element: HTMLElement | null): HTMLElement | Window => {
+        if (!element) return window
+        const { overflowY } = getComputedStyle(element)
+        const scrollableVariants = ['auto', 'scroll']
+        return scrollableVariants.some(v => overflowY === v)
+            ? element
+            : findClosestScrollElement(element.parentElement)
+      }
+      setScrollingElement(findClosestScrollElement(paginationRef.current))
+    }
+  }, [])
+
   useEffect(() => {
     scrollToTop()
   }, [currentPage])
@@ -37,7 +54,7 @@ export default function Pagination({
   return (
     <>
       {totalPages && totalPages.length > 1 && (
-        <div>
+        <div ref={paginationRef}>
           <div
             className={
               currentPage == totalPages.length && remainderOfCards <= 3

components/Searchbar/Searchbar.tsx

@@ -114,7 +114,7 @@ export const Searchbar: React.FC<SearchbarProps> = ({
       role="search"
     >
       <div className="relative">
-        <div className="relative w-full h-12 flex items-center justify-between">
+        <div className="relative w-full h-12 flex items-center justify-between border border border-theme-secondary/25 dark:border-none rounded-lg">
           <label htmlFor="simple-search" className="sr-only">
             Quick search
           </label>

components/TopBar/CategoryDescriptions.ts

@@ -146,6 +146,8 @@ const categoryDescriptions: CategoryDescriptions = {
     '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 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.',
+  docsgenerator:
+    'The term “doc” is short for “documentation”. Here you can find various Technical Documentation generators.',
   dsa: 'Data Structures and Algorithms play an important role in tech placements. So here is a list of important and great dsa resources',
   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.',

components/TopBar/TopBar.tsx

@@ -46,23 +46,23 @@ export const TopBar: FC<TopBarProps> = ({}) => {
     >
       <Link
         href={'/'}
-        className="gap-x-2 items-center bg-[#EDEDED] bg-opacity-20 px-[10px] py-[6px] rounded-md cursor-pointer hidden md:flex"
+        className="gap-x-2 items-center border border-theme-secondary/25 bg-theme-primary-light/20 bg-opacity-20 dark:bg-theme-tertiary/50 dark:border dark:border-theme-primary/8 px-[10px] py-[6px] rounded-md cursor-pointer hidden md:flex"
       >
         <Icons.Home className="h-4 w-4 m-auto text-text-primary-light dark:text-text-quaternary" />
         <h3>Home</h3>
       </Link>
       <Icons.rxSlash className="hidden md:inline-block" />
       <Link
         href={'/' + categoryNameLink}
-        className="bg-[#EDEDED] bg-opacity-20 px-[10px] py-[6px] rounded-md cursor-pointer hidden md:inline-block"
+        className="bg-theme-primary-light/20 border border-theme-secondary/25 dark:bg-theme-tertiary/50 dark:border dark:border-theme-primary/8 px-[10px] py-[6px] rounded-md cursor-pointer hidden md:inline-block"
       >
         <h3>{capitalizeEachWord(categoryName)}</h3>
       </Link>
       <Icons.rxSlash className="hidden md:inline-block" />
       <Link href={'/' + categoryNameLink} className="flex gap-x-2 items-center">
         <Icons.arrowBack className="md:hidden" />
       </Link>
-      <div className="md:bg-[#EDEDED] md:bg-opacity-20 px-[10px] py-[6px] text-xl md:text-base rounded-md truncate ...">
+      <div className="md:bg-theme-primary-light/20 border border-theme-secondary/25 dark:bg-theme-tertiary/50 dark:border dark:border-theme-primary/8 px-[10px] py-[6px] text-xl md:text-base rounded-md truncate ...">
         <h3>{capitalizeEachWord(cleanedCategory)}</h3>
       </div>
       <button>
@@ -71,7 +71,7 @@ export const TopBar: FC<TopBarProps> = ({}) => {
           data-tooltip-place="bottom"
           data-tooltip-content={description}
           size={30}
-          className=" ml-2 text-sm cursor-pointer bg-[#EDEDED] bg-opacity-20 p-2 rounded-md "
+          className=" ml-2 border border-theme-secondary/25 text-sm cursor-pointer bg-[#EDEDED] bg-opacity-20 dark:bg-theme-tertiary/75 dark:border dark:border-theme-primary/8 p-2 rounded-md "
         />
       </button>
       <CardTooltip theme={theme} />

components/popup/popupInfo.tsx

@@ -21,17 +21,15 @@ export const PopupInfo: React.FC<{
     return null
   }
 
-  // const youtubeRegex = /^(https?:\/\/)?(www\.)?(youtube\.com|youtu\.be)\/.+$/
-
   return (
-    <div className='fixed inset-0 z-50 h-full w-full cursor-pointer bg-black/80'>
+    <div className="fixed inset-0 z-50 h-full w-full cursor-pointer bg-black/80">
       <Backdrop onClick={onClose} />
       {createPortal(
         <div
           onClick={(e) => e.stopPropagation()}
           className={`fixed left-1/2 top-1/2 z-[150] max-w-[500px] -translate-x-1/2 -translate-y-1/2 transition-all ${
             currentCard ? 'animate-scale-appearance' : 'animate-scale-hide'
-          } flex h-fit w-[90%] flex-col justify-between gap-5 overflow-hidden rounded-2xl bg-light-primary px-5 py-10 dark:bg-slate-800`}
+          } flex h-fit w-[90%] flex-col justify-between gap-5 overflow-hidden rounded-2xl bg-light-primary border-2 border-theme-secondary/50 px-5 py-10 dark:bg-slate-800 dark:border dark:border-theme-primary/8`}
           role="dialog"
           title={`${currentCard?.name ?? 'Card'} Popup`}
         >
@@ -51,40 +49,9 @@ export const PopupInfo: React.FC<{
                   <IoClose />
                 </p>
               </div>
-              {/* <div className="max-w-[25]%] mx-3 text-xsm text-theme-secondary capitalize flex items-center gap-2">
-                <CopyToClipboard url={currentCard?.url ?? ''} />
-                {currentCard?.language ? (
-                  <>
-                    <BsGlobe />
-                    {currentCard?.language}
-                  </>
-                ) : (
-                  ''
-                )}
-              </div> */}
             </div>
             <p className="">{currentCard?.description}</p>
           </div>
-          {/* <div className="card-actions justify-end mt-auto">
-            <a
-              onClick={(e) => e.stopPropagation()}
-              href={currentCard?.url}
-              target="_blank"
-              rel="noreferrer"
-              className="mt-2 px-6 py-2 text-white text-center bg-theme-secondary rounded-2xl w-full hover:bg-transparent hover:text-theme-secondary border border-dashed border-transparent duration-100 hover:border-theme-primary flex items-center justify-center bottom-0 relative gap-2"
-            >
-              Visit Site
-              {youtubeRegex.test(currentCard?.url || '') ? (
-                <BsYoutube size="1.3em" />
-              ) : currentCard?.subcategory === 'e-book' ? (
-                <AiOutlineRead size="1.3em" />
-              ) : currentCard?.subcategory === 'technical-writing-tools' ? (
-                <BsPen size="1.2em" />
-              ) : (
-                <MdArticle size="1.3em" />
-              )}
-            </a>
-          </div> */}
         </div>,
         overlayRoot
       )}

database/cybersecurity/defensive_security.json

@@ -16,14 +16,14 @@
     {
       "name": "Security Information and Event Management (SIEM) Solutions",
       "description": "Explore SIEM solutions, which are essential for monitoring and responding to security incidents in real time.",
-      "url": "https://www.gartner.com/reviews/market/security-information-and-event-management-siem",
+      "url": "https://www.gartner.com/reviews/market/security-information-event-management",
       "category": "cyber-security",
       "subcategory": "defensive-security"
     },
     {
       "name": "Incident Response and Threat Hunting",
       "description": "Learn about incident response and threat hunting techniques, crucial for identifying and mitigating security incidents.",
-      "url": "https://www.sans.org/course/incident-response-and-threat-hunting",
+      "url": "https://www.sans.org/cyber-security-courses/advanced-incident-response-threat-hunting-training/",
       "category": "cyber-security",
       "subcategory": "defensive-security"
     }

database/cybersecurity/web_application_security.json

@@ -1,38 +1,51 @@
 [
-    {
-      "name": "Web Application Penetration Testing Fundamentals",
-      "description": "Learn the basics of web application penetration testing, including common vulnerabilities and testing methodologies.",
-      "url": "https://www.owasp.org/index.php/Web_Application_Penetration_Testing",
-      "category": "cyber-security",
-      "subcategory": "web-security"
-    },
-    {
-      "name": "Certified Web Application Penetration Tester (CWAPT) Certification",
-      "description": "Information on the CWAPT certification, a specialized certification for professionals focusing on web application penetration testing.",
-      "url": "https://mile2.com/web-application-penetration-tester-cwapt.html",
-      "category": "cyber-security",
-      "subcategory": "web-security"
-    },
-    {
-      "name": "Burp Suite",
-      "description": "Explore Burp Suite, a popular web application security testing tool that assists in identifying and exploiting vulnerabilities.",
-      "url": "https://portswigger.net/web-security",
-      "category": "cyber-security",
-      "subcategory": "web-security"
-    },
-    {
-      "name": "OWASP AppSec Conferences",
-      "description": "Information about the OWASP AppSec conferences, which focus on web application security, including penetration testing techniques.",
-      "url": "https://owasp.org/",
-      "category": "cyber-security",
-      "subcategory": "web-security"
-    },
-    {
-      "name": "SQL Injection Testing",
-      "description": "Learn about SQL injection testing techniques used to identify and exploit SQL injection vulnerabilities in web applications.",
-      "url": "https://portswigger.net/web-security/sql-injection",
-      "category": "cyber-security",
-      "subcategory": "web-security"
-    }
-  ]
-
+  {
+    "name": "Web Application Penetration Testing Fundamentals",
+    "description": "Learn the basics of web application penetration testing, including common vulnerabilities and testing methodologies.",
+    "url": "https://www.owasp.org/index.php/Web_Application_Penetration_Testing",
+    "category": "cyber-security",
+    "subcategory": "web-security"
+  },
+  {
+    "name": "Certified Web Application Penetration Tester (CWAPT) Certification",
+    "description": "Information on the CWAPT certification, a specialized certification for professionals focusing on web application penetration testing.",
+    "url": "https://mile2.com/web-application-penetration-tester-cwapt.html",
+    "category": "cyber-security",
+    "subcategory": "web-security"
+  },
+  {
+    "name": "Burp Suite",
+    "description": "Explore Burp Suite, a popular web application security testing tool that assists in identifying and exploiting vulnerabilities.",
+    "url": "https://portswigger.net/web-security",
+    "category": "cyber-security",
+    "subcategory": "web-security"
+  },
+  {
+    "name": "OWASP AppSec Conferences",
+    "description": "Information about the OWASP AppSec conferences, which focus on web application security, including penetration testing techniques.",
+    "url": "https://owasp.org/",
+    "category": "cyber-security",
+    "subcategory": "web-security"
+  },
+  {
+    "name": "SQL Injection Testing",
+    "description": "Learn about SQL injection testing techniques used to identify and exploit SQL injection vulnerabilities in web applications.",
+    "url": "https://portswigger.net/web-security/sql-injection",
+    "category": "cyber-security",
+    "subcategory": "web-security"
+  },
+  {
+    "name": "Trivy",
+    "description": "Trivy is the most popular open source security scanner, reliable, fast, and easy to use. It's a container security scanner designed specifically for Docker images.",
+    "url": "https://trivy.dev",
+    "category": "cyber-security",
+    "subcategory": "web-security"
+  },
+  {
+    "name": "Snyk",
+    "description": "Snyk specializes in JavaScript security. It is a developer-first security solution that helps you use open source code and stay secure. Continuously find and fix vulnerabilities for npm, Maven, NuGet, RubyGems, PyPI and more.",
+    "url": "https://snyk.io/",
+    "category": "cyber-security",
+    "subcategory": "web-security"
+  }
+]