Merge branch 'kamranahmedse:master' into master

src/components/FeaturedItems/FeaturedItem.astro

@@ -13,14 +13,14 @@ const { isUpcoming = false, isNew = false, text, url } = Astro.props;
 
 <a
   class:list={[
-    'group border border-slate-800 bg-slate-900 p-2.5 sm:p-3.5 block no-underline rounded-lg relative text-slate-400 font-regular text-md hover:border-slate-600 hover:text-slate-100',
+    'group border border-slate-800 bg-slate-900 p-2.5 sm:p-3.5 block no-underline rounded-lg relative text-slate-400 font-regular text-md hover:border-slate-600 hover:text-slate-100 overflow-hidden',
     {
       'opacity-50': isUpcoming,
     },
   ]}
   href={url}
 >
-  <span class='text-slate-400'>
+  <span class='text-slate-400 relative z-20'>
     {text}
   </span>
 

src/components/Navigation/Navigation.astro

@@ -5,7 +5,11 @@ import AccountDropdown from './AccountDropdown.astro';
 
 <div class='bg-slate-900 py-5 text-white sm:py-8'>
   <nav class='container flex items-center justify-between'>
-    <a class='flex items-center text-lg font-medium text-white' href='/' aria-label="roadmap.sh">
+    <a
+      class='flex items-center text-lg font-medium text-white'
+      href='/'
+      aria-label='roadmap.sh'
+    >
       <Icon icon='logo' />
     </a>
 
@@ -26,9 +30,12 @@ import AccountDropdown from './AccountDropdown.astro';
         <a href='/videos' class='text-gray-400 hover:text-white'>Videos</a>
       </li>
       <li>
-        <kbd data-command-menu class="hidden sm:flex items-center text-gray-400 border border-gray-800 rounded-md px-2.5 py-1 text-sm hover:bg-gray-800 hover:cursor-pointer">
-           <Icon icon='search' class='h-3 w-3 mr-2' />
-          <kbd class='font-sans mr-1'>⌘</kbd><kbd class='font-sans'>K</kbd>
+        <kbd
+          data-command-menu
+          class='hidden items-center rounded-md border border-gray-800 px-2.5 py-1 text-sm text-gray-400 hover:cursor-pointer hover:bg-gray-800 sm:flex'
+        >
+          <Icon icon='search' class='mr-2 h-3 w-3' />
+          <kbd class='mr-1 font-sans'>⌘</kbd><kbd class='font-sans'>K</kbd>
         </kbd>
       </li>
     </ul>
@@ -97,10 +104,7 @@ import AccountDropdown from './AccountDropdown.astro';
 
         <!-- Links for logged in users -->
         <li data-auth-required class='hidden'>
-          <a
-            href='/account'
-            class='text-xl hover:text-blue-300 md:text-lg'
-          >
+          <a href='/account' class='text-xl hover:text-blue-300 md:text-lg'>
             Account
           </a>
         </li>

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

