From 6e451ef5cf923962e168485f0d9c6a861fc56b6a Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Fri, 10 Dec 2021 00:52:40 +0100
Subject: [PATCH] Add JavaScript and VCS content and fix rendering issue

---
 components/roadmap/content-drawer.tsx         | 13 ++--
 .../content/103-javascript/readme.md          |  9 ++-
 .../100-basic-usage-of-git.md                 |  8 +-
 .../104-version-control-systems/readme.md     |  8 +-
 .../100-react-js/readme.md                    |  2 +-
 content/roadmaps/100-frontend/resources.md    | 77 +------------------
 lib/renderer/utils.ts                         | 18 +++++
 7 files changed, 50 insertions(+), 85 deletions(-)

diff --git a/components/roadmap/content-drawer.tsx b/components/roadmap/content-drawer.tsx
index 0c3742f4b..60443ea68 100644
--- a/components/roadmap/content-drawer.tsx
+++ b/components/roadmap/content-drawer.tsx
@@ -3,6 +3,7 @@ import { RemoveScroll } from 'react-remove-scroll';
 import { RoadmapType } from '../../lib/roadmap';
 import RoadmapGroup from '../../pages/[roadmap]/[group]';
 import { CheckIcon, CloseIcon, RepeatIcon } from '@chakra-ui/icons';
