Make topic overlay renderer agnostic

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 { contentContributionLink } = Astro.props;
-const githubLink = `https://github.com/kamranahmedse/developer-roadmap/tree/master/src/roadmaps/${roadmapId}/content`;
 ---
 
 <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>

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>

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}