Merge branch 'kamranahmedse:master' into master

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/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/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/101-powershell.md

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

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

@@ -14,3 +14,5 @@ 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.
+
+- [What is a container?](https://www.docker.com/resources/what-container/)

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

@@ -23,3 +23,5 @@ 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.
+
+- [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/)

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/)

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

@@ -6,7 +6,7 @@ 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/)

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');
+    const progressBar: HTMLElement = element.querySelector('[data-progress]')!;
-    progressBar.style.backgroundColor = 'rgb(23 42 58)';
-    progressBar.style.position = 'absolute';
     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);
 });