Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Add title tooltip for subcategory description #2582

Closed
wants to merge 2 commits into from
Closed

feat: Add title tooltip for subcategory description #2582

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4542014
HimanshuBari21:Added React Native course in Mobile category
HimanshuBari21 Dec 2, 2024
8193be6
HimanshuBari21:added title tooltip for sub category description text …
HimanshuBari21 Dec 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 9 additions & 9 deletions components/TopBar/CategoryDescriptions.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
import { generalWebFundamentals } from "database"

type CategoryDescriptions = {
[key: string]: string
}
Expand Down Expand Up @@ -64,8 +62,10 @@ const categoryDescriptions: CategoryDescriptions = {
'Validation is the process of checking whether a system or its component(s) satisfies the specified requirements or not and checks the data is correct or not.',

// cms toolkit
headless_cms: 'Decouple content management from presentation, allowing content delivery via APIs to various platforms. This flexibility enhances omnichannel distribution and user experiences.',
traditional_cms: 'Offers integrated solutions for content creation and presentation, featuring user-friendly interfaces and built-in templates for easy website management.',
headless_cms:
'Decouple content management from presentation, allowing content delivery via APIs to various platforms. This flexibility enhances omnichannel distribution and user experiences.',
traditional_cms:
'Offers integrated solutions for content creation and presentation, featuring user-friendly interfaces and built-in templates for easy website management.',

//languages
general_web_fundamentals:
Expand Down Expand Up @@ -98,6 +98,8 @@ const categoryDescriptions: CategoryDescriptions = {
//Mobile
android:
'Android programming is the process of creating applications that run on the Android operating system. Android applications are written in Java or Kotlin programming languages.',
react_native:
"Learn once, write anywhere, React Native is a JavaScript framework that allows developers to build native apps using JavaScript and React. It's a cross-platform, hybrid library that incorporates JavaScript, which is compatible with both Android and iOS.",

//Design
design_tools:
Expand Down Expand Up @@ -160,7 +162,7 @@ const categoryDescriptions: CategoryDescriptions = {
'Natural Language Processing is a branch of artificial intelligence that focuses on the interaction between computers and human language. It involves the development of algorithms and models that enable machines to understand and generate human language, allowing them to perform tasks like language translation an more. ',

// AI Tools
'design':
design:
'Harness the power of AI-driven editing tools to refine your writing effortlessly. From grammar and style suggestions to readability enhancements, these editors ensure your content shines with clarity and precision',
chat_bots:
"Experience seamless interactions and instant assistance with AI chatbots. Whether it's answering queries, providing support, or automating tasks, these intelligent bots deliver personalized responses to enhance user experiences.",
Expand Down Expand Up @@ -224,13 +226,11 @@ const categoryDescriptions: CategoryDescriptions = {
'This list of Development tools will help you boost your programming speed and modify your projects to the next level.',
github: 'Well, Github does not need description, devs know well!',
git: 'Your friendly neighborhood version control system to track the development activities.',
other_resources:
'Some extra resources to help you in your coding projects.',
other_resources: 'Some extra resources to help you in your coding projects.',
podcasts: 'Coding podcasts to listen to when you feel demotivated.',
contributors:
'These are the people that have helped LinksHub come to life! Thank you for your support! Note: M = Maintainer and C = Contributors',
text_formatting:
'Your ultimate solution for all your text formatting needs!',
text_formatting: 'Your ultimate solution for all your text formatting needs!',
roadmaps:
'Roadmaps are strategic plans that outline key milestones, goals, and timelines. They serve as guides for project development, ensuring a systematic and organized approach to achieving objectives.',
domains:
Expand Down
64 changes: 33 additions & 31 deletions database/data.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,16 +97,16 @@ export const sidebarData: ISidebar[] = [
category: 'CMS-toolkit',
subcategory: [
{
name: "Traditional CMS",
url: "/traditional_cms",
name: 'Traditional CMS',
url: '/traditional_cms',
resources: DB.traditional_cms,
},
{
name: 'Headless CMS',
url: '/headless_cms',
resources: DB.headless_cms,
}
]
},
],
},
{
category: 'languages',
Expand Down Expand Up @@ -141,6 +141,11 @@ export const sidebarData: ISidebar[] = [
category: 'mobile',
subcategory: [
{ name: 'Android', url: '/android', resources: DB.android },
{
name: 'React Native',
url: '/react_native',
resources: DB.react_native,
},
],
},
{
Expand Down Expand Up @@ -181,22 +186,22 @@ export const sidebarData: ISidebar[] = [
{
category: 'design',
subcategory: [
{
name: 'design inspiration',
url: '/design_inspiration',
resources: DB.designInspirations,
},
{
name: 'design color tools',
url: '/design_color_tools',
resources: DB.designColorTools,
},
{
name: 'design tutorials',
url: '/design_tutorials',
resources: DB.designTutorials,
}
]
{
name: 'design inspiration',
url: '/design_inspiration',
resources: DB.designInspirations,
},
{
name: 'design color tools',
url: '/design_color_tools',
resources: DB.designColorTools,
},
{
name: 'design tutorials',
url: '/design_tutorials',
resources: DB.designTutorials,
},
],
},
{
category: 'devops',
Expand Down Expand Up @@ -284,10 +289,7 @@ export const sidebarData: ISidebar[] = [
url: '/chat_bots',
resources: DB.chat_bots,
},
{ name: 'tensorflow',
url: '/tensorflow',
resources: DB.tensorflow,
}
{ name: 'tensorflow', url: '/tensorflow', resources: DB.tensorflow },
],
},
{
Expand Down Expand Up @@ -364,8 +366,8 @@ export const sidebarData: ISidebar[] = [
name: 'react',
url: '/react_articles',
resources: DB.reactArticles,
}
]
},
],
},
{
category: 'newsletters',
Expand All @@ -381,11 +383,11 @@ export const sidebarData: ISidebar[] = [
resources: DB.pythonLetters,
},
{
name:'java',
url:'/javaLetters',
resources:DB.javaLetters,
}
]
name: 'java',
url: '/javaLetters',
resources: DB.javaLetters,
},
],
},
{
category: 'theory-of-computation',
Expand Down
11 changes: 6 additions & 5 deletions database/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,7 @@ export { default as swift } from './languages/swift.json'
export { default as css } from './languages/css.json'
// mobile
export { default as android } from './mobile/android.json'
export { default as react_native } from './mobile/react_native.json'
//internet of things
export { default as coursera } from './internet_of_things/coursera.json'
export { default as raspberrypi } from './internet_of_things/raspberrypi.json'
Expand Down Expand Up @@ -94,7 +95,7 @@ export { default as tensorflow } from './ai_tools/tensorflow.json'

// Open-source
export { default as openSourceArticles } from './open_source/articles.json'
export { default as openSourceHacktoberfest} from './open_source/hacktoberfest.json'
export { default as openSourceHacktoberfest } from './open_source/hacktoberfest.json'
export { default as openSourcePrograms } from './open_source/os_programs.json'
export { default as openSourceProjects } from './open_source/projects.json'
export { default as openSourceTools } from './open_source/tools.json'
Expand Down Expand Up @@ -163,7 +164,7 @@ export { default as pythonLetters } from './newsletters/py_Letters.json'
export { default as javaLetters } from './newsletters/java_Letters.json'

// Ethical Hacking
export {default as cryptographyAttacks} from './ethical_hacking/cryptography_attacks.json'
export {default as malwareAndPayloadDevelopment} from './ethical_hacking/malware_and_payload_development.json'
export {default as socialEngineering} from './ethical_hacking/social_engineering.json'
export {default as wirelesshacking} from './ethical_hacking/wireless_hacking.json'
export { default as cryptographyAttacks } from './ethical_hacking/cryptography_attacks.json'
export { default as malwareAndPayloadDevelopment } from './ethical_hacking/malware_and_payload_development.json'
export { default as socialEngineering } from './ethical_hacking/social_engineering.json'
export { default as wirelesshacking } from './ethical_hacking/wireless_hacking.json'
86 changes: 43 additions & 43 deletions database/mobile/android.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,58 +1,58 @@
[
{
"name": "FreeCodeCamp Android Course",
"description": "This channel provides free multi programming language courses for Web-dev, android and more.",
"url": "https://www.youtube.com/watch?v=fis26HvvDII",
"category": "mobile",
"subcategory": "android",
"language": "english"
"name": "FreeCodeCamp Android Course",
"description": "This channel provides free multi programming language courses for Web-dev, android and more.",
"url": "https://www.youtube.com/watch?v=fis26HvvDII",
"category": "mobile",
"subcategory": "android",
"language": "english"
},
{
"name": "Android Developer",
"description": "This channel provides free programming courses on Android development and more.",
"url": "https://www.youtube.com/@androiddeveloper6721/featured",
"category": "mobile",
"subcategory": "android",
"language": "english"
"name": "Android Developer",
"description": "This channel provides free programming courses on Android development and more.",
"url": "https://www.youtube.com/@androiddeveloper6721/featured",
"category": "mobile",
"subcategory": "android",
"language": "english"
},
{
"name": "Android Development Tutorial for Beginners",
"description": "This playlist is a beginner friendly course to get you started with android development.",
"url": "https://www.youtube.com/playlist?list=PLUcsbZa0qzu3Mri2tL1FzZy-5SX75UJfb",
"category": "mobile",
"subcategory": "android",
"language": "hindi"
"name": "Android Development Tutorial for Beginners",
"description": "This playlist is a beginner friendly course to get you started with android development.",
"url": "https://www.youtube.com/playlist?list=PLUcsbZa0qzu3Mri2tL1FzZy-5SX75UJfb",
"category": "mobile",
"subcategory": "android",
"language": "hindi"
},
{
"name": "Android App Development course in 2023 | Saumya Singh",
"description": "This is a comprehensive Android tutorial playlist, designed to take you from a beginner to a proficient Android developer. With step-by-step instructions, this curated collection covers everything from setting up your development environment to advanced topics like networking, testing, and debugging.",
"url": "https://www.youtube.com/watch?v=BePWJavW_w4&list=PLTV_nsuD2lf4UCTV6xwvNPvFdmCNKyhc8&pp=iAQB",
"category": "mobile",
"subcategory": "android",
"language": "hindi"
"name": "Android App Development course in 2023 | Saumya Singh",
"description": "This is a comprehensive Android tutorial playlist, designed to take you from a beginner to a proficient Android developer. With step-by-step instructions, this curated collection covers everything from setting up your development environment to advanced topics like networking, testing, and debugging.",
"url": "https://www.youtube.com/watch?v=BePWJavW_w4&list=PLTV_nsuD2lf4UCTV6xwvNPvFdmCNKyhc8&pp=iAQB",
"category": "mobile",
"subcategory": "android",
"language": "hindi"
},
{
"name": "Android Development Tutorials in Hindi | CodeWithHarry",
"description": " In this Android Java Course one can learn how Android applications are built using programming in Java and XML.",
"url": "https://www.youtube.com/playlist?list=PLu0W_9lII9aiL0kysYlfSOUgY5rNlOhUd",
"category": "mobile",
"subcategory": "android",
"language": "hindi"
"name": "Android Development Tutorials in Hindi | CodeWithHarry",
"description": " In this Android Java Course one can learn how Android applications are built using programming in Java and XML.",
"url": "https://www.youtube.com/playlist?list=PLu0W_9lII9aiL0kysYlfSOUgY5rNlOhUd",
"category": "mobile",
"subcategory": "android",
"language": "hindi"
},
{
"name": "Android Development Tutorials in Hindi | WsCube Tech",
"description": " This Hindi Android tutorial explains how Android applications are built using Android Studio. ",
"url": "https://www.youtube.com/playlist?list=PLjVLYmrlmjGdDps6HAwOOVoAtBPAgIOXL",
"category": "mobile",
"subcategory": "android",
"language": "hindi"
"name": "Android Development Tutorials in Hindi | WsCube Tech",
"description": " This Hindi Android tutorial explains how Android applications are built using Android Studio. ",
"url": "https://www.youtube.com/playlist?list=PLjVLYmrlmjGdDps6HAwOOVoAtBPAgIOXL",
"category": "mobile",
"subcategory": "android",
"language": "hindi"
},
{
"name": "Android Development Course| Neat Roots",
"description": "In this Android Java Course, you learn Android Development to become a Full Stack Android Developer",
"url": "https://www.youtube.com/playlist?list=PLUhfM8afLE_Ok-0Lx2v9hfrmbxi3GgsX1",
"category": "mobile",
"subcategory": "android",
"language": "hindi"
"name": "Android Development Course| Neat Roots",
"description": "In this Android Java Course, you learn Android Development to become a Full Stack Android Developer",
"url": "https://www.youtube.com/playlist?list=PLUhfM8afLE_Ok-0Lx2v9hfrmbxi3GgsX1",
"category": "mobile",
"subcategory": "android",
"language": "hindi"
}
]
]
10 changes: 10 additions & 0 deletions database/mobile/react_native.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
[
{
"name": "React Native Course for Beginners in 2024 | Build a Full Stack React Native App",
"description": "It uses Expo, Master the foundations of React Native and build your first full-stack mobile app.",
"url": "https://youtu.be/ZBCUegTZF7M",
"category": "mobile",
"subcategory": "react_native",
"language": "english"
}
]
7 changes: 4 additions & 3 deletions pages/[category]/[...subcategory].tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,12 +16,13 @@ interface PageProps {
subcategory: string
}

