Add TNS banner

bin/roadmap-metas.cjs

@@ -92,7 +92,7 @@ module.exports = {
   react: {
     dimensions: {
       width: 968,
-      height: 2570.26,
+      height: 1570.26,
     },
   },
   'software-architect': {

src/components/InteractiveRoadmap/InteractiveRoadmap.astro

@@ -30,7 +30,7 @@ const { roadmapId, jsonUrl, dimensions = null, description, roadmapPermalink } =
   slot="after-header"
 />
 
-<div class="bg-gray-50 py-4 sm:py-10">
+<div class="bg-gray-50 py-4 sm:py-12">
   <div class="max-w-[1000px] container relative">
     <ShareIcons
       description={description}

src/components/ResourcesAlert.astro

@@ -6,36 +6,44 @@ export interface Props {
 }
 
 const { roadmapPermalink } = Astro.props;
+
+const roadmapId = roadmapPermalink.replace(/\//, '');
+const roadmapTitle = roadmapId === 'devops' ? 'DevOps' : `${roadmapId.charAt(0).toUpperCase()} ${roadmapId.slice(1)}`;
 ---
 
-<!-- Desktop: Roadmap Resources - Alert -->
+<div class="mt-4 sm:mt-7 border rounded-md mb-0 sm:-mb-[82px]">
-<div
+  <!-- Alert for the Sister Site -->
-  class="hidden sm:flex justify-between mb-0 sm:-mb-16 mt-7 px-2 bg-white border rounded-md items-center"
+  <div class="px-2 py-1.5 border-b bg-gray-100 hidden sm:block">
->
+    <p class="text-sm">Get the latest {roadmapTitle} news from our sister site <a href="#" class="font-semibold underline">TheNewStack.io</a></p>
-  <p class="text-sm">
+  </div>
-    <span
+
-      class="text-yellow-900 bg-yellow-200 py-0.5 px-1 text-xs rounded-sm font-medium uppercase mr-0.5"
+  <!-- Desktop: Roadmap Resources - Alert -->
-      >New</span
+  <div class="hidden sm:flex justify-between px-2 bg-white items-center rounded-bl-md rounded-br-md">
+    <p class="text-sm">
+      <span
+        class="text-yellow-900 bg-yellow-200 py-0.5 px-1 text-xs rounded-sm font-medium uppercase mr-0.5"
+        >New</span
+      >
+      Resources are here, try clicking nodes
+    </p>
+  
+    <a
+      href={`${roadmapPermalink}/topics`}
+      class="inline-flex items-center justify-center py-1.5 text-sm font-medium rounded-md hover:text-black text-gray-500 px-1"
     >
-    Resources are here, try clicking nodes
+      <Icon icon="search" />
-  </p>
+      <span class="ml-2">Search Topics</span>
+    </a>
+  </div>
   
-  <a
+  <!-- Mobile - Roadmap resources alert -->
-    href={`${roadmapPermalink}/topics`}
+  <p
-    class="inline-flex items-center justify-center py-1.5 text-sm font-medium rounded-md hover:text-black text-gray-500 px-1"
+    class="block sm:hidden text-sm border border-yellow-500 text-yellow-700 rounded-md py-1.5 px-2 bg-white relative"
   >
-    <Icon icon="search" />
+    Click roadmap items for resources or visit{" "}
-    <span class="ml-2">Search Topics</span>
+    <a href={`${roadmapPermalink}/topics`} class="text-blue-700 underline">
-  </a>
+      resources list
+    </a>
+    .
+  </p>
 </div>
-
-<!-- Mobile - Roadmap resources alert -->
-<p
-  class="block sm:hidden text-sm border border-yellow-500 text-yellow-700 rounded-md py-1.5 px-2 bg-white mt-5 relative"
->
-  We have added resources. Try clicking roadmap nodes or visit{" "}
-  <a href={`${roadmapPermalink}/topics`} class="text-blue-700 underline">
-    resources list
-  </a>
-  .
-</p>

src/roadmaps/react/react.md

@@ -9,7 +9,7 @@ description: "Everything that is there to learn about React and the ecosystem in
 hasTopics: true
 dimensions:
   width: 968
-  height: 2570.26
+  height: 1570.26
 seo:
   title: "React Developer Roadmap: Learn to become a React developer"
   description: "Community driven, articles, resources, guides, interview questions, quizzes for react development. Learn to become a modern React developer by following the steps, skills, resources and guides listed in this roadmap."