+import { queryGroupElementsById } from '../../lib/renderer/utils';
 
 type ContentDrawerProps = {
   roadmap: RoadmapType;
@@ -52,9 +53,9 @@ export function ContentDrawer(props: ContentDrawerProps) {
               <Button
                 onClick={() => {
                   localStorage.setItem(groupId, 'done');
-                  document
-                    .querySelectorAll(`[data-group-id$="-${groupId}"]`)
-                    .forEach((item) => item?.classList?.add('done'));
+                  queryGroupElementsById(groupId).forEach((item) =>
+                    item?.classList?.add('done')
+                  );
                   onClose();
                 }}
                 colorScheme="green"
@@ -75,9 +76,9 @@ export function ContentDrawer(props: ContentDrawerProps) {
               <Button
                 onClick={() => {
                   localStorage.removeItem(groupId);
-                  document
-                    .querySelectorAll(`[data-group-id$="-${groupId}"]`)
-                    .forEach((item) => item?.classList?.remove('done'));
+                  queryGroupElementsById(groupId).forEach((item) =>
+                    item?.classList?.remove('done')
+                  );
                   onClose();
                 }}
                 colorScheme="red"
diff --git a/content/roadmaps/100-frontend/content/103-javascript/readme.md b/content/roadmaps/100-frontend/content/103-javascript/readme.md
index 446ae8e73..c414d4ebc 100644
--- a/content/roadmaps/100-frontend/content/103-javascript/readme.md
+++ b/content/roadmaps/100-frontend/content/103-javascript/readme.md
@@ -1 +1,8 @@
-# Javascript
\ No newline at end of file
+# JavaScript
+
+JavaScript allows you to add interactivity to your pages. Common examples that you may have seen on the websites are sliders, click interactions, popups and so on.
+
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://www.w3schools.com/js/'>W3Schools – JavaScript Tutorial</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://javascript.info/'>The Modern JavaScript Tutorial</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://youtu.be/hdI2bqOjy3c?t=2'>JavaScript Crash Course for Beginners</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://youtu.be/P7t13SGytRk?t=22'>Build a Netflix Landing Page Clone with HTML, CSS & JS</BadgeLink>
diff --git a/content/roadmaps/100-frontend/content/104-version-control-systems/100-basic-usage-of-git.md b/content/roadmaps/100-frontend/content/104-version-control-systems/100-basic-usage-of-git.md
index 88379b48c..4eb4c1955 100644
--- a/content/roadmaps/100-frontend/content/104-version-control-systems/100-basic-usage-of-git.md
+++ b/content/roadmaps/100-frontend/content/104-version-control-systems/100-basic-usage-of-git.md
@@ -1 +1,7 @@
-# Basic usage of git
\ No newline at end of file
+# 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.
+
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=zbKdDsNNOhg'>Version Control System Introduction</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=SWYqp7iY_Tc'>Git & GitHub Crash Course For Beginners</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://youtu.be/Y9XZQO1n_7c?t=21'>Learn Git in 20 Minutes</BadgeLink>
diff --git a/content/roadmaps/100-frontend/content/104-version-control-systems/readme.md b/content/roadmaps/100-frontend/content/104-version-control-systems/readme.md
index 5e0249474..b688eb9a6 100644
--- a/content/roadmaps/100-frontend/content/104-version-control-systems/readme.md
+++ b/content/roadmaps/100-frontend/content/104-version-control-systems/readme.md
@@ -1 +1,7 @@
-# Version control systems
\ No newline at end of file
+# Version Control Systems
+
+Version control systems allow you to track changes to your codebase/files over time. They allow you to go back to some previous version of the codebase without any issues. Also, they help in collaborating with people working on the same code – if you’ve ever collaborated with other people on a project, you might already know the frustration of copying and merging the changes from someone else into your codebase; version control systems allow you to get rid of this issue.
+
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=zbKdDsNNOhg'>Version Control System Introduction</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=SWYqp7iY_Tc'>Git & GitHub Crash Course For Beginners</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://youtu.be/Y9XZQO1n_7c?t=21'>Learn Git in 20 Minutes</BadgeLink>
diff --git a/content/roadmaps/100-frontend/content/111-pick-a-framework/100-react-js/readme.md b/content/roadmaps/100-frontend/content/111-pick-a-framework/100-react-js/readme.md
index 314aa41b6..4cf59e6e0 100644
--- a/content/roadmaps/100-frontend/content/111-pick-a-framework/100-react-js/readme.md
+++ b/content/roadmaps/100-frontend/content/111-pick-a-framework/100-react-js/readme.md
@@ -7,4 +7,4 @@ React is the most popular front-end JavaScript library for building user interfa
 <BadgeLink colorScheme='blue' badgeText='Read' href='https://reactjs.org/tutorial/tutorial.html'>Official Getting Started</BadgeLink>
 <BadgeLink badgeText='Course' colorScheme='green' href='https://egghead.io/courses/the-beginner-s-guide-to-react'>The Beginner's Guide to React</BadgeLink>
 <BadgeLink badgeText='Course' colorScheme='green' href='https://www.youtube.com/watch?v=nTeuhbP7wdE'>React JS Course for Beginners</BadgeLink>
-<BadgeLink badgeText='Watch' colorScheme='yellow' href='https://www.youtube.com/watch?v=i793Qm6kv3U'>Understanding React's UI Rendering Process</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=i793Qm6kv3U'>Understanding React's UI Rendering Process</BadgeLink>
diff --git a/content/roadmaps/100-frontend/resources.md b/content/roadmaps/100-frontend/resources.md
index 9ce0003bb..12d9198c1 100644
--- a/content/roadmaps/100-frontend/resources.md
+++ b/content/roadmaps/100-frontend/resources.md
@@ -1,76 +1,3 @@
-<div className='alert alert-primary' style={{ marginBottom: '-10px'}}>
-  This page is incomplete and is being worked upon. Please check back later or <a href='/signup'>subscribe</a> / <a href='https://twitter.com/kamranahmedse'>follow me on twitter</a> to get notified. Also, feel free to contribute by suggesting the resources in <a href='https://github.com/kamranahmedse/developer-roadmap'>the issues</a>.
-</div>
-
-# Become a Frontend Developer
-Before I go ahead and list down the resources, please know that the roadmap and the list below is exhaustive and you don't need to know it all from the get go. For frontend development, all you need to get started with is learn some basic HTML, CSS and JavaScript and start working on projects; everything else you will learn along the way. 
-
-## Internet and how it works?
-
-Get the basic understanding of internet, browsers, networks and other relevant knowledge. 
-
-* <BadgeLink badgeText='Read' href='/guides/what-is-internet'>What is Internet?</BadgeLink>
-* <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=7_LPdttKXPc'>How the internet works in 5 minutes</BadgeLink>
-* <BadgeLink badgeText='Read' href='https://kamranahmed.info/blog/2016/08/13/http-in-depth/'>What is HTTP and how it evolved?</BadgeLink>
-* <BadgeLink badgeText='Read' href='https://blog.cloudflare.com/http3-the-past-present-and-future/'>HTTP/3: the past, the present, and the future</BadgeLink>
-* <BadgeLink badgeText='Read' href='https://kinsta.com/blog/http3/'>What Is HTTP/3 – Lowdown on the Fast New UDP-Based Protocol</BadgeLink>
-* <BadgeLink badgeText='Read' href='https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/'>How Browsers Work: Behind the scenes of modern web browsers</BadgeLink>
-* <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=Rck3BALhI5c'>DNS as Fast As Possible</BadgeLink>
-* <BadgeLink badgeText='Read' href='https://howdns.works/'>How DNS works?</BadgeLink>
-* <BadgeLink badgeText='Read' href='/guides/dns-in-one-picture'>DNS in One Picture</BadgeLink>
-
-## Learn HTML
-HTML provides the skeleton of a webpage. Learn the basics of HTML; learn the basic tags, learn how to write semantic HTML, understand basic SEO, learn how to divide your pages into sections that will help you style them. 
-
-Please know that I have put multiple links for each resource. While you may pick something new while going through each, you don't need to go through all of them - if you feel like you have understood the concepts and are just repeating what you learnt, you may skip the resource and move to exercises section.
- 
-
-* <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=UB1O30fR-EE'>HTML Crash Course For Absolute Beginners</BadgeLink>
-* <BadgeLink badgeText='Read' href='https://www.w3schools.com/html/default.asp'>W3Schools – HTML Tutorial</BadgeLink>
-* <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=pQN-pnXPaVg'>HTML Full Course - Build a Website Tutorial</BadgeLink>
-* <BadgeLink badgeText='Read' href='https://hacks.mozilla.org/2016/08/a-few-html-tips/'>A few HTML tips</BadgeLink>
-* <BadgeLink badgeText='Read' href='https://hackernoon.com/six-tips-to-set-up-a-better-html-document-ud1033z3z'>Six tips to set up a better HTML document</BadgeLink>
-* <BadgeLink badgeText='Read' href='https://www.w3schools.com/html/html5_semantic_elements.asp'>HTML Semantic Elements</BadgeLink> 
-* <BadgeLink badgeText='Read' href='https://developer.mozilla.org/en-US/docs/Web/HTML/Element'>HTML elements reference</BadgeLink> 
-
-## Style your pages with CSS
-With the help of HTML, you create structure for your pages. CSS allows you to style your pages and make them pretty. If you take the analogy of human body, the skeleton would be the HTML, skin would be the CSS and muscles that help us move would be JavaScript - we will learn more about JavaScript in the coming sections.
-
-* <BadgeLink badgeText='Read' href='https://www.w3schools.com/css/'>W3Schools – CSS Tutorial</BadgeLink>
-* <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=yfoY53QXEnI'>CSS Crash Course For Absolute Beginners</BadgeLink>
-* <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=Wm6CUkswsNw'>Build An HTML5 Website With A Responsive Layout</BadgeLink>
-* <BadgeLink badgeText='Watch' href='https://youtu.be/JJSoEo8JSnc?t=46'>Flexbox CSS In 20 Minutes</BadgeLink>
-
-## Basics of JavaScript
-JavaScript allows you to add interactivity to your pages. Common examples that you may have seen on the websites are sliders, click interactions, popups and so on. In this section, you will learn the basics of JavaScript.
-
-* <BadgeLink badgeText='Read' href='https://www.w3schools.com/js/'>W3Schools – JavaScript Tutorial</BadgeLink>
-* <BadgeLink badgeText='Watch' href='https://youtu.be/hdI2bqOjy3c?t=2'>JavaScript Crash Course for Beginners</BadgeLink>
-* <BadgeLink badgeText='Watch' href='https://youtu.be/P7t13SGytRk?t=22'>Build a Netflix Landing Page Clone with HTML, CSS & JS</BadgeLink>
-
-## Version Control Systems and Git
-
-Version control systems allow you to track changes to your codebase/files over time. They allow you to go back to some previous version of the codebase without any issues. Also, they help in collaborating with people working on the same code – if you’ve ever collaborated with other people on a project, you might already know the frustration of copying and merging the changes from someone else into your codebase; version control systems allow you to get rid of this issue.
-
-In this section, you will learn what version control systems are and understand how to use Git which is the de facto VCS.  
-
-* <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=zbKdDsNNOhg'>Version Control System Introduction</BadgeLink>
-* <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=SWYqp7iY_Tc'>Git & GitHub Crash Course For Beginners</BadgeLink>
-* <BadgeLink badgeText='Watch' href='https://youtu.be/Y9XZQO1n_7c?t=21'>Learn Git in 20 Minutes</BadgeLink>
-
-Now that you know what git is go ahead and create an account on [GitHub](https://github.com) and push everything that you do from now on to GitHub so that you can get the practice and get it reviewed from the other people in the community.
-
-## Modern JavaScript
-
-In this section you will learn how to use package managers and get started with the "modern JavaScript".
-
-* <BadgeLink badgeText='Read' href='https://medium.com/the-node-js-collection/modern-javascript-explained-for-dinosaurs-f695e9747b70'>Modern JavaScript for Dinosaurs (Don't worry if you don't understand some parts of it)</BadgeLink>
-* <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=8Rmj5UY5mJk'>What is NPM and how to use it</BadgeLink>
-* <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=jHDhaSSKmB0'>NPM Crash Course</BadgeLink>
-
-<br />
-<br />
-<br />
-<br />
-<br />
 <br />
+
+The resources have been moved to the [interactive frontend roadmap](/frontend) — try clicking any nodes!
diff --git a/lib/renderer/utils.ts b/lib/renderer/utils.ts
index 9618d5aca..c5f031c70 100644
--- a/lib/renderer/utils.ts
+++ b/lib/renderer/utils.ts
@@ -1,3 +1,21 @@
+export function queryGroupElementsById(groupId: string) {
+  const elements = document.querySelectorAll(
+    `[data-group-id$="-${groupId}"]`
+  ) as any;
+  const matchingElements: HTMLElement[] = [];
+
+  elements.forEach((element: HTMLElement) => {
+    const foundGroupId = element?.dataset?.groupId || '';
+    const validGroupRegex = new RegExp(`^\\d+-${groupId}$`);
+
+    if (validGroupRegex.test(foundGroupId)) {
+      matchingElements.push(element);
+    }
+  });
+
+  return matchingElements;
+}
+
 export function removeSortingInfo(groupId: string) {
   return (groupId || '').replace(/^\d+-/, '');
 }