Merge pull request #1654 from rupali-codes/filter-url

components/Footer/Footer.tsx

@@ -6,10 +6,6 @@ export const Footer: FC = () => {
   const { resolvedTheme } = useTheme()
   const isDarkMode = resolvedTheme === 'dark'
 
-  const nameStyles = `underline ${
-    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 text-sm text-center px-2 py-2">
       <p className="leading-7 md:tracking-wide text-center text-black dark:text-theme-primary ">
@@ -21,7 +17,13 @@ export const Footer: FC = () => {
           rel="noopener noreferrer"
           aria-label="GitHub Profile of Rupali Haldiya"
         >
-          <span className={nameStyles}>Rupali Haldiya</span>
+          <span
+            className={`underline ${
+              isDarkMode ? 'text-light-primary' : 'text-theme-secondary'
+            } `}
+          >
+            Rupali Haldiya
+          </span>
         </Link>{' '}
         and{' '}
         <Link
@@ -30,7 +32,13 @@ export const Footer: FC = () => {
           target="_blank"
           aria-label="List of Contributors in LinksHub"
         >
-          <span className={nameStyles + " flex justify-center"}>Open Source Community</span>
+          <span
+            className={`underline ${
+              isDarkMode ? 'text-light-primary' : 'text-theme-secondary'
+            } `}
+          >
+            Open Source Community
+          </span>
         </Link>
       </p>
     </footer>

components/SideNavbar/SideNavbarCategory.tsx

@@ -1,7 +1,8 @@
-import { FC, useState } from 'react'
+import { FC, useState, useEffect } from 'react'
 import { FaAngleDown } from 'react-icons/fa'
 import { SideNavbarElement } from './SideNavbarElement'
 import type { ISidebar } from '../../types'
+import Link from 'next/link'
 
 export const SideNavbarCategory: FC<{
   categoryData: ISidebar
@@ -14,28 +15,35 @@ export const SideNavbarCategory: FC<{
     .sort((a, b) => (a.name.toUpperCase() < b.name.toUpperCase() ? -1 : 1))
     .map((subcategoryData, i) => (
       <li className="-ml-0.5" key={i}>
-        <SideNavbarElement {...subcategoryData} />
+        <SideNavbarElement category={category} subcat={subcategoryData} />
       </li>
     ))
 
+  useEffect(() => {
+    setIsOpen(expand)
+  }, [expand])
+
   const handleToggle = () => {
     setIsOpen(!isOpen)
   }
 
   return (
     <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
+      <Link
         className="flex w-full cursor-pointer justify-between py-2"
         onClick={handleToggle}
         aria-label="toggle category"
+        href={`/${category}`}
       >
-        <h1 className="font-bold uppercase">{category}</h1>
+        <h1 className="font-bold uppercase w-4/5 truncate">
+          {category.split('-').join(' ')}
+        </h1>
         <FaAngleDown
           className={`${
             isOpen && 'rotate-180'
           } self-center transition duration-300 ease-in-out`}
         />
-      </button>
+      </Link>
       <div
         className={`overflow-hidden transition-all duration-500 ease-in-out max-h-0 ${
           isOpen ? 'max-h-screen' : ''

components/SideNavbar/SideNavbarCategoryList.tsx

@@ -1,12 +1,23 @@
-import React, { FC } from 'react'
+import React, { FC, useEffect, useState } from 'react'
 import type { SubCategories } from '../../types'
 import { sidebarData } from 'database/data'
 import { SideNavbarCategory } from './SideNavbarCategory'
+import { useRouter } from 'next/router'
 
 export const SideNavbarCategoryList: FC<{
   query: string
 }> = ({ query }) => {
   const categoriesList = getFilteredCategoryList(query)
+  const router = useRouter()
+  const [category, setCategory] = useState<string | undefined>('')
+
+  useEffect(() => {
+    const cat: string | undefined = router.query.category as string | undefined
+
+    if (cat !== undefined) {
+      setCategory(cat)
+    }
+  }, [router.query.category])
 
   if (categoriesList.length === 0) {
     return (
@@ -25,7 +36,7 @@ export const SideNavbarCategoryList: FC<{
           <SideNavbarCategory
             key={categoryData.category}
             categoryData={categoryData}
-            expand={query.length > 0}
+            expand={query.length > 0 || category === categoryData.category}
           />
         ))}
       </React.Fragment>

components/SideNavbar/SideNavbarElement.tsx

@@ -1,16 +1,17 @@
+import { FC } from 'react'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { useContext } from 'react'
 import { GlobalContext } from '../../context/GlobalContext'
 import { SubCategories } from '../../types'
 
-export const SideNavbarElement = ({ name, url }: SubCategories) => {
+export const SideNavbarElement: FC<{category: string, subcat: SubCategories}> = ({category, subcat}) => {
   const router = useRouter()
+  const { name, url } = subcat
   const { closeNav } = useContext(GlobalContext)
-
   return (
     <Link
-      href={url}
+      href={`/${category}${url}`}
       aria-label="Side Navbar Elements"
       onClick={closeNav}
       className={`${

components/TopBar/TopBar.tsx

@@ -19,12 +19,20 @@ export const TopBar: FC<TopBarProps> = ({ className }) => {
     null
   )
   const router = useRouter()
-  const category = router.asPath.replace('/', '')
-  const categoryName = category.split('-').join(' ')
+  const category = router.asPath
+  const categoryName = category.split('/')[1].split('-').join(' ')
+  const subcategoryName = category?.split('/')[2]?.split('-').join(' ')
   const regEx = /[ `!@#$%^&*()_+\=\[\]{};':"\\|,.<>\/?~]/g
-   const cleanedCategory = category
-    .replaceAll(regEx, ' ')
-    .replaceAll('search query ', '')
+  let cleanedCategory = ''
+  if (subcategoryName) {
+    cleanedCategory = subcategoryName
+      .replaceAll(regEx, ' ')
+      .replaceAll('search query ', '')
+  } else {
+    cleanedCategory = categoryName
+      .replaceAll(regEx, ' ')
+      .replaceAll('search query ', '')
+  }
 
   useEffect(() => {
     if (results > 0) {
@@ -50,79 +58,81 @@ export const TopBar: FC<TopBarProps> = ({ className }) => {
   const removeCurrentCard: () => void = () => {
     setCurrentCategory(null)
   }
-
+  
   return (
     <>
-      {regEx.test(category) ? (
-        <div
-          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">
-            {isSearchFound
-              ? `${cleanedCategory}`
-              : `No Results Found`}
-          </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}
-            />
-        </div>
-      ) : (
-        <div
-          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">
-            {category.split('-').join(' ')}
-          </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}
-            />         
-        </div>
+      {subcategoryName && (
+        <>
+          {isSearchFound ? (
+            <div
+              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">
+                {isSearchFound ? `${cleanedCategory}` : `No Results Found`}
+              </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}
+              />
+            </div>
+          ) : (
+            <div
+              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">
+                {subcategoryName}
+              </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}
+              />
+            </div>
+          )}
+        </>
       )}
     </>
   )

database/artificial_intelligence/artificial-intelligence.json

@@ -3,7 +3,7 @@
         "name": "An Introduction to Artificial Intelligence",
         "description": "Taught by Prof. Mausam from IIT Delhi, this course offers a self-paced learning experience covering problem modeling, AI models, and algorithms. It prepares students for advanced AI courses with 80+ lectures, video recordings, lecture notes, and practice problems. It's an excellent starting point to explore the basics of AI.",
         "url": "https://archive.nptel.ac.in/courses/106/102/106102220/",
-        "category": "artificial intelligence",
+        "category": "ai",
         "subcategory": "artificial-intelligence"
     }
 ]

database/artificial_intelligence/data-science.json

@@ -3,28 +3,28 @@
     "name": "KDnuggets",
     "description": "KDnuggets is a popular data science website that provides news, tutorials, and resources.",
     "url": "https://www.kdnuggets.com/",
-    "category": "artificial intelligence",
+    "category": "ai",
     "subcategory": "data-science"
   },
   {
     "name": "Datacamp Tutorials",
     "description": "Provides tutorials for aspirational full stack Data Scientists.",
     "url": "https://www.datacamp.com/tutorial",
-    "category": "artificial intelligence",
+    "category": "ai",
     "subcategory": "data-science"
   },
   {
     "name": "Analytics Vidhya",
     "description": "Analytics Vidhya is a platform for data science enthusiasts, offering tutorials, competitions, and community support.",
     "url": "https://www.analyticsvidhya.com/",
-    "category": "artificial intelligence",
+    "category": "ai",
     "subcategory": "data-science"
   },
   {
     "name": "Kaggle",
     "description": "Kaggle is an online platform that hosts data science competitions. It's also where data scientists and machine learning practitioners worldwide come and network with each other.",
     "url": "https://www.kaggle.com/",
-    "category": "artificial intelligence",
+    "category": "ai",
     "subcategory": "data-science"
   }
 ]

database/artificial_intelligence/deep-learning.json

@@ -3,7 +3,7 @@
     "name": "Distill",
     "description": "A platform that focuses on explaining and visualizing complex concepts in deep learning, providing in-depth articles, tutorials, and interactive visualizations to help understand and explore deep learning techniques.",
     "url": "https://distill.pub/",
-    "category": "artificial intelligence",
+    "category": "ai",
     "subcategory": "deep-learning"
   }
 ]