Merge pull request #82 from kamranahmedse/master

Create a new pull request by comparing changes across two branches

src/components/FeaturedItems/FeaturedItem.astro

@@ -47,4 +47,5 @@ const { isUpcoming = false, isNew = false, text, url } = Astro.props;
       </span>
     )
   }
+  <span data-progress class="z-10 bg-[#172a3a] absolute top-0 left-0 bottom-0 duration-300 transition-[width] w-0"></span>
 </a>

src/data/roadmaps/aspnet-core/content/100-basics-of-csharp/100-csharp.md

@@ -6,3 +6,4 @@ Visit the following resources to learn more:
 
 - [C# official website?](https://learn.microsoft.com/en-us/dotnet/csharp//)
 - [The Beginners Guide to C#](https://www.w3schools.com/CS/index.php)
+- [C# Tutorial](https://www.w3schools.com/cs/index.php)

src/data/roadmaps/backend/content/106-relational-databases/101-mysql.md

@@ -7,4 +7,5 @@ Visit the following resources to learn more:
 - [MySQL website](https://www.mysql.com/)
 - [W3Schools - MySQL tutorial ](https://www.w3schools.com/mySQl/default.asp)
 - [MySQL tutorial for beginners](https://www.youtube.com/watch?v=7S_tz1z_5bA)
-- [MySQL for Developers](https://planetscale.com/courses/mysql-for-developers/introduction/course-introduction)
+- [MySQL for Developers](https://planetscale.com/courses/mysql-for-developers/introduction/course-introduction)
+- [MySQL Tutorial](https://www.mysqltutorial.org/)

src/data/roadmaps/computer-science/content/101-pick-a-language/100-c-plus-plus.md

@@ -6,4 +6,5 @@ Visit the following resources to learn more:
 
 - [Learn Cpp](https://learncpp.com/)
 - [C++ Reference](https://en.cppreference.com/)
-- [C++ TutorialsPoint](https://www.tutorialspoint.com/cplusplus/index.htm)
+- [C++ TutorialsPoint](https://www.tutorialspoint.com/cplusplus/index.htm)
+- [W3Schools C++](https://www.w3schools.com/cpp/default.asp)

src/data/roadmaps/cpp/content/105-pointers-and-references/smart-pointers/100-weak-ptr.md

@@ -45,4 +45,6 @@ int main() {
 }
 ```
 
-In this example, we create a `shared_ptr` named `shared` that manages a `MyClass` object. By assigning it to a `weak_ptr` named `weak`, we store a non-owning reference to the object. Inside the inner scope, we create a new `shared_ptr` named `sharedFromWeak` using `weak.lock()` to safely use the object. After the inner scope, the `MyClass` object is destroyed since `shared` goes out of scope, and any further attempt to create a `shared_ptr` from `weak` will fail as the object is already destroyed.
+In this example, we create a `shared_ptr` named `shared` that manages a `MyClass` object. By assigning it to a `weak_ptr` named `weak`, we store a non-owning reference to the object. Inside the inner scope, we create a new `shared_ptr` named `sharedFromWeak` using `weak.lock()` to safely use the object. After the inner scope, the `MyClass` object is destroyed since `shared` goes out of scope, and any further attempt to create a `shared_ptr` from `weak` will fail as the object is already destroyed.
+
+- [CPP Reference](https://en.cppreference.com/w/cpp/memory/weak_ptr)

src/data/roadmaps/cyber-security/content/100-basic-it-skills/101-connection-types/101-wifi.md

@@ -39,3 +39,5 @@ To protect yourself and your devices, follow these best practices:
 - **Use a Virtual Private Network (VPN)**: Connect to the internet using a VPN, which provides a secure, encrypted tunnel for data transmission.
 
 By understanding the potential security risks associated with WiFi connections and following these best practices, you can enjoy the convenience, flexibility, and mobility of WiFi while ensuring a secure browsing experience.
+
+- [Wireless Networks - Howstuffworks](https://computer.howstuffworks.com/wireless-network.htm)

src/data/roadmaps/cyber-security/content/100-basic-it-skills/102-os-independent-troubleshooting.md

@@ -41,3 +41,6 @@ Logs are records of system events, application behavior, and user activity, whic
 - **Leverage log-analysis tools**: Utilize specialized tools or scripts to help parse, filter, and analyze large or complex log files.
 
 In conclusion, developing OS-independent troubleshooting skills allows you to effectively diagnose and resolve issues on any system. By following a structured approach, understanding common symptoms, and utilizing the appropriate tools, you can minimize downtime and maintain the security and efficiency of your organization's IT systems.
+
+- [How to identify 9 signs of Operating System.](https://bro4u.com/blog/how-to-identify-9-signs-of-operating-system)
+- [Trouble shooting guide](https://cdnsm5-ss6.sharpschool.com/userfiles/servers/server_20856499/file/teacher%20pages/lindsay%20dolezal/it%20essentials/5.6.pdf)

src/data/roadmaps/cyber-security/content/100-basic-it-skills/index.md

@@ -64,3 +64,5 @@ As the digital world is constantly evolving, so too are cyber threats. Therefore
 - Regularly backing up data
 
 By honing these basic IT skills, you will be better prepared to navigate and protect your digital life, as well as making the most of the technology at your fingertips.
+
+- [IT skills Training for beginners | Complete Course](https://youtu.be/on6dsip5yw0)

src/data/roadmaps/cyber-security/content/103-security-skills-and-knowledge/124-forensics.md

@@ -18,3 +18,5 @@ Professionals working in digital forensics need a solid understanding of various
 - Effective communication abilities to convey technical findings to non-technical stakeholders
 
 Overall, digital forensics is a crucial component of cybersecurity as it helps organizations respond effectively to cyber attacks, identify vulnerabilities, and take appropriate steps to safeguard their digital assets.
+
+- [Introduction to Digital Forensics (TryHackMe)](https://tryhackme.com/room/introdigitalforensics)

src/data/roadmaps/cyber-security/content/103-security-skills-and-knowledge/common-distros-for-hacking/100-parrot-os.md

@@ -17,3 +17,5 @@ Parrot OS, also known as Parrot Security OS, is a powerful Linux-based distribut
 - **Reverse Engineering**: The OS also includes tools for reverse engineering, assisting security professionals in examining and analyzing software or malware designs.
 
 Overall, Parrot OS is a reliable, versatile, and user-friendly cyber security distribution, ideal for both beginners and advanced users engaged in ethical hacking, penetration testing, and digital forensics.
+
+- [Link to Download Parrot OS ](https://www.parrotsec.org/download/)

src/data/roadmaps/devops/content/102-live-in-terminal/scripting/100-bash-scripting.md

@@ -1 +1,3 @@
-# Bash scripting
+# Bash scripting
+
+- [Bash Scripting Tutorial](https://www.freecodecamp.org/news/bash-scripting-tutorial-linux-shell-script-and-command-line-for-beginners/)

src/data/roadmaps/devops/content/102-live-in-terminal/scripting/101-powershell.md

@@ -1 +1,3 @@
-# Powershell
+# Powershell
+
+- [PowerShell Documentation](https://learn.microsoft.com/en-us/powershell/)

src/data/roadmaps/docker/content/100-introduction/100-what-are-containers.md

@@ -13,4 +13,6 @@ Unlike traditional virtualization, which emulates a complete operating system wi
 
 ## Containers and Docker
 
-Docker is a platform that simplifies the process of creating, deploying, and managing containers. It provides developers and administrators with a set of tools and APIs to manage containerized applications. With Docker, you can build and package application code, libraries, and dependencies into a container image, which can be distributed and run consistently in any environment that supports Docker.
+Docker is a platform that simplifies the process of creating, deploying, and managing containers. It provides developers and administrators with a set of tools and APIs to manage containerized applications. With Docker, you can build and package application code, libraries, and dependencies into a container image, which can be distributed and run consistently in any environment that supports Docker.
+
+- [What is a container?](https://www.docker.com/resources/what-container/)

src/data/roadmaps/javascript/content/106-javascript-loops-iterations/102-break-continue/100-labeled-statements.md

@@ -8,3 +8,4 @@ Visit the following resources to learn more:
 
 - [JavaScript MDN Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/label)
 - [Tutorialspoint – JavaScript Tutorial](https://www.tutorialspoint.com/What-are-label-statements-in-JavaScript)
+- [Labels for break/continue](https://javascript.info/while-for#labels-for-break-continue)

src/data/roadmaps/javascript/content/112-javascript-asynchronous-javascript/103-callbacks/100-callback-hell.md

@@ -5,3 +5,4 @@ The callback hell is when we try to write asynchronous JavaScript in a way where
 Visit the following resources to learn more:
 
 - [Callback Hell](http://callbackhell.com/)
+- [Callbacks in Callbacks - Pyramid of Doom](https://javascript.info/callbacks#pyramid-of-doom)

src/data/roadmaps/javascript/content/112-javascript-asynchronous-javascript/103-callbacks/index.md

@@ -6,3 +6,4 @@ Visit the following resources to learn more:
 
 - [Callbacks in JavaScript](https://javascript.info/callbacks)
 - [Callback Functions](https://developer.mozilla.org/en-US/docs/Glossary/Callback_function)
+- [W3School CallBack Function](https://www.w3schools.com/js/js_callback.asp)

src/data/roadmaps/kubernetes/content/102-setting-up-kubernetes/100-installing-a-local-cluster.md

@@ -1,6 +1,6 @@
 # Installing a Local Cluster
 
-To install and configure a Kubernetes cluster on CentOS 7 or Ubunto, you would need to setup the prerequisites and requirements for setting up a Kubernetes cluster after which you would be installing the Kubernetes components, including Kubeadm, Kubelet, and Kubectl and then you'll need to connect the master and the worker nodes. Once the connection is established you can check it by deploying application on the cluster.
+To install and configure a Kubernetes cluster on CentOS 7 or Ubuntu, you would need to setup the prerequisites and requirements for setting up a Kubernetes cluster after which you would be installing the Kubernetes components, including Kubeadm, Kubelet, and Kubectl and then you'll need to connect the master and the worker nodes. Once the connection is established you can check it by deploying application on the cluster.
 
 Learn more from the following links:
 

src/data/roadmaps/prompt-engineering/content/101-prompting-introduction/index.md

@@ -22,4 +22,6 @@ Translate the following to French:
 Hello, how are you?
 ```
 
-But it's one of the best practices to be clear and use delimiters to separate the content in prompt from the instructions. You will learn more about it in the "Best Practices" nodes of the roadmap.
+But it's one of the best practices to be clear and use delimiters to separate the content in prompt from the instructions. You will learn more about it in the "Best Practices" nodes of the roadmap.
+
+- [Basic Prompting](https://learnprompting.org/docs/basics/intro)

src/data/roadmaps/react/content/103-rendering/101-lists-and-keys.md

@@ -4,7 +4,7 @@ When you render lists in React, you can use the `key` prop to specify a unique k
 
 Visit the following resources to learn more:
 
-- [Lists and Keys](https://reactjs.org/docs/lists-and-keys.html)
+- [Lists and Keys](https://react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key)
 - [Rendering Lists](https://react.dev/learn/rendering-lists)
 - [List components in React by Example](https://www.robinwieruch.de/react-list-component/)
-- [Why do we need the key prop in React?](https://www.robinwieruch.de/react-list-key/)
+- [Why do we need the key prop in React?](https://www.robinwieruch.de/react-list-key/)

src/data/roadmaps/react/content/103-rendering/102-render-props.md

@@ -1,11 +1,11 @@
 # Render Props
 
-The term “render prop” refers to a technique for sharing code between React components using a prop whose value is a function.
+The term 'render props' refers to a technique for sharing code between React components using a prop whose value is a function.
 
 A component with a render prop takes a function that returns a React element and calls it instead of implementing its own render logic.
 
 Visit the following resources to learn more:
 
-- [Render Props in React](https://reactjs.org/docs/render-props.html)
+- [Render Props in React](https://react.dev/learn/passing-props-to-a-component)
 - [How to create a Render Prop Component](https://www.robinwieruch.de/react-render-props/)
-- [Render Props Pattern](https://www.patterns.dev/posts/render-props-pattern/)
+- [Render Props Pattern](https://www.patterns.dev/posts/render-props-pattern/)

src/data/roadmaps/react/content/103-rendering/103-refs.md

@@ -6,9 +6,9 @@ In the typical React dataflow, props are the only way that parent components int
 
 Visit the following resources to learn more:
 
-- [Refs and DOM](https://reactjs.org/docs/refs-and-the-dom.html)
+- [Refs and DOM](https://react.dev/learn/referencing-values-with-refs)
 - [Referencing Values with Refs](https://react.dev/learn/referencing-values-with-refs)
 - [Manipulating the DOM with Refs](https://react.dev/learn/manipulating-the-dom-with-refs)
 - [Examples of using refs in React](https://www.robinwieruch.de/react-ref/)
 - [The Complete Guide to useRef() and Refs in React](https://dmitripavlutin.com/react-useref-guide/)
-- [Learn useRef in 11 Minutes - Web Dev Simplified](https://www.youtube.com/watch?v=t2ypzz6gJm0)
+- [Learn useRef in 11 Minutes - Web Dev Simplified](https://www.youtube.com/watch?v=t2ypzz6gJm0)

src/data/roadmaps/typescript/content/101-typescript-types/115-type-assertions/101-as-type.md

@@ -12,3 +12,5 @@ let str = num as string;
 ```
 
 It's important to note that type assertions do not change the runtime type of a value, and do not cause any type of conversion. They simply provide a way for the programmer to override the type inference performed by the compiler.
+
+- [Type assertions](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#type-assertions)

src/lib/home-progress.ts

@@ -37,21 +37,12 @@ async function renderProgress() {
     const totalDone = progress.done + progress.skipped;
     const percentageDone = (totalDone / progress.total) * 100;
 
-    const progressBar = document.createElement('div');
-    progressBar.style.backgroundColor = 'rgb(23 42 58)';
-    progressBar.style.position = 'absolute';
+    const progressBar: HTMLElement = element.querySelector('[data-progress]')!;
     progressBar.style.width = `${percentageDone}%`;
-    progressBar.style.height = '100%';
-    progressBar.style.bottom = '0';
-    progressBar.style.left = '0';
-    progressBar.style.top = '0';
-    progressBar.style.zIndex = '1';
-
-    element.appendChild(progressBar);
   });
 }
 
 // on DOM load
 window.addEventListener('DOMContentLoaded', () => {
-    window.setTimeout(renderProgress, 0);
+  window.setTimeout(renderProgress, 0);
 });