Add progress loading on roadmap pages

* Update devops.json 

kodekloud spelling correction

* Update src/data/roadmaps/devops/devops.json

---------

Co-authored-by: Kamran Ahmed <kamranahmed.se@gmail.com>

.gitignore

@@ -1,3 +1,5 @@
+.idea
+
 # build output
 dist/
 .output/

astro.config.mjs

@@ -5,6 +5,7 @@ import tailwind from '@astrojs/tailwind';
 import compress from 'astro-compress';
 import { defineConfig } from 'astro/config';
 import rehypeExternalLinks from 'rehype-external-links';
+import { fileURLToPath } from 'node:url';
 import { serializeSitemap, shouldIndexPage } from './sitemap.mjs';
 
 // https://astro.build/config
@@ -45,6 +46,22 @@ export default defineConfig({
     format: 'file',
   },
   integrations: [
+    {
+      name: 'client-authenticated',
+      hooks: {
+        'astro:config:setup'(options) {
+          options.addClientDirective({
+            name: 'authenticated',
+            entrypoint: fileURLToPath(
+              new URL(
+                './src/directives/client-authenticated.mjs',
+                import.meta.url
+              )
+            ),
+          });
+        },
+      },
+    },
     tailwind({
       config: {
         applyBaseStyles: false,

package.json

@@ -26,8 +26,8 @@
     "@astrojs/tailwind": "^3.1.3",
     "@fingerprintjs/fingerprintjs": "^3.4.1",
     "@nanostores/preact": "^0.5.0",
-    "astro": "^2.5.7",
-    "astro-compress": "^1.1.46",
+    "astro": "^2.6.3",
+    "astro-compress": "^1.1.47",
     "jose": "^4.14.4",
     "js-cookie": "^3.0.5",
     "nanostores": "^0.9.1",
@@ -39,7 +39,7 @@
     "tailwindcss": "^3.3.2"
   },
   "devDependencies": {
-    "@playwright/test": "^1.34.3",
+    "@playwright/test": "^1.35.0",
     "@tailwindcss/typography": "^0.5.9",
     "@types/js-cookie": "^3.0.3",
     "csv-parser": "^3.0.0",

readme.md

@@ -30,9 +30,9 @@ Roadmaps are now interactive, you can click the nodes to read more about the top
 
 Here is the list of available roadmaps with more being actively worked upon.
 
-- [Frontend Roadmap](https://roadmap.sh/frontend)
+- [Frontend Roadmap](https://roadmap.sh/frontend) / [Frontend Beginner Roadmap](https://roadmap.sh/frontend?r=frontend-beginner)
 - [Backend Roadmap](https://roadmap.sh/backend)
-- [DevOps Roadmap](https://roadmap.sh/devops)
+- [DevOps Roadmap](https://roadmap.sh/devops) / [DevOps Beginner Roadmap](https://roadmap.sh/devops?r=devops-beginner)
 - [Full Stack Roadmap](https://roadmap.sh/full-stack)
 - [Computer Science Roadmap](https://roadmap.sh/computer-science)
 - [QA Roadmap](https://roadmap.sh/qa)

scripts/roadmap-content.cjs

@@ -3,7 +3,6 @@ const path = require('path');
 
 const OPEN_AI_API_KEY = process.env.OPEN_AI_API_KEY;
 const ALL_ROADMAPS_DIR = path.join(__dirname, '../src/data/roadmaps');
-const ROADMAP_JSON_DIR = path.join(__dirname, '../public/jsons/roadmaps');
 
 const roadmapId = process.argv[2];
 
@@ -139,7 +138,11 @@ async function writeFileForGroup(group, topicUrlToPathMapping) {
 async function run() {
   const topicUrlToPathMapping = getFilesInFolder(ROADMAP_CONTENT_DIR);
 
-  const roadmapJson = require(path.join(ROADMAP_JSON_DIR, `${roadmapId}.json`));
+  const roadmapJson = require(path.join(
+      ALL_ROADMAPS_DIR,
+      `${roadmapId}/${roadmapId}`
+  ));
+
   const groups = roadmapJson?.mockup?.controls?.control?.filter(
     (control) =>
       control.typeID === '__group__' &&

scripts/roadmap-dirs.cjs

@@ -84,8 +84,9 @@ function prepareDirTree(control, dirTree, dirSortOrders) {
 
 const roadmap = require(path.join(
   __dirname,
-  `../public/jsons/roadmaps/${roadmapId}`
+  `../src/data/roadmaps/${roadmapId}/${roadmapId}`
 ));
+
 const controls = roadmap.mockup.controls.control;
 
 // Prepare the dir tree that we will be creating and also calculate the sort orders

src/components/AccountSidebar.astro

@@ -9,39 +9,52 @@ export interface Props {
 }
 
 const sidebarLinks = [
-    {
-        href: '/account',
-        title: 'Activity',
-        id: 'activity',
-        icon: {
-            glyph: 'analytics',
-            classes: 'h-3 w-4',
-        }
+  {
+    href: '/account',
+    title: 'Activity',
+    id: 'activity',
+    isNew: false,
+    icon: {
+      glyph: 'analytics',
+      classes: 'h-3 w-4',
     },
-    {
-        href: '/account/update-profile',
-        title: 'Profile',
-        id: 'profile',
-        icon: {
-            glyph: 'user',
-            classes: 'h-4 w-4',
-        }
+  },
+  {
+    href: '/account/road-card',
+    title: 'Card',
+    id: 'road-card',
+    isNew: true,
+    icon: {
+      glyph: 'badge',
+      classes: 'h-4 w-4',
     },
-    {
-        href: '/account/update-password',
-        title: 'Security',
-        id: 'change-password',
-        icon: {
-            glyph: 'security',
-            classes: 'h-4 w-4'
-        }
+  },
+  {
+    href: '/account/update-profile',
+    title: 'Profile',
+    id: 'profile',
+    isNew: false,
+    icon: {
+      glyph: 'user',
+      classes: 'h-4 w-4',
     },
+  },
+  {
+    href: '/account/update-password',
+    title: 'Security',
+    id: 'change-password',
+    isNew: false,
+    icon: {
+      glyph: 'security',
+      classes: 'h-4 w-4',
+    },
+  },
 ];
 ---
 
 <div class='relative mb-5 block border-b p-4 shadow-inner md:hidden'>
   <button
-    class='flex h-10 w-full items-center justify-between rounded-md border bg-white px-2 text-center text-gray-900 text-sm font-medium'
+    class='flex h-10 w-full items-center justify-between rounded-md border bg-white px-2 text-center text-sm font-medium text-gray-900'
     id='settings-menu'
   >
     {activePageTitle}
@@ -52,42 +65,67 @@ const sidebarLinks = [
     class='absolute left-0 right-0 z-10 mt-1 hidden space-y-1.5 bg-white p-2 shadow-lg'
   >
     {
-      sidebarLinks.map((sidebarLink) => (
-        <li>
-          <a
-            href={sidebarLink.href}
-            class={`flex items-center w-full rounded px-3 py-1.5 text-slate-900 hover:bg-slate-200 text-sm ${
-              activePageId === sidebarLink.id ? 'bg-slate-100' : ''
-            }`}
-          >
-              <AstroIcon icon={sidebarLink.icon.glyph} class={`${sidebarLink.icon.classes} mr-2`} />
+      sidebarLinks.map((sidebarLink) => {
+        const isActive = activePageId === sidebarLink.id;
+
+        return (
+          <li>
+            <a
+              href={sidebarLink.href}
+              class={`flex w-full items-center rounded px-3 py-1.5 text-sm text-slate-900 hover:bg-slate-200 ${
+                isActive ? 'bg-slate-100' : ''
+              }`}
+            >
+              <AstroIcon
+                icon={sidebarLink.icon.glyph}
+                class={`${sidebarLink.icon.classes} mr-2`}
+              />
               {sidebarLink.title}
-          </a>
-        </li>
-      ))
+            </a>
+          </li>
+        );
+      })
     }
   </ul>
 </div>
 
 <div class='container flex min-h-screen items-stretch'>
   <!-- Start Desktop Sidebar -->
-  <aside class='hidden shrink-0 w-44 border-r border-slate-200 py-10 md:block'>
+  <aside class='hidden w-44 shrink-0 border-r border-slate-200 py-10 md:block'>
     <nav>
       <ul class='space-y-1'>
         {
-          sidebarLinks.map((sidebarLink) => (
-            <li>
-              <a
-                href={sidebarLink.href}
-                class={`font-regular flex w-full items-center gap-2 px-2 py-1.5 text-sm border-r-2 ${
-                  activePageId === sidebarLink.id ? 'text-black border-r-black bg-gray-100' : 'text-gray-500 border-r-transparent hover:border-r-gray-300'
-                }`}
-              >
-                <AstroIcon icon={sidebarLink.icon.glyph} class={`${sidebarLink.icon.classes} mr-0`} />
-                {sidebarLink.title}
-              </a>
-            </li>
-          ))
+          sidebarLinks.map((sidebarLink) => {
+            const isActive = activePageId === sidebarLink.id;
+
+            return (
+              <li>
+                <a
+                  href={sidebarLink.href}
+                  class={`font-regular flex w-full items-center border-r-2 px-2 py-1.5 text-sm ${
+                    isActive
+                      ? 'border-r-black bg-gray-100 text-black'
+                      : 'border-r-transparent text-gray-500 hover:border-r-gray-300'
+                  }`}
+                >
+                  <span class='flex flex-grow items-center'>
+                    <AstroIcon
+                      icon={sidebarLink.icon.glyph}
+                      class={`${sidebarLink.icon.classes} mr-2`}
+                    />
+                    {sidebarLink.title}
+                  </span>
+
+                  {sidebarLink.isNew && !isActive && (
+                    <span class='relative mr-1 flex items-center'>
+                      <span class='relative rounded-full bg-gray-200 p-1 text-xs' />
+                      <span class='absolute bottom-0 left-0 right-0 top-0 animate-ping rounded-full bg-gray-400 p-1 text-xs' />
+                    </span>
+                  )}
+                </a>
+              </li>
+            );
+          })
         }
       </ul>
     </nav>

src/components/Activity/EmptyActivity.tsx

@@ -1,4 +1,4 @@
-import CheckIcon from '../../icons/roadmap.svg';
+import RoadmapIcon from '../../icons/roadmap.svg';
 
 export function EmptyActivity() {
   return (
@@ -6,7 +6,7 @@ export function EmptyActivity() {
       <div class="flex flex-col items-center p-7 text-center">
         <img
           alt="no roadmaps"
-          src={CheckIcon}
+          src={RoadmapIcon}
           class="mb-2 w-[60px] h-[60px] sm:h-[120px] sm:w-[120px] opacity-10"
         />
         <h2 class="text-lg sm:text-xl font-bold">No Progress</h2>

src/components/Authenticator/authenticator.ts

@@ -34,6 +34,7 @@ function handleGuest() {
   const authenticatedRoutes = [
     '/account/update-profile',
     '/account/update-password',
+    '/account/road-card',
     '/account',
   ];
 

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>
 
@@ -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/components/HeroSection/CheckIcon.tsx

@@ -0,0 +1,20 @@
+type CheckIconProps = {
+  additionalClasses?: string;
+};
+
+export function CheckIcon(props: CheckIconProps) {
+  const { additionalClasses = 'mr-2 top-[0.5px] w-[20px] h-[20px]' } = props;
+
+  return (
+    <svg
+      className={`relative ${additionalClasses}]`}
+      stroke="currentColor"
+      fill="currentColor"
+      stroke-width="0"
+      viewBox="0 0 16 16"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"></path>
+    </svg>
+  );
+}

src/components/HeroSection/EmptyProgress.tsx

@@ -0,0 +1,23 @@
+import { CheckIcon } from './CheckIcon';
+
+type EmptyProgressProps = {
+    title?: string;
+    message?: string;
+};
+
+export function EmptyProgress(props: EmptyProgressProps) {
+    const {
+        title = 'Start learning ..',
+        message = 'Your progress and favorite roadmaps will show up here.',
+    } = props;
+
+    return (
+        <div className="relative flex min-h-full flex-col items-start sm:items-center justify-center py-6">
+            <h2 className={'mb-1 flex items-center text-lg sm:text-2xl text-gray-200'}>
+                <CheckIcon additionalClasses='mr-2 top-[0.5px] w-[16px] h-[16px] sm:w-[20px] sm:h-[20px]' />
+                Start learning ..
+            </h2>
+            <p className={'text-gray-400 text-sm sm:text-base'}>{message}</p>
+        </div>
+    );
+}

src/components/HeroSection/FavoriteRoadmaps.tsx

@@ -0,0 +1,108 @@
+import { useEffect, useState } from 'preact/hooks';
+import { EmptyProgress } from './EmptyProgress';
+import { httpGet } from '../../lib/http';
+import { ProgressList } from './ProgressList';
+
+export type UserProgressResponse = {
+  resourceId: string;
+  resourceType: 'roadmap' | 'best-practice';
+  resourceTitle: string;
+  done: number;
+  learning: number;
+  skipped: number;
+  total: number;
+  updatedAt: Date;
+}[];
+
+function renderProgress(progressList: UserProgressResponse) {
+  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: HTMLElement | null =
+      element.querySelector('[data-progress]');
+    if (progressBar) {
+      progressBar.style.width = `${percentageDone}%`;
+    }
+  });
+}
+
+export function FavoriteRoadmaps() {
+  const [isPreparing, setIsPreparing] = useState(true);
+  const [isLoading, setIsLoading] = useState(true);
+  const [progress, setProgress] = useState<UserProgressResponse>([]);
+  const [containerOpacity, setContainerOpacity] = useState(0);
+
+  function showProgressContainer() {
+    const heroEl = document.getElementById('hero-text')!;
+    if (!heroEl) {
+      return;
+    }
+
+    heroEl.classList.add('opacity-0');
+    setTimeout(() => {
+      heroEl.parentElement?.removeChild(heroEl);
+      setIsPreparing(false);
+
+      setTimeout(() => {
+        setContainerOpacity(100);
+      }, 50);
+    }, 0);
+  }
+
+  async function loadProgress() {
+    setIsLoading(true);
+    const { response: progressList, error } =
+      await httpGet<UserProgressResponse>(
+        `${import.meta.env.PUBLIC_API_URL}/v1-get-user-all-progress`
+      );
+
+    if (error || !progressList) {
+      return;
+    }
+
+    setProgress(progressList);
+    setIsLoading(false);
+    showProgressContainer();
+
+    // render progress on featured items
+    renderProgress(progressList);
+  }
+
+  useEffect(() => {
+    loadProgress().finally(() => {
+      setIsLoading(false);
+    });
+  }, []);
+
+  if (isPreparing) {
+    return null;
+  }
+
+  const hasProgress = progress.length > 0;
+
+  return (
+    <div
+      class={`flex min-h-[192px] bg-gradient-to-b transition-opacity duration-500 sm:min-h-[280px] opacity-${containerOpacity} ${
+        hasProgress && `border-t border-t-[#1e293c]`
+      }`}
+    >
+      <div className="container min-h-full">
+        {isLoading && <EmptyProgress title="Loading progress .." />}
+        {!isLoading && progress.length == 0 && <EmptyProgress />}
+        {!isLoading && progress.length > 0 && (
+          <ProgressList progress={progress} />
+        )}
+      </div>
+    </div>
+  );
+}

src/components/HeroSection/HeroSection.astro

@@ -0,0 +1,28 @@
+---
+import { FavoriteRoadmaps } from './FavoriteRoadmaps';
+---
+
+<div class='relative min-h-auto min-h-[192px] sm:min-h-[281px] border-b border-b-[#1e293c]'>
+  <div
+    class='container px-6 py-6 pb-14 text-left sm:px-0 sm:py-20 sm:text-center transition-opacity duration-300'
+    id='hero-text'
+  >
+    <h1
+      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 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 a path and guide their learnings.
+    </p>
+
+    <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>
+  <FavoriteRoadmaps client:authenticated />
+</div>

src/components/HeroSection/ProgressList.tsx

@@ -0,0 +1,46 @@
+import type { UserProgressResponse } from './FavoriteRoadmaps';
+import { CheckIcon } from './CheckIcon';
+
+type ProgressListProps = {
+  progress: UserProgressResponse;
+};
+
+export function ProgressList(props: ProgressListProps) {
+  const { progress } = props;
+
+  return (
+    <div className="relative pt-4 sm:pt-7 pb-12">
+      <p className="mb-4 flex items-center text-sm text-gray-400">
+        <CheckIcon additionalClasses={'mr-1.5 w-[14px] h-[14px]'} />
+        <span className='hidden sm:inline'>Your progress and favorite roadmaps.</span>
+        <span className='inline sm:hidden'>Your progress and favorite roadmaps.</span>
+      </p>
+
+      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-2">
+        {progress.map((resource) => {
+          const url =
+            resource.resourceType === 'roadmap'
+              ? `/${resource.resourceId}`
+              : `/best-practices/${resource.resourceId}`;
+
+          const percentageDone =
+            ((resource.skipped + resource.done) / resource.total) * 100;
+
+          return (
+            <a
+              href={url}
+              className="relative flex flex-col rounded-md border border-slate-800 bg-slate-900 p-3 text-sm text-slate-400 hover:border-slate-600 hover:text-slate-300 overflow-hidden"
+            >
+              <span className='relative z-20'>{resource.resourceTitle}</span>
+
+              <span
+                class="absolute bottom-0 left-0 top-0 z-10 bg-[#172a3a]"
+                style={{ width: `${percentageDone}%` }}
+              ></span>
+            </a>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

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/components/PageSponsor.tsx

@@ -29,6 +29,18 @@ export function PageSponsor(props: PageSponsorProps) {
   const [sponsor, setSponsor] = useState<PageSponsorType>();
 
   const loadSponsor = async () => {
+    const currentPath = window.location.pathname;
+    if (
+      currentPath === '/' ||
+      currentPath === '/best-practices' ||
+      currentPath === '/roadmaps' ||
+      currentPath.startsWith('/guides') ||
+      currentPath.startsWith('/videos') ||
+      currentPath.startsWith('/account')
+    ) {
+      return;
+    }
+
     const { response, error } = await httpGet<V1GetSponsorResponse>(
       `${import.meta.env.PUBLIC_API_URL}/v1-get-sponsor`,
       {

src/components/RoadCard/Editor.tsx

@@ -0,0 +1,42 @@
+import { useCopyText } from '../../hooks/use-copy-text';
+import CopyIcon from '../../icons/copy.svg';
+
+type EditorProps = {
+  title: string;
+  text: string;
+};
+
+export function Editor(props: EditorProps) {
+  const { text, title } = props;
+
+  const { isCopied, copyText } = useCopyText();
+
+  return (
+    <div className="flex w-full flex-grow flex-col overflow-hidden rounded border border-gray-300 bg-gray-50">
+      <div className="flex items-center justify-between gap-2 border-b border-gray-300 px-3 py-2">
+        <span className="text-xs uppercase leading-none text-gray-400">
+          {title}
+        </span>
+        <button className="flex items-center" onClick={() => copyText(text)}>
+          {isCopied && (
+            <span className="mr-1 text-xs leading-none text-gray-700">
+              Copied!
+            </span>
+          )}
+
+          <img src={CopyIcon} alt="Copy" className="inline-block h-4 w-4" />
+        </button>
+      </div>
+      <textarea
+        className="no-scrollbar block h-12 w-full overflow-x-auto whitespace-nowrap bg-gray-200/70 p-3 text-sm text-gray-900 focus:bg-gray-50 focus:outline-0"
+        readOnly
+        onClick={(e: any) => {
+          e.target.select();
+          copyText(e.target.value);
+        }}
+      >
+        {text}
+      </textarea>
+    </div>
+  );
+}

src/components/RoadCard/GitHubReadmeBanner.tsx

@@ -0,0 +1,15 @@
+export function GitHubReadmeBanner() {
+  return (
+    <p className="mt-3 rounded-md border p-2 text-sm w-full bg-yellow-100 border-yellow-400 text-yellow-900">
+      Add this badge to your{' '}
+      <a
+        href="https://docs.github.com/en/account-and-profile/setting-up-and-managing-your-github-profile/customizing-your-profile/managing-your-profile-readme"
+        target="_blank"
+        rel="noopener noreferrer"
+        className="text-blue-600 underline hover:text-blue-800"
+      >
+        GitHub profile readme.
+      </a>
+    </p>
+  );
+}

src/components/RoadCard/RoadCardPage.tsx

@@ -0,0 +1,172 @@
+import { useState } from 'preact/hooks';
+
+import { useCopyText } from '../../hooks/use-copy-text';
+import { useAuth } from '../../hooks/use-auth';
+import CopyIcon from '../../icons/copy.svg';
+import { RoadmapSelect } from './RoadmapSelect';
+import { GitHubReadmeBanner } from './GitHubReadmeBanner';
+import { downloadImage } from '../../helper/download-image';
+import { SelectionButton } from './SelectionButton';
+import { StepCounter } from './StepCounter';
+import { Editor } from './Editor';
+
+type StepLabelProps = {
+  label: string;
+};
+function StepLabel(props: StepLabelProps) {
+  const { label } = props;
+
+  return (
+    <span className="mb-3 flex items-center gap-2 text-sm leading-none text-gray-400">
+      {label}
+    </span>
+  );
+}
+
+export function RoadCardPage() {
+  const { isCopied, copyText } = useCopyText();
+  const [roadmaps, setRoadmaps] = useState<string[]>([]);
+  const [version, setVersion] = useState<'tall' | 'wide'>('tall');
+  const [variant, setVariant] = useState<'dark' | 'light'>('dark');
+  const user = useAuth();
+  if (!user) {
+    return null;
+  }
+
+  const badgeUrl = new URL(
+    `${import.meta.env.PUBLIC_API_URL}/v1-badge/${version}/${user?.id}`
+  );
+
+  badgeUrl.searchParams.set('variant', variant);
+  if (roadmaps.length > 0) {
+    badgeUrl.searchParams.set('roadmaps', roadmaps.join(','));
+  }
+
+  return (
+    <>
+      <div className="flex items-start gap-4 mx-0 sm:-mx-10 px-0 sm:px-10 border-b pt-2 pb-4">
+        <StepCounter step={1} />
+        <div>
+          <StepLabel label="Pick progress to show (Max. 4)" />
+
+          <div className="flex flex-wrap">
+            <RoadmapSelect
+              selectedRoadmaps={roadmaps}
+              setSelectedRoadmaps={setRoadmaps}
+            />
+          </div>
+        </div>
+      </div>
+
+      <div className="flex items-start gap-4 mx-0 sm:-mx-10 px-0 sm:px-10 border-b py-4">
+        <StepCounter step={2} />
+        <div>
+          <StepLabel label="Select Mode (Dark vs Light)" />
+
+          <div className="flex gap-2">
+            <SelectionButton
+              text={'Dark'}
+              isDisabled={false}
+              isSelected={variant === 'dark'}
+              onClick={() => {
+                setVariant('dark');
+              }}
+            />
+
+            <SelectionButton
+              text={'Light'}
+              isDisabled={false}
+              isSelected={variant === 'light'}
+              onClick={() => {
+                setVariant('light');
+              }}
+            />
+          </div>
+        </div>
+      </div>
+
+      <div className="flex items-start gap-4 mx-0 sm:-mx-10 px-0 sm:px-10 border-b py-4">
+        <StepCounter step={3} />
+        <div>
+          <StepLabel label="Select Version" />
+
+          <div className="flex gap-2">
+            <SelectionButton
+              text={'Tall'}
+              isDisabled={false}
+              isSelected={version === 'tall'}
+              onClick={() => {
+                setVersion('tall');
+              }}
+            />
+            <SelectionButton
+              text={'Wide'}
+              isDisabled={false}
+              isSelected={version === 'wide'}
+              onClick={() => {
+                setVersion('wide');
+              }}
+            />
+          </div>
+        </div>
+      </div>
+
+      <div className="flex items-start gap-4 mx-0 sm:-mx-10 px-0 sm:px-10 border-b py-4">
+        <StepCounter step={4} />
+        <div class="flex-grow">
+          <StepLabel label="Share your #RoadCard with others" />
+          <div className={'rounded-md border bg-gray-50 p-2 text-center'}>
+            <a
+              href={badgeUrl.toString()}
+              target="_blank"
+              rel="noopener noreferrer"
+              className={`relative block hover:cursor-pointer ${
+                version === 'tall' ? ' max-w-[270px] ' : ' w-full '
+              }`}
+            >
+              <img src={badgeUrl.toString()} alt="RoadCard" />
+            </a>
+          </div>
+
+          <div className="mt-3 grid grid-cols-2 gap-2">
+            <button
+              className="flex items-center justify-center rounded border border-gray-300 p-1.5 px-2 text-sm font-medium"
+              onClick={() =>
+                downloadImage({
+                  url: badgeUrl.toString(),
+                  name: 'road-card',
+                  scale: 4,
+                })
+              }
+            >
+              Download
+            </button>
+            <button
+              disabled={isCopied}
+              className="flex cursor-pointer items-center justify-center rounded border border-gray-300 p-1.5 px-2 text-sm font-medium disabled:bg-blue-50"
+              onClick={() => copyText(badgeUrl.toString())}
+            >
+              <img alt="Copy" src={CopyIcon} className="mr-1" />
+
+              {isCopied ? 'Copied!' : 'Copy Link'}
+            </button>
+          </div>
+
+          <div className="mt-3 flex flex-col gap-3">
+            <Editor
+              title={'HTML'}
+              text={`<a href="https://roadmap.sh"><img src="${badgeUrl}" alt="roadmap.sh"/></a>`.trim()}
+            />
+
+            <Editor
+              title={'Markdown'}
+              text={`[![roadmap.sh](${badgeUrl})](https://roadmap.sh)`.trim()}
+            />
+          </div>
+
+          <GitHubReadmeBanner />
+        </div>
+      </div>
+    </>
+  );
+}

src/components/RoadCard/RoadmapSelect.tsx

@@ -0,0 +1,68 @@
+import { httpGet } from '../../lib/http';
+import { useEffect, useState } from 'preact/hooks';
+import { pageProgressMessage } from '../../stores/page';
+import type { UserProgressResponse } from '../HeroSection/FavoriteRoadmaps';
+import { SelectionButton } from './SelectionButton';
+
+type RoadmapSelectProps = {
+  selectedRoadmaps: string[];
+  setSelectedRoadmaps: (updatedRoadmaps: string[]) => void;
+};
+
+export function RoadmapSelect(props: RoadmapSelectProps) {
+  const { selectedRoadmaps, setSelectedRoadmaps } = props;
+
+  const [progressList, setProgressList] = useState<UserProgressResponse>();
+
+  const fetchProgress = async () => {
+    const { response, error } = await httpGet<UserProgressResponse>(
+      `${import.meta.env.PUBLIC_API_URL}/v1-get-user-all-progress`
+    );
+
+    if (error || !response) {
+      return;
+    }
+
+    setProgressList(response);
+  };
+
+  useEffect(() => {
+    fetchProgress().finally(() => {
+      pageProgressMessage.set('');
+    });
+  }, []);
+
+  const canSelectMore = selectedRoadmaps.length < 4;
+  const allProgress = progressList?.filter(
+    (progress) => progress.resourceType === 'roadmap'
+  ) || [];
+
+  return (
+    <div className="flex flex-wrap gap-1">
+      {allProgress?.length === 0 && <p className={'text-sm text-gray-400 italic'}>No progress tracked so far.</p>}
+      {allProgress?.map((progress) => {
+        const isSelected = selectedRoadmaps.includes(progress.resourceId);
+        const canSelect = isSelected || canSelectMore;
+
+        return (
+          <SelectionButton
+            text={progress.resourceTitle}
+            isDisabled={!canSelect}
+            isSelected={isSelected}
+            onClick={() => {
+              if (isSelected) {
+                setSelectedRoadmaps(
+                  selectedRoadmaps.filter(
+                    (roadmap) => roadmap !== progress.resourceId
+                  )
+                );
+              } else if (selectedRoadmaps.length < 4) {
+                setSelectedRoadmaps([...selectedRoadmaps, progress.resourceId]);
+              }
+            }}
+          />
+        );
+      })}
+    </div>
+  );
+}

src/components/RoadCard/SelectionButton.tsx

@@ -0,0 +1,23 @@
+type SelectionButtonProps = {
+  text: string;
+  isDisabled: boolean;
+  isSelected: boolean;
+  onClick: () => void;
+};
+
+export function SelectionButton(props: SelectionButtonProps) {
+  const { text, isDisabled, isSelected, onClick } = props;
+
+  return (
+    <button
+      className={`rounded-md border p-1 px-2 text-sm ${
+        isSelected ? ' border-gray-500 bg-gray-300 ' : ''
+      } ${
+        !isDisabled ? ' cursor-pointer ' : ' cursor-not-allowed opacity-40 '
+      }`}
+      onClick={onClick}
+    >
+      {text}
+    </button>
+  );
+}

src/components/RoadCard/StepCounter.tsx

@@ -0,0 +1,17 @@
+type StepCounterProps = {
+  step: number;
+};
+
+export function StepCounter(props: StepCounterProps) {
+  const { step } = props;
+
+  return (
+    <span
+      className={
+        'flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-gray-300 text-white'
+      }
+    >
+      {step}
+    </span>
+  );
+}

src/components/RoadmapHint.astro

@@ -1,4 +1,6 @@
 ---
+import { ClearProgress } from './Activity/ClearProgress';
+import AstroIcon from './AstroIcon.astro';
 import Icon from './AstroIcon.astro';
 
 export interface Props {
@@ -42,30 +44,25 @@ const roadmapTitle =
   }
 
   <!-- Desktop: Roadmap Resources - Alert -->
-  <div
+  <div id="progress-nums-container"
     class:list={[
-      'hidden sm:flex justify-between px-2 bg-white items-center',
+      'hidden sm:flex justify-between px-2 bg-white items-center py-1.5 relative striped-loader bg-white',
       {
         'rounded-bl-md rounded-br-md': hasTNSBanner,
         'rounded-md': !hasTNSBanner,
       },
     ]}
   >
-    <p class='text-sm'>
-      <span
-        class='mr-0.5 rounded-sm bg-yellow-200 px-1 py-0.5 text-xs font-medium uppercase text-yellow-900'
-        >New</span
-      >
-      Track your progress and learn by clicking roadmap items.
-    </p>
+    <p class='text-sm flex opacity-0 transition-opacity duration-300' id="progress-nums">
+      <span class="font-medium py-0.5 rounded-sm text-xs uppercase bg-yellow-200 px-1 text-yellow-900 mr-2.5">
+        <span class="progress-percentage">0</span>% Done
+      </span>
 
-    <a
-      href={`/${roadmapId}/topics`}
-      class='inline-flex items-center justify-center rounded-md px-1 py-1.5 text-sm font-medium text-gray-500 hover:text-black'
-    >
-      <Icon icon='search' />
-      <span class='ml-2'>Search Topics</span>
-    </a>
+      <span><span class="progress-done">0</span> completed</span><span class="mx-1.5 text-gray-400">&middot;</span>
+      <span><span class="progress-learning">0</span> learning</span><span class="mx-1.5 text-gray-400">&middot;</span>
+      <span><span class="progress-skipped">0</span> skipped</span><span class="mx-1.5 text-gray-400">&middot;</span>
+      <span><span class="progress-total">0</span> Total</span>
+    </p>
   </div>
 
   <!-- Mobile - Roadmap resources alert -->
@@ -74,4 +71,4 @@ const roadmapTitle =
   >
     Track your progress and learn about the topics by clicking the roadmap items.
   </p>
-</div>
+</div>

src/components/TopicDetail/TopicProgressButton.tsx

@@ -8,6 +8,7 @@ import {
   ResourceProgressType,
   ResourceType,
   getTopicStatus,
+  refreshProgressCounters,
   renderTopicProgress,
   updateResourceProgress,
 } from '../../lib/resource-progress';
@@ -135,6 +136,7 @@ export function TopicProgressButton(props: TopicProgressButtonProps) {
         setProgress(progress);
         onClose();
         renderTopicProgress(topicId, progress);
+        refreshProgressCounters();
       })
       .catch((err) => {
         alert(err.message);

src/components/UpdatePassword/UpdatePasswordForm.tsx

@@ -80,7 +80,7 @@ export default function UpdatePasswordForm() {
     <form onSubmit={handleSubmit}>
       <div class="hidden md:block mb-8">
         <h2 className="text-3xl font-bold sm:text-4xl">Password</h2>
-        <p className="mt-2">Use the form below to update your password.</p>
+        <p className="mt-2 text-gray-400">Use the form below to update your password.</p>
       </div>
       <div className="space-y-4">
         {authProvider === 'email' && (

src/components/UpdateProfile/UpdateProfileForm.tsx

@@ -83,7 +83,7 @@ export function UpdateProfileForm() {
     <div>
       <div className="mb-8 hidden md:block">
         <h2 className="text-3xl font-bold sm:text-4xl">Profile</h2>
-        <p className="mt-2">Update your profile details below.</p>
+        <p className="mt-2 text-gray-400">Update your profile details below.</p>
       </div>
       <UploadProfilePicture
         avatarUrl={

src/data/roadmaps/angular/content/100-typescript-basics/104-union-types.md

@@ -6,3 +6,4 @@ Visit the following resources to learn more:
 
 - [Union Types - typescriptlang](https://www.typescriptlang.org/docs/handbook/unions-and-intersections.html)
 - [Union Type video for Beginners](https://www.youtube.com/watch?v=uxjpm4W5pCo)
+- [Union Types - typescriptlang](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#union-types)

src/data/roadmaps/angular/content/100-typescript-basics/106-type-guard.md

@@ -9,3 +9,4 @@ Type guards are typically used for narrowing a type and are pretty similar to fe
 Visit the following resources to learn more:
 
 - [Types Guards - Blog](https://blog.logrocket.com/how-to-use-type-guards-typescript/)
+- [TypeScript Type Guards Explained](https://www.youtube.com/watch?v=feeeitmtdwg)

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/103-learn-a-language/102-java.md

@@ -10,3 +10,4 @@ Visit the following resources to learn more:
 - [Codeacademy - Free Course](https://www.codecademy.com/learn/learn-java)
 - [W3 Schools Tutorials](https://www.w3schools.com/java/)
 - [Java Crash Course](https://www.youtube.com/watch?v=eIrMbAQSU34)
+- [Complete Java course](https://www.youtube.com/watch?v=xk4_1vdrzzo)

src/data/roadmaps/backend/content/105-repo-hosting-services/100-github.md

@@ -11,3 +11,4 @@ Visit the following resources to learn more:
 - [Git vs. GitHub: Whats the difference?](https://www.youtube.com/watch?v=wpISo9TNjfU)
 - [Git and GitHub for Beginners](https://www.youtube.com/watch?v=RGOj5yH7evk)
 - [Git and GitHub - CS50 Beyond 2019](https://www.youtube.com/watch?v=eulnSXkhE7I)
+- [Learn Git Branching](https://learngitbranching.js.org/?locale=en_us)

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/backend/content/109-apis/106-authentication/105-openid.md

@@ -9,3 +9,4 @@ Visit the following resources to learn more:
 - [What is OpenID](https://openid.net/connect/)
 - [OAuth vs OpenID](https://securew2.com/blog/oauth-vs-openid-which-is-better)
 - [An Illustrated Guide to OAuth and OpenID Connect](https://www.youtube.com/watch?v=t18YB3xDfXI)
+- [OAuth 2.0 and OpenID Connect (in plain English)](https://www.youtube.com/watch?v=996oiexhze0)

src/data/roadmaps/blockchain/content/100-blockchain-basics/index.md

@@ -8,3 +8,4 @@ Visit the following resources to learn more:
 - [Blockchain Explained](https://www.investopedia.com/terms/b/blockchain.asp)
 - [How does a blockchain work?](https://youtu.be/SSo_EIwHSd4)
 - [What Is a Blockchain? | Blockchain Basics for Developers](https://youtu.be/4ff9esY_4aU)
+- [An Elementary and Slightly Distilled Introduction to Blockchain](https://markpetherbridge.co.uk/blog/an-elementary-and-slightly-distilled-introduction-to-blockchain/)

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

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

src/data/roadmaps/computer-science/content/104-common-algorithms/102-graph-algorithms/100-breadth-first-search.md

@@ -6,3 +6,4 @@ Visit the following resources to learn more:
 
 - [Breadth First Search or BFS for a Graph](https://www.geeksforgeeks.org/breadth-first-search-or-bfs-for-a-graph/)
 - [Graph Algorithms II - DFS, BFS, Kruskals Algorithm, Union Find Data Structure - Lecture 7](https://www.youtube.com/watch?v=ufj5_bppBsA&list=PLFDnELG9dpVxQCxuD-9BSy2E7BWY3t5Sm&index=7)
+- [Breadth-first search in 4 minutes](https://www.youtube.com/watch?v=hz5ytanv5qe)

src/data/roadmaps/cpp/content/100-introduction/100-what-is-cpp.md

@@ -45,4 +45,4 @@ int main() {
 
 In the above program, we define a simple function `add` and a class `Calculator` with a member function `multiply`. The `main` function demonstrates how to use these to perform basic arithmetic.
 
-- [C++ Tutorial for Beginners - Full Course](https://youtu.be/vlnpwxzdw4y)
+- [C++ Tutorial for Beginners - Full Course](https://www.youtube.com/watch?v=vlnpwxzdw4y)

src/data/roadmaps/cpp/content/101-setting-up/101-code-editors.md

@@ -10,4 +10,6 @@ Code editors are programs specifically designed for editing, managing and writin
 
 These are just a few examples, and there are many other code editors available, including Atom, Notepad++, and Geany. They all have their features and may suit different developers' needs. Finding the right code editor is often a matter of personal preference and workflow.
 
-To work with C++ in your chosen code editor, you often need to install some additional tools and add-ons, such as compilers, linters, and debugger support. Make sure to follow the instructions provided by the editor's documentation to set up C++ correctly.
+To work with C++ in your chosen code editor, you often need to install some additional tools and add-ons, such as compilers, linters, and debugger support. Make sure to follow the instructions provided by the editor's documentation to set up C++ correctly.
+
+- [Using C++ on Linux in VSCode](https://code.visualstudio.com/docs/cpp/config-linux)

src/data/roadmaps/cpp/content/103-functions/100-lambda.md

@@ -59,4 +59,7 @@ auto updateDays = [&expiresInDays](int newDays) {
 updateDays(30); // expiresInDays = 30
 ```
 
-Note that, when using the capture by reference, any change made to the captured variable *inside* the lambda function will affect its value in the surrounding scope.
+Note that, when using the capture by reference, any change made to the captured variable *inside* the lambda function will affect its value in the surrounding scope.
+
+- [Lambdas in C++](https://youtu.be/mwgmbbz0y8c)
+- [Lambda Expressions](https://en.cppreference.com/w/cpp/language/lambda)

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/cpp/content/115-compilers/100-stages.md

@@ -39,10 +39,10 @@ The third stage is converting the compiler's intermediate representation into as
 
 **Code Example (x86 Assembly):**
 
-```assembly
-    mov eax, 10
-    mov ebx, 20
-    add eax, ebx
+```
+mov eax, 10
+mov ebx, 20
+add eax, ebx
 ```
 
 ## Linking
@@ -55,4 +55,4 @@ The final stage is the linking of the object code with the necessary libraries a
 $ g++ main.o -o main -lm
 ```
 
-In summary, the compilation process in C++ involves four primary stages: preprocessing, compilation, assembly, and linking. Each stage plays a crucial role in transforming the source code into an executable program.
+In summary, the compilation process in C++ involves four primary stages: preprocessing, compilation, assembly, and linking. Each stage plays a crucial role in transforming the source code into an executable program.

src/data/roadmaps/cpp/content/libraries/102-poco.md

@@ -68,4 +68,6 @@ int main()
 }
 ```
 
-In the above example, Poco is used to send an HTTP GET request and process the response. It manages tasks like connecting to the server, handling exceptions, and managing HTTP headers.
+In the above example, Poco is used to send an HTTP GET request and process the response. It manages tasks like connecting to the server, handling exceptions, and managing HTTP headers.
+
+- [Official Docs for Poco Library](https://docs.pocoproject.org/)

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

@@ -33,3 +33,6 @@ To minimize the risks associated with NFC, follow these best practices:
 - Ensure you're using trusted and secure apps to handle your NFC transactions.
 
 In conclusion, understanding the basics of NFC and adhering to security best practices will help ensure that you can safely and effectively use this innovative technology.
+
+- [The Beginner's Guide to NFCs](https://www.spiceworks.com/tech/networking/articles/what-is-near-field-communication/)
+- [NFC Guide: All You Need to Know About Near Field Communication](https://squareup.com/us/en/the-bottom-line/managing-your-finances/nfc)

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/100-cryptography/index.md

@@ -31,3 +31,5 @@ Proper key management is crucial to maintain the security of encrypted data. Key
 Cryptanalysis is the process of attempting to break cryptographic systems, often by exploiting weaknesses in the algorithms, protocols, or key management processes. The strength of a cryptographic system lies in its resistance to cryptanalysis. As a cyber security professional, understanding cryptanalysis techniques can help you identify and protect against potential vulnerabilities in your organization's cryptographic infrastructure.
 
 In conclusion, cryptography is a fundamental aspect of cyber security, offering a layer of protection for sensitive data in digital networks. To effectively implement cryptography in your organization, you should be familiar with the various types of cryptography, cryptographic protocols, and key management best practices, and understand the potential threats posed by cryptanalysis.
+
+- [Cryptography for Dummies (TryHackMe)](https://tryhackme.com/room/cryptographyfordummies)

src/data/roadmaps/cyber-security/content/103-security-skills-and-knowledge/107-blue-team-read-team-purple-team.md

@@ -40,3 +40,5 @@ The Purple Team bridges the gap between the Blue Team and Red Team, helping to c
 - Foster a culture of continuous improvement and collaboration
 
 By investing in Blue, Red, and Purple Team efforts, organizations can achieve a more robust and resilient security posture, capable of withstanding and adapting to ever-evolving threats.
+
+- [Red Team Fundamentals (TryHackMe)](https://tryhackme.com/room/redteamfundamentals)

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/attack-types/100-phishing-vishing-whaling-smishing.md

@@ -47,3 +47,6 @@ Smishing, or SMS phishing, is the act of using text messages to deceive victims
 - Install mobile security software to protect your device from potential threats
 
 By staying informed about these various attack types, you can better protect yourself and your organization from falling victim to cyber threats. Remain vigilant and ensure you have proper security measures in place to minimize the risk of these attacks.
+
+- [What is Phishing?](https://www.phishing.org/what-is-phishing)
+- [Phishing Examples](https://www.phishing.org/phishing-examples)

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/cyber-security/content/extras/certifications/beginner-certifications/200-comptia-aplus.md

@@ -35,3 +35,5 @@ Achieving a CompTIA A+ certification can offer several benefits, such as:
 - Serving as a prerequisite for more advanced certifications, such as CompTIA Network+ and CompTIA Security+
 
 Overall, if you're an aspiring IT professional, the CompTIA A+ certification is a great starting point to kick off your IT career and begin acquiring the skills and knowledge needed to thrive in this ever-evolving industry.
+
+- [CompTIA A+ 220-1101 - Professor Messer](https://www.youtube.com/watch?v=87t6p5zhtp0&list=plg49s3nxzannomvg5ugvenb_qqgsh01uc&index=1)

src/data/roadmaps/devops/content/101-operating-systems/linux/100-ubuntu.md

@@ -7,10 +7,7 @@ Ubuntu is a free and open-source Linux distribution based on Debian. Ubuntu is a
 Visit the following resources to learn more:
 
 - [Debian Website](https://www.debian.org/)
-- [Official Debian Documentation](https://www.debian.org/doc/)
-- [Debian Installation Guide](https://www.debian.org/releases/stable/installmanual)
 - [Ubuntu Website](https://ubuntu.com/)
-- [Ubuntu Documentation](https://help.ubuntu.com/)
-- [Install Ubuntu Desktop Documentation](https://ubuntu.com/tutorials/install-ubuntu-desktop#1-overview)
-- [Getting Started with Ubuntu Tutorials](https://itsfoss.com/getting-started-with-ubuntu/)
+- [Learn the ways of Linux-fu, for free](https://linuxjourney.com/)
+- [Linux Operating System - Crash Course for Beginners](https://www.youtube.com/watch?v=ROjZy1WbCIA)
 - [The Linux Command Line by William Shotts](https://linuxcommand.org/tlcl.php)

src/data/roadmaps/devops/content/101-operating-systems/linux/index.md

@@ -0,0 +1 @@
+# Linux

src/data/roadmaps/devops/content/101-operating-systems/unix/index.md

@@ -0,0 +1 @@
+# Unix

src/data/roadmaps/devops/content/101-os-concepts/100-networking.md

@@ -1,11 +0,0 @@
-# Networking
-
-Computer networking refers to interconnected computing devices that can exchange data and share resources with each other. These networked devices use a system of rules, called communications protocols, to transmit information over physical or wireless technologies.
-
-Begin by studying the [OSI Model](https://en.wikipedia.org/wiki/OSI_model). This model will assist in constructing an understanding of the linked topics, and help you contextualize the items linked to the Networking, Security, and Protocols node. Higher level networking concepts may be implemented and named differently across cloud providers. Don't let this confuse you - the basics of TCP/IP are useful and used in the same ways across all implementations.
-
-Visit the following resources to learn more:
-
-- [What is Computer Networking?](https://aws.amazon.com/what-is/computer-networking/)
-- [Full Networking Course](https://youtu.be/IPvYjXCsTg8)
-- [OSI Model Explained](https://www.youtube.com/watch?v=dV8mjZd1OtU)

src/data/roadmaps/devops/content/101-os-concepts/101-io-management.md

@@ -1,9 +0,0 @@
-# I/O Management
-
-One of the important jobs of an Operating System is to manage various I/O devices including mouse, keyboards, touchpad, disk drives, display adapters, USB devices, Bit-mapped screens, LED, Analog-to-digital converter, On/off switch, network connections, audio I/O, printers, etc.
-
-Visit the following resources to learn more:
-
-- [Operating System - I/O Hardware](https://www.tutorialspoint.com/operating_system/os_io_hardware.htm)
-- [IO Management](https://www.omscs-notes.com/operating-systems/io-management/)
-- [Basics of OS (I/O Structure)](https://www.youtube.com/watch?v=F18RiREDkwE)

src/data/roadmaps/devops/content/101-os-concepts/102-virtualization.md

@@ -1,9 +0,0 @@
-# Virtualization
-
-Virtualization is the creation of a virtual -- rather than actual -- version of something, such as an operating system (OS), a server, a storage device or network resources. It uses software that simulates hardware functionality to create a virtual system. This practice allows IT organizations to operate multiple operating systems, more than one virtual system and various applications on a single server.
-
-Visit the following resources to learn more:
-
-- [What is Virtualization? and its types?](https://www.techtarget.com/searchitoperations/definition/virtualization)
-- [What is Hypervisor and VM?](https://opensource.com/resources/virtualization)
-- [Containers vs VM](https://www.atlassian.com/microservices/cloud-computing/containers-vs-vms)

src/data/roadmaps/devops/content/101-os-concepts/103-memory-storage.md

@@ -1,10 +0,0 @@
-# Memory Management
-
-The term Memory can be defined as a collection of data in a specific format. It is used to store instructions and process data. The memory comprises a large array or group of words or bytes, each with its own location. The primary motive of a computer system is to execute programs. These programs, along with the information they access, should be in the main memory during execution. The CPU fetches instructions from memory according to the value of the program counter.
-
-To achieve a degree of multiprogramming and proper utilization of memory, memory management is important. There are several memory management methods, reflecting various approaches, and the effectiveness of each algorithm depends on the situation.
-
-Visit the following resources to learn more:
-
-- [Demystifying memory management in modern programming languages](https://dev.to/deepu105/demystifying-memory-management-in-modern-programming-languages-ddd)
-- [Memory Management in Operating System](https://www.geeksforgeeks.org/memory-management-in-operating-system/)

src/data/roadmaps/devops/content/101-os-concepts/104-file-system.md

@@ -1,7 +0,0 @@
-# File System
-
-A file is a named collection of related information recorded on secondary storage such as magnetic disks, magnetic tapes, and optical disks. Generally, a file is a sequence of bits, bytes, lines, or records whose meaning is defined by the file's creator and user.
-
-Visit the following resources to learn more:
-
-- [Operating System - File System](https://www.tutorialspoint.com/operating_system/os_file_system.htm)

src/data/roadmaps/devops/content/101-os-concepts/105-sockets.md

@@ -1,12 +0,0 @@
-# Sockets
-
-Socket is an endpoint of a two way **communication** link between **two different processes** on the network (same or different machines). The socket mechanism provides a means of inter-process communication (IPC) by establishing named contact points between client and server. It is the combination of IP Address and Port Number.
-
-e.g. `http://192.168.0.1:8080`
-
-Visit the following resources to learn more:
-
-- [What are Sockets?](https://www.geeksforgeeks.org/socket-in-computer-network/)
-- [Types of Sockets](https://www.tutorialspoint.com/unix_sockets/what_is_socket.htm)
-- [Port vs Socket](https://www.baeldung.com/cs/port-vs-socket)
-- [Socket.io Library Bidirectional and low-latency communication for every platform](https://socket.io/)

src/data/roadmaps/devops/content/101-os-concepts/106-posix.md

@@ -1,15 +0,0 @@
-# POSIX Basics
-
-POSIX (Portable Operating System Interface) is a family of standards for maintaining compatibility between operating systems. It describes utilities, APIs, and services that a compliant OS should provide to software, thus making it easier to port programs from one system to another.
-
-A practical example: in a Unix-like operating system, there are three _standard streams_, `stdin`, `stdout` and `stderr` - they are I/O connections that you will probably come across when using a terminal, as they manage the flow from the **standard input** (stdin), **standard output** (stdout) and **standard error** (stderr).
-
-So, in this case, when we want to interact with any of these streams (through a process, for example), the POSIX operating system API makes it easier - for example, in the `<unistd.h>` C header where the stdin, stderr, and stdout are defined as `STDIN_FILENO`, `STDERR_FILENO` and `STDOUT_FILENO`.
-
-POSIX also adds a standard for exit codes, filesystem semantics, and several other command line utility API conventions.
-
-Visit the following resources to learn more:
-
-- [POSIX standard by IEEE](https://pubs.opengroup.org/onlinepubs/9699919799/)
-- [Summary of some POSIX implementations](https://unix.stackexchange.com/a/220877)
-- [A guide to POSIX](https://www.baeldung.com/linux/posix)

src/data/roadmaps/devops/content/101-os-concepts/107-processes.md

@@ -1,15 +0,0 @@
-# Processes
-
-A process means program in execution. It generally takes an input, processes it and gives us the appropriate output. `ps` command can be used in linux to get the list of processes running in foreground. Each process will have a unique identifier called **PID**, which can be used to track it or `kill` it through shell.
-
-**Types of processes:**
-
-- Foreground processes
-- Background processes
-
-Visit the following resources to learn more:
-
-- [Intro to Process Management](https://www.geeksforgeeks.org/introduction-of-process-management/)
-- [Process Management in Linux](https://www.geeksforgeeks.org/process-management-in-linux/)
-- [Process related commands in Linux](https://www.geeksforgeeks.org/processes-in-linuxunix/)
-- [Process vs Thread](https://www.geeksforgeeks.org/difference-between-process-and-thread/)

src/data/roadmaps/devops/content/101-os-concepts/108-startup-management.md

@@ -1,11 +0,0 @@
-# Startup Management (init.d)
-
-`init.d` is a daemon which is the **first process** (PID = 1) of the Linux system. Then other processes, services, daemons, and threads are started by init. One can write their own scripts in _'/etc/init.d'_ location to start services automatically on system boot. Services can be started and stopped manually by using `service` command.
-
-It has following syntax: `$ service [service_name] [action]` e.g. `$ service ssh start`
-
-Visit the following resources to learn more:
-
-- [Linux Booting Process](https://www.freecodecamp.org/news/the-linux-booting-process-6-steps-described-in-detail/)
-- [What is init.d?](https://www.geeksforgeeks.org/what-is-init-d-in-linux-service-management/)
-- [What are Daemons in Linux?](https://itsfoss.com/linux-daemons/)

src/data/roadmaps/devops/content/101-os-concepts/109-service-management.md

@@ -1,11 +0,0 @@
-# Service Management (systemd)
-
-`systemd` is a **System** Management **D**aemon which replaces the sysvinit process to become the first process with PID = 1, which gets executed in user space during the Linux start-up process. It is a system that is designed specifically for the Linux kernel. It is now being used as a **replacement of init.d** to overcome shortcomings of it. It uses `systemctl` command to perform related operations.
-
-e.g. `$ systemctl start [service-name]`, `$ systemctl poweroff`
-
-Visit the following resources to learn more:
-
-- [What is systemd? and its commands](https://www.geeksforgeeks.org/linux-systemd-and-its-components/)
-- [init.d vs systemd](https://uace.github.io/learning/init-vs-systemd-what-is-an-init-daemon)
-- [Why Systemd as a replacement of init.d?](https://www.tecmint.com/systemd-replaces-init-in-linux/)

src/data/roadmaps/devops/content/101-os-concepts/110-threads-concurrency.md

@@ -1,19 +0,0 @@
-# Thread in OS
-
-`Thread` is an active entity which executes a **part of a process**. It is a sequential flow of tasks within a process. It is also called lightweight process as they **share common resources**. A process can contain multiple threads. Threads are used to increase the performance of the applications.
-Each thread has its own program counter, stack, and set of registers. But the threads of a single process might share the same code and data/file.
-
-**Key Terminologies:**
-
-- `proc`
-- `fork`
-- `join`
-
-Visit the following resources to learn more:
-
-- [Process Synchronization](https://www.geeksforgeeks.org/introduction-of-process-synchronization/)
-- [What is Thread in OS?](https://www.geeksforgeeks.org/thread-in-operating-system/)
-- [Process vs Thread & Multi-Threading](https://www.scaler.com/topics/operating-system/threads-in-operating-system/)
-- [What Concurrency in OS?](https://www.geeksforgeeks.org/concurrency-in-operating-system/)
-- [Threads vs Concurrency](https://medium.com/@azizomarck/how-is-concurrency-different-from-parallelism-334b6d5c869a)
-- [How Concurrency is achieved in Threads](https://medium.com/@akhandmishra/operating-system-threads-and-concurrency-aec2036b90f8)

src/data/roadmaps/devops/content/101-os-concepts/index.md

@@ -1,9 +0,0 @@
-# Operating System
-
-An Operating System is a program that manages a computer’s resources, especially the allocation of those resources among other programs. Typical resources include the central processing unit (CPU), computer memory, file storage, input/output (I/O) devices, and network connections.
-
-Visit the following resources to learn more:
-
-- [What is an operating system?](https://edu.gcfglobal.org/en/computerbasics/understanding-operating-systems/1/)
-- [Operating Systems: Crash Course Computer Science #18](https://www.youtube.com/watch?v=26QPDBe-NB8&ab_channel=CrashCourse)
-- [Introduction to Operating System](https://www.youtube.com/watch?v=vBURTt97EkA&list=PL9hkZBQk8d1zEGbY7ShWCZ2n1gtxqkRrS&index=1)

src/data/roadmaps/devops/content/102-live-in-terminal/103-process-monitoring.md

@@ -0,0 +1,37 @@
+# Process Monitoring
+
+A process is an instance of a computer program that is being executed. Each process is identified by a unique number called a process ID (PID). A process is a running program. The operating system tracks processes through the use of process identifiers. A process identifier (PID) is a unique number that identifies a specific process. A PID is automatically assigned to each process when it is created on the system.
+
+There are several linux commands that can be used to monitor processes. The most common ones are:
+
+- `ps` - report a snapshot of the current processes.
+- `top` - display Linux processes.
+- `htop` - interactive process viewer.
+- `atop` - advanced interactive monitor to view the load on a Linux system.
+- `lsof` - list open files.
+
+The `ps` utility displays a header line, followed by lines containing information about all of your processes that have controlling terminals.
+
+- [ps Documentation](https://man7.org/linux/man-pages/man1/ps.1.html)
+- [ps Cheat Sheet](https://www.sysadmin.md/ps-cheatsheet.html)
+- [Linux Crash Course - The ps Command](https://www.youtube.com/watch?v=wYwGNgsfN3I)
+
+The `top` program periodically displays a sorted list of system processes. The default sorting key is pid, but other keys can be used instead. Various output options are available.
+
+- [top Documentation](https://man7.org/linux/man-pages/man1/top.1.html)
+- [top Cheat Sheet](https://gist.github.com/ericandrewlewis/4983670c508b2f6b181703df43438c37)
+
+htop is a cross-platform ncurses-based process. It is similar to top, but allows you to scroll vertically and horizontally, and interact using a pointing device (mouse). You can observe all processes running on the system, along with their command line arguments, as well as view them in a tree format, select multiple processes and act on them all at once.
+
+- [htop Documentation](https://www.man7.org/linux/man-pages/man1/htop.1.html)
+- [htop Cheat Sheet](https://www.maketecheasier.com/power-user-guide-htop/)
+
+The top program periodically displays a sorted list of system processes. The default sorting key is pid, but other keys can be used instead. Various output options are available.
+
+- [top Documentation](https://man7.org/linux/man-pages/man1/top.1.html)
+- [top Cheat Sheet](https://gist.github.com/ericandrewlewis/4983670c508b2f6b181703df43438c37)
+
+Lsof lists on its standard output file information about files opened by processes.
+
+- [lsof Cheat Sheet](https://neverendingsecurity.wordpress.com/2015/04/13/lsof-commands-cheatsheet/)
+- [lsof Documentation](https://man7.org/linux/man-pages/man8/lsof.8.html)

src/data/roadmaps/devops/content/102-live-in-terminal/104-performance-monitoring.md

@@ -0,0 +1,32 @@
+# Performance Monitoring
+
+There are many tools available to monitor the performance of your application. Some of the most popular are:
+
+- `nmon` - A system monitor tool for Linux and AIX systems.
+- `iostat` - A tool that reports CPU statistics and input/output statistics for devices, partitions and network filesystems.
+- `sar` - A system monitor command used to report on various system loads, including CPU activity, memory/paging, device load, network.
+- `vmstat` - A tool that reports virtual memory statistics.
+
+Nmon is a fully interactive performance monitoring command-line utility tool for Linux. It is a benchmark tool that displays performance about the cpu, memory, network, disks, file system, nfs, top processes, resources, and power micro-partition.
+
+- [nmon Documentation](https://www.ibm.com/docs/en/aix/7.2?topic=n-nmon-command)
+- [nmon Command Guide](https://www.geeksforgeeks.org/linux-nmon/)
+
+The iostat command in Linux is used for monitoring system input/output statistics for devices and partitions. It monitors system input/output by observing the time the devices are active in relation to their average transfer rates. The iostat produce reports may be used to change the system configuration to raised balance the input/output between the physical disks.
+
+- [iostat Documentation](https://man7.org/linux/man-pages/man1/iostat.1.html)
+- [iostat Command Guide](https://www.geeksforgeeks.org/iostat-command-in-linux-with-examples/)
+
+Short for **S**ystem **A**ctivity **R**eport, `sar` is a command line tool for Unix and Unix-like operating systems that shows a report of different information about the usage and activity of resources in the operating system.
+
+- [SAR command in Linux to monitor system performance](https://www.geeksforgeeks.org/sar-command-linux-monitor-system-performance/)
+- [SAR Man Page](https://man7.org/linux/man-pages/man1/sar.1.html)
+- [SAR Man Page 2](https://linux.die.net/man/1/sar)
+- [Sar tutorial for beginners](https://linuxhint.com/sar_linux_tutorial/)
+
+Short for **V**irtual **m**emory **stat**istic reporter, `vmstat` is a command line tool for Unix and Unix-like operating systems that reports various information about the operating system such as memory, paging, processes, I/O, CPU and disk usage.
+
+- [vmstat command in Linux with Examples](https://www.geeksforgeeks.org/vmstat-command-in-linux-with-examples/)
+- [Linux commands: exploring virtual memory with vmstat](https://www.redhat.com/sysadmin/linux-commands-vmstat)
+- [VMstat Man Page](https://man7.org/linux/man-pages/man8/vmstat.8.html)
+- [vmstat tutorial](https://phoenixnap.com/kb/vmstat-command)

src/data/roadmaps/devops/content/102-live-in-terminal/105-networking-tools.md

@@ -0,0 +1,74 @@
+# Networking Tools
+
+Networking tools are used to troubleshoot network issues. They are also used to monitor network traffic and to test network connectivity. Some of the most common networking tools are:
+
+- `traceroute` - Traces the route taken by packets over an IP network.
+- `ping` - sends echo request packets to a host to test the Internet connection.
+- `mtr` - Combines the functionality of `traceroute` and `ping` into a single diagnostic tool.
+- `nmap` - Scans hosts for open ports.
+- `netstat` - Displays network connections, routing tables, interface statistics, masquerade connections, and multicast memberships.
+- `ufw` and `firewalld` - Firewall management tools.
+- `iptables` and `nftables` - Firewall management tools.
+- `tcpdump` - Dumps traffic on a network.
+- `dig` - DNS lookup utility.
+- `scp` - Secure copy.
+
+`traceroute` command is a command in Linux that prints the route a network packet takes from its source (e.g. your computer) to the destination host (e.g., roadmap.sh). It is quite valuable in investigating slow network connections as it can help us spot the slow leg of the network packet journey through the internet.
+
+- [How to Run Traceroute in Linux](https://linuxhint.com/run_traceroute_linux/)
+- [Traceroute command in Linux with examples](https://www.geeksforgeeks.org/traceroute-command-in-linux-with-examples/)
+
+`ping` (**P**acket **In**ternet **G**roper) command is used to check the network connectivity between host and server/host. This command takes as input the IP address or the URL and sends a data packet to the specified address with the message “PING” and get a response from the server/host this time is recorded which is called latency.
+
+- [What is ping command?](https://linuxize.com/post/linux-ping-command/)
+- [ping command with examples](https://www.geeksforgeeks.org/ping-command-in-linux-with-examples/)
+
+`mtr` combines the functionality of the traceroute and ping programs in a single network diagnostic tool.
+
+- [Javatpoint: Linux mtr Command](https://www.javatpoint.com/linux-mtr)
+- [mtr Linux command](https://www.tutorialspoint.com/unix_commands/mtr.htm)
+- [How to traceroute use mtr command in Linux](https://www.devopsroles.com/how-to-traceroute-use-mtr-command-in-linux/)
+
+NMAP stands for Network Mapper and is an open-source tool used to explore and audit the network's security, such as checking firewalls and scanning ports.
+
+- [NMAP Official Manual Book](https://nmap.org/book/man.html)
+- [What is Nmap and How to Use it](https://www.freecodecamp.org/news/what-is-nmap-and-how-to-use-it-a-tutorial-for-the-greatest-scanning-tool-of-all-time/)
+
+Netstat is a command line utility to display all the network connections on a system. It displays all the tcp, udp and unix socket connections. Apart from connected sockets it also displays listening sockets that are waiting for incoming connections.
+
+- [netstat command in Linux with Examples](https://www.tutorialspoint.com/unix_commands/netstat.htm)
+- [Netstat Tutorial](http://www.c-jump.com/CIS24/Slides/Networking/html_utils/netstat.html)
+- [Netstat Commands - Network Administration Tutorial](https://www.youtube.com/watch?v=bxFwpm4IobU)
+- [Linux Command Line Tutorial For Beginners - netstat command](https://www.youtube.com/watch?v=zGNcvBaN5wE)
+
+UFW, or _uncomplicated firewall_, is command-line based utility for managing firewall rules in Arch Linux, Debian and Ubuntu. It's aim is to make firewall configuration as simple as possible. It is a frontend for the `iptables` firewalling tool.
+
+- [ufw Documentation](https://manpages.ubuntu.com/manpages/trusty/man8/ufw.8.html)
+- [Basic Introduction to UFW](https://www.linux.com/training-tutorials/introduction-uncomplicated-firewall-ufw/)
+- [UFW Essentials](https://www.digitalocean.com/community/tutorials/ufw-essentials-common-firewall-rules-and-commands)
+
+IPtables is a command-line firewall utility that uses policy chains to allow or block traffic that will be enforced by the linux kernel’s netfilter framework. Iptables packet filtering mechanism is organized into three different kinds of structures: tables, chains and targets.
+
+- [Iptables tutorial](https://www.hostinger.in/tutorials/iptables-tutorial)
+- [Beginners to Advanced Guide Iptables](https://erravindrapawadia.medium.com/iptables-tutorial-beginners-to-advanced-guide-to-linux-firewall-839e10501759)
+
+`tcpdump` is a command line tool used for analysing network traffic passing through your system. It can be used to capture and filter packets and display them in a human-readable format. The captured information can be analysed at a later date as well.
+
+- [tcpdump Documentation](https://www.tcpdump.org/manpages/tcpdump.1.html)
+- [Basic Introduction to Tcpdump](https://opensource.com/article/18/10/introduction-tcpdump)
+- [50 ways to isolate traffic with Tcpdump](https://danielmiessler.com/study/tcpdump/)
+- [Interpreting Tcpdump output and data](https://www.youtube.com/watch?v=7bsQP9sKHrs)
+
+`dig` command stands for **D**omain **I**nformation **G**roper. It is used for retrieving information about DNS name servers. It is mostly used by network administrators for verifying and troubleshooting DNS problems and to perform DNS lookups. It replaces older tools such as `nslookup` and the `host`.
+
+- [What is dig command?](https://www.geeksforgeeks.org/dig-command-in-linux-with-examples/)
+- [More on dig](https://linuxize.com/post/how-to-use-dig-command-to-query-dns-in-linux/)
+- [What is host command?](https://www.geeksforgeeks.org/host-command-in-linux-with-examples/)
+- [What is nslookup command?](https://www.geeksforgeeks.org/nslookup-command-in-linux-with-examples/)
+- [What is DNS?](https://www.cloudflare.com/en-gb/learning/dns/what-is-dns/)
+
+`SCP` is an acronym for Secure Copy Protocol.It is a command line utility that allows the user to securely copy files and directories between two locations usually between unix or linux systems.The protocol ensures the transmission of files is encrypted to prevent anyone with suspicious intentions from getting sensitive information.`SCP` uses encryption over an `SSH` (Secure Shell) connection, this ensures that the data being transferred is protected from suspicious attacks.
+
+- [SCP Linux Command](https://www.freecodecamp.org/news/scp-linux-command-example-how-to-ssh-file-transfer-from-remote-to-local/)
+- [10 SCP command examples](https://www.tecmint.com/scp-commands-examples/)
+- [SCP command explained](https://phoenixnap.com/kb/linux-scp-command)

src/data/roadmaps/devops/content/102-live-in-terminal/106-text-manipulation.md

@@ -0,0 +1,80 @@
+# Text Manipulation
+
+Some of the most common commands you will use in the terminal are text manipulation commands. These commands allow you to search, replace, and manipulate text in files and streams. Here are some of the most common commands you will use:
+
+- `awk` - A programming language designed for text processing and typically used as a data extraction and reporting tool.
+- `sed` - A stream editor for filtering and transforming text.
+- `grep` - A command-line utility for searching plain-text data sets for lines that match a regular expression.
+- `sort` - A command-line utility for sorting lines of text files.
+- `cut` - A command-line utility for cutting sections from each line of files.
+- `uniq` - A command-line utility for reporting or omitting repeated lines.
+- `cat` - A command-line utility for concatenating files and printing on the standard output.
+- `echo` - A command-line utility for displaying a line of text.
+- `fmt` - A command-line utility for simple optimal text formatting.
+- `tr` - A command-line utility for translating or deleting characters.
+- `nl` - A command-line utility for numbering lines of files.
+- `wc` - A command-line utility for printing newline, word, and byte counts for files.
+
+`awk` is a general-purpose scripting language used for manipulating data or text and generating reports in the Linux world. It is mostly used for pattern scanning and processing. It searches one or more files to see if they contain lines that match the specified patterns and then performs the associated actions.
+
+- [What is AWK? How to use it?](https://www.geeksforgeeks.org/awk-command-unixlinux-examples/)
+- [How AWK works?](https://linuxize.com/post/awk-command/)
+- [Linux Crash Course - awk](https://www.youtube.com/watch?v=oPEnvuj9QrI)
+
+`sed`(**S**tream **Ed**itor) command in UNIX can perform lots of functions on file like searching, finding and replacing, insertion or deletion. By using SED you can edit files even without opening them in editors like [VI Editor](https://www.redhat.com/sysadmin/introduction-vi-editor).
+
+- [What is SED? with examples](https://www.geeksforgeeks.org/sed-command-in-linux-unix-with-examples/)
+- [Detailed Manual](https://www.gnu.org/software/sed/manual/sed.html)
+- [Linux Crash Course - The sed Command](https://www.youtube.com/watch?v=nXLnx8ncZyE&t=218s)
+
+The `grep` command (**g**lobal search for **r**egular **e**xpression and **p**rint out) searches file(s) for a particular pattern of characters, and displays all lines that contain that pattern. It can be used with other commands like `ps` making it more useful.
+
+- [What is Grep? with examples](https://www.geeksforgeeks.org/grep-command-in-unixlinux/)
+- [Detailed Manual](https://www.gnu.org/software/grep/manual/grep.html)
+- [Linux Crash Course - The grep Command](https://www.youtube.com/watch?v=Tc_jntovCM0)
+
+`sort` command is used to sort the contents of a file in a particular order. By default, it sorts a file assuming the contents are in ASCII. But it also can also be used to sort numerically by using appropriate options.
+
+- [Sort command with examples](https://www.geeksforgeeks.org/sort-command-linuxunix-examples/)
+- [Options](<https://en.wikipedia.org/wiki/Sort_(Unix)>)
+- [Linux Tutorials|sort command GeeksforGeeks](https://www.youtube.com/watch?v=fEx5rnbDKO4)
+
+The cut utility cuts out selected portions of each line (as specified by list) from each file and writes them to the standard output.
+
+- [cut Documentation](https://man7.org/linux/man-pages/man1/cut.1.html)
+- [cut Cheat Sheet](https://bencane.com/2012/10/22/cheat-sheet-cutting-text-with-cut/)
+
+The uniq utility reads the specified input_file comparing adjacent lines, and writes a copy of each unique input line to the output_file.
+
+- [uniq Documentation](https://man7.org/linux/man-pages/man1/uniq.1.html)
+- [uniq Cheat Sheet](https://www.geeksforgeeks.org/uniq-command-in-linux-with-examples/)
+
+`cat` (concatenate) command is very frequently used in Linux. It reads data from the file and gives its content as output. It helps us to create, view, and concatenate files.
+
+- [Cat Command with examples](https://www.tecmint.com/13-basic-cat-command-examples-in-linux/)
+- [Options](<https://en.wikipedia.org/wiki/Cat_(Unix)>)
+- [Linux Tutorials|cat command|GeeksforGeeks](https://www.youtube.com/watch?v=exj5WMUJ11g)
+
+`echo` is a built-in command in Linux used to display lines of text/string that are passed as an argument. It is mostly used in shell scripts and batch files to output status text or `ENV` variables to the screen or a file.
+
+- [Echo command with Examples](https://www.tecmint.com/echo-command-in-linux/)
+- [Linux Crash Course - The echo Command](https://www.youtube.com/watch?v=S_ySzMHxMjw)
+
+`fmt` command is for formatting and optimizing contents in text files. It will be really useful when it comes to beautify large text files by setting uniform column width and spaces.
+
+- [Fmt command with Examples](https://www.devopsroles.com/fmt-command-in-linux-with-example/)
+
+The tr utility copies the standard input to the standard output with substitution or deletion of selected characters.
+
+- [tr Documentation](https://linuxcommand.org/lc3_man_pages/tr1.html)
+- [tr Cheat Sheet](https://linuxopsys.com/topics/tr-command-in-linux)
+
+The nl utility reads lines from the named file or the standard input if the file argument is omitted, applies a configurable line numbering filter operation and writes the result to the standard output.
+
+- [nl Documentation](https://man7.org/linux/man-pages/man1/nl.1.html)
+- [nl Cheat Sheet](https://www.geeksforgeeks.org/nl-command-in-linux-with-examples/)
+
+The wc utility displays the number of lines, words, and bytes contained in each input file, or standard input (if no file is specified) to the standard output.
+
+- [wc Documentation](https://linux.die.net/man/1/wc)
+- [wc Cheat Sheet](https://onecompiler.com/cheatsheets/wc)

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

@@ -0,0 +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/devops/content/102-live-in-terminal/scripting/101-powershell.md

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

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

@@ -0,0 +1 @@
+# Scripting

src/data/roadmaps/devops/content/102-managing-servers/101-live-in-terminal/100-screen-multiplexer.md

@@ -1,10 +0,0 @@
-# Screen
-
-Screen is a full-screen window manager that multiplexes a physical terminal between several processes (typically interactive shells). Each virtual terminal provides the functions of a DEC VT100 terminal and, in addition, several control functions from the ISO 6429 (ECMA 48, ANSI X3.64) and ISO 2022 standards (e.g. insert/delete line and support for multiple character sets). There is a scrollback history buffer for each virtual terminal and a copy-and-paste mechanism that allows moving text regions between windows.
-
-See `man screen` or `screen -h` for further information
-
-Visit the following resources to learn more:
-
-- [Screen Cheat Sheet](https://kapeli.com/cheat_sheets/screen.docset/Contents/Resources/Documents/index)
-- [Screen Users Manual](https://www.gnu.org/software/screen/manual/screen.html)

src/data/roadmaps/devops/content/102-managing-servers/101-live-in-terminal/100-terminal-multiplexers.md

@@ -1,8 +0,0 @@
-# Terminal multiplexers
-
-Terminal multiplexers are programs that allow us to [multiplex](https://en.wikipedia.org/wiki/Multiplexing) a terminal into several sub-processes or terminals inside a single terminal session, this means that we can have multiple open sessions using a single login session to a local or remote machine.
-
-Visit the following resources to learn more:
-
-- [Terminal Multiplexer](https://en.wikipedia.org/wiki/Terminal_multiplexer)
-- [Terminal Multiplexers](https://linuxcommand.org/lc3_adv_termmux.php)

src/data/roadmaps/devops/content/102-managing-servers/101-live-in-terminal/101-tmux-multiplexer.md

@@ -1,12 +0,0 @@
-# Tmux
-
-Tmux is a terminal multiplexer: it enables a number of terminals to be created, accessed, and controlled from a single screen. Tmux may be detached from a screen and continue running in the background, then later reattached.
-
-When tmux is started it creates a new session with a single window and displays it on screen. A status line at the bottom of the screen shows information on the current session and is used to enter interactive commands.
-
-See `man tmux` further information
-
-Visit the following resources to learn more:
-
-- [Tmux Documentation](https://tmuxguide.readthedocs.io/en/latest/tmux/tmux.html)
-- [Tmux Cheat Sheet](https://tmuxcheatsheet.com/)

src/data/roadmaps/devops/content/102-managing-servers/101-live-in-terminal/102-ps.md

@@ -1,11 +0,0 @@
-# ps - process status
-
-The ps utility displays a header line, followed by lines containing information about all of your processes that have controlling terminals.
-
-See `man ps` further information
-
-Visit the following resources to learn more:
-
-- [ps Documentation](https://man7.org/linux/man-pages/man1/ps.1.html)
-- [ps Cheat Sheet](https://www.sysadmin.md/ps-cheatsheet.html)
-- [Linux Crash Course - The ps Command](https://www.youtube.com/watch?v=wYwGNgsfN3I)

src/data/roadmaps/devops/content/102-managing-servers/101-live-in-terminal/102-top.md

@@ -1,10 +0,0 @@
-# top
-
-The top program periodically displays a sorted list of system processes. The default sorting key is pid, but other keys can be used instead. Various output options are available.
-
-See `man top` further information.
-
-Visit the following resources to learn more:
-
-- [top Documentation](https://man7.org/linux/man-pages/man1/top.1.html)
-- [top Cheat Sheet](https://gist.github.com/ericandrewlewis/4983670c508b2f6b181703df43438c37)

src/data/roadmaps/devops/content/102-managing-servers/101-live-in-terminal/103-htop.md

@@ -1,8 +0,0 @@
-# htop
-
-htop is a cross-platform ncurses-based process. It is similar to top, but allows you to scroll vertically and horizontally, and interact using a pointing device (mouse). You can observe all processes running on the system, along with their command line arguments, as well as view them in a tree format, select multiple processes and act on them all at once.
-
-Visit the following resources to learn more:
-
-- [htop Documentation](https://www.man7.org/linux/man-pages/man1/htop.1.html)
-- [htop Cheat Sheet](https://www.maketecheasier.com/power-user-guide-htop/)

src/data/roadmaps/devops/content/102-managing-servers/101-live-in-terminal/104-atop.md

@@ -1,8 +0,0 @@
-# atop
-
-The program atop is an interactive monitor to view the load on a Linux system. It shows the occupation of the most critical hardware resources (from a performance point of view) on system level, i.e. cpu, memory, disk and network.
-
-Visit the following resources to learn more:
-
-- [atop Documentation](https://linux.die.net/man/1/atop)
-- [atop Command Guide](https://www.digitalocean.com/community/tutorials/atop-command-in-linux)

src/data/roadmaps/devops/content/102-managing-servers/101-live-in-terminal/104-bash-scripting.md

@@ -1,19 +0,0 @@
-# Bash scripting
-
-Bash is a command-line interface shell program used extensively in Linux and macOS. The name Bash is an acronym for "Bourne Again Shell," developed in 1989 as a successor to the Bourne Shell.
-
-"What's a shell?" you ask? A shell is a computer program that allows you to directly control a computer's operating system (OS) with a graphical user interface (GUI) or command-line interface (CLI).
-
-You actually use GUI shells all the time. For example, Windows 10 is based on the Windows shell that allows you to control your OS with a desktop, taskbar, and menus.
-
-With a CLI shell like Bash, you type commands into the program to directly control your computer's OS. Opening up the terminal on your Mac or command line in Linux will look similar to consoles and integrated development environments (IDEs) for other programming languages such as R, Ruby, or Python. You can type commands directly in the command line or run Bash scripts to perform longer and more complex tasks.
-
-Visit the following resources to learn more:
-
-- [The Shell Scripting Tutorial](https://www.shellscript.sh/)
-- [Writing Shell Scripts](https://linuxcommand.org/lc3_writing_shell_scripts.php)
-- [Shell Scripting for Beginners](https://www.freecodecamp.org/news/shell-scripting-crash-course-how-to-write-bash-scripts-in-linux/)
-- [A guide to Bash](https://www.gnu.org/savannah-checkouts/gnu/bash/manual/bash.html)
-- [The Bash Hackers Wiki](https://wiki.bash-hackers.org/)
-- [Bash Shell Scripting Guide](https://rudrakshi.hashnode.dev/bash-shell-scripting-guide)
-- [Codecademy - Learn Bash Scripting](https://www.codecademy.com/learn/bash-scripting)

src/data/roadmaps/devops/content/102-managing-servers/101-live-in-terminal/105-lsof.md

@@ -1,10 +0,0 @@
-# lsof
-
-Lsof lists on its standard output file information about files opened by processes.
-
-See `man lsof` or `lsof --help` for further information.
-
-Visit the following resources to learn more:
-
-- [lsof Cheat Sheet](https://neverendingsecurity.wordpress.com/2015/04/13/lsof-commands-cheatsheet/)
-- [lsof Documentation](https://man7.org/linux/man-pages/man8/lsof.8.html)

src/data/roadmaps/devops/content/102-managing-servers/101-live-in-terminal/106-compiling-apps.md

@@ -1,21 +0,0 @@
-# Compiling Apps
-
-# gcc
-
-The GNU Compiler Collection (GCC) is a compiler system produced by the GNU Project supporting various programming languages also known as GCC. GCC is a key component of the GNU tool chain and the standard compiler for most Unix-like operating systems. Compiler Collection is a set of compilers and development tools available for Linux and an array of other operating systems. It includes support primarily for C and C++. It provides all of the infrastructure for building software in those languages from source code to assembly.
-
-"What is GCC used for?" GCC is a toolchain that compiles code, links it with any library dependencies, converts that code to assembly, and then prepares executable files.It is responsible for the conversion of the “high level” source code in the respective language and ensuring that it is semantically valid, performing well formed optimizations, and converting it to assembly code (which is then handed off to the assembler).
-
-Visit the following resources to learn more:
-
-- [Intro to GCC](https://courses.cs.washington.edu/courses/cse451/99wi/Section/gccintro.html)
-- [GCC Linux](https://www.javatpoint.com/gcc-linux)
-- [GCC Commands](https://www.geeksforgeeks.org/gcc-command-in-linux-with-examples/)
-- [Makefile Tutorial](https://makefiletutorial.com)
-- [Documentation for make](https://www.gnu.org/software/make/manual/)
-- [Using Make and writing Makefiles](https://www.cs.swarthmore.edu/~newhall/unixhelp/howto_makefiles.html)
-- [Sbt Documentation](https://www.scala-sbt.org/1.x/docs/)
-- [Sbt By Example](https://www.scala-sbt.org/1.x/docs/sbt-by-example.html)
-- [Gradle Tutorial](https://www.tutorialspoint.com/gradle/index.htm)
-- [Gradle for absolute beginners](https://tomgregory.com/gradle-tutorial-for-complete-beginners/)
-- [Gradle Guides](https://gradle.org/guides/)

src/data/roadmaps/devops/content/102-managing-servers/101-live-in-terminal/106-nmon.md

@@ -1,8 +0,0 @@
-# Nmon
-
-Nmon is a fully interactive performance monitoring command-line utility tool for Linux. It is a benchmark tool that displays performance about the cpu, memory, network, disks, file system, nfs, top processes, resources, and power micro-partition.
-
-Visit the following resources to learn more:
-
-- [nmon Documentation](https://www.ibm.com/docs/en/aix/7.2?topic=n-nmon-command)
-- [nmon Command Guide](https://www.geeksforgeeks.org/linux-nmon/)

src/data/roadmaps/devops/content/102-managing-servers/101-live-in-terminal/107-iostat.md

@@ -1,8 +0,0 @@
-# Iostat
-
-The iostat command in Linux is used for monitoring system input/output statistics for devices and partitions. It monitors system input/output by observing the time the devices are active in relation to their average transfer rates. The iostat produce reports may be used to change the system configuration to raised balance the input/output between the physical disks.
-
-Visit the following resources to learn more:
-
-- [iostat Documentation](https://man7.org/linux/man-pages/man1/iostat.1.html)
-- [iostat Command Guide](https://www.geeksforgeeks.org/iostat-command-in-linux-with-examples/)

src/data/roadmaps/devops/content/102-managing-servers/101-live-in-terminal/108-sar.md

@@ -1,10 +0,0 @@
-# Sar
-
-Short for **S**ystem **A**ctivity **R**eport, it is a command line tool for Unix and Unix-like operating systems that shows a report of different information about the usage and activity of resources in the operating system.
-
-Visit the following resources to learn more:
-
-- [SAR command in Linux to monitor system performance](https://www.geeksforgeeks.org/sar-command-linux-monitor-system-performance/)
-- [SAR Man Page](https://man7.org/linux/man-pages/man1/sar.1.html)
-- [SAR Man Page 2](https://linux.die.net/man/1/sar)
-- [Sar tutorial for beginners](https://linuxhint.com/sar_linux_tutorial/)

src/data/roadmaps/devops/content/102-managing-servers/101-live-in-terminal/109-vmstat.md

@@ -1,10 +0,0 @@
-# Vmstat
-
-Short for **V**irtual **m**emory **stat**istic reporter, it is a command line tool for Unix and Unix-like operating systems that reports various information about the operating system such as memory, paging, processes, I/O, CPU and disk usage.
-
-Visit the following resources to learn more:
-
-- [vmstat command in Linux with Examples](https://www.geeksforgeeks.org/vmstat-command-in-linux-with-examples/)
-- [Linux commands: exploring virtual memory with vmstat](https://www.redhat.com/sysadmin/linux-commands-vmstat)
-- [VMstat Man Page](https://man7.org/linux/man-pages/man8/vmstat.8.html)
-- [vmstat tutorial](https://phoenixnap.com/kb/vmstat-command)