Add courses tab

src/components/RoadmapHeader.astro

@@ -159,6 +159,7 @@ const hasProjects = projectCount > 0;
             isExternal={true}
             hideTextOnMobile={true}
             isActive={false}
+            className='hidden sm:flex'
           />
         </div>
       )

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',
         },
       )}
     >

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.'

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.'

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"

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.'

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: |

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: |

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.'

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.'

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.'

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.'

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

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.'

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

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 || [];
                             </div>
                           </div>
 
-                          <span class='group w-full sm:py-1.5 sm:w-auto mt-3 rounded-lg border border-gray-900 bg-gray-900 px-4 py-2 text-sm font-medium text-white transition-colors duration-300 hover:opacity-80 sm:mt-0'>
+                          <span class='group mt-3 w-full rounded-lg border border-gray-900 bg-gray-900 px-4 py-2 text-sm font-medium text-white transition-colors duration-300 hover:opacity-80 sm:mt-0 sm:w-auto sm:py-1.5'>
                             View Course <span class='ml-1'>&rarr;</span>
                           </span>
                         </div>