diff --git a/src/components/RoadmapHeader.astro b/src/components/RoadmapHeader.astro index e7250f14c..86b71498e 100644 --- a/src/components/RoadmapHeader.astro +++ b/src/components/RoadmapHeader.astro @@ -159,6 +159,7 @@ const hasProjects = projectCount > 0; isExternal={true} hideTextOnMobile={true} isActive={false} + className='hidden sm:flex' /> ) diff --git a/src/components/TabLink.tsx b/src/components/TabLink.tsx index 59501608e..1129ac166 100644 --- a/src/components/TabLink.tsx +++ b/src/components/TabLink.tsx @@ -9,6 +9,7 @@ type TabLinkProps = { badgeText?: string; hideTextOnMobile?: boolean; url: string; + className?: string; }; export function TabLink(props: TabLinkProps) { @@ -20,6 +21,7 @@ export function TabLink(props: TabLinkProps) { text, isActive, hideTextOnMobile = false, + className: additionalClassName = '', } = props; const className = cn( @@ -30,6 +32,7 @@ export function TabLink(props: TabLinkProps) { !isActive, 'font-medium hover:text-black text-gray-500 px-0': isExternal, }, + additionalClassName, ); const textClass = cn({ @@ -41,8 +44,10 @@ export function TabLink(props: TabLinkProps) { className={cn( 'ml-0.5 hidden items-center gap-0.5 rounded-full bg-yellow-200 px-2 py-0.5 text-xs font-medium text-black transition-colors sm:flex', { - 'bg-gray-200 text-black group-hover:bg-gray-300 ': badgeText?.toLowerCase() == 'soon', - 'bg-yellow-200 text-black group-hover:bg-yellow-300 ': badgeText?.toLowerCase() == 'new', + 'bg-gray-200 text-black group-hover:bg-gray-300': + badgeText?.toLowerCase() == 'soon', + 'bg-yellow-200 text-black group-hover:bg-yellow-300': + badgeText?.toLowerCase() == 'new', }, )} > diff --git a/src/data/roadmaps/api-design/api-design.md b/src/data/roadmaps/api-design/api-design.md index fe9bf9087..c55ddb783 100644 --- a/src/data/roadmaps/api-design/api-design.md +++ b/src/data/roadmaps/api-design/api-design.md @@ -12,6 +12,20 @@ hasTopics: true dimensions: width: 968 height: 2317.91 +courses: + - title: 'Complete Course to Master SQL' + description: 'Learn SQL from scratch with this comprehensive course' + link: 'https://roadmap.sh/courses/sql' + features: + - '55+ Lessons' + - 'AI Tutor' + - 'Coding Environment' + - 'Quizzes' + - 'Certification' + instructor: + name: 'Kamran Ahmed' + image: 'https://github.com/kamranahmedse.png' + title: 'Founder roadmap.sh' schema: headline: 'API Design' description: 'Step by step guide to learn how to design and build robust APIs.' diff --git a/src/data/roadmaps/aspnet-core/aspnet-core.md b/src/data/roadmaps/aspnet-core/aspnet-core.md index ab3c98bf6..e94d60a29 100644 --- a/src/data/roadmaps/aspnet-core/aspnet-core.md +++ b/src/data/roadmaps/aspnet-core/aspnet-core.md @@ -12,6 +12,20 @@ hasTopics: true dimensions: width: 968 height: 2920 +courses: + - title: 'Complete Course to Master SQL' + description: 'Learn SQL from scratch with this comprehensive course' + link: 'https://roadmap.sh/courses/sql' + features: + - '55+ Lessons' + - 'AI Tutor' + - 'Coding Environment' + - 'Quizzes' + - 'Certification' + instructor: + name: 'Kamran Ahmed' + image: 'https://github.com/kamranahmedse.png' + title: 'Founder roadmap.sh' schema: headline: 'ASP.NET Core Developer Roadmap' description: 'Learn how to become a ASP.NET Core Developer with this interactive step by step guide in 2025. We also have resources and short descriptions attached to the roadmap items so you can get everything you want to learn in one place.' diff --git a/src/data/roadmaps/backend/backend.md b/src/data/roadmaps/backend/backend.md index dbf8b2cb0..1f4361a44 100644 --- a/src/data/roadmaps/backend/backend.md +++ b/src/data/roadmaps/backend/backend.md @@ -9,6 +9,20 @@ title: 'Backend Developer' description: 'Step by step guide to becoming a modern backend developer in 2025' hasTopics: true isForkable: false +courses: + - title: 'Complete Course to Master SQL' + description: 'Learn SQL from scratch with this comprehensive course' + link: 'https://roadmap.sh/courses/sql' + features: + - '55+ Lessons' + - 'AI Tutor' + - 'Coding Environment' + - 'Quizzes' + - 'Certification' + instructor: + name: 'Kamran Ahmed' + image: 'https://github.com/kamranahmedse.png' + title: 'Founder roadmap.sh' partner: description: "Get the latest Backend news from our sister site" link: "https://thenewstack.io/?utm_source=roadmap.sh&utm_medium=Referral&utm_campaign=Alert" diff --git a/src/data/roadmaps/data-analyst/data-analyst.md b/src/data/roadmaps/data-analyst/data-analyst.md index e657a10ac..baf8e5ac2 100644 --- a/src/data/roadmaps/data-analyst/data-analyst.md +++ b/src/data/roadmaps/data-analyst/data-analyst.md @@ -12,6 +12,20 @@ isNew: false dimensions: width: 968 height: 2650 +courses: + - title: 'Complete Course to Master SQL' + description: 'Learn SQL from scratch with this comprehensive course' + link: 'https://roadmap.sh/courses/sql' + features: + - '55+ Lessons' + - 'AI Tutor' + - 'Coding Environment' + - 'Quizzes' + - 'Certification' + instructor: + name: 'Kamran Ahmed' + image: 'https://github.com/kamranahmedse.png' + title: 'Founder roadmap.sh' schema: headline: 'Data Analyst Roadmap' description: 'Learn how to become an Data Analyst with this interactive step by step guide in 2023. We also have resources and short descriptions attached to the roadmap items so you can get everything you want to learn in one place.' diff --git a/src/data/roadmaps/full-stack/full-stack.md b/src/data/roadmaps/full-stack/full-stack.md index e1dcea338..81fceb348 100644 --- a/src/data/roadmaps/full-stack/full-stack.md +++ b/src/data/roadmaps/full-stack/full-stack.md @@ -12,6 +12,20 @@ hasTopics: true dimensions: width: 968 height: 2075 +courses: + - title: 'Complete Course to Master SQL' + description: 'Learn SQL from scratch with this comprehensive course' + link: 'https://roadmap.sh/courses/sql' + features: + - '55+ Lessons' + - 'AI Tutor' + - 'Coding Environment' + - 'Quizzes' + - 'Certification' + instructor: + name: 'Kamran Ahmed' + image: 'https://github.com/kamranahmedse.png' + title: 'Founder roadmap.sh' question: title: 'What is a Full Stack Developer?' description: | diff --git a/src/data/roadmaps/java/java.md b/src/data/roadmaps/java/java.md index 5e2424649..1c86e6970 100644 --- a/src/data/roadmaps/java/java.md +++ b/src/data/roadmaps/java/java.md @@ -8,6 +8,20 @@ briefDescription: 'Step by step guide to becoming a Java Developer in 2025' title: 'Java Developer' description: 'Step by step guide to becoming a Java developer in 2025' hasTopics: true +courses: + - title: 'Complete Course to Master SQL' + description: 'Learn SQL from scratch with this comprehensive course' + link: 'https://roadmap.sh/courses/sql' + features: + - '55+ Lessons' + - 'AI Tutor' + - 'Coding Environment' + - 'Quizzes' + - 'Certification' + instructor: + name: 'Kamran Ahmed' + image: 'https://github.com/kamranahmedse.png' + title: 'Founder roadmap.sh' question: title: 'What is a Java Developer?' description: | diff --git a/src/data/roadmaps/nodejs/nodejs.md b/src/data/roadmaps/nodejs/nodejs.md index 52540bc12..6eb61a786 100644 --- a/src/data/roadmaps/nodejs/nodejs.md +++ b/src/data/roadmaps/nodejs/nodejs.md @@ -12,6 +12,20 @@ hasTopics: true dimensions: width: 968 height: 2380 +courses: + - title: 'Complete Course to Master SQL' + description: 'Learn SQL from scratch with this comprehensive course' + link: 'https://roadmap.sh/courses/sql' + features: + - '55+ Lessons' + - 'AI Tutor' + - 'Coding Environment' + - 'Quizzes' + - 'Certification' + instructor: + name: 'Kamran Ahmed' + image: 'https://github.com/kamranahmedse.png' + title: 'Founder roadmap.sh' schema: headline: 'Node.js Roadmap' description: 'Learn Node.js with this interactive step by step guide in 2025. We also have resources and short descriptions attached to the roadmap items so you can get everything you want to learn in one place.' diff --git a/src/data/roadmaps/php/php.md b/src/data/roadmaps/php/php.md index 8235abd0c..4cc7cefe8 100644 --- a/src/data/roadmaps/php/php.md +++ b/src/data/roadmaps/php/php.md @@ -12,6 +12,20 @@ hasTopics: true dimensions: width: 968 height: 3260 +courses: + - title: 'Complete Course to Master SQL' + description: 'Learn SQL from scratch with this comprehensive course' + link: 'https://roadmap.sh/courses/sql' + features: + - '55+ Lessons' + - 'AI Tutor' + - 'Coding Environment' + - 'Quizzes' + - 'Certification' + instructor: + name: 'Kamran Ahmed' + image: 'https://github.com/kamranahmedse.png' + title: 'Founder roadmap.sh' schema: headline: 'PHP Roadmap' description: 'Learn how to use PHP with this interactive step by step guide in 2025. We also have resources and short descriptions attached to the roadmap items so you can get everything you want to learn in one place.' diff --git a/src/data/roadmaps/postgresql-dba/postgresql-dba.md b/src/data/roadmaps/postgresql-dba/postgresql-dba.md index dfb7fd13b..0ec8b6223 100644 --- a/src/data/roadmaps/postgresql-dba/postgresql-dba.md +++ b/src/data/roadmaps/postgresql-dba/postgresql-dba.md @@ -11,6 +11,20 @@ hasTopics: true dimensions: width: 969 height: 3675 +courses: + - title: 'Complete Course to Master SQL' + description: 'Learn SQL from scratch with this comprehensive course' + link: 'https://roadmap.sh/courses/sql' + features: + - '55+ Lessons' + - 'AI Tutor' + - 'Coding Environment' + - 'Quizzes' + - 'Certification' + instructor: + name: 'Kamran Ahmed' + image: 'https://github.com/kamranahmedse.png' + title: 'Founder roadmap.sh' seo: title: 'DBA Roadmap: Learn to become a database administrator with PostgreSQL' description: 'Community driven, articles, resources, guides, interview questions, quizzes for DevOps. Learn to become a modern DevOps engineer by following the steps, skills, resources and guides listed in this roadmap.' diff --git a/src/data/roadmaps/python/python.md b/src/data/roadmaps/python/python.md index 374e2019a..06c8b1553 100644 --- a/src/data/roadmaps/python/python.md +++ b/src/data/roadmaps/python/python.md @@ -11,6 +11,20 @@ hasTopics: true dimensions: width: 992 height: 1630 +courses: + - title: 'Complete Course to Master SQL' + description: 'Learn SQL from scratch with this comprehensive course' + link: 'https://roadmap.sh/courses/sql' + features: + - '55+ Lessons' + - 'AI Tutor' + - 'Coding Environment' + - 'Quizzes' + - 'Certification' + instructor: + name: 'Kamran Ahmed' + image: 'https://github.com/kamranahmedse.png' + title: 'Founder roadmap.sh' schema: headline: 'Python Roadmap' description: 'Learn Python with this interactive step by step guide in 2025. We also have resources and short descriptions attached to the roadmap items so you can get everything you want to learn in one place.' diff --git a/src/data/roadmaps/software-architect/software-architect.md b/src/data/roadmaps/software-architect/software-architect.md index eedd99f8f..1417c2dd7 100644 --- a/src/data/roadmaps/software-architect/software-architect.md +++ b/src/data/roadmaps/software-architect/software-architect.md @@ -13,6 +13,20 @@ partner: description: "Ready-to use free on/offboarding templates for new employees" link: "https://www.silo.team/book-a-demo-silo-team?utm_source=affiliate1&utm_medium=referral&utm_campaign=free_onboarding_checklist" linkText: "silo.team" +courses: + - title: 'Complete Course to Master SQL' + description: 'Learn SQL from scratch with this comprehensive course' + link: 'https://roadmap.sh/courses/sql' + features: + - '55+ Lessons' + - 'AI Tutor' + - 'Coding Environment' + - 'Quizzes' + - 'Certification' + instructor: + name: 'Kamran Ahmed' + image: 'https://github.com/kamranahmedse.png' + title: 'Founder roadmap.sh' dimensions: width: 968 height: 2525 diff --git a/src/data/roadmaps/spring-boot/spring-boot.md b/src/data/roadmaps/spring-boot/spring-boot.md index 1451f9e7e..76a0d40d3 100644 --- a/src/data/roadmaps/spring-boot/spring-boot.md +++ b/src/data/roadmaps/spring-boot/spring-boot.md @@ -11,6 +11,20 @@ isNew: false dimensions: width: 968 height: 1245.52 +courses: + - title: 'Complete Course to Master SQL' + description: 'Learn SQL from scratch with this comprehensive course' + link: 'https://roadmap.sh/courses/sql' + features: + - '55+ Lessons' + - 'AI Tutor' + - 'Coding Environment' + - 'Quizzes' + - 'Certification' + instructor: + name: 'Kamran Ahmed' + image: 'https://github.com/kamranahmedse.png' + title: 'Founder roadmap.sh' schema: headline: 'Spring Boot Roadmap' description: 'Learn Spring Boot with this interactive step by step guide in 2025. We also have resources and short descriptions attached to the roadmap items so you can get everything you want to learn in one place.' diff --git a/src/data/roadmaps/system-design/system-design.md b/src/data/roadmaps/system-design/system-design.md index 86e1244a3..863ac2576 100644 --- a/src/data/roadmaps/system-design/system-design.md +++ b/src/data/roadmaps/system-design/system-design.md @@ -16,7 +16,20 @@ question: ## What are the components of System Design? Some of the the major components that play a crucial role in designing a system include Programming language choice, Databases, CDNs, Load Balancers, Caches, Proxies, Queues, Web Servers, Application Servers, Search Engines, Logging and Monitoring Systems, Scaling, and more. Key considerations include scalability, architectural patterns, and security measures to safeguard the system. These elements collectively contribute to building a robust, efficient, and secure system, though this list represents just a subset of the comprehensive factors involved in system design. - +courses: + - title: 'Complete Course to Master SQL' + description: 'Learn SQL from scratch with this comprehensive course' + link: 'https://roadmap.sh/courses/sql' + features: + - '55+ Lessons' + - 'AI Tutor' + - 'Coding Environment' + - 'Quizzes' + - 'Certification' + instructor: + name: 'Kamran Ahmed' + image: 'https://github.com/kamranahmedse.png' + title: 'Founder roadmap.sh' dimensions: width: 968 height: 3200 diff --git a/src/pages/[roadmapId]/courses.astro b/src/pages/[roadmapId]/courses.astro index 8e806ea48..623f1ea49 100644 --- a/src/pages/[roadmapId]/courses.astro +++ b/src/pages/[roadmapId]/courses.astro @@ -5,6 +5,7 @@ import { getOpenGraphImageUrl } from '../../lib/open-graph'; import { type RoadmapFrontmatter, getRoadmapIds } from '../../lib/roadmap'; import CourseStep from '../../components/courses/CourseStep.astro'; import Milestone from '../../components/courses/Milestone.astro'; +import { getProjectsByRoadmapId } from '../../lib/project'; export const prerender = true; @@ -50,6 +51,7 @@ const nounTitle = descriptionNoun[roadmapData.briefTitle] || roadmapData.briefTitle; const seoDescription = `Seeking ${nounTitle.toLowerCase()} courses to enhance your skills? Explore our top free and paid courses to help you become a ${nounTitle} expert!`; +const projects = await getProjectsByRoadmapId(roadmapId); const courses = roadmapData.courses || []; --- @@ -76,6 +78,7 @@ const courses = roadmapData.courses || []; isForkable={roadmapData.isForkable} question={roadmapData.question} coursesCount={courses.length} + projectCount={projects.length} activeTab='courses' /> @@ -131,7 +134,7 @@ const courses = roadmapData.courses || []; - + View Course →