Merge pull request #71 from kamranahmedse/master

Create a new pull request by comparing changes across two branches

Author: GulajavaMinistudio

src/components/Analytics/analytics.ts

@@ -2,6 +2,8 @@ export {};
 
 declare global {
   interface Window {
+    // To selectively enable/disable debug logs
+    __DEBUG__: boolean;
     gtag: any;
     fireEvent: (props: GAEventType) => void;
   }
@@ -27,6 +29,10 @@ window.fireEvent = (props: GAEventType) => {
     return;
   }
 
+  if (window.__DEBUG__) {
+    console.log('Analytics event fired', props);
+  }
+
   window.gtag('event', action, {
     event_category: category,
     event_label: label,

src/components/FrameRenderer/renderer.js

@@ -108,16 +108,15 @@ export class Renderer {
       window.history.pushState(null, '', url.toString());
     }
 
-    const pageTitle = this.resourceId.replace(/\b\w/g, (l) => l.toUpperCase());
     const pageType = this.resourceType.replace(/\b\w/g, (l) => l.toUpperCase());
-    const newRoadmapType = newJsonFileSlug.replace(/\b\w/g, (l) => l.toUpperCase()).replace('-', ' ');
 
     window.fireEvent({
       // RoadmapClick, BestPracticesClick, etc
       category: `${pageType.replace('-', '')}Click`,
-      // Roadmap Switch, BestPractices Switch, etc
-      action: `${pageType} Switch`,
-      label: `${pageTitle} / ${newRoadmapType}`,
+      // roadmap/frontend/switch-version
+      action: `${this.resourceId}/switch-version`,
+      // roadmap/frontend/switch-version
+      label: `${newJsonFileSlug}`,
     });
 
     this.jsonToSvg(newJsonUrl).then(() => {

src/components/TopicOverlay/TopicOverlay.astro

@@ -22,6 +22,9 @@ const { contentContributionLink } = Astro.props;
     <div id='topic-actions' class='hidden mb-2'>
       <button
         id='mark-topic-done'
+        ga-category='TopicClick'
+        ga-action='topic/mark-completion'
+        ga-label='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' />
@@ -30,6 +33,9 @@ const { contentContributionLink } = Astro.props;
 
       <button
         id='mark-topic-pending'
+        ga-category='TopicClick'
+        ga-action='topic/mark-completion'
+        ga-label='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' />

src/components/TopicOverlay/topic.js

@@ -177,7 +177,10 @@ export class Topic {
     this.activeTopicId = topicId;
 
     this.resetDOM();
-    this.renderTopicFromUrl(`/best-practices/${bestPracticeId}/${topicId.replaceAll(':', '/')}`);
+
+    const topicUrl = `/best-practices/${bestPracticeId}/${topicId.replaceAll(':', '/')}`;
+
+    this.renderTopicFromUrl(topicUrl).then(() => null);
   }
 
   handleRoadmapTopicClick(e) {
@@ -192,7 +195,15 @@ export class Topic {
     this.activeTopicId = topicId;
 
     this.resetDOM();
-    this.renderTopicFromUrl(`/${roadmapId}/${topicId.replaceAll(':', '/')}`);
+    const topicUrl = `/${roadmapId}/${topicId.replaceAll(':', '/')}`;
+
+    window.fireEvent({
+      category: `RoadmapClick`,
+      action: `${roadmapId}/load-topic`,
+      label: topicUrl,
+    });
+
+    this.renderTopicFromUrl(topicUrl).then(() => null);
   }
 
   querySvgElementsByTopicId(topicId) {

src/data/roadmaps/cyber-security/cyber-security.md

@@ -12,13 +12,13 @@ dimensions:
   width: 968
   height: 3316.15
 schema:
-  headline: "Cyber Security Roadmap"
+  headline: "Cyber Security Roadmap: Learn to become a Cyber Security Expert"
   description: "Learn how to become a Cyber Security expert with this interactive step by step guide in 2023. We also have resources and short descriptions attached to the roadmap items so you can get everything you want to learn in one place."
   imageUrl: "https://roadmap.sh/roadmaps/cyber-security.png"
   datePublished: "2023-01-05"
   dateModified: "2023-01-20"
 seo:
-  title: "Cyber Security Roadmap"
+  title: "Cyber Security Roadmap: Learn to become a Cyber Security Expert"
   description: "Community driven, articles, resources, guides, interview questions, quizzes for cyber security. Learn to become a modern Cyber Security Expert by following the steps, skills, resources and guides listed in this roadmap."
   keywords:
     - "guide to becoming a cyber security expert"

src/data/roadmaps/devops/content/100-language/index.md

@@ -1,3 +1,5 @@
 # Learn a Language
 
 It doesn't matter what language you pick, but it is important to learn at least one. You will be able to use that language to write automation scripts. 
+
+- [Guide to Picking a Language for DevOps](https://cs.fyi/guide/programming-language-for-devops)

src/data/roadmaps/devops/content/105-infrastructure-as-code/105-secret-management/index.md

@@ -12,6 +12,7 @@ Effective secret management is essential for maintaining the security and integr
 
 Visit the following resources to learn more:
 
+- [How to Manage Secrets in Web Applications?](https://cs.fyi/guide/secret-management-best-practices)
 - [Secrets management guide — approaches, open source tools, commercial products, challenges and questions](https://medium.com/@burshteyn/secrets-management-guide-approaches-open-source-tools-commercial-products-challenges-db560fd0584d)
 - [Secret Management Architectures: Finding the balance between security and complexity](https://medium.com/slalom-technology/secret-management-architectures-finding-the-balance-between-security-and-complexity-9e56f2078e54)