@@ -8,3 +8,4 @@ Visit the following resources to learn more:
 - [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 Tutorial](https://www.mysqltutorial.org/)

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

@@ -7,3 +7,4 @@ 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)
+- [W3Schools C++](https://www.w3schools.com/cpp/default.asp)

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

@@ -46,3 +46,5 @@ 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.
+
+- [CPP Reference](https://en.cppreference.com/w/cpp/memory/weak_ptr)

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/devops/content/102-live-in-terminal/scripting/100-bash-scripting.md

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

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/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/layouts/BaseLayout.astro

@@ -149,8 +149,8 @@ const gaPageIdentifier = Astro.url.pathname
     </slot>
 
     <Authenticator />
-    <PageProgress initialMessage={initialLoadingMessage} client:idle />
     <CommandMenu client:idle />
+    <PageProgress initialMessage={initialLoadingMessage} client:idle />
     <PageSponsor
       gaPageIdentifier={briefTitle || gaPageIdentifier}
       client:load

src/lib/home-progress.ts

@@ -0,0 +1,57 @@
+import { httpGet } from './http';
+import { isLoggedIn } from './jwt';
+
+type UserProgressResponse = {
+  resourceId: string;
+  resourceType: 'roadmap' | 'best-practice';
+  done: number;
+  learning: number;
+  skipped: number;
+  total: number;
+  updatedAt: Date;
+}[];
+
+async function renderProgress() {
+  if (!isLoggedIn()) {
+    return;
+  }
+
+  const { response: progressList, error } = await httpGet<UserProgressResponse>(
+    `${import.meta.env.PUBLIC_API_URL}/v1-get-user-all-progress`
+  );
+
+  if (error || !progressList) {
+    return;
+  }
+
+  progressList.forEach((progress) => {
+    const href =
+      progress.resourceType === 'best-practice'
+        ? `/best-practices/${progress.resourceId}`
+        : `/${progress.resourceId}`;
+    const element = document.querySelector(`a[href="${href}"]`);
+    if (!element) {
+      return;
+    }
+
+    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';
+    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);
+});

src/pages/404.astro

@@ -8,7 +8,7 @@ const legacyRoadmapUrls = [...roadmapIds.map((id) => `/${id}/`), '/roadmaps/'];
 ---
 
 <BaseLayout title='Page not found' permalink={'/404'} noIndex={true}>
-  <!-- Legacy roadmp pages handling -->
+  <!-- Legacy roadmap pages handling -->
   <script slot='after-header' define:vars={{ legacyRoadmapUrls }}>
     // If it's a roadmap page and it ends with a slash
     // redirect to the same page without the slash

src/pages/index.astro

@@ -23,20 +23,24 @@ const videos = await getAllVideos();
 >
   <div class='bg-gradient-to-b from-slate-900 to-black'>
     <div class='border-b border-b-[#1e293c]'>
-      <div class='container text-left sm:text-center py-6 pb-14 sm:py-20 px-6 sm:px-0'>
+      <div
+        class='container px-6 py-6 pb-14 text-left sm:px-0 sm:py-20 sm:text-center'
+      >
         <h1
-          class='text-2xl sm:text-5xl mb-2 sm:mb-4 font-bold bg-gradient-to-b from-amber-50 to-purple-500 text-transparent bg-clip-text'
+          class='mb-2 bg-gradient-to-b from-amber-50 to-purple-500 bg-clip-text text-2xl font-bold text-transparent sm:mb-4 sm:text-5xl'
         >
           Developer Roadmaps
         </h1>
 
-        <p class='hidden sm:block text-gray-400 text-lg px-4'>
-          <span class='font-medium text-gray-400'>roadmap.sh</span> is a community effort to create roadmaps, guides and
-          other educational content to help guide developers in picking up the path and guide their learnings.
+        <p class='hidden px-4 text-lg text-gray-400 sm:block'>
+          <span class='font-medium text-gray-400'>roadmap.sh</span> is a community
+          effort to create roadmaps, guides and other educational content to help
+          guide developers in picking up the path and guide their learnings.
         </p>
 
-        <p class='block sm:hidden text-gray-400 text-md px-0'>
-          Community created roadmaps, guides and articles to help developers grow in their career.
+        <p class='text-md block px-0 text-gray-400 sm:hidden'>
+          Community created roadmaps, guides and articles to help developers
+          grow in their career.
         </p>
       </div>
     </div>
@@ -54,7 +58,10 @@ const videos = await getAllVideos();
     <FeaturedItems
       heading='Skill based Roadmaps'
       featuredItems={skillRoadmaps.map((roadmapItem) => ({
-        text: roadmapItem.frontmatter.briefTitle === 'Go' ? 'Go Roadmap' : roadmapItem.frontmatter.briefTitle,
+        text:
+          roadmapItem.frontmatter.briefTitle === 'Go'
+            ? 'Go Roadmap'
+            : roadmapItem.frontmatter.briefTitle,
         url: `/${roadmapItem.id}`,
         isNew: roadmapItem.frontmatter.isNew,
         isUpcoming: roadmapItem.frontmatter.isUpcoming,
@@ -71,9 +78,11 @@ const videos = await getAllVideos();
       }))}
     />
 
-    <div class='grid grid-cols-1 gap-7 sm:gap-16 bg-gray-50 py-7 sm:py-16'>
+    <div class='grid grid-cols-1 gap-7 bg-gray-50 py-7 sm:gap-16 sm:py-16'>
       <FeaturedGuides heading='Guides' guides={guides.slice(0, 7)} />
       <FeaturedVideos heading='Videos' videos={videos.slice(0, 7)} />
     </div>
   </div>
+
+  <script src='../lib/home-progress.ts'></script>
 </BaseLayout>