Skip to content

Commit cd18e28

Browse files
CBID2CBID2
authored
Merge pull request #1654 from rupali-codes/filter-url
2 parents 28318e2 + 625a99a commit cd18e28

34 files changed

+358
-265
lines changed

‎components/Footer/Footer.tsx‎

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,6 @@ export const Footer: FC = () => {
66
const { resolvedTheme } = useTheme()
77
const isDarkMode = resolvedTheme === 'dark'
88

9-
const nameStyles = `underline ${
10-
isDarkMode ? 'text-light-primary' : 'text-theme-secondary'
11-
} `
12-
139
return (
1410
<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">
1511
<p className="leading-7 md:tracking-wide text-center text-black dark:text-theme-primary ">
@@ -21,7 +17,13 @@ export const Footer: FC = () => {
2117
rel="noopener noreferrer"
2218
aria-label="GitHub Profile of Rupali Haldiya"
2319
>
24-
<span className={nameStyles}>Rupali Haldiya</span>
20+
<span
21+
className={`underline ${
22+
isDarkMode ? 'text-light-primary' : 'text-theme-secondary'
23+
} `}
24+
>
25+
Rupali Haldiya
26+
</span>
2527
</Link>{' '}
2628
and{' '}
2729
<Link
@@ -30,7 +32,13 @@ export const Footer: FC = () => {
3032
target="_blank"
3133
aria-label="List of Contributors in LinksHub"
3234
>
33-
<span className={nameStyles + " flex justify-center"}>Open Source Community</span>
35+
<span
36+
className={`underline ${
37+
isDarkMode ? 'text-light-primary' : 'text-theme-secondary'
38+
} `}
39+
>
40+
Open Source Community
41+
</span>
3442
</Link>
3543
</p>
3644
</footer>

‎components/SideNavbar/SideNavbarCategory.tsx‎

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
1-
import { FC, useState } from 'react'
1+
import { FC, useState, useEffect } from 'react'
22
import { FaAngleDown } from 'react-icons/fa'
33
import { SideNavbarElement } from './SideNavbarElement'
44
import type { ISidebar } from '../../types'
5+
import Link from 'next/link'
56

67
export const SideNavbarCategory: FC<{
78
categoryData: ISidebar
@@ -14,28 +15,35 @@ export const SideNavbarCategory: FC<{
1415
.sort((a, b) => (a.name.toUpperCase() < b.name.toUpperCase() ? -1 : 1))
1516
.map((subcategoryData, i) => (
1617
<li className="-ml-0.5" key={i}>
17-
<SideNavbarElement {...subcategoryData} />
18+
<SideNavbarElement category={category} subcat={subcategoryData} />
1819
</li>
1920
))
2021

22+
useEffect(() => {
23+
setIsOpen(expand)
24+
}, [expand])
25+
2126
const handleToggle = () => {
2227
setIsOpen(!isOpen)
2328
}
2429

2530
return (
2631
<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">
27-
<button
32+
<Link
2833
className="flex w-full cursor-pointer justify-between py-2"
2934
onClick={handleToggle}
3035
aria-label="toggle category"
36+
href={`/${category}`}
3137
>
32-
<h1 className="font-bold uppercase">{category}</h1>
38+
<h1 className="font-bold uppercase w-4/5 truncate">
39+
{category.split('-').join(' ')}
40+
</h1>
3341
<FaAngleDown
3442
className={`${
3543
isOpen && 'rotate-180'
3644
} self-center transition duration-300 ease-in-out`}
3745
/>
38-
</button>
46+
</Link>
3947
<div
4048
className={`overflow-hidden transition-all duration-500 ease-in-out max-h-0 ${
4149
isOpen ? 'max-h-screen' : ''

‎components/SideNavbar/SideNavbarCategoryList.tsx‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,23 @@
1-
import React, { FC } from 'react'
1+
import React, { FC, useEffect, useState } from 'react'
22
import type { SubCategories } from '../../types'
33
import { sidebarData } from 'database/data'
44
import { SideNavbarCategory } from './SideNavbarCategory'
5+
import { useRouter } from 'next/router'
56

67
export const SideNavbarCategoryList: FC<{
78
query: string
89
}> = ({ query }) => {
910
const categoriesList = getFilteredCategoryList(query)
11+
const router = useRouter()
12+
const [category, setCategory] = useState<string | undefined>('')
13+
14+
useEffect(() => {
15+
const cat: string | undefined = router.query.category as string | undefined
16+
17+
if (cat !== undefined) {
18+
setCategory(cat)
19+
}
20+
}, [router.query.category])
1021

1122
if (categoriesList.length === 0) {
1223
return (
@@ -25,7 +36,7 @@ export const SideNavbarCategoryList: FC<{
2536
<SideNavbarCategory
2637
key={categoryData.category}
2738
categoryData={categoryData}
28-
expand={query.length > 0}
39+
expand={query.length > 0 || category === categoryData.category}
2940
/>
3041
))}
3142
</React.Fragment>

‎components/SideNavbar/SideNavbarElement.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,17 @@
1+
import { FC } from 'react'
12
import Link from 'next/link'
23
import { useRouter } from 'next/router'
34
import { useContext } from 'react'
45
import { GlobalContext } from '../../context/GlobalContext'
56
import { SubCategories } from '../../types'
67

7-
export const SideNavbarElement = ({ name, url }: SubCategories) => {
8+
export const SideNavbarElement: FC<{category: string, subcat: SubCategories}> = ({category, subcat}) => {
89
const router = useRouter()
10+
const { name, url } = subcat
911
const { closeNav } = useContext(GlobalContext)
10-
1112
return (
1213
<Link
13-
href={url}
14+
href={`/${category}${url}`}
1415
aria-label="Side Navbar Elements"
1516
onClick={closeNav}
1617
className={`${

‎components/TopBar/TopBar.tsx‎

Lines changed: 86 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -19,12 +19,20 @@ export const TopBar: FC<TopBarProps> = ({ className }) => {
1919
null
2020
)
2121
const router = useRouter()
22-
const category = router.asPath.replace('/', '')
23-
const categoryName = category.split('-').join(' ')
22+
const category = router.asPath
23+
const categoryName = category.split('/')[1].split('-').join(' ')
24+
const subcategoryName = category?.split('/')[2]?.split('-').join(' ')
2425
const regEx = /[ `!@#$%^&*()_+\=\[\]{};':"\\|,.<>\/?~]/g
25-
const cleanedCategory = category
26-
.replaceAll(regEx, ' ')
27-
.replaceAll('search query ', '')
26+
let cleanedCategory = ''
27+
if (subcategoryName) {
28+
cleanedCategory = subcategoryName
29+
.replaceAll(regEx, ' ')
30+
.replaceAll('search query ', '')
31+
} else {
32+
cleanedCategory = categoryName
33+
.replaceAll(regEx, ' ')
34+
.replaceAll('search query ', '')
35+
}
2836

2937
useEffect(() => {
3038
if (results > 0) {
@@ -50,79 +58,81 @@ export const TopBar: FC<TopBarProps> = ({ className }) => {
5058
const removeCurrentCard: () => void = () => {
5159
setCurrentCategory(null)
5260
}
53-
61+
5462
return (
5563
<>
56-
{regEx.test(category) ? (
57-
<div
58-
className={`flex items-center text-xl dark:text-gray-300 ${className}`}
59-
>
60-
<FaSlackHash className="mr-2 text-gray-600 dark:text-gray-300" />
61-
<span className="flex uppercase text-gray-900 dark:text-gray-100">
62-
{isSearchFound
63-
? `${cleanedCategory}`
64-
: `No Results Found`}
65-
</span>
66-
<button
67-
data-tooltip-id="info-tooltip"
68-
data-tooltip-content="Description"
69-
data-tooltip-place="bottom"
70-
>
71-
<FaInfoCircle
72-
className="ml-4 mt-2 text-sm cursor-pointer hover:text-theme-primary"
73-
onClick={handleCardClick}
74-
/>
75-
</button>
76-
<Tooltip
77-
id="info-tooltip"
78-
style={{
79-
backgroundColor: '#8b5cf6',
80-
fontSize: '13px',
81-
paddingLeft: '6px',
82-
paddingRight: '6px',
83-
paddingTop: '2px',
84-
paddingBottom: '2px',
85-
}}
86-
/>
87-
<PopupDesc
88-
currentCategory={currentCategory}
89-
onClose={removeCurrentCard}
90-
/>
91-
</div>
92-
) : (
93-
<div
94-
className={`flex items-center text-xl dark:text-gray-300 ${className}`}
95-
>
96-
<FaSlackHash className="mr-2 text-gray-600 dark:text-gray-300" />
97-
<span className="flex uppercase text-gray-900 dark:text-gray-100">
98-
{category.split('-').join(' ')}
99-
</span>
100-
<button
101-
data-tooltip-id="info-tooltip"
102-
data-tooltip-content="Description"
103-
data-tooltip-place="bottom"
104-
>
105-
<FaInfoCircle
106-
className="ml-4 mt-2 text-sm cursor-pointer hover:text-theme-primary"
107-
onClick={handleCardClick}
108-
/>
109-
</button>
110-
<Tooltip
111-
id="info-tooltip"
112-
style={{
113-
backgroundColor: '#8b5cf6',
114-
fontSize: '13px',
115-
paddingLeft: '6px',
116-
paddingRight: '6px',
117-
paddingTop: '2px',
118-
paddingBottom: '2px',
119-
}}
120-
/>
121-
<PopupDesc
122-
currentCategory={currentCategory}
123-
onClose={removeCurrentCard}
124-
/>
125-
</div>
64+
{subcategoryName && (
65+
<>
66+
{isSearchFound ? (
67+
<div
68+
className={`flex items-center text-xl dark:text-gray-300 ${className}`}
69+
>
70+
<FaSlackHash className="mr-2 text-gray-600 dark:text-gray-300" />
71+
<span className="flex uppercase text-gray-900 dark:text-gray-100">
72+
{isSearchFound ? `${cleanedCategory}` : `No Results Found`}
73+
</span>
74+
<button
75+
data-tooltip-id="info-tooltip"
76+
data-tooltip-content="Description"
77+
data-tooltip-place="bottom"
78+
>
79+
<FaInfoCircle
80+
className="ml-4 mt-2 text-sm cursor-pointer hover:text-theme-primary"
81+
onClick={handleCardClick}
82+
/>
83+
</button>
84+
<Tooltip
85+
id="info-tooltip"
86+
style={{
87+
backgroundColor: '#8b5cf6',
88+
fontSize: '13px',
89+
paddingLeft: '6px',
90+
paddingRight: '6px',
91+
paddingTop: '2px',
92+
paddingBottom: '2px',
93+
}}
94+
/>
95+
<PopupDesc
96+
currentCategory={currentCategory}
97+
onClose={removeCurrentCard}
98+
/>
99+
</div>
100+
) : (
101+
<div
102+
className={`flex items-center text-xl dark:text-gray-300 ${className}`}
103+
>
104+
<FaSlackHash className="mr-2 text-gray-600 dark:text-gray-300" />
105+
<span className="flex uppercase text-gray-900 dark:text-gray-100">
106+
{subcategoryName}
107+
</span>
108+
<button
109+
data-tooltip-id="info-tooltip"
110+
data-tooltip-content="Description"
111+
data-tooltip-place="bottom"
112+
>
113+
<FaInfoCircle
114+
className="ml-4 mt-2 text-sm cursor-pointer hover:text-theme-primary"
115+
onClick={handleCardClick}
116+
/>
117+
</button>
118+
<Tooltip
119+
id="info-tooltip"
120+
style={{
121+
backgroundColor: '#8b5cf6',
122+
fontSize: '13px',
123+
paddingLeft: '6px',
124+
paddingRight: '6px',
125+
paddingTop: '2px',
126+
paddingBottom: '2px',
127+
}}
128+
/>
129+
<PopupDesc
130+
currentCategory={currentCategory}
131+
onClose={removeCurrentCard}
132+
/>
133+
</div>
134+
)}
135+
</>
126136
)}
127137
</>
128138
)

‎database/artificial_intelligence/artificial-intelligence.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
"name": "An Introduction to Artificial Intelligence",
44
"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.",
55
"url": "https://archive.nptel.ac.in/courses/106/102/106102220/",
6-
"category": "artificial intelligence",
6+
"category": "ai",
77
"subcategory": "artificial-intelligence"
88
}
99
]

‎database/artificial_intelligence/data-science.json‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,28 +3,28 @@
33
"name": "KDnuggets",
44
"description": "KDnuggets is a popular data science website that provides news, tutorials, and resources.",
55
"url": "https://www.kdnuggets.com/",
6-
"category": "artificial intelligence",
6+
"category": "ai",
77
"subcategory": "data-science"
88
},
99
{
1010
"name": "Datacamp Tutorials",
1111
"description": "Provides tutorials for aspirational full stack Data Scientists.",
1212
"url": "https://www.datacamp.com/tutorial",
13-
"category": "artificial intelligence",
13+
"category": "ai",
1414
"subcategory": "data-science"
1515
},
1616
{
1717
"name": "Analytics Vidhya",
1818
"description": "Analytics Vidhya is a platform for data science enthusiasts, offering tutorials, competitions, and community support.",
1919
"url": "https://www.analyticsvidhya.com/",
20-
"category": "artificial intelligence",
20+
"category": "ai",
2121
"subcategory": "data-science"
2222
},
2323
{
2424
"name": "Kaggle",
2525
"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.",
2626
"url": "https://www.kaggle.com/",
27-
"category": "artificial intelligence",
27+
"category": "ai",
2828
"subcategory": "data-science"
2929
}
3030
]

‎database/artificial_intelligence/deep-learning.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
"name": "Distill",
44
"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.",
55
"url": "https://distill.pub/",
6-
"category": "artificial intelligence",
6+
"category": "ai",
77
"subcategory": "deep-learning"
88
}
99
]

0 commit comments

Comments
 (0)