Fix popup not working on roadmaps

src/components/InteractiveRoadmap/roadmap.js

@@ -1,6 +1,6 @@
-import { wireframeJSONToSVG } from "roadmap-renderer";
-import { Topic } from "./topic";
-import { Sharer } from "./sharer";
+import { wireframeJSONToSVG } from 'roadmap-renderer';
+import { Topic } from './topic';
+import { Sharer } from './sharer';
 
 /**
  * @typedef {{ roadmapId: string, jsonUrl: string }} RoadmapConfig
@@ -11,10 +11,10 @@ export class Roadmap {
    * @param {RoadmapConfig} config
    */
   constructor() {
-    this.roadmapId = "";
-    this.jsonUrl = "";
+    this.roadmapId = '';
+    this.jsonUrl = '';
 
-    this.containerId = "roadmap-svg";
+    this.containerId = 'roadmap-svg';
 
     this.init = this.init.bind(this);
     this.onDOMLoaded = this.onDOMLoaded.bind(this);
@@ -28,10 +28,16 @@ export class Roadmap {
   }
 
   prepareConfig() {
+    if (!this.containerEl) {
+      return false;
+    }
+
     const dataset = this.containerEl.dataset;
 
     this.roadmapId = dataset.roadmapId;
     this.jsonUrl = dataset.jsonUrl;
+
+    return true;
   }
 
   /**
@@ -40,7 +46,7 @@ export class Roadmap {
    */
   fetchRoadmapSvg(jsonUrl) {
     if (!jsonUrl) {
-      console.error("jsonUrl not defined in frontmatter");
+      console.error('jsonUrl not defined in frontmatter');
       return null;
     }
 
@@ -50,13 +56,15 @@ export class Roadmap {
       })
       .then(function (json) {
         return wireframeJSONToSVG(json, {
-          fontURL: "/fonts/balsamiq.woff2",
+          fontURL: '/fonts/balsamiq.woff2',
         });
       });
   }
 
   onDOMLoaded() {
-    this.prepareConfig();
+    if (!this.prepareConfig()) {
+      return;
+    }
 
     this.fetchRoadmapSvg(this.jsonUrl)
       .then((svg) => {
@@ -66,8 +74,8 @@ export class Roadmap {
   }
 
   handleRoadmapClick(e) {
-    const targetGroup = e.target.closest("g") || {};
-    const groupId = targetGroup.dataset ? targetGroup.dataset.groupId : "";
+    const targetGroup = e.target.closest('g') || {};
+    const groupId = targetGroup.dataset ? targetGroup.dataset.groupId : '';
     if (!groupId) {
       return;
     }
@@ -75,7 +83,7 @@ export class Roadmap {
     e.stopImmediatePropagation();
 
     window.dispatchEvent(
-      new CustomEvent("topic.click", {
+      new CustomEvent('topic.click', {
         detail: {
           topicId: groupId,
           roadmapId: this.roadmapId,
@@ -85,8 +93,8 @@ export class Roadmap {
   }
 
   init() {
-    window.addEventListener("DOMContentLoaded", this.onDOMLoaded);
-    window.addEventListener("click", this.handleRoadmapClick);
+    window.addEventListener('DOMContentLoaded', this.onDOMLoaded);
+    window.addEventListener('click', this.handleRoadmapClick);
   }
 }
 

src/components/InteractiveRoadmap/sharer.js

@@ -3,7 +3,7 @@ export class Sharer {
     this.init = this.init.bind(this);
     this.onScroll = this.onScroll.bind(this);
 
-    this.shareIconsId = "page-share-icons";
+    this.shareIconsId = 'page-share-icons';
   }
 
   get shareIconsEl() {
@@ -12,14 +12,18 @@ export class Sharer {
 
   onScroll() {
     if (window.scrollY < 100 || window.innerWidth < 1050) {
-      this.shareIconsEl.classList.add("hidden");
+      this.shareIconsEl.classList.add('hidden');
       return null;
     }
 
-    this.shareIconsEl.classList.remove("hidden");
+    this.shareIconsEl.classList.remove('hidden');
   }
 
   init() {
-    window.addEventListener("scroll", this.onScroll, { passive: true });
+    if (!this.shareIconsEl) {
+      return;
+    }
+
+    window.addEventListener('scroll', this.onScroll, { passive: true });
   }
-}
+}

src/components/MarkdownRoadmap.astro

@@ -1,9 +1,24 @@
 ---
-import "../styles/prism.css";
+import '../styles/prism.css';
+import DownloadPopup from './DownloadPopup.astro';
+import ShareIcons from './ShareIcons.astro';
+import SubscribePopup from './SubscribePopup.astro';
+
+export interface Props {
+  roadmapId: string;
+  description: string;
+}
+
+const { roadmapId, description } = Astro.props;
 ---
 
-<div class="bg-gray-50 py-4 sm:py-10">
-  <div class="container prose prose-headings:mt-4 prose-headings:mb-2 prose-p:mb-0.5">
+<div class='bg-gray-50 py-4 sm:py-10'>
+  <div
+    class='container prose prose-headings:mt-4 prose-headings:mb-2 prose-p:mb-0.5 relative prose-code:text-white'
+  >
+    <DownloadPopup />
+    <SubscribePopup />
+
     <slot />
   </div>
 </div>

src/pages/[roadmapId]/index.astro

@@ -53,7 +53,10 @@ const roadmapData = roadmapFile.frontmatter as RoadmapFrontmatter;
 
   {
     !roadmapData.isUpcoming && !roadmapData.jsonUrl && (
-      <MarkdownRoadmap>
+      <MarkdownRoadmap
+        roadmapId={roadmapId}
+        description={roadmapData.description}
+      >
         <roadmapFile.Content />
       </MarkdownRoadmap>
     )

src/roadmaps/backend/content/104-version-control-systems/101-git.md

@@ -0,0 +1,10 @@
+# Git
+
+[Git](https://git-scm.com/) is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.
+
+Visit the following resources to learn more:
+
+- [Learn Git on the command line](https://github.com/jlord/git-it-electron)
+- [Version Control System Introduction](https://www.youtube.com/watch?v=zbKdDsNNOhg)
+- [Git & GitHub Crash Course For Beginners](https://www.youtube.com/watch?v=SWYqp7iY_Tc)
+- [Learn Git in 20 Minutes](https://youtu.be/Y9XZQO1n_7c?t=21)