Add rendering for best practices lists

src/best-practices/frontend-performance/frontend-performance.md

@@ -10,7 +10,7 @@ title: "Frontend Performance"
 description: "Detailed list of best practices to improve your frontend performance"
 dimensions:
   width: 968
-  height: 2734.48
+  height: 1270.89
 schema:
   headline: "Frontend Performance Best Practices"
   description: "Detailed list of best practices to improve the frontend performance of your website. Each best practice carries further details and how to implement that best practice."

src/components/BestPracticeHeader.astro

@@ -0,0 +1,87 @@
+---
+import BestPracticeHint from './BestPracticeHint.astro';
+import DownloadPopup from './DownloadPopup.astro';
+import Icon from './Icon.astro';
+import SubscribePopup from './SubscribePopup.astro';
+
+export interface Props {
+  title: string;
+  description: string;
+  bestPracticeId: string;
+  isUpcoming?: boolean;
+}
+
+const { title, description, bestPracticeId, isUpcoming = false } = Astro.props;
+const isBestPracticeReady = !isUpcoming;
+---
+
+<DownloadPopup />
+<SubscribePopup />
+
+<div class='border-b'>
+  <div class='py-5 sm:py-12 container relative'>
+    <div class='mt-0 mb-3 sm:mb-6'>
+      <h1 class='text-2xl sm:text-4xl mb-0.5 sm:mb-2 font-bold'>
+        {title}
+      </h1>
+      <p class='text-gray-500 text-sm sm:text-lg'>{description}</p>
+    </div>
+
+    <div class='flex justify-between'>
+      <div class='flex gap-1 sm:gap-2'>
+        <a
+          href='/best-practices'
+          class='bg-gray-500 py-1.5 px-3 rounded-md text-white text-xs sm:text-sm font-medium hover:bg-gray-600'
+          aria-label='Back to All Best Practices'
+        >
+          &larr;<span class='hidden sm:inline'>&nbsp;All Best Practices</span>
+        </a>
+
+        {
+          isBestPracticeReady && (
+            <button
+              data-popup='download-popup'
+              class='inline-flex items-center justify-center bg-yellow-400 py-1.5 px-3 text-xs sm:text-sm font-medium rounded-md hover:bg-yellow-500'
+              aria-label='Download Best Practice'
+              ga-category='Subscription'
+              ga-action='Clicked Popup Opener'
+              ga-label='Download Best Practice Popup'
+            >
+              <Icon icon='download' />
+              <span class='hidden sm:inline ml-2'>Download</span>
+            </button>
+          )
+        }
+
+        <button
+          data-popup='subscribe-popup'
+          class='inline-flex items-center justify-center bg-yellow-400 py-1.5 px-3 text-xs sm:text-sm font-medium rounded-md hover:bg-yellow-500'
+          aria-label='Subscribe for Updates'
+          ga-category='Subscription'
+          ga-action='Clicked Popup Opener'
+          ga-label='Subscribe Best Practice Popup'
+        >
+          <Icon icon='email' />
+          <span class='ml-2'>Subscribe</span>
+        </button>
+      </div>
+
+      {
+        isBestPracticeReady && (
+          <a
+            href={`https://github.com/kamranahmedse/developer-roadmap/issues/new?title=[Suggestion] ${title}`}
+            target='_blank'
+            class='inline-flex items-center justify-center bg-gray-500 text-white py-1.5 px-3 text-xs sm:text-sm font-medium rounded-md hover:bg-gray-600'
+            aria-label='Suggest Changes'
+          >
+            <Icon icon='comment' class='h-3 w-3' />
+            <span class='ml-2 hidden sm:inline'>Suggest Changes</span>
+            <span class='ml-2 inline sm:hidden'>Suggest</span>
+          </a>
+        )
+      }
+    </div>
+
+    <BestPracticeHint bestPracticeId={bestPracticeId} />
+  </div>
+</div>

src/components/BestPracticeHint.astro

@@ -0,0 +1,20 @@
+---
+export interface Props {
+  bestPracticeId: string;
+}
+---
+
+<div class='mt-4 sm:mt-7 border-0 sm:border rounded-md mb-0 sm:-mb-[65px]'>
+  <!-- Desktop: Roadmap Resources - Alert -->
+  <div class='hidden sm:flex justify-between px-2 bg-white items-center rounded-md p-1.5'>
+    <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'>Tip</span>
+      Click the best practices for details and resources
+    </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 relative'>
+    Click the best practices for details and resources
+  </p>
+</div>

src/components/DownloadPopup.astro

@@ -5,7 +5,7 @@ import CaptchaFields from './Captcha/CaptchaFields.astro';
 
 <Popup
   id='download-popup'
-  title='Download Roadmap'
+  title='Download'
   subtitle='Enter your email below to receive the download link.'
 >
   <form

src/components/RoadmapHeader.astro

@@ -1,7 +1,7 @@
 ---
 import DownloadPopup from './DownloadPopup.astro';
 import Icon from './Icon.astro';
-import ResourcesAlert from './ResourcesAlert.astro';
+import RoadmapHint from './RoadmapHint.astro';
 import RoadmapNote from './RoadmapNote.astro';
 import SubscribePopup from './SubscribePopup.astro';
 import TopicSearch from './TopicSearch/TopicSearch.astro';
@@ -109,7 +109,7 @@ const isRoadmapReady = !isUpcoming;
     </div>
 
     <!-- Desktop: Roadmap Resources - Alert -->
-    {hasTopics && <ResourcesAlert roadmapId={roadmapId} />}
+    {hasTopics && <RoadmapHint roadmapId={roadmapId} />}
 
     {hasSearch && <TopicSearch />}
   </div>

src/pages/best-practices/[bestPracticeId].astro

@@ -1,8 +1,8 @@
 ---
+import BestPracticeHeader from '../../components/BestPracticeHeader.astro';
 import CaptchaScripts from '../../components/Captcha/CaptchaScripts.astro';
 import InteractiveRoadmap from '../../components/InteractiveRoadmap/InteractiveRoadmap.astro';
 import MarkdownFile from '../../components/MarkdownFile.astro';
-import RoadmapHeader from '../../components/RoadmapHeader.astro';
 import UpcomingForm from '../../components/UpcomingForm.astro';
 import BaseLayout from '../../layouts/BaseLayout.astro';
 import { BestPracticeFrontmatter,getBestPracticeIds } from '../../lib/best-pratice';
@@ -50,10 +50,10 @@ if (bestPracticeData.schema) {
   noIndex={bestPracticeData.isUpcoming}
   jsonLd={jsonLdSchema}
 >
-  <RoadmapHeader
+  <BestPracticeHeader
     title={bestPracticeData.title}
     description={bestPracticeData.description}
-    roadmapId={bestPracticeId}
+    bestPracticeId={bestPracticeId}
     isUpcoming={bestPracticeData.isUpcoming}
   />
 

src/pages/best-practices/index.astro

@@ -15,7 +15,6 @@ const bestPractices = await getAllBestPractices();
   <SimplePageHeader
     title='Best Practices'
     description='Best practices on different topics with detailed implementation guidelines'
-    showYouTubeAlert={true}
   />
 
   <div class='bg-gray-100 pt-4 pb-14 sm:pt-8 sm:pb-16'>