Add support for replacing TNS partner banner

src/components/CustomRoadmap/RoadmapHeader.tsx

@@ -196,7 +196,6 @@ export function RoadmapHeader(props: RoadmapHeaderProps) {
 
           <RoadmapHint
             roadmapTitle={title!}
-            hasTNSBanner={false}
             roadmapId={roadmapId!}
           />
         </div>

src/components/CustomRoadmap/RoadmapHint.tsx

@@ -4,42 +4,19 @@ import { ResourceProgressStats } from './ResourceProgressStats';
 type RoadmapHintProps = {
   roadmapId: string;
   roadmapTitle: string;
-  hasTNSBanner?: boolean;
-  tnsBannerLink?: string;
 };
 
 export function RoadmapHint(props: RoadmapHintProps) {
-  const {
+  const { roadmapTitle, roadmapId } = props;
-    roadmapTitle,
-    roadmapId,
-    hasTNSBanner = false,
-    tnsBannerLink = '',
-  } = props;
 
   return (
     <div
-      className={cn('mb-0 mt-4 rounded-md border-0 sm:mt-7 sm:border', {
+      className={cn(
-        'sm:-mb-[82px]': hasTNSBanner,
+        'mb-0 mt-4 rounded-md border-0 sm:-mb-[65px] sm:mt-7 sm:border',
-        'sm:-mb-[65px]': !hasTNSBanner,
-      })}
-    >
-      {hasTNSBanner && (
-        <div className="hidden border-b bg-gray-100 px-2 py-1.5 sm:block">
-          <p className="text-sm">
-            Get the latest {roadmapTitle} news from our sister site{' '}
-            <a
-              href={tnsBannerLink}
-              target="_blank"
-              className="font-semibold underline"
-            >
-              TheNewStack.io
-            </a>
-          </p>
-        </div>
       )}
-
+    >
       <ResourceProgressStats
-        isSecondaryBanner={hasTNSBanner}
+        isSecondaryBanner={false}
         resourceId={roadmapId}
         resourceType="roadmap"
       />

src/components/RoadmapHeader.astro

@@ -18,7 +18,11 @@ export interface Props {
   title: string;
   description: string;
   note?: string;
-  tnsBannerLink?: string;
+  partner?: {
+    description: string;
+    link: string;
+    linkText: string;
+  };
   roadmapId: string;
   isUpcoming?: boolean;
   hasSearch?: boolean;
@@ -26,14 +30,14 @@ export interface Props {
   question?: RoadmapFrontmatter['question'];
   hasTopics?: boolean;
   isForkable?: boolean;
-  activeTab?: 'roadmap' | 'projects';
+  activeTab?: 'roadmap' | 'projects' | 'courses';
 }
 
 const {
   title,
   description,
   roadmapId,
-  tnsBannerLink,
+  partner,
   isUpcoming = false,
   note,
   hasTopics = false,
@@ -53,13 +57,13 @@ const roadmapTitle =
 
 <div class='container mt-0 flex flex-col gap-2.5 px-0 sm:mt-3 sm:px-4'>
   {
-    tnsBannerLink && (
+    partner && (
       <div class='hidden rounded-md border bg-white px-2 py-1.5 sm:block'>
         <p class='py-0.5 text-left text-sm'>
           <span class='badge mr-1'>Partner</span>
-          Get the latest {roadmapTitle} news from our sister site{' '}
+          {partner.description}
-          <a href={tnsBannerLink} target='_blank' class='font-medium underline'>
+          <a href={partner.link} target='_blank' class='font-medium underline'>
-            TheNewStack.io
+            {partner.linkText}
           </a>
         </p>
       </div>

src/components/RoadmapHint.astro

@@ -5,13 +5,11 @@ import ResourceProgressStats from './ResourceProgressStats.astro';
 
 export interface Props {
   roadmapId: string;
-  tnsBannerLink?: string;
   titleQuestion?: string;
   titleAnswer?: string;
 }
 
-const { roadmapId, tnsBannerLink } = Astro.props;
+const { roadmapId } = Astro.props;
-const hasTnsBanner = !!tnsBannerLink;
 ---
 
 <div class:list={['mb-0 rounded-md border mt-2 bg-white']}>

src/data/roadmaps/backend/backend.md

@@ -9,7 +9,10 @@ title: 'Backend Developer'
 description: 'Step by step guide to becoming a modern backend developer in 2025'
 hasTopics: true
 isForkable: false
-tnsBannerLink: 'https://thenewstack.io?utm_source=roadmap.sh&utm_medium=Referral&utm_campaign=Alert'
+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"
+  linkText: "TheNewStack.io"
 question:
   title: 'What is Backend Development?'
   description: |

src/data/roadmaps/devops/devops.md

@@ -9,7 +9,10 @@ title: 'DevOps Roadmap'
 description: 'Step by step guide for DevOps, SRE or any other Operations Role in 2025'
 hasTopics: true
 isForkable: false
-tnsBannerLink: 'https://thenewstack.io?utm_source=roadmap.sh&utm_medium=Referral&utm_campaign=Alert'
+partner:
+  description: "Get the latest Frontend news from our sister site"
+  link: "https://thenewstack.io/?utm_source=roadmap.sh&utm_medium=Referral&utm_campaign=Alert"
+  linkText: "TheNewStack.io"
 question:
   title: 'What is DevOps?'
   description: |

src/data/roadmaps/engineering-manager/engineering-manager.md

@@ -9,6 +9,10 @@ hasTopics: true
 isHidden: false
 isUpcoming: false
 isNew: true
+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"
 seo:
   title: Engineering Manager
   description: Learn what engineering management is, what engineering managers do and how to become one using our community-driven roadmap.

src/data/roadmaps/frontend/frontend.md

@@ -8,7 +8,10 @@ briefDescription: 'Step by step guide to becoming a frontend developer in 2025'
 title: 'Frontend Developer'
 description: 'Step by step guide to becoming a modern frontend developer in 2025'
 hasTopics: true
-tnsBannerLink: 'https://thenewstack.io?utm_source=roadmap.sh&utm_medium=Referral&utm_campaign=Alert'
+partner:
+  description: "Get the latest Frontend news from our sister site"
+  link: "https://thenewstack.io/?utm_source=roadmap.sh&utm_medium=Referral&utm_campaign=Alert"
+  linkText: "TheNewStack.io"
 question:
   title: 'What is a Frontend Developer?'
   description: |

src/data/roadmaps/kubernetes/kubernetes.md

@@ -8,7 +8,10 @@ title: 'Kubernetes Roadmap'
 description: 'Step by step guide to learning Kubernetes in 2025'
 isNew: false
 hasTopics: true
-tnsBannerLink: 'https://thenewstack.io/kubernetes?utm_source=roadmap.sh&utm_medium=Referral&utm_campaign=Alert'
+partner:
+  description: "Get the latest Kubernetes news from our sister site"
+  link: "https://thenewstack.io/?utm_source=roadmap.sh&utm_medium=Referral&utm_campaign=Alert"
+  linkText: "TheNewStack.io"
 dimensions:
   width: 968
   height: 1785.73

src/data/roadmaps/product-manager/product-manager.md

@@ -9,6 +9,10 @@ hasTopics: true
 isHidden: false
 isUpcoming: false
 isNew: false
+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"
 seo:
   title: Product Manager
   description: Learn what product management is, what product managers do and how to become one using our community-driven roadmap.

src/data/roadmaps/software-architect/software-architect.md

@@ -9,6 +9,10 @@ title: 'Software Architect'
 description: 'Step by step guide to becoming a Software Architect in 2025'
 isNew: false
 hasTopics: true
+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"
 dimensions:
   width: 968
   height: 2525

src/lib/roadmap.ts

@@ -28,7 +28,11 @@ export interface RoadmapFrontmatter {
   isHidden: boolean;
   isNew: boolean;
   isUpcoming: boolean;
-  tnsBannerLink?: string;
+  partner?: {
+    description: string;
+    link: string;
+    linkText: string;
+  };
   note?: string;
   question?: {
     title: string;

src/pages/[roadmapId]/courses.astro

@@ -65,7 +65,7 @@ const seoDescription = `Seeking ${nounTitle.toLowerCase()} courses to enhance yo
       title={title}
       description={description}
       note={roadmapData.note}
-      tnsBannerLink={roadmapData.tnsBannerLink}
+      partner={roadmapData.partner}
       roadmapId={roadmapId}
       hasTopics={roadmapData.hasTopics}
       isUpcoming={roadmapData.isUpcoming}

src/pages/[roadmapId]/index.astro

@@ -107,7 +107,7 @@ const projects = await getProjectsByRoadmapId(roadmapId);
       title={roadmapData.title}
       description={roadmapData.description}
       note={roadmapData.note}
-      tnsBannerLink={roadmapData.tnsBannerLink}
+      partner={roadmapData.partner}
       roadmapId={roadmapId}
       hasTopics={roadmapData.hasTopics}
       isUpcoming={roadmapData.isUpcoming}

src/pages/[roadmapId]/projects.astro

@@ -75,7 +75,7 @@ const { response: userCounts } =
       title={title}
       description={description}
       note={roadmapData.note}
-      tnsBannerLink={roadmapData.tnsBannerLink}
+      partner={roadmapData.partner}
       roadmapId={roadmapId}
       hasTopics={roadmapData.hasTopics}
       isUpcoming={roadmapData.isUpcoming}