interface Params extends ParsedUrlQuery, PageProps { }
interface Params extends ParsedUrlQuery, PageProps {}

const SubCategory: NextPage<PageProps> = ({ subcategory }) => {
const { filterDB, pageCategory } = useFilterDB(subcategory[0])
const title = `LinksHub - ${pageCategory[0].toUpperCase() + pageCategory.slice(1)
}`
const title = `LinksHub - ${
pageCategory[0].toUpperCase() + pageCategory.slice(1)
}`
const numberOfCards = filterDB[0].length
const { totalPages, currentPage, startIndex, endIndex, handlePageChange } =
usePagination(filterDB.length ? filterDB[0].length : 0)
Expand Down
5 changes: 4 additions & 1 deletion pages/[category]/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,10 @@ const CategoryPage = () => {
<Icons.arrow className="opacity-0 group-hover:opacity-100 duration-300 w-6 h-6 text-theme-secondary dark:text-white" />
</div>
<div className="dark:text-text-tertiary text-text-quinary text-md h-12 pb-4">
<div className="text-ellipsis ... line-clamp-2 w-full">
<div
className="text-ellipsis ... line-clamp-2 w-full"
title={getDesc(subcat.url.slice(1))}
>
{getDesc(subcat.url.slice(1))}
</div>
</div>
Expand Down
Loading