From 5f2836a148d253c045f3364960ed3094ac16f789 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Tue, 24 Jan 2023 01:34:20 +0400
Subject: [PATCH] Make topic overlay renderer agnostic

---
 src/components/TopicOverlay/TopicOverlay.astro  | 7 +++----
 src/pages/[roadmapId]/index.astro               | 4 +++-
 src/pages/best-practices/[bestPracticeId].astro | 4 ++++
 3 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/components/TopicOverlay/TopicOverlay.astro b/src/components/TopicOverlay/TopicOverlay.astro
index bbd565bf9..e57809439 100644
--- a/src/components/TopicOverlay/TopicOverlay.astro
+++ b/src/components/TopicOverlay/TopicOverlay.astro
@@ -3,11 +3,10 @@ import Icon from '../Icon.astro';
 import Loader from '../Loader.astro';
 
 export interface Props {
-  roadmapId: string;
+  contentContributionLink: string;
 }
 
-const { roadmapId } = Astro.props;
-const githubLink = `https://github.com/kamranahmedse/developer-roadmap/tree/master/src/roadmaps/${roadmapId}/content`;
+const { contentContributionLink } = Astro.props;
 ---
 
 <div id='topic-overlay' class='hidden'>
@@ -60,7 +59,7 @@ const githubLink = `https://github.com/kamranahmedse/developer-roadmap/tree/mast
       brief description and a few links to learn more about this topic <a
         target='_blank'
         class='underline text-blue-700'
-        href={githubLink}>on GitHub repository.</a
+        href={contentContributionLink}>on GitHub repository.</a
       >.
     </p>
   </div>
diff --git a/src/pages/[roadmapId]/index.astro b/src/pages/[roadmapId]/index.astro
index ef6f06551..545aeee4a 100644
--- a/src/pages/[roadmapId]/index.astro
+++ b/src/pages/[roadmapId]/index.astro
@@ -47,6 +47,8 @@ if (roadmapData.schema) {
 if (roadmapFAQs.length) {
   jsonLdSchema.push(generateFAQSchema(roadmapFAQs));
 }
+
+const contentContributionLink = `https://github.com/kamranahmedse/developer-roadmap/tree/master/src/roadmaps/${roadmapId}/content`;
 ---
 
 <BaseLayout
@@ -75,7 +77,7 @@ if (roadmapFAQs.length) {
       !roadmapData.isUpcoming && roadmapData.jsonUrl && (
         <div class='max-w-[1000px] container relative'>
           <ShareIcons description={roadmapData.featuredDescription} pageUrl={`https://roadmap.sh/${roadmapId}`} />
-          <TopicOverlay roadmapId={roadmapId} />
+          <TopicOverlay contentContributionLink={contentContributionLink} />
 
           <FrameRenderer roadmapId={roadmapId} jsonUrl={roadmapData.jsonUrl} dimensions={roadmapData.dimensions} />
         </div>
diff --git a/src/pages/best-practices/[bestPracticeId].astro b/src/pages/best-practices/[bestPracticeId].astro
index 0446f418c..c4a666003 100644
--- a/src/pages/best-practices/[bestPracticeId].astro
+++ b/src/pages/best-practices/[bestPracticeId].astro
@@ -4,6 +4,7 @@ import CaptchaScripts from '../../components/Captcha/CaptchaScripts.astro';
 import FrameRenderer from '../../components/FrameRenderer/FrameRenderer.astro';
 import MarkdownFile from '../../components/MarkdownFile.astro';
 import ShareIcons from '../../components/ShareIcons/ShareIcons.astro';
+import TopicOverlay from '../../components/TopicOverlay/TopicOverlay.astro';
 import UpcomingForm from '../../components/UpcomingForm.astro';
 import BaseLayout from '../../layouts/BaseLayout.astro';
 import { BestPracticeFrontmatter, getBestPracticeIds } from '../../lib/best-pratice';
@@ -40,6 +41,8 @@ if (bestPracticeData.schema) {
     })
   );
 }
+
+const contentContributionLink = `https://github.com/kamranahmedse/developer-roadmap/tree/master/src/best-practices/${bestPracticeId}/content`;
 ---
 
 <BaseLayout
@@ -69,6 +72,7 @@ if (bestPracticeData.schema) {
             description={bestPracticeData.featuredDescription}
             pageUrl={`https://roadmap.sh/best-practices/${bestPracticeId}`}
           />
+          <TopicOverlay contentContributionLink={contentContributionLink} />
 
           <FrameRenderer
             roadmapId={bestPracticeId}