Add meta text below roadmap topic for contribution

src/components/InteractiveRoadmap/InteractiveRoadmap.astro

@@ -1,10 +1,10 @@
 ---
-import DownloadPopup from "../DownloadPopup.astro";
-import Loader from "../Loader.astro";
-import ShareIcons from "../ShareIcons.astro";
-import SubscribePopup from "../SubscribePopup.astro";
-import TopicOverlay from "../TopicOverlay.astro";
-import "./InteractiveRoadmap.css";
+import DownloadPopup from '../DownloadPopup.astro';
+import Loader from '../Loader.astro';
+import ShareIcons from '../ShareIcons.astro';
+import SubscribePopup from '../SubscribePopup.astro';
+import TopicOverlay from '../TopicOverlay.astro';
+import './InteractiveRoadmap.css';
 
 export interface Props {
   roadmapId: string;
@@ -16,31 +16,32 @@ export interface Props {
   };
 }
 
-const { roadmapId, jsonUrl, dimensions = null, description } =
-  Astro.props;
+const { roadmapId, jsonUrl, dimensions = null, description } = Astro.props;
 ---
 
 <link
-  rel="preload"
-  href="/fonts/balsamiq.woff2"
-  as="font"
-  type="font/woff2"
+  rel='preload'
+  href='/fonts/balsamiq.woff2'
+  as='font'
+  type='font/woff2'
   crossorigin
-  slot="after-header"
+  slot='after-header'
 />
 
-<div class="bg-gray-50 py-4 sm:py-12">
-  <div class="max-w-[1000px] container relative">
+<div class='bg-gray-50 py-4 sm:py-12'>
+  <div class='max-w-[1000px] container relative'>
     <ShareIcons
       description={description}
       pageUrl={`https://roadmap.sh/${roadmapId}`}
     />
     <DownloadPopup />
     <SubscribePopup />
-    <TopicOverlay />
+    <TopicOverlay roadmapId={roadmapId} />
     <div
-      id="roadmap-svg"
-      style={dimensions ? `--aspect-ratio:${dimensions.width}/${dimensions.height}` : null}
+      id='roadmap-svg'
+      style={dimensions
+        ? `--aspect-ratio:${dimensions.width}/${dimensions.height}`
+        : null}
       data-roadmap-id={roadmapId}
       data-json-url={jsonUrl}
     >
@@ -49,4 +50,4 @@ const { roadmapId, jsonUrl, dimensions = null, description } =
   </div>
 </div>
 
-<script src="./roadmap.js"></script>
+<script src='./roadmap.js'></script>

src/components/InteractiveRoadmap/topic.js

@@ -8,6 +8,7 @@ export class Topic {
     this.markTopicDoneId = 'mark-topic-done';
     this.markTopicPendingId = 'mark-topic-pending';
     this.closeTopicId = 'close-topic';
+    this.contributionTextId = 'contrib-meta';
 
     this.activeRoadmapId = null;
     this.activeTopicId = null;
@@ -20,7 +21,8 @@ export class Topic {
     this.handleOverlayClick = this.handleOverlayClick.bind(this);
     this.markAsDone = this.markAsDone.bind(this);
     this.markAsPending = this.markAsPending.bind(this);
-      this.queryRoadmapElementsByTopicId = this.queryRoadmapElementsByTopicId.bind(this);
+    this.queryRoadmapElementsByTopicId =
+      this.queryRoadmapElementsByTopicId.bind(this);
 
     this.init = this.init.bind(this);
   }
@@ -41,6 +43,10 @@ export class Topic {
     return document.getElementById(this.topicActionsId);
   }
 
+  get contributionTextEl() {
+    return document.getElementById(this.contributionTextId);
+  }
+
   get contentEl() {
     return document.getElementById(this.contentId);
   }
@@ -58,6 +64,7 @@ export class Topic {
 
     this.loaderEl.classList.remove('hidden'); // Show loader
     this.topicActionsEl.classList.add('hidden'); // Hide Actions
+    this.contributionTextEl.classList.add('hidden'); // Hide contribution text
     this.contentEl.replaceChildren(''); // Remove content
   }
 
@@ -75,6 +82,7 @@ export class Topic {
     this.contentEl.replaceChildren(html);
     this.loaderEl.classList.add('hidden');
     this.topicActionsEl.classList.remove('hidden');
+    this.contributionTextEl.classList.remove('hidden');
 
     const normalizedGroup = (this.activeTopicId || '').replace(/^\d+-/, '');
     const isDone = localStorage.getItem(normalizedGroup) === 'done';
@@ -132,7 +140,9 @@ export class Topic {
   }
 
   queryRoadmapElementsByTopicId(topicId) {
-      const elements = document.querySelectorAll(`[data-group-id$="-${topicId}"]`);
+    const elements = document.querySelectorAll(
+      `[data-group-id$="-${topicId}"]`
+    );
     const matchingElements = [];
 
     elements.forEach((element) => {
@@ -173,19 +183,25 @@ export class Topic {
       return;
     }
 
-      const isClickedDone = e.target.id === this.markTopicDoneId || e.target.closest(`#${this.markTopicDoneId}`);
+    const isClickedDone =
+      e.target.id === this.markTopicDoneId ||
+      e.target.closest(`#${this.markTopicDoneId}`);
     if (isClickedDone) {
       this.markAsDone(this.activeTopicId);
       this.close();
     }
 
-      const isClickedPending = e.target.id === this.markTopicPendingId || e.target.closest(`#${this.markTopicPendingId}`);
+    const isClickedPending =
+      e.target.id === this.markTopicPendingId ||
+      e.target.closest(`#${this.markTopicPendingId}`);
     if (isClickedPending) {
       this.markAsPending(this.activeTopicId);
       this.close();
     }
 
-      const isClickedClose = e.target.id === this.closeTopicId || e.target.closest(`#${this.closeTopicId}`);
+    const isClickedClose =
+      e.target.id === this.closeTopicId ||
+      e.target.closest(`#${this.closeTopicId}`);
     if (isClickedClose) {
       this.close();
     }
@@ -200,5 +216,4 @@ export class Topic {
       }
     });
   }
-  }
-  
+}

