From 45059998c0a74a0991c63aba1d2fe444a6449612 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Tue, 1 Apr 2025 15:05:28 +0100
Subject: [PATCH] Add support for replacing TNS partner banner
---
.../CustomRoadmap/RoadmapHeader.tsx | 1 -
src/components/CustomRoadmap/RoadmapHint.tsx | 33 +++----------------
src/components/RoadmapHeader.astro | 18 ++++++----
src/components/RoadmapHint.astro | 4 +--
src/data/roadmaps/backend/backend.md | 5 ++-
src/data/roadmaps/devops/devops.md | 5 ++-
.../engineering-manager.md | 4 +++
src/data/roadmaps/frontend/frontend.md | 5 ++-
src/data/roadmaps/kubernetes/kubernetes.md | 5 ++-
.../product-manager/product-manager.md | 4 +++
.../software-architect/software-architect.md | 4 +++
src/lib/roadmap.ts | 6 +++-
src/pages/[roadmapId]/courses.astro | 2 +-
src/pages/[roadmapId]/index.astro | 2 +-
src/pages/[roadmapId]/projects.astro | 2 +-
15 files changed, 53 insertions(+), 47 deletions(-)
diff --git a/src/components/CustomRoadmap/RoadmapHeader.tsx b/src/components/CustomRoadmap/RoadmapHeader.tsx
index 5775d89e3..b45fb9ba2 100644
--- 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>
diff --git a/src/components/CustomRoadmap/RoadmapHint.tsx b/src/components/CustomRoadmap/RoadmapHint.tsx
index 183c21537..680c05d09 100644
--- 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"
/>
diff --git a/src/components/RoadmapHeader.astro b/src/components/RoadmapHeader.astro
index 2e6c8124c..e8c6666eb 100644
--- 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>
diff --git a/src/components/RoadmapHint.astro b/src/components/RoadmapHint.astro
index 8b38bb097..ac93723c8 100644
--- 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']}>
diff --git a/src/data/roadmaps/backend/backend.md b/src/data/roadmaps/backend/backend.md
index b8b136818..dbf8b2cb0 100644
--- 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: |
diff --git a/src/data/roadmaps/devops/devops.md b/src/data/roadmaps/devops/devops.md
index 25aed6d77..55b405fe2 100644
--- 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: |
diff --git a/src/data/roadmaps/engineering-manager/engineering-manager.md b/src/data/roadmaps/engineering-manager/engineering-manager.md
index beb43ab0b..af769edd4 100644
--- 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.
diff --git a/src/data/roadmaps/frontend/frontend.md b/src/data/roadmaps/frontend/frontend.md
index 35c257d0e..49db89e17 100644
--- 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: |
diff --git a/src/data/roadmaps/kubernetes/kubernetes.md b/src/data/roadmaps/kubernetes/kubernetes.md
index 127018b03..429e7a20a 100644
--- 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
diff --git a/src/data/roadmaps/product-manager/product-manager.md b/src/data/roadmaps/product-manager/product-manager.md
index f580ec887..4d0e40fe2 100644
--- 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.
diff --git a/src/data/roadmaps/software-architect/software-architect.md b/src/data/roadmaps/software-architect/software-architect.md
index 980eb2e0a..eedd99f8f 100644
--- 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
diff --git a/src/lib/roadmap.ts b/src/lib/roadmap.ts
index 34b1d66ed..5715a68b1 100644
--- 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;
diff --git a/src/pages/[roadmapId]/courses.astro b/src/pages/[roadmapId]/courses.astro
index f344a624d..d5f9778a9 100644
--- 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}
diff --git a/src/pages/[roadmapId]/index.astro b/src/pages/[roadmapId]/index.astro
index ddc79a19d..346f9fca7 100644
--- 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}
diff --git a/src/pages/[roadmapId]/projects.astro b/src/pages/[roadmapId]/projects.astro
index 6f606499a..ca9ec9a68 100644
--- 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}