From e0f5d6f436dbe2b67a8c30b008aa556f11645dbd Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Wed, 15 Nov 2023 02:58:56 +0000
Subject: [PATCH] Update contribution functionality

---
 src/components/TopicDetail/TopicDetail.tsx           | 12 ++++++++----
 src/pages/[roadmapId]/[...topicId].astro             |  7 ++++++-
 .../[bestPracticeId]/[...topicId].astro              |  5 +++++
 3 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/components/TopicDetail/TopicDetail.tsx b/src/components/TopicDetail/TopicDetail.tsx
index 489a4fdaa..5f8872ff3 100644
--- a/src/components/TopicDetail/TopicDetail.tsx
+++ b/src/components/TopicDetail/TopicDetail.tsx
@@ -45,6 +45,7 @@ export function TopicDetail(props: TopicDetailProps) {
   const { canSubmitContribution } = props;
 
   const [hasEnoughLinks, setHasEnoughLinks] = useState(false);
+  const [contributionUrl, setContributionUrl] = useState('');
   const [isActive, setIsActive] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
   const [isContributing, setIsContributing] = useState(false);
@@ -160,8 +161,13 @@ export function TopicDetail(props: TopicDetailProps) {
             topicHtml,
             'text/html',
           );
+
           const links = topicDom.querySelectorAll('a');
+          const contributionUrl =
+            topicDom.querySelector('[data-github-url]')?.dataset?.githubUrl ||
+            '';
 
+          setContributionUrl(contributionUrl);
           setHasEnoughLinks(links.length >= 3);
         } else {
           setLinks((response as RoadmapContentDocument)?.links || []);
@@ -190,8 +196,6 @@ export function TopicDetail(props: TopicDetailProps) {
   }
 
   const hasContent = topicHtml?.length > 0 || links?.length > 0 || topicTitle;
-  const dataDir = resourceType === 'roadmap' ? 'roadmaps' : 'best-practices';
-  const githubBaseUrl = `https://github.com/kamranahmedse/developer-roadmap/tree/master/src/data/${dataDir}/${resourceId}/content`;
 
   return (
     <div className={'relative z-50'}>
@@ -281,7 +285,7 @@ export function TopicDetail(props: TopicDetailProps) {
             )}
 
             {/* Contribution */}
-            {canSubmitContribution && !hasEnoughLinks && (
+            {canSubmitContribution && !hasEnoughLinks && contributionUrl && (
               <div className="mt-8 flex-1 border-t">
                 <p className="mb-2 mt-2 text-sm leading-relaxed text-gray-400">
                   Help us improve this introduction and submit a link to a good
@@ -289,7 +293,7 @@ export function TopicDetail(props: TopicDetailProps) {
                   understand this topic better.
                 </p>
                 <a
-                  href={githubBaseUrl}
+                  href={contributionUrl}
                   target={'_blank'}
                   className="flex w-full items-center justify-center rounded-md bg-gray-800 p-2 text-sm text-white transition-colors hover:bg-black hover:text-white disabled:bg-green-200 disabled:text-black"
                 >
diff --git a/src/pages/[roadmapId]/[...topicId].astro b/src/pages/[roadmapId]/[...topicId].astro
index d8094a560..ce1b14977 100644
--- a/src/pages/[roadmapId]/[...topicId].astro
+++ b/src/pages/[roadmapId]/[...topicId].astro
@@ -27,8 +27,13 @@ export async function getStaticPaths() {
 export const partial = true;
 
 const { topicId } = Astro.params;
-const { file, roadmapId, roadmap, heading } =
+const { file, url, roadmapId, roadmap, heading } =
   Astro.props as RoadmapTopicFileType;
+
+const fileWithoutBasePath = file.file?.replace(/.+?\/src\/data/, '/src/data');
+const gitHubUrl = `https://github.com/kamranahmedse/developer-roadmap/tree/master${fileWithoutBasePath}`;
 ---
 
+<div data-github-url={gitHubUrl}></div>
+
 <file.Content />
\ No newline at end of file
diff --git a/src/pages/best-practices/[bestPracticeId]/[...topicId].astro b/src/pages/best-practices/[bestPracticeId]/[...topicId].astro
index bc025c5e4..1607036b0 100644
--- a/src/pages/best-practices/[bestPracticeId]/[...topicId].astro
+++ b/src/pages/best-practices/[bestPracticeId]/[...topicId].astro
@@ -21,6 +21,11 @@ export async function getStaticPaths() {
 }
 
 const { file } = Astro.props as BestPracticeTopicFileType;
+
+const fileWithoutBasePath = file.file?.replace(/.+?\/src\/data/, '/src/data');
+const gitHubUrl = `https://github.com/kamranahmedse/developer-roadmap/tree/master${fileWithoutBasePath}`;
 ---
 
+<div data-github-url={gitHubUrl}></div>
+
 <file.Content />