Add new roadmap alert in header (#9307)

* Add new roadmap alert in header

* Add new roadmap alert in header

* Add feedback wanted alert component

* Update imports

src/components/RoadmapHeader.astro

@@ -14,6 +14,7 @@ import { ScheduleButton } from './Schedule/ScheduleButton';
 import { ShareRoadmapButton } from './ShareRoadmapButton';
 import { TabLink } from './TabLink';
 import { PersonalizedRoadmap } from './PersonalizedRoadmap/PersonalizedRoadmap';
+import RoadmapFeedbackAlert from './Roadmaps/RoadmapFeedbackAlert.astro';
 
 export interface Props {
   title: string;
@@ -29,6 +30,7 @@ export interface Props {
   coursesCount?: number;
   hasAIChat?: boolean;
   isForkable?: boolean;
+  isNew?: boolean;
   activeTab?: 'roadmap' | 'projects' | 'courses';
 }
 
@@ -41,6 +43,7 @@ const {
   projectCount = 0,
   activeTab = 'roadmap',
   coursesCount = 0,
+  isNew = false,
 } = Astro.props;
 
 const hasCourses = coursesCount > 0;
@@ -65,6 +68,8 @@ const hasProjects = projectCount > 0;
     )
   }
 
+  {isNew && <RoadmapFeedbackAlert roadmapId={roadmapId} title={title} />}
+
   <div
     class='relative rounded-none border bg-white px-5 pt-4 pb-0 sm:rounded-lg'
   >

src/components/Roadmaps/RoadmapFeedbackAlert.astro

@@ -0,0 +1,37 @@
+---
+import { Bell } from 'lucide-react';
+
+export interface Props {
+  roadmapId: string;
+  title: string;
+}
+
+const { roadmapId, title } = Astro.props;
+
+const issueTitle = encodeURIComponent(`[New Roadmap Feedback] ${title}`);
+const roadmapUrl = encodeURIComponent(`https://roadmap.sh/${roadmapId}`);
+const feedbackUrl = `https://github.com/kamranahmedse/developer-roadmap/issues/new?template=01-suggest-changes.yml&title=${issueTitle}&url=${roadmapUrl}`;
+---
+
+<div
+  class='hidden rounded-md border border-yellow-400 bg-gradient-to-r from-yellow-100 via-yellow-50 to-amber-100 px-2 py-2 sm:block'
+>
+  <p class='flex items-center gap-2.5 text-sm'>
+    <span
+      class='inline-flex items-center gap-1 rounded-sm bg-gradient-to-r from-yellow-600 to-yellow-700 px-2.5 py-1 text-xs font-bold text-white'
+    >
+      <Bell className='h-3.5 w-3.5' />
+      Feedback Wanted
+    </span>
+    <span class='font-medium text-yellow-900'>
+      This is a new roadmap, help us improve it with
+      <a
+        href={feedbackUrl}
+        target='_blank'
+        class='font-bold text-yellow-700 underline decoration-yellow-500 decoration-2 underline-offset-2 transition-all hover:text-yellow-900 hover:decoration-yellow-700'
+      >
+        your feedback
+      </a>
+    </span>
+  </p>
+</div>

src/pages/[roadmapId]/index.astro

@@ -7,6 +7,7 @@ import { ShareIcons } from '../../components/ShareIcons/ShareIcons';
 import { TopicDetail } from '../../components/TopicDetail/TopicDetail';
 import { UserProgressModal } from '../../components/UserProgress/UserProgressModal';
 import BaseLayout from '../../layouts/BaseLayout.astro';
+import { isNewRoadmap } from '../../queries/official-roadmap';
 import {
   generateArticleSchema,
   generateFAQSchema,
@@ -75,6 +76,8 @@ if (faqs.length) {
 
 const projects = await listOfficialProjects({ roadmapId });
 const courses = roadmapData.courses || [];
+
+const isNew = isNewRoadmap(roadmapData.createdAt);
 ---
 
 <BaseLayout
@@ -113,6 +116,7 @@ const courses = roadmapData.courses || [];
       partner={roadmapData.partner}
       roadmapId={roadmapId}
       isForkable={true}
+      isNew={isNew}
       projectCount={projects.length}
       coursesCount={courses.length}
       hasAIChat={true}