src/components/TopicOverlay.astro

@@ -1,31 +1,69 @@
 ---
-import Icon from "./Icon.astro";
-import Loader from "./Loader.astro";
+import Icon from './Icon.astro';
+import Loader from './Loader.astro';
 
+export interface Props {
+  roadmapId: string;
+}
+
+const { roadmapId } = Astro.props;
+const githubLink = `https://github.com/kamranahmedse/developer-roadmap/tree/master/src/roadmaps/${roadmapId}/content`;
 ---
 
 <div id='topic-overlay' class='hidden'>
-    <div class="fixed top-0 right-0 z-40 h-screen p-4 sm:p-6 overflow-y-auto bg-white w-full sm:max-w-[600px]" tabindex="-1" id='topic-body'>
+  <div
+    class='fixed top-0 right-0 z-40 h-screen p-4 sm:p-6 overflow-y-auto bg-white w-full sm:max-w-[600px]'
+    tabindex='-1'
+    id='topic-body'
+  >
     <div id='topic-loader' class='hidden'>
       <Loader />
     </div>
 
     <div id='topic-actions' class='hidden mb-2'>
-        <button id='mark-topic-done' class='bg-green-600 text-white p-1 px-2 text-sm rounded-md hover:bg-green-700 inline-flex items-center'>
-          <Icon icon="check" /> <span class='ml-2'>Mark as Done</span>
+      <button
+        id='mark-topic-done'
+        class='bg-green-600 text-white p-1 px-2 text-sm rounded-md hover:bg-green-700 inline-flex items-center'
+      >
+        <Icon icon='check' />
+        <span class='ml-2'>Mark as Done</span>
       </button>
 
-        <button id='mark-topic-pending' class='hidden bg-red-600 text-white p-1 px-2 text-sm rounded-md hover:bg-red-700 inline-flex items-center'>
-          <Icon icon="reset" /> <span class='ml-2'>Mark as Pending</span>
+      <button
+        id='mark-topic-pending'
+        class='hidden bg-red-600 text-white p-1 px-2 text-sm rounded-md hover:bg-red-700 inline-flex items-center'
+      >
+        <Icon icon='reset' />
+        <span class='ml-2'>Mark as Pending</span>
       </button>
 
-        <button type="button" id='close-topic' class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 absolute top-2.5 right-2.5 inline-flex items-center">
-          <Icon icon="close" />
+      <button
+        type='button'
+        id='close-topic'
+        class='text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 absolute top-2.5 right-2.5 inline-flex items-center'
+      >
+        <Icon icon='close' />
       </button>
     </div>
 
-      <div id='topic-content' class='prose prose-h1:mt-7 prose-h1:mb-2.5 prose-p:mt-0 prose-p:mb-2 prose-li:m-0 prose-li:mb-0.5  prose-h2:mb-3 prose-h2:mt-0'></div>
-    </div>
-    <div class="bg-gray-900 bg-opacity-50 dark:bg-opacity-80 fixed inset-0 z-30"></div>
+    <div
+      id='topic-content'
+      class='prose prose-h1:mt-7 prose-h1:mb-2.5 prose-p:mt-0 prose-p:mb-2 prose-li:m-0 prose-li:mb-0.5 prose-h2:mb-3 prose-h2:mt-0'
+    >
     </div>
 
+    <p
+      id='contrib-meta'
+      class='text-gray-400 text-sm border-t pt-3 mt-10 hidden'
+    >
+      We are still working on this page. You can contribute by submitting a
+      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
+      >.
+    </p>
+  </div>
+  <div class='bg-gray-900 bg-opacity-50 dark:bg-opacity-80 fixed inset-0 z-30'>
+  </div>
+</div>