Add support for replacing TNS partner banner

2025-08-31 13:01:43 +02:00 · 2025-04-01 15:05:28 +01:00
parent f3eed4d010
commit 45059998c0
15 changed files with 53 additions and 47 deletions
--- a/src/components/CustomRoadmap/RoadmapHeader.tsx
+++ b/src/components/CustomRoadmap/RoadmapHeader.tsx
@@ -196,7 +196,6 @@ export function RoadmapHeader(props: RoadmapHeaderProps) {

          <RoadmapHint
            roadmapTitle={title!}
-            hasTNSBanner={false}
            roadmapId={roadmapId!}
          />
        </div>
--- a/src/components/CustomRoadmap/RoadmapHint.tsx
+++ b/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 {
-    roadmapTitle,
-    roadmapId,
-    hasTNSBanner = false,
-    tnsBannerLink = '',
-  } = props;
+  const { roadmapTitle, roadmapId } = props;

  return (
    <div
-      className={cn('mb-0 mt-4 rounded-md border-0 sm:mt-7 sm:border', {
-        'sm:-mb-[82px]': hasTNSBanner,
-        '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>
+      className={cn(
+        'mb-0 mt-4 rounded-md border-0 sm:-mb-[65px] sm:mt-7 sm:border',
      )}
-
+    >
      <ResourceProgressStats
-        isSecondaryBanner={hasTNSBanner}
+        isSecondaryBanner={false}
        resourceId={roadmapId}
        resourceType="roadmap"
      />
--- a/src/components/RoadmapHeader.astro
+++ b/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{' '}
-          <a href={tnsBannerLink} target='_blank' class='font-medium underline'>
-            TheNewStack.io
+          {partner.description}
+          <a href={partner.link} target='_blank' class='font-medium underline'>
+            {partner.linkText}
          </a>
        </p>
      </div>
--- a/src/components/RoadmapHint.astro
+++ b/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 hasTnsBanner = !!tnsBannerLink;
+const { roadmapId } = Astro.props;
 ---

 <div class:list={['mb-0 rounded-md border mt-2 bg-white']}>
--- a/src/data/roadmaps/backend/backend.md
+++ b/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: |
--- a/src/data/roadmaps/devops/devops.md
+++ b/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: |
--- a/src/data/roadmaps/engineering-manager/engineering-manager.md
+++ b/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.
--- a/src/data/roadmaps/frontend/frontend.md
+++ b/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: |
--- a/src/data/roadmaps/kubernetes/kubernetes.md
+++ b/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
--- a/src/data/roadmaps/product-manager/product-manager.md
+++ b/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.
--- a/src/data/roadmaps/software-architect/software-architect.md
+++ b/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
--- a/src/lib/roadmap.ts
+++ b/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;
--- a/src/pages/[roadmapId]/courses.astro
+++ b/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}
--- a/src/pages/[roadmapId]/index.astro
+++ b/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}
--- a/src/pages/[roadmapId]/projects.astro
+++ b/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}