Add content migration script

bin/content-migrator.cjs

@@ -0,0 +1,119 @@
+const fs = require('fs');
+const path = require('path');
+
+// 1 - Renames each readme.md to index.md
+//    e.g.
+//      before => roadmaps/frontend/content/internet/readme.md
+//      after  => roadmaps/frontend/content/internet/index.md
+//
+// 2 - Replaces the resource tags with short codes
+//    e.g.
+//      <ResourceGroupTitle>Free Content</ResourceGroupTitle>
+//      <BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.w3schools.com/css/'>W3Schools — Learn CSS</BadgeLink>
+//
+//      {% resources %}
+//        {% Blog "https://www.w3schools.com/css/", "W3Schools — Learn CSS" %}
+//      {% endresources %}
+//
+// 3 - Removes the index.md file from within the content dir i.e. to avoid `/frontend` permalink for `/frontend/index.md`
+//     Because we have the `/frontend` permalink serving the actual roadmap and not any content
+const roadmapsDir = path.join(__dirname, '../src/roadmaps');
+const roadmapDirs = fs.readdirSync(roadmapsDir);
+
+roadmapDirs.forEach((roadmapDirName) => {
+  const roadmapDirPath = path.join(roadmapsDir, roadmapDirName);
+  const contentDirPath = path.join(roadmapDirPath, 'content');
+
+  console.log(`[Start] == Migrating ${roadmapDirName}`);
+
+  if (!fs.existsSync(contentDirPath)) {
+    console.log(`Content dir not found ${roadmapDirName}/content`);
+    return;
+  }
+
+  function handleContentDir(parentDirPath) {
+    const dirChildrenNames = fs.readdirSync(parentDirPath);
+
+    dirChildrenNames.forEach((dirChildName) => {
+      let dirChildPath = path.join(parentDirPath, dirChildName);
+
+      // If directory, handle the children for it
+      if (fs.lstatSync(dirChildPath).isDirectory()) {
+        handleContentDir(dirChildPath);
+      }
+
+      //////////////////////////////////////////////////////////
+      // 1 - Rename directories to remove the numbers
+      //////////////////////////////////////////////////////////
+      // let newDirChildPath = path.join(
+      //   path.dirname(dirChildPath),
+      //   path.basename(dirChildPath).replace(/^\d+-/, '')
+      // );
+      // fs.renameSync(dirChildPath, dirChildPath);
+
+      //////////////////////////////////////////////////////////
+      // 1 - Rename readme.md to index.md
+      //////////////////////////////////////////////////////////
+      if (dirChildPath.endsWith('readme.md')) {
+        const newFilePath = path.join(path.dirname(dirChildPath), `index.md`);
+
+        fs.renameSync(dirChildPath, newFilePath);
+        dirChildPath = newFilePath;
+      }
+
+      //////////////////////////////////////////////////////////
+      // 2 - Replace the resource tags with short codes
+      //////////////////////////////////////////////////////////
+      if (fs.lstatSync(dirChildPath).isFile()) {
+        const fileContent = fs.readFileSync(dirChildPath, 'utf-8');
+
+        let resourceLinks = [...fileContent.matchAll(/<BadgeLink.+<\/BadgeLink>/g)].map(([fullMatch]) => {
+          // const resourceType = fullMatch.match(/badgeText=["'](.+?)["']/)[1];
+          const link = fullMatch.match(/href=["'](.+?)["']/)[1];
+          const text = fullMatch.match(/>([^<]+)<\/BadgeLink>$/)[1];
+
+          return `- [${text.replaceAll(/['"]/g, '')}](${link})`;
+        });
+
+        //////////////////////////////////////////////////////////////////////
+        // Replace the dedicated roadmap tag with the short code
+        //////////////////////////////////////////////////////////////////////
+        // prettier-ignore
+        const dedicatedRegex = /<DedicatedRoadmap\s*href=['"](.+?)['"]\s*title=['"](.+?)['"]\s*description=['"].+?['"]\s*\/>/;
+        const dedicatedMatches = fileContent.match(dedicatedRegex);
+
+        if (dedicatedMatches) {
+          const [, href, title] = dedicatedMatches;
+
+          resourceLinks = [`- [${title}](${href})`, ...resourceLinks];
+        }
+
+        resourceLinks = resourceLinks.join('\n');
+
+        let newFileContent = fileContent.replace(
+          /<ResourceGroupTitle>([^<\/BadgeLink>]|\S|\s)+<\/BadgeLink>/,
+          resourceLinks
+        );
+
+        // In case if the resources were not wrapped in <ResourceGroupTitle>
+        newFileContent = newFileContent.replace(
+          /<BadgeLink([^<\/BadgeLink>]|\S|\s)+<\/BadgeLink>/,
+          resourceLinks
+        );
+
+        fs.writeFileSync(dirChildPath, newFileContent);
+      }
+    });
+  }
+
+  handleContentDir(contentDirPath);
+
+  // 3 - Removes the index.md file from within the content dir i.e. to avoid `/frontend` permalink for `/frontend/index.md`
+  //     Because we have the `/frontend` permalink serving the actual roadmap and not any content
+  const contentRootFile = path.join(contentDirPath, '/index.md');
+  if (fs.existsSync(contentRootFile)) {
+    fs.rmSync(contentRootFile);
+  }
+
+  console.log(`        == Migrated ${roadmapDirName}`);
+});

bin/sync-content.sh

@@ -21,7 +21,7 @@ echo "=== Migrating Roadmaps ==="
 node roadmap-migrator.cjs
 
 echo "=== Migrating Content ==="
-# node content-migrator.cjs
+node content-migrator.cjs
 
 echo "=== Migrating Guides ==="
 # node guide-migrator.cjs

src/roadmaps/angular/content/100-typescript-basics/100-what-is-typescript.md

@@ -2,8 +2,7 @@
 
 TypeScript is a strongly typed, object-oriented, compiled programming language that builds on JavaScript. It is a superset of the JavaScript language, designed to give you better tooling at any scale. TypeScript calls itself “JavaScript with syntax for types.” In short, it is JavaScript with some additional features. The secret to the success of TypeScript is in the type checking, ensuring that the data flowing through the program is of the correct kind of data.
 
-<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+- [What is TypeScript](https://thenewstack.io/what-is-typescript/)
-<BadgeLink badgeText='Read' colorScheme='yellow' href='https://thenewstack.io/what-is-typescript/'>What is TypeScript</BadgeLink>
+- [W3Schools – TypeScript Tutorial](https://www.w3schools.com/typescript/)
-<BadgeLink badgeText='Read' colorScheme="yellow" href='https://www.w3schools.com/typescript/'>W3Schools – TypeScript Tutorial</BadgeLink>
+- [Tutorials point – TypeScript Tutorial](https://www.tutorialspoint.com/typescript/index.htm)
-<BadgeLink badgeText='Read' colorScheme="yellow" href='https://www.tutorialspoint.com/typescript/index.htm'>Tutorials point – TypeScript Tutorial</BadgeLink>
+- [TypeScript Crash Course for Beginners](https://www.youtube.com/watch?v=d56mG7DezGs)
-<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=d56mG7DezGs'>TypeScript Crash Course for Beginners</BadgeLink>

src/roadmaps/angular/content/100-typescript-basics/101-why-use-typescript.md

@@ -2,6 +2,5 @@
 
 TypeScript extends JavaScript, providing a better developer experience. The benefits of using TypeScript over JavaScript include.Static typing – TypeScript comes with optional static typing and a type inference system, which means that a variable declared with no type may be inferred by TypeScript based on its value. Object-oriented programming – TypeScript supports object-oriented programming concepts like classes, inheritance, etc. Compile time checks – JavaScript is an interpreted programming language. There is no compilation involved. Hence, the errors get caught during the runtime. Since TypeScript compiles into JavaScript, errors get reported during the compile time rather than the runtime. Code editor support – IDEs or code editors like VS Code support autocomplete for a TypeScript codebase. They also provide inline documentation and highlight the errors. Use existing packages – You might want to use an npm package written in JavaScript. Since TypeScript is a superset of JavaScript, you can import and use that package. Moreover, the TypeScript community creates and maintains type definitions for popular packages that can be utilized in your project.
 
-<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+- [linguinecode - Reasons to use TypeScript](https://linguinecode.com/post/5-reasons-why-to-use-typescript)
-<BadgeLink badgeText='Read' colorScheme='yellow' href='https://linguinecode.com/post/5-reasons-why-to-use-typescript'>linguinecode - Reasons to use TypeScript</BadgeLink>
+- [Codemotion - Reasons to use TypeScript](https://www.codemotion.com/magazine/backend/why-you-should-use-typescript-for-your-next-project/)
-<BadgeLink badgeText='Read' colorScheme='yellow' href='https://www.codemotion.com/magazine/backend/why-you-should-use-typescript-for-your-next-project/'>Codemotion - Reasons to use TypeScript</BadgeLink>

src/roadmaps/angular/content/100-typescript-basics/102-structural-typing.md

@@ -4,8 +4,7 @@ Type compatibility in TypeScript is based on structural subtyping. `Structural t
 
 TypeScript’s structural type system was designed based on how JavaScript code is typically written. Because JavaScript widely uses anonymous objects like function expressions and object literals, it’s much more natural to represent the relationships found in JavaScript libraries with a structural type system instead of a nominal one.
 
-<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+- [Structural typings — Medium](https://medium.com/redox-techblog/structural-typing-in-typescript-4b89f21d6004)
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://medium.com/redox-techblog/structural-typing-in-typescript-4b89f21d6004'>Structural typings — Medium</BadgeLink>
+- [Structural typings — Typescriptlang](https://www.typescriptlang.org/docs/handbook/type-compatibility.html)
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.typescriptlang.org/docs/handbook/type-compatibility.html'>Structural typings — Typescriptlang</BadgeLink>
+- [Structural typing video for Beginners](https://www.youtube.com/watch?v=kWtwsX_rT3k)
-<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=kWtwsX_rT3k'>Structural typing video for Beginners</BadgeLink>
 

src/roadmaps/angular/content/100-typescript-basics/103-type-inference.md

@@ -2,6 +2,5 @@
 
 In TypeScript, several places where `type inference` is used to provide type information when there is no explicit type annotation. The type of the x variable is inferred to be a number. This inference occurs when variables and members are initialized, set parameter default values are, and determine function return types. For example, `let x: number`. In most cases, type inference is straightforward. In the following sections, we’ll explore some nuances in how types are inferred. For example, `let x: (number | null)[]`
 
-<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+- [Type Interface - typescriptlang](https://www.typescriptlang.org/docs/handbook/type-inference.html)
-<BadgeLink badgeText='Read' colorScheme='yellow' href='https://www.typescriptlang.org/docs/handbook/type-inference.html'>Type Interface - typescriptlang</BadgeLink>
+- [Type Inference video for Beginners](https://www.youtube.com/watch?v=3ui_st7rtfA)
-<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=3ui_st7rtfA'>Type Inference video for Beginners</BadgeLink>

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

@@ -2,6 +2,5 @@
 
 In TypeScript, we can define a variable that can have multiple types of values. In other words, TypeScript can combine one or two types of data (i.e., number, string, etc.) in a single type, a union type. Union types are a powerful way to express a variable with multiple types. Two or more data types can be combined using the pipe ('|') symbol between the types. For example,  `(type1 | type2 | type3 | .. | typeN)`. 
 
-<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+- [Union Types - typescriptlang](https://www.typescriptlang.org/docs/handbook/unions-and-intersections.html)
-<BadgeLink badgeText='Read' colorScheme='yellow' href='https://www.typescriptlang.org/docs/handbook/unions-and-intersections.html'>Union Types - typescriptlang</BadgeLink>
+- [Union Type video for Beginners](https://www.youtube.com/watch?v=uxjpm4W5pCo)
-<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=uxjpm4W5pCo'>Union Type video for Beginners</BadgeLink>

src/roadmaps/angular/content/100-typescript-basics/105-builtin-types.md

@@ -2,6 +2,5 @@
 
 The Builtin types represent the different types of values supported by the language. The builtin types check the validity of the supplied values before they are stored or manipulated by the program. This ensures that the code behaves as expected. The Builtin types further allow for richer code hinting and automated documentation too.
 
-<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+- [TypeScript Types - Tutorialspoint](https://www.tutorialspoint.com/typescript/typescript_types.htm)
-<BadgeLink badgeText='Read' colorScheme='yellow' href='https://www.tutorialspoint.com/typescript/typescript_types.htm'>TypeScript Types - Tutorialspoint</BadgeLink>
+- [Builtin Type video for Beginners](https://www.youtube.com/watch?v=Nt9ajBrqV_M)
-<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=Nt9ajBrqV_M'>Builtin Type video for Beginners</BadgeLink>

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

@@ -6,5 +6,4 @@ TypeScript uses built-in JavaScript operators like `typeof`, `instanceof`, and t
 
 Type guards are typically used for narrowing a type and are pretty similar to feature detection, allowing you to detect the correct methods, prototypes, and properties of a value. Therefore, you can quickly figure out how to handle that value.
 
-<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+- [Types Guards - Blog](https://blog.logrocket.com/how-to-use-type-guards-typescript/)
-<BadgeLink badgeText='Read' colorScheme='yellow' href='https://blog.logrocket.com/how-to-use-type-guards-typescript/'>Types Guards - Blog</BadgeLink>

src/roadmaps/angular/content/100-typescript-basics/index.md

@@ -2,5 +2,5 @@
 
 In order to enter into the world of Angular application development, typescript is necessary and it is the primary language here. Typescript is a superset of JavaScript. It comes with design-time support which is useful for type safety and tooling. Since, browsers cannot execute the TypeScript directly, it will be 'Transpiled' into JavaScript using the tsc compiler.
 
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://medium.com/jspoint/typescript-a-beginners-guide-6956fe8bcf9e'>Typescript a Beginners Guide</BadgeLink>
+- [Typescript a Beginners Guide](https://medium.com/jspoint/typescript-a-beginners-guide-6956fe8bcf9e)
-<BadgeLink colorScheme='green' badgeText='Visit' href='https://www.typescriptlang.org/play'>TypeScript Playground</BadgeLink>
+- [TypeScript Playground](https://www.typescriptlang.org/play)

src/roadmaps/angular/content/101-rxjs-basics/100-observable-pattern.md

@@ -4,5 +4,4 @@ The observer pattern is a software design pattern in which an object, named the
 
 Angular uses the Observer pattern which simply means — Observable objects are registered, and other objects observe (in Angular using the subscribe method) them and take action when the observable object is acted on in some way.
 
-<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+- [Angular and Observable](https://medium.com/fuzzycloud/angular-and-observable-4bf890b2a282)
-<BadgeLink badgeText='Read' colorScheme='yellow' href='https://medium.com/fuzzycloud/angular-and-observable-4bf890b2a282'>Angular and Observable</BadgeLink>

src/roadmaps/angular/content/101-rxjs-basics/101-observable-lifecycle.md

@@ -8,5 +8,4 @@ There are 4 stages for a life cycle of an observable.
  - Execution
  - Destruction
 
-<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+- [Understanding Observable LifeCycle](https://medium.com/analytics-vidhya/understanding-rxjs-observables-ad5b34d9607f)
-<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://medium.com/analytics-vidhya/understanding-rxjs-observables-ad5b34d9607f'>Understanding Observable LifeCycle</BadgeLink>

src/roadmaps/angular/content/101-rxjs-basics/102-marble-diagrams.md

@@ -2,7 +2,6 @@
 
 Marble testing allows you to test asynchronous RxJS code synchronously and step-by-step with the help of RxJS TestScheduler test utility and using virtual time steps.
 
-<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+- [Angular Marble Testing: A Brief Introduction](https://www.altamira.ai/blog/angular-marble-testing-a-brief-introduction/)
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.altamira.ai/blog/angular-marble-testing-a-brief-introduction/'>Angular Marble Testing: A Brief Introduction</BadgeLink>
+- [IUnderstanding Marble Diagrams for Reactive Streams](https://medium.com/@jshvarts/read-marble-diagrams-like-a-pro-3d72934d3ef5)
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://medium.com/@jshvarts/read-marble-diagrams-like-a-pro-3d72934d3ef5'>IUnderstanding Marble Diagrams for Reactive Streams</BadgeLink>
+- [Interactive Diagrams](https://rxmarbles.com/#from)
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://rxmarbles.com/#from'>Interactive Diagrams</BadgeLink>

src/roadmaps/angular/content/101-rxjs-basics/103-rxjs-vs-promises.md

@@ -7,5 +7,4 @@ In a nutshell, the main differences between the Promise and the Observable are a
 - The Promise can provide a single value, whereas the Observable is a stream of values (from 0 to multiple values),
 you can apply RxJS operators to the Observable to get a new tailored stream.
 
-<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+- [Why RxJS? RxJS vs Promises](https://javascript.plainenglish.io/why-rxjs-rxjs-vs-promises-b28962771d68)
-<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://javascript.plainenglish.io/why-rxjs-rxjs-vs-promises-b28962771d68'>Why RxJS? RxJS vs Promises</BadgeLink>

src/roadmaps/angular/content/101-rxjs-basics/104-operators/index.md

@@ -31,12 +31,6 @@ import { interval } from 'rxjs';
 const observable = interval(1000 /* number of milliseconds */);
 ```
 
-<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://rxjs.dev/guide/operators#creation-operators-list'>List of creation operators</BadgeLink>
+- [List of creation operators](https://rxjs.dev/guide/operators#creation-operators-list)
-
+- [Full RxJS Operators Documentation](https://rxjs.dev/guide/operators)
-
-## Higher-order Observables
-
-Observables most commonly emit ordinary values like strings and numbers, but surprisingly often, it is necessary to handle Observables of Observables, so-called higher-order Observables.
-
-<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://rxjs.dev/guide/operators'>Full RxJS Operators Documentation</BadgeLink>
 

src/roadmaps/angular/content/102-angular-basics/100-angularjs-vs-angular.md

@@ -2,6 +2,5 @@
 
 AngularJS was the older version of Angular, whose support officially ended in January 2022. Angular is a component-based front-end development framework built on TypeScript, which includes a collection of well-integrated libraries that include features like routing, forms management, client-server communication, and more.
 
-<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+- [AngularJS Website](https://angularjs.org/)
-<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://angularjs.org/'>AngularJS Website</BadgeLink>
+- [Official - Getting started with Angular](https://angular.io/start)
-<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://angular.io/start'>Official - Getting started with Angular</BadgeLink>

src/roadmaps/angular/content/102-angular-basics/101-angular-components.md

@@ -7,6 +7,5 @@ Components are the main building block for Angular applications. Each component
 * A CSS selector that defines how the component is used in a template
 * Optionally, CSS styles applied to the template
 
-<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+- [Angular Components Overview](https://angular.io/guide/component-overview)
-<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://angular.io/guide/component-overview'>Angular Components Overview</BadgeLink>
+- [Standalone Components in Angular](https://www.youtube.com/watch?v=x5PZwb4XurU)
-<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=x5PZwb4XurU'>Standalone Components in Angular</BadgeLink>

src/roadmaps/angular/content/102-angular-basics/102-angular-templates.md

@@ -2,6 +2,5 @@
 
 A Template is a form of HTML which tells Angular to go towards another component. To create many Angular features, special syntax within the templates is used.
 
-<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+- [Understanding Templates](https://angular.io/guide/template-overview)
-<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://angular.io/guide/template-overview'>Understanding Templates</BadgeLink>
+- [Template Syntax](https://angular.io/guide/template-syntax)
-<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://angular.io/guide/template-syntax'>Template Syntax</BadgeLink>

src/roadmaps/angular/content/102-angular-basics/103-angular-modules.md

@@ -2,5 +2,4 @@
 
 Modules in Angular act like a container where we can group the components, directives, pipes, and services, related to the application.
 
-<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+- [Introduction to Modules](https://angular.io/guide/architecture-modules)
-<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://angular.io/guide/architecture-modules'>Introduction to Modules</BadgeLink>

src/roadmaps/angular/content/102-angular-basics/104-dependency-injection.md

@@ -2,6 +2,5 @@
 
 Dependency Injection is one of the fundamental concepts in Angular. DI is wired into the Angular framework and allows classes with Angular decorators, such as Components, Directives, Pipes, and Injectables, to configure dependencies that they need.
 
-<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+- [Understanding Dependency Injection](https://angular.io/guide/dependency-injection)
-<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://angular.io/guide/dependency-injection'>Understanding Dependency Injection</BadgeLink>
+- [Dependency Injection in Action](https://angular.io/guide/dependency-injection-in-action)
-<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://angular.io/guide/dependency-injection-in-action'>Dependency Injection in Action</BadgeLink>

src/roadmaps/angular/content/102-angular-basics/105-services.md

@@ -2,8 +2,7 @@
 
 Services let you define code or functionalities that are then accessible and reusable in many other components in the Angular project. It also helps you with the abstraction of logic and data that is hosted independently but can be shared across other components.
 
-<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+- [Services](https://angular.io/tutorial/toh-pt4)
-<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://angular.io/tutorial/toh-pt4'>Services</BadgeLink>
+- [What is an Angular Service](https://www.javatpoint.com/what-is-an-angular-service)
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.javatpoint.com/what-is-an-angular-service'>What is an Angular Service</BadgeLink>
+- [Service for API Calls](https://www.knowledgehut.com/blog/web-development/make-api-calls-angular)
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.knowledgehut.com/blog/web-development/make-api-calls-angular'>Service for API Calls</BadgeLink>
+- [Service Tutorial with Example](https://www.positronx.io/angular-service-tutorial-with-example/)
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.positronx.io/angular-service-tutorial-with-example/'>Service Tutorial with Example</BadgeLink>

src/roadmaps/angular/content/102-angular-basics/106-routing.md

@@ -2,6 +2,5 @@
 
 Routing in Angular allows the users to create a single-page application with multiple views and allows navigation between them.
 
-<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+- [Angular Routing](https://angular.io/guide/routing-overview)
-<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://angular.io/guide/routing-overview'>Angular Routing</BadgeLink>
+- [Common Routing Tasks](https://angular.io/guide/router)
-<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://angular.io/guide/router'>Common Routing Tasks</BadgeLink>

src/roadmaps/angular/content/103-angular-cli/100-ng-build.md

@@ -2,6 +2,5 @@
 
 The command can be used to build a project of type "application" or "library". When used to build a library, a different builder is invoked, and only the ts-config, configuration, and watch options are applied. All other options apply only to building applications.
 
-<ResourceGroupTitle>Free Resources</ResourceGroupTitle>
+- [Ng Build - Angular.io](https://angular.io/cli/build)
-<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://angular.io/cli/build'>Ng Build - Angular.io</BadgeLink>
+- [Building an Angular project](https://www.youtube.com/watch?v=VB6WuCPDwz0)
-<BadgeLink colorScheme='yellow' badgeText='watch' href='https://www.youtube.com/watch?v=VB6WuCPDwz0'>Building an Angular project</BadgeLink>

src/roadmaps/angular/content/103-angular-cli/101-ng-serve.md

@@ -2,6 +2,5 @@
 
 ng serve — This command builds, deploy, serves and every time watches your code changes. if find any change in code it builds and serves that code automatically. How do Angular builds? After coding our Angular apps using TypeScript, we use the Angular CLI command to build the app.
 
-<ResourceGroupTitle>Free Resources</ResourceGroupTitle>
+- [Ng serve - Angular.io](https://angular.io/cli/serve)
-<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://angular.io/cli/serve'>Ng serve - Angular.io</BadgeLink>
+- [Running a project with ng serve](https://www.youtube.com/watch?v=-w-RfHcLt5U)
-<BadgeLink colorScheme='yellow' badgeText='watch' href='https://www.youtube.com/watch?v=-w-RfHcLt5U'>Running a project with ng serve</BadgeLink>

src/roadmaps/angular/content/103-angular-cli/102-ng-generate.md

@@ -3,6 +3,5 @@
 ng generate is used to create the component in angular project. These are the two main ways to generate a new component in Angular: using ng g c <component_name>, and using ng generate component <component_name>. Using either of these two commands, the new component can be generated pretty easily and followed by the suitable component name of your choice.
 
 
-<ResourceGroupTitle>Free Resources</ResourceGroupTitle>
+- [Ng generate - Angular.io](https://angular.io/cli/generate)
-<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://angular.io/cli/generate'>Ng generate - Angular.io</BadgeLink>
+- [Angular cli generate component](https://www.youtube.com/watch?v=NlHlu_zzmo4)
-<BadgeLink colorScheme='yellow' badgeText='watch' href='https://www.youtube.com/watch?v=NlHlu_zzmo4'>Angular cli generate component</BadgeLink>

src/roadmaps/angular/content/103-angular-cli/103-ng-test.md

@@ -5,6 +5,5 @@ ng test is used to runs unit tests in angular project.
 `ng test <project> [options]` | `ng t <project> [options]`
 
 
-<ResourceGroupTitle>Free Resources</ResourceGroupTitle>
+- [Ng test - Angular.io](https://angular.io/cli/test)
-<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://angular.io/cli/test'>Ng test - Angular.io</BadgeLink>
+- [Angular Ng test commands](https://www.youtube.com/watch?v=n1O_eRwzRKA)
-<BadgeLink colorScheme='yellow' badgeText='watch' href='https://www.youtube.com/watch?v=n1O_eRwzRKA'>Angular Ng test commands</BadgeLink>

src/roadmaps/angular/content/103-angular-cli/104-ng-e2e.md

@@ -2,6 +2,5 @@
 
 End-to-end testing (E2E) of Angular applications is performed using the Protractor testing framework, which is created by the Angular team themselves. Protractor can perform end to end tests on Angular applications that are running in a real browser by interacting with it, similar to that of an end-user.
 
-<ResourceGroupTitle>Free Resources</ResourceGroupTitle>
+- [Ng e2e - Angular.io](https://angular.io/cli/e2e)
-<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://angular.io/cli/e2e'>Ng e2e - Angular.io</BadgeLink>
+- [Angular cli generate component](https://www.youtube.com/watch?v=3vFnhzEGfew)
-<BadgeLink colorScheme='yellow' badgeText='watch' href='https://www.youtube.com/watch?v=3vFnhzEGfew'>Angular cli generate component</BadgeLink>

src/roadmaps/angular/content/103-angular-cli/105-ng-new.md

@@ -6,6 +6,5 @@ That’s the default usage of the command and creating a new project folder with
 
 The default Angular project, All dependencies installed in node_modules folder , Testing files for each components
 
-<ResourceGroupTitle>Free Resources</ResourceGroupTitle>
+- [Ng New - Angular.io](https://angular.io/cli/new)
-<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://angular.io/cli/new'>Ng New - Angular.io</BadgeLink>
+- [ng New command](https://www.youtube.com/watch?v=NdEpZezptkQ)
-<BadgeLink colorScheme='yellow' badgeText='watch' href='https://www.youtube.com/watch?v=NdEpZezptkQ'>ng New command</BadgeLink>

src/roadmaps/angular/content/103-angular-cli/106-schematics.md

@@ -2,6 +2,5 @@
 
 A schematic is a template-based code generator that supports complex logic. It is a set of instructions for transforming a software project by generating or modifying code.
 
-<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+- [Angular Website](https://angular.io/guide/schematics#:~:text=A%20schematic%20is%20a%20template,collections%20and%20installed%20with%20npm.)
-<BadgeLink colorScheme='yellow' badgeText='Official Website' href='https://angular.io/guide/schematics#:~:text=A%20schematic%20is%20a%20template,collections%20and%20installed%20with%20npm.'>Angular Website</BadgeLink>
+- [Angular Blog](https://blog.angular.io/schematics-an-introduction-dc1dfbc2a2b2?gi=ad9571373944)
-<BadgeLink colorScheme='yellow' badgeText='Official Website' href='https://blog.angular.io/schematics-an-introduction-dc1dfbc2a2b2?gi=ad9571373944'>Angular Blog</BadgeLink>

src/roadmaps/angular/content/103-angular-cli/index.md

@@ -0,0 +1,8 @@
+# Angular CLI
+
+The Angular CLI is a command-line interface tool that you use to initialize, develop, scaffold, and maintain Angular applications directly from a command shell. we can install angular latest CLI using the following command 
+
+`npm install -g @angular/cli`
+
+- [Angular CLI - Angular.io](https://angular.io/cli)
+- [Angular CLI - setup](https://www.youtube.com/watch?v=mZnzX3J5XKI)

src/roadmaps/angular/content/103-angular-cli/readme.md

@@ -1,9 +0,0 @@
-# Angular CLI
-
-The Angular CLI is a command-line interface tool that you use to initialize, develop, scaffold, and maintain Angular applications directly from a command shell. we can install angular latest CLI using the following command 
-
-`npm install -g @angular/cli`
-
-<ResourceGroupTitle>Free Resources</ResourceGroupTitle>
-<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://angular.io/cli'>Angular CLI - Angular.io</BadgeLink>
-<BadgeLink colorScheme='yellow' badgeText='watch' href='https://www.youtube.com/watch?v=mZnzX3J5XKI'>Angular CLI - setup</BadgeLink>

src/roadmaps/angular/content/104-templates/100-interpolation.md

@@ -2,5 +2,4 @@
 
 Interpolation refers to embedding expressions into marked up text. By default, interpolation uses the double curly braces {{ and }} as delimiters. Angular replaces currentCustomer with the string value of the corresponding component property.
 
-<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+- [Angular Official Website](ttps://angular.io/guide/interpolation)
-<BadgeLink colorScheme='blue' badgeText='Official Website' href='ttps://angular.io/guide/interpolation'>Angular Official Website</BadgeLink>

src/roadmaps/angular/content/104-templates/101-property-binding.md

@@ -2,6 +2,4 @@
 
 Property binding helps you set values for properties of HTML elements or directives. To bind to an element's property, enclose it in square brackets `[]` which causes Angular to evaluate the right-hand side of the assignment as a dynamic expression.
 
-<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+- [Angular Official Website](https://angular.io/guide/property-binding)
-
-<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://angular.io/guide/property-binding'>Angular Official Website</BadgeLink>

src/roadmaps/angular/content/104-templates/102-template-statements.md

@@ -2,6 +2,4 @@
 
 Template statements are methods or properties that you can use in your HTML to respond to user events. With template statements, your application can engage users through actions such as displaying dynamic content or submitting forms. Enclose the event in `()`  which causes Angular to evaluate the right hand side of the assignment as one or more template statements chained together using semicolon `;`.
 
-<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+- [Angular Official Website](https://angular.io/guide/template-statements)
-
-<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://angular.io/guide/template-statements'>Angular Official Website</BadgeLink>

src/roadmaps/angular/content/104-templates/103-binding-data-props-attrs-events.md

@@ -7,6 +7,4 @@ In an Angular template, a binding creates a live connection between view and the
 - **event**: lets you listen for and respond to user actions such as keystrokes, mouse movements, clicks, and touches.
 - **data**: It's a combination of property and event binding and helps you share data between components.
 
-<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+- [Angular Official Website](https://angular.io/guide/binding-overview)
-
-<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://angular.io/guide/binding-overview'>Angular Official Website</BadgeLink>

src/roadmaps/angular/content/104-templates/104-reference-vars.md

@@ -2,6 +2,4 @@
 
 Template reference variables help you use data from one part of a template in another part of the template. A template variable can refer to a DOM element within a template, component or directive. In the template, use the hash symbol, `#`, to declare a template reference variable.
 
-<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+- [Angular Official Website](https://angular.io/guide/template-reference-variables)
-
-<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://angular.io/guide/template-reference-variables'>Angular Official Website</BadgeLink>

src/roadmaps/angular/content/104-templates/105-input-output.md

@@ -2,6 +2,4 @@
 
 `@Input()` and `@Output()` give a child component a way to communicate with its parent component. `@Input()` lets a parent component update data in the child component. Conversely, `@Output()` lets the child send data to a parent component.
 
-<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+- [Angular Official Website](https://angular.io/guide/inputs-outputs)
-
-<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://angular.io/guide/inputs-outputs'>Angular Official Website</BadgeLink>

src/roadmaps/angular/content/104-templates/index.md

@@ -0,0 +1,5 @@
+# Templates
+
+A template is a form of HTML that tells Angular how to render the component.
+
+- [Introduction to Components and Templates](https://angular.io/guide/architecture-components)

src/roadmaps/angular/content/104-templates/readme.md

@@ -1,5 +0,0 @@
-# Templates
-
-A template is a form of HTML that tells Angular how to render the component.
-
-<BadgeLink href="https://angular.io/guide/architecture-components" colorScheme="yellow" badgeText="Read">Introduction to Components and Templates</BadgeLink>

src/roadmaps/angular/content/105-rendering-topics/100-builtin-directives.md

@@ -5,6 +5,5 @@ SKDirectives are classes that add additional behavior to elements in your Angula
 `NgClass` Adds and removes a set of CSS classes. | `NgStyle` Adds and removes a set of HTML styles. | `NgModel` Adds two-way data binding to an HTML form element.
 
 
-<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+- [Understanding BuiltIn Directives](https://angular.io/guide/built-in-directives)
-<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://angular.io/guide/built-in-directives'>Understanding BuiltIn Directives</BadgeLink>
+- [BuiltIn Directives Types](https://thinkster.io/tutorials/angular-2-directives)
-<BadgeLink colorScheme='yellow' badgeText='Web' href='https://thinkster.io/tutorials/angular-2-directives'>BuiltIn Directives Types</BadgeLink>

src/roadmaps/angular/content/105-rendering-topics/101-builtin-pipes.md

@@ -5,6 +5,5 @@ Use pipes to transform strings, currency amounts, dates, and other data for disp
 `DatePipe` | `UpperCasePipe` | `LowerCasePipe` | `CurrencyPipe` | `DecimalPipe` | `PercentPipe`
 
 
-<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+- [Understanding BuiltIn Pipes](https://angular.io/guide/pipes)
-<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://angular.io/guide/pipes'>Understanding BuiltIn Pipes</BadgeLink>
+- [BuiltIn Pipes - exampls](https://codecraft.tv/courses/angular/pipes/built-in-pipes/)
-<BadgeLink colorScheme='yellow' badgeText='Web' href='https://codecraft.tv/courses/angular/pipes/built-in-pipes/'>BuiltIn Pipes - exampls</BadgeLink>

src/roadmaps/angular/content/105-rendering-topics/102-change-detection.md

@@ -2,6 +2,5 @@
 
 Change detection is the process through which Angular checks to see whether your application state has changed, and if any DOM needs to be updated. At a high level, Angular walks your components from top to bottom, looking for changes. Angular runs its change detection mechanism periodically so that changes to the data model are reflected in an application’s view. Change detection can be triggered either manually or through an asynchronous event
 
-<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+- [Understanding Change detection](https://angular.io/guide/change-detection)
-<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://angular.io/guide/change-detection'>Understanding Change detection</BadgeLink>
+- [4 Runtime Performance Optimizations ( Change detection )](https://www.youtube.com/watch?v=f8sA-i6gkGQ)
-<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=f8sA-i6gkGQ'>4 Runtime Performance Optimizations ( Change detection )</BadgeLink>

src/roadmaps/angular/content/106-forms/100-reactive-forms.md

@@ -2,8 +2,7 @@
 
 Reactive Forms in angular are those which used to handle the inputs coming from the user. We can define controls by using classes such as FormGroup and FormControl. 
 
-<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+- [Reactive forms - Angular](https://angular.io/guide/reactive-forms)
-<BadgeLink colorScheme='blue' badgeText='Official Documentation' href='https://angular.io/guide/reactive-forms'>Reactive forms - Angular</BadgeLink>
+- [Angular Reactive Forms](https://www.javatpoint.com/angular-reactive-forms)
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.javatpoint.com/angular-reactive-forms'>Angular Reactive Forms</BadgeLink>
+- [How To Use Reactive Forms in Angular](https://www.digitalocean.com/community/tutorials/angular-reactive-forms-introduction)
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.digitalocean.com/community/tutorials/angular-reactive-forms-introduction'>How To Use Reactive Forms in Angular</BadgeLink>
+- [Reactive Form in Angular](https://www.youtube.com/watch?v=8k4ctDmVn7w)
-<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=8k4ctDmVn7w'>Reactive Form in Angular</BadgeLink>

src/roadmaps/angular/content/106-forms/101-template-driven-forms.md

@@ -4,8 +4,7 @@ A Template driven form is the simplest form we can build in Angular. It is mainl
 
 It uses two-way data-binding (ngModel) to create and handle the form components.
 
-<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+- [Building a template-driven form](https://angular.io/guide/forms)
-<BadgeLink colorScheme='blue' badgeText='Official Documentation' href='https://angular.io/guide/forms'>Building a template-driven form</BadgeLink>
+- [Template-Driven Forms](https://codecraft.tv/courses/angular/forms/template-driven/)
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://codecraft.tv/courses/angular/forms/template-driven/'>Template-Driven Forms</BadgeLink>
+- [Template driven form](https://www.youtube.com/watch?v=whr14XxB8-M)
-<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=whr14XxB8-M'>Template driven form</BadgeLink>
+- [Template driven form Validations](https://www.youtube.com/watch?v=cVd4ZCIXprs)
-<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=cVd4ZCIXprs'>Template driven form Validations</BadgeLink>

src/roadmaps/angular/content/106-forms/index.md

@@ -0,0 +1,10 @@
+# Forms
+
+Forms are used to handle user inputs in many applications. It enables users from entering sensitive information to performing several data entry tasks.
+
+Angular provides two approachs to handle user inputs trough forms: reactive and template-driven forms.
+
+- [Introduction to forms in Angular](https://angular.io/guide/forms-overview)
+- [Angular Forms](https://www.w3schools.com/angular/angular_forms.asp)
+- [Angular Forms Tutorial](https://www.youtube.com/watch?v=-bGgjgx3fGs)
+- [Building Forms in Angular Apps](https://www.youtube.com/watch?v=hAaoPOx_oIw)

src/roadmaps/angular/content/106-forms/readme.md

@@ -1,11 +0,0 @@
-# Forms
-
-Forms are used to handle user inputs in many applications. It enables users from entering sensitive information to performing several data entry tasks.
-
-Angular provides two approachs to handle user inputs trough forms: reactive and template-driven forms.
-
-<ResourceGroupTitle>Free Content</ResourceGroupTitle>
-<BadgeLink colorScheme='blue' badgeText='Official Documentation' href='https://angular.io/guide/forms-overview'>Introduction to forms in Angular</BadgeLink>
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.w3schools.com/angular/angular_forms.asp'>Angular Forms</BadgeLink>
-<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=-bGgjgx3fGs'>Angular Forms Tutorial</BadgeLink>
-<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=hAaoPOx_oIw'>Building Forms in Angular Apps</BadgeLink>

src/roadmaps/angular/content/107-routing/101-router-outlets.md

@@ -4,5 +4,4 @@ The router-outlet is a directive that's available from the @angular/router packa
 
 Thanks to the router outlet, your app will have multiple views/pages and the app template acts like a shell of your application. Any element, you add to the shell will be rendered in each view, only the part marked by the router outlet will be changed between views.
 
-<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+- [Understanding Router Outlets](https://angular.io/api/router/RouterOutle)
-<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://angular.io/api/router/RouterOutle'>Understanding Router Outlets</BadgeLink>

src/roadmaps/angular/content/107-routing/104-guards.md

@@ -4,9 +4,9 @@ Angular route guards are interfaces provided by Angular which, when implemented,
 
 Some types of angular guards are `CanActivate`, `CanActivateChild`, `CanLoad`, `CanDeactivate` and `Resolve`.
 
-<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://angular.io/api/router'>Angular Official Website</BadgeLink>
+- [Angular Official Website](https://angular.io/api/router)
-<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://angular.io/api/router/CanActivate'>Can Activate Guard</BadgeLink>
+- [Can Activate Guard](https://angular.io/api/router/CanActivate)
-<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://angular.io/api/router/CanActivateChild'>Can Activate Child</BadgeLink>
+- [Can Activate Child](https://angular.io/api/router/CanActivateChild)
-<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://angular.io/api/router/CanDeactivate'>Can Deactivate</BadgeLink>
+- [Can Deactivate](https://angular.io/api/router/CanDeactivate)
-<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://angular.io/api/router/CanLoad'>Angular Can Load</BadgeLink>
+- [Angular Can Load](https://angular.io/api/router/CanLoad)
-<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://angular.io/api/router/CanMatch'>Can Match</BadgeLink>
+- [Can Match](https://angular.io/api/router/CanMatch)

src/roadmaps/angular/content/107-routing/105-lazy-loading.md

@@ -2,6 +2,5 @@
 
 Lazy loading is a technique in Angular that allows you to load JavaScript components asynchronously when a specific route is activated. It improves the application load time speed by splitting the application into several bundles. The bundles are loaded as required when the user navigates through the app.
 
-<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+- [What is Lazy loading ? - Angular.io ](https://angular.io/guide/lazy-loading-ngmodules)
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://angular.io/guide/lazy-loading-ngmodules'>What is Lazy loading ? - Angular.io </BadgeLink>
+- [Angular Tutorial - Lazy Loading](https://www.youtube.com/watch?v=JjIQq9lh-Bw)
-<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=JjIQq9lh-Bw'>Angular Tutorial - Lazy Loading</BadgeLink>

src/roadmaps/angular/content/107-routing/index.md

@@ -0,0 +1,7 @@
+# Routing
+
+Routing in Angular allows the users to create a single-page application with multiple views and navigation between them. Users can switch between these views without losing the application state and properties.
+
+- [What is Routing ? - Geeksforgeeks ](https://www.geeksforgeeks.org/routing-in-angular-9-10/)
+- [Explanation of Routing ? - Angular.io ](https://angular.io/guide/router)
+- [Angular Tutorial - Routing and Navigation](https://www.youtube.com/watch?v=Nehk4tBxD4o)

src/roadmaps/angular/content/107-routing/readme.md

@@ -1,8 +0,0 @@
-# Routing
-
-Routing in Angular allows the users to create a single-page application with multiple views and navigation between them. Users can switch between these views without losing the application state and properties.
-
-<ResourceGroupTitle>Free Content</ResourceGroupTitle>
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.geeksforgeeks.org/routing-in-angular-9-10/'>What is Routing ? - Geeksforgeeks </BadgeLink>
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://angular.io/guide/router'>Explanation of Routing ? - Angular.io </BadgeLink>
-<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=Nehk4tBxD4o'>Angular Tutorial - Routing and Navigation</BadgeLink>

src/roadmaps/angular/content/108-services-remote-data/100-dependency-injection.md

@@ -2,7 +2,6 @@
 
 Dependency Injection (DI) is a design pattern that creates the dependencies of a class and provides those objects to the class when required. Angular being a nice framework, provides a built-in dependency injection mechanism that creates and provides a runtime version of a dependency value using dependency injectors.
 
-<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+- [What is Dependency Injection ? - angular.io ](https://angular.io/guide/dependency-injection)
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://angular.io/guide/dependency-injection'>What is Dependency Injection ? - angular.io </BadgeLink>
+- [Introduction of Dependency injection](https://www.youtube.com/watch?v=OFPIGlxunL0)
-<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=OFPIGlxunL0'>Introduction of Dependency injection</BadgeLink>
 

src/roadmaps/angular/content/108-services-remote-data/index.md

@@ -0,0 +1,6 @@
+# Services
+
+Components shouldn't fetch or save data directly and shouldn't knowingly present fake data. They should focus on presenting data and delegate data access to a service. Service is where all the remote API calls exist to retrieve and provide data to components.
+
+- [Adding Services in Angular](https://angular.io/tutorial/toh-pt4)
+- [Get Data from Server](https://angular.io/tutorial/toh-pt6)

src/roadmaps/angular/content/108-services-remote-data/readme.md

@@ -1,7 +0,0 @@
-# Services
-
-Components shouldn't fetch or save data directly and shouldn't knowingly present fake data. They should focus on presenting data and delegate data access to a service. Service is where all the remote API calls exist to retrieve and provide data to components.
-
-<ResourceGroupTitle>Free Content</ResourceGroupTitle>
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://angular.io/tutorial/toh-pt4'>Adding Services in Angular</BadgeLink>
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://angular.io/tutorial/toh-pt6'>Get Data from Server</BadgeLink>

src/roadmaps/angular/content/109-lifecycle-hooks.md

@@ -8,6 +8,5 @@ The following life cycle hooks of angular are :
 
 `OnChanges` , `OnInit` , `DoCheck` , `OnDestroy` , `AfterContentInit` , `AfterContentChecked` , `AfterViewInit` , `AfterViewChecked`
 
-<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+- [What is Life Cycle Hooks? - Angular.io ](https://angular.io/guide/lifecycle-hooks)
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://angular.io/guide/lifecycle-hooks'>What is Life Cycle Hooks? - Angular.io </BadgeLink>
+- [The life cycle hooks of angular - Blog ](https://blog.logrocket.com/angular-lifecycle-hooks/)
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://blog.logrocket.com/angular-lifecycle-hooks/'>The life cycle hooks of angular - Blog </BadgeLink>

src/roadmaps/angular/content/110-state-management/100-ngxs.md

@@ -2,8 +2,7 @@
 
 Ngxs is a state management pattern for the Angular framework. It acts as a single source of truth for our application. Ngxs is very simple and easily implementable. It reduce lots of boilerplate code . It is a replacement for Ngrx. In Ngrx we are creating state, action, reducer, and effects but in Ngxs, we are creating only state and actions instead of all of this. Like Ngrx, Ngxs is also asynchronous and when we dispatch any action we can get a response back.
 
-<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+- [What is NGXS ? - Ngxs.io ](https://www.ngxs.io/)
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.ngxs.io/'>What is NGXS ? - Ngxs.io </BadgeLink>
+- [Details about NGXS - Medium ](https://medium.com/@knoldus/introduction-to-ngxs-state-management-pattern-library-for-angular-ec76f681ceba)
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://medium.com/@knoldus/introduction-to-ngxs-state-management-pattern-library-for-angular-ec76f681ceba'>Details about NGXS - Medium </BadgeLink>
+- [Practise of NGXS](https://www.youtube.com/watch?v=SGj11j4hxmg)
-<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=SGj11j4hxmg'>Practise of NGXS</BadgeLink>
 

src/roadmaps/angular/content/110-state-management/101-ngrx.md

@@ -1,8 +1,7 @@
 # Ngrx
 
 Ngrx is a group of Angular libraries for reactive extensions that implements the Redux pattern and it’s supercharged with RXJS.
-<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+- [What is NGRX ? - ngrx.io ](https://ngrx.io/)
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://ngrx.io/'>What is NGRX ? - ngrx.io </BadgeLink>
+- [Details about NGRX - Medium ](https://ahmedrebai.medium.com/introduction-to-state-management-with-ngrx-and-angular-91f4ff27ec9f)
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://ahmedrebai.medium.com/introduction-to-state-management-with-ngrx-and-angular-91f4ff27ec9f'>Details about NGRX - Medium </BadgeLink>
+- [Practise of NGRX](https://www.youtube.com/watch?v=f97ICOaekNU)
-<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=f97ICOaekNU'>Practise of NGRX</BadgeLink>
 

src/roadmaps/angular/content/110-state-management/index.md

@@ -2,6 +2,6 @@
 
 Application state management is the process of maintaining knowledge of an application's inputs across multiple related data flows that form a complete business transaction -- or a session -- to understand the condition of the app at any given moment. In computer science, an input is information put into the program by the user and state refers to the condition of an application according to its stored inputs -- saved as variables or constants. State can also be described as the collection of preserved information that forms a complete session.
 
-<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+- [What is State Management?](https://www.techtarget.com/searchapparchitecture/definition/state-management)
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.techtarget.com/searchapparchitecture/definition/state-management'>What is State Management?</BadgeLink>
+- [ Angular state management made simple with NgRx](https://blog.logrocket.com/angular-state-management-made-simple-with-ngrx/)
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.robinwieruch.de/react-state/'>Overview of State in React</BadgeLink>
+- [Angular State Management with NgRx](https://www.syncfusion.com/blogs/post/angular-state-management-with-ngrx.aspx)

src/roadmaps/angular/content/110-state-management/readme.md

@@ -1,9 +0,0 @@
-# State Management
-
-Application state management is the process of maintaining knowledge of an application's inputs across multiple related data flows that form a complete business transaction -- or a session -- to understand the condition of the app at any given moment. In computer science, an input is information put into the program by the user and state refers to the condition of an application according to its stored inputs -- saved as variables or constants. State can also be described as the collection of preserved information that forms a complete session.
-
-<ResourceGroupTitle>Free Content</ResourceGroupTitle>
-
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.techtarget.com/searchapparchitecture/definition/state-management'>What is State Management?</BadgeLink>
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://blog.logrocket.com/angular-state-management-made-simple-with-ngrx/'> Angular state management made simple with NgRx</BadgeLink>
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.syncfusion.com/blogs/post/angular-state-management-with-ngrx.aspx'>Angular State Management with NgRx</BadgeLink>

src/roadmaps/angular/content/112-creating-a-custom-x/100-directive.md

@@ -4,6 +4,5 @@ Directives are the functions that will execute whenever the Angular compiler fin
 
 From the core concept, Angular directives are categorized into three categories: Attribute Directives, Structural Directives, and Component Directives.
 
-<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+- [Create a custom directive - Freecodecamp](https://www.freecodecamp.org/news/angular-directives-learn-how-to-use-or-create-custom-directives-in-angular-c9b133c24442/)
-<BadgeLink badgeText='Read' colorScheme='yellow' href='https://www.freecodecamp.org/news/angular-directives-learn-how-to-use-or-create-custom-directives-in-angular-c9b133c24442/'>Create a custom directive - Freecodecamp</BadgeLink>
+- [Create a custom directive video for Beginners](https://www.youtube.com/watch?v=AoN56g6UAsE)
-<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=AoN56g6UAsE'>Create a custom directive video for Beginners</BadgeLink>

src/roadmaps/angular/content/112-creating-a-custom-x/101-pipe.md

@@ -2,6 +2,5 @@
 
 Pipes to transform strings, currency amounts, dates, and other data for display. Pipes are simple functions in template expressions to accept an input value and return a transformed value. Pipes are helpful because you can use them throughout your application while only declaring each pipe once. For example, you would use a pipe to show the date as April 15, 1988, rather than the raw string format.
 
-<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+- [Create a custom pipe - angular.io](https://angular.io/guide/pipes-custom-data-trans)
-<BadgeLink badgeText='Read' colorScheme='yellow' href='https://angular.io/guide/pipes-custom-data-trans'>Create a custom pipe - angular.io</BadgeLink>
+- [Create a custom pipe video for Beginners](https://www.youtube.com/watch?v=P2587FN4Y0w)
-<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=P2587FN4Y0w'>Create a custom pipe video for Beginners</BadgeLink>

src/roadmaps/angular/content/112-creating-a-custom-x/102-library.md

@@ -2,5 +2,4 @@
 
 Use the Angular CLI and the npm package manager to build and publish your library as an npm package.
 
-<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+- [Angular Website](https://angular.io/guide/creating-libraries)
-<BadgeLink colorScheme='yellow' badgeText='Official Website' href='https://angular.io/guide/creating-libraries'>Angular Website</BadgeLink>

src/roadmaps/angular/content/113-angular-ssr/100-angular-universal.md

@@ -2,6 +2,5 @@
 
 Angular Universal also known as server-side rendering is tool which allows server to pre-render Angular application while user hits your website for first time.
 
-<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+- [Angular Website](https://angular.io/guide/universal)
-<BadgeLink colorScheme='yellow' badgeText='Official Website' href='https://angular.io/guide/universal'>Angular Website</BadgeLink>
+- [Github Repository](https://github.com/angular/universal)
-<BadgeLink colorScheme='yellow' badgeText='Github Repository' href='https://github.com/angular/universal'>Github Repository</BadgeLink>

src/roadmaps/angular/content/113-angular-ssr/index.md

@@ -2,5 +2,5 @@
 
 A normal Angular application executes in the browser, rendering pages in the DOM in response to user actions. Angular Universal executes on the server, generating static application pages that later get bootstrapped on the client. This means that the application generally renders more quickly, giving users a chance to view the application layout before it becomes fully interactive.
 
-<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://angular.io/guide/universal'>Angular Universal</BadgeLink>
+- [Angular Universal](https://angular.io/guide/universal)
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://web.dev/rendering-on-the-web/'>Rendering on the Web</BadgeLink>
+- [Rendering on the Web](https://web.dev/rendering-on-the-web/)

src/roadmaps/angular/content/114-angular-ssg/100-scully.md

@@ -2,6 +2,5 @@
 
 Scully is the best static site generator for Angular projects looking to embrace the Jamstack. It will use your application and will create a static index. html for each of your pages/routes.
 
-<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+- [Scully Website](https://scully.io/)
-<BadgeLink colorScheme='yellow' badgeText='Official Website' href='https://scully.io/'>Scully Website</BadgeLink>
+- [Github Repository](https://github.com/scullyio/scully)
-<BadgeLink colorScheme='yellow' badgeText='Github Repository' href='https://github.com/scullyio/scully'>Github Repository</BadgeLink>

src/roadmaps/angular/content/115-testing-angular-apps/100-testing-pipes.md

@@ -2,6 +2,5 @@
 
 An Angular Pipe is a special function that is called from a Component template. Its purpose is to transform a value: You pass a value to the Pipe, the Pipe computes a new value and returns it.
 
-<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+- [Angular.io Website](https://angular.io/guide/testing-pipes)
-<BadgeLink badgeText='Read' colorScheme='yellow' href='https://angular.io/guide/testing-pipes'>Angular.io Website</BadgeLink>
+- [Testing-Angular.com](https://testing-angular.com/testing-pipes/)
-<BadgeLink badgeText='Read' colorScheme="yellow" href='https://testing-angular.com/testing-pipes/'>Testing-Angular.com</BadgeLink>

src/roadmaps/angular/content/115-testing-angular-apps/101-testing-services.md

@@ -2,6 +2,5 @@
 
 In an Angular application, Services are responsible for fetching, storing and processing data. Services are singletons, meaning there is only one instance of a Service during runtime. They are fit for central data storage, HTTP and WebSocket communication as well as data validation.
 
-<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+- [Angular.io Website](https://angular.io/guide/testing-services)
-<BadgeLink badgeText='Read' colorScheme='yellow' href='https://angular.io/guide/testing-services'>Angular.io Website</BadgeLink>
+- [Testing-Angular.com](https://testing-angular.com/testing-services/)
-<BadgeLink badgeText='Read' colorScheme="yellow" href='https://testing-angular.com/testing-services/'>Testing-Angular.com</BadgeLink>

src/roadmaps/angular/content/115-testing-angular-apps/102-testing-component-bindings.md

@@ -2,5 +2,4 @@
 
 Angular processes all data bindings once for each JavaScript event cycle, from the root of the application component tree through all child components. Data binding plays an important role in communication between a template and its component, and is also important for communication between parent and child components.
 
-<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+- [Angular.io Website](https://angular.io/guide/architecture-components#:~:text=Angular%20processes%20all%20data%20bindings,between%20parent%20and%20child%20components.)
-<BadgeLink badgeText='Read' colorScheme='yellow' href='https://angular.io/guide/architecture-components#:~:text=Angular%20processes%20all%20data%20bindings,between%20parent%20and%20child%20components.'>Angular.io Website</BadgeLink>

src/roadmaps/angular/content/115-testing-angular-apps/103-testing-directives.md

@@ -2,6 +2,5 @@
 
 Directives are classes that add new behavior or modify the existing behavior to the elements in the template. Basically directives are used to manipulate the DOM, for example adding/removing the element from DOM or changing the appearance of the DOM elements.
 
-<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+- [Angular.io Website](https://angular.io/guide/testing-attribute-directives)
-<BadgeLink badgeText='Read' colorScheme='yellow' href='https://angular.io/guide/testing-attribute-directives'>Angular.io Website</BadgeLink>
+- [tesing-angular Website](https://testing-angular.com/testing-directives/)
-<BadgeLink badgeText='Read' colorScheme='yellow' href='https://testing-angular.com/testing-directives/'>tesing-angular Website</BadgeLink>

src/roadmaps/angular/content/115-testing-angular-apps/104-testing-component-templates.md

@@ -2,5 +2,4 @@
 
 With a component template , you can save and reuse component processes and properties and create components from them; template-based components inherit the template's properties and process.
 
-<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+- [Angular.io Website](https://angular.io/guide/architecture-components)
-<BadgeLink badgeText='Read' colorScheme='yellow' href='https://angular.io/guide/architecture-components'>Angular.io Website</BadgeLink>

src/roadmaps/angular/content/readme.md

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

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

@@ -2,5 +2,5 @@
 
 C# is a modern coding language that was developed by Microsoft that focuses on applying the coding style to C++ and making it so that way it's more condensed and simple. It's similar to Java by both being static, strong, and manifestive languages. Both use the System's prebuilt class to do certain features like printing output to the screen, etc.C#, like Java, also contains a garbage collection, which removes lower-level maintenance code from the programmer.
 
-<BadgeLink colorScheme='blue' badgeText='Read' href='https://learn.microsoft.com/en-us/dotnet/csharp//'>C# official website?</BadgeLink>
+- [C# official website?](https://learn.microsoft.com/en-us/dotnet/csharp//)
-<BadgeLink badgeText='Course' colorScheme='green' href='https://www.w3schools.com/CS/index.php'>The Beginner's Guide to C#</BadgeLink>
+- [The Beginners Guide to C#](https://www.w3schools.com/CS/index.php)

src/roadmaps/aspnet-core/content/100-basics-of-csharp/102-dotnet-cli.md

@@ -2,6 +2,5 @@
 
 .NET CLI is the command-line interface (CLI) for the .NET platform. It is a tool that provides a common interface for running .NET Core command-line tools and utilities. .NET Core is a cross-platform, open-source, and modular version of the .NET framework, and the .NET CLI provides a way to interact with it from the command line.
 
-<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+- [Microsoft - .NET CLI overview](https://learn.microsoft.com/en-us/dotnet/core/tools/)
-<BadgeLink badgeText='Read' colorScheme="yellow" href='https://learn.microsoft.com/en-us/dotnet/core/tools/'>Microsoft - .NET CLI overview</BadgeLink>
+- [Intro To The .NET CLI](https://youtu.be/RQLzp2Z8-BE)
-<BadgeLink badgeText='Watch' href='https://youtu.be/RQLzp2Z8-BE'>Intro To The .NET CLI</BadgeLink>

src/roadmaps/aspnet-core/content/101-general-development-skills/100-git.md

@@ -2,8 +2,7 @@
 
 [Git](https://git-scm.com/) is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.
 
-<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+- [Learn Git on the command line](https://github.com/jlord/git-it-electron)
-<BadgeLink badgeText='Course' colorScheme='green' href='https://github.com/jlord/git-it-electron'>Learn Git on the command line</BadgeLink>
+- [Version Control System Introduction](https://www.youtube.com/watch?v=zbKdDsNNOhg)
-<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=zbKdDsNNOhg'>Version Control System Introduction</BadgeLink>
+- [Git & GitHub Crash Course For Beginners](https://www.youtube.com/watch?v=SWYqp7iY_Tc)
-<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=SWYqp7iY_Tc'>Git & GitHub Crash Course For Beginners</BadgeLink>
+- [Learn Git in 20 Minutes](https://youtu.be/Y9XZQO1n_7c?t=21)
-<BadgeLink badgeText='Watch' href='https://youtu.be/Y9XZQO1n_7c?t=21'>Learn Git in 20 Minutes</BadgeLink>

src/roadmaps/aspnet-core/content/101-general-development-skills/102-vcs-hosting-services.md

@@ -2,7 +2,6 @@
 
 There are different repository hosting services with the most famous one being GitHub, GitLab and BitBucket. I would recommend creating an account on GitHub because that is where most of the OpenSource work is done and most of the developers are.
 
-<ResourceGroupTitle>Services Links</ResourceGroupTitle>
+- [GitHub: Where the world builds software](https://github.com)
-<BadgeLink badgeText='Visit' colorScheme="green" href='https://github.com'>GitHub: Where the world builds software</BadgeLink>
+- [GitLab: Iterate faster, innovate together](https://gitlab.com)
-<BadgeLink badgeText='Visit' href='https://gitlab.com'>GitLab: Iterate faster, innovate together</BadgeLink>
+- [BitBucket: The Git solution for professional teams](https://bitbucket.com)
-<BadgeLink badgeText='Visit' href='https://bitbucket.com'>BitBucket: The Git solution for professional teams</BadgeLink>

src/roadmaps/aspnet-core/content/101-general-development-skills/103-http-https.md

@@ -8,14 +8,12 @@ HTTPS (**H**ypertext **T**ransfer **P**rotocol **S**ecure) is the secure version
 
 `HTTPS = HTTP + SSL/TLS`
 
-<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+- [What is HTTP?](https://www.cloudflare.com/en-gb/learning/ddos/glossary/hypertext-transfer-protocol-http/)
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.cloudflare.com/en-gb/learning/ddos/glossary/hypertext-transfer-protocol-http/'>What is HTTP?</BadgeLink>
+- [An overview of HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP/Overview)
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://developer.mozilla.org/en-US/docs/Web/HTTP/Overview'>An overview of HTTP</BadgeLink>
+- [Journey to HTTP/2](https://kamranahmed.info/blog/2016/08/13/http-in-depth)
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://kamranahmed.info/blog/2016/08/13/http-in-depth'>Journey to HTTP/2</BadgeLink>
+- [HTTP/3 From A To Z: Core Concepts](https://www.smashingmagazine.com/2021/08/http3-core-concepts-part1/)
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.smashingmagazine.com/2021/08/http3-core-concepts-part1/'>HTTP/3 From A To Z: Core Concepts</BadgeLink>
+- [HTTP Crash Course & Exploration](https://www.youtube.com/watch?v=iYM2zFP3Zn0)
-<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=iYM2zFP3Zn0'>HTTP Crash Course & Exploration</BadgeLink>
+- [What is HTTPS?](https://www.cloudflare.com/en-gb/learning/ssl/what-is-https/)
-
+- [Why HTTPS Matters](https://developers.google.com/web/fundamentals/security/encrypt-in-transit/why-https)
-<BadgeLink badgeText='Read' colorScheme="yellow" href='https://www.cloudflare.com/en-gb/learning/ssl/what-is-https/'>What is HTTPS?</BadgeLink>
+- [Enabling HTTPS on Your Servers](https://developers.google.com/web/fundamentals/security/encrypt-in-transit/enable-https)
-<BadgeLink badgeText='Read' colorScheme="yellow" href='https://developers.google.com/web/fundamentals/security/encrypt-in-transit/why-https'>Why HTTPS Matters</BadgeLink>
+- [How HTTPS works (comic)](https://howhttps.works/)
-<BadgeLink badgeText='Read' colorScheme="yellow" href='https://developers.google.com/web/fundamentals/security/encrypt-in-transit/enable-https'>Enabling HTTPS on Your Servers</BadgeLink>
-<BadgeLink badgeText='Read' colorScheme="yellow" href='https://howhttps.works/'>How HTTPS works (comic)</BadgeLink>

src/roadmaps/aspnet-core/content/101-general-development-skills/104-datastructures-and-algorithms.md

@@ -2,9 +2,8 @@
 
 As the name indicates, a **Data Structure** is a way of organizing the data in the **memory** so it can be used efficiently. Some common data structures are array, linked list, stack, hashtable, queue, tree, heap, and graph.
 
-<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+- [What are Data Structures?](https://www.geeksforgeeks.org/data-structures)
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.geeksforgeeks.org/data-structures'>What are Data Structures?</BadgeLink>
+- [ Data Structures and Algorithms](https://www.javatpoint.com/data-structure-tutorial)
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.javatpoint.com/data-structure-tutorial'> Data Structures and Algorithms</BadgeLink>
+- [Data Structures Illustrated](https://www.youtube.com/watch?v=9rhT3P1MDHk&list=PLkZYeFmDuaN2-KUIv-mvbjfKszIGJ4FaY)
-<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=9rhT3P1MDHk&list=PLkZYeFmDuaN2-KUIv-mvbjfKszIGJ4FaY'>Data Structures Illustrated</BadgeLink>
+- [C# resources](https://dev.to/adavidoaiei/fundamental-data-structures-and-algorithms-in-c-4ocf)
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://dev.to/adavidoaiei/fundamental-data-structures-and-algorithms-in-c-4ocf'>C# resources</BadgeLink>
+- [Interview Questions about Data Structures](https://www.csharpstar.com/csharp-algorithms/)
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.csharpstar.com/csharp-algorithms/'>Interview Questions about Data Structures</BadgeLink>

src/roadmaps/aspnet-core/content/102-database-fundamentals/102-stored-procedures.md

@@ -2,4 +2,4 @@
 
 A stored procedure is a pre-compiled collection of SQL statements that can be executed on a database server. Stored procedures are typically used to perform specific tasks, such as retrieving data from a database, inserting or updating data, or performing complex calculations. They are stored on the database server and can be called or executed from a client application or other stored procedures. Stored procedures can improve database performance by reducing the amount of SQL code needed to be executed and allowing developers to reuse common pieces of code. They can also provide security by allowing database administrators to control which users have access to specific stored procedures.
 
-<BadgeLink colorScheme='blue' badgeText='Read' href='https://www.w3schools.com/sql/sql_stored_procedures.asp'>Stored Procedure Tutorial</BadgeLink>
+- [Stored Procedure Tutorial](https://www.w3schools.com/sql/sql_stored_procedures.asp)

src/roadmaps/aspnet-core/content/102-database-fundamentals/103-constraints.md

@@ -2,4 +2,4 @@
 
 Database constraints are rules that are used to limit the data that can be stored in a database table. These constraints can be used to ensure the integrity and accuracy of the data in the table, and they can be used to enforce business rules or other requirements. For example, a constraint might be used to ensure that a column only contains positive numbers, or to ensure that a column always has a unique value. Constraints can be specified at the time a table is created, or they can be added to an existing table. Some common types of constraints include primary keys, foreign keys, and NOT NULL constraints.
 
-<BadgeLink colorScheme='blue' badgeText='Read' href='https://www.w3schools.com/sql/sql_constraints.asp'>SQL Constraints</BadgeLink>
+- [SQL Constraints](https://www.w3schools.com/sql/sql_constraints.asp)

src/roadmaps/aspnet-core/content/103-basics-of-aspnet-core/100-mvc.md

@@ -6,4 +6,4 @@ MVC is an architectural design pattern used for developing applications, specifi
 - **View** - Handles UI part of the applications (data presentation).
 - **Controller** - Handles request flow, and acts as an intermediary between view and model.
 
-<BadgeLink colorScheme='blue' badgeText='Read' href='https://learn.microsoft.com/en-us/aspnet/core/mvc/overview?WT.mc_id=dotnet-35129-website&view=aspnetcore-7.0'>MVC Official Documentation</BadgeLink>
+- [MVC Official Documentation](https://learn.microsoft.com/en-us/aspnet/core/mvc/overview?WT.mc_id=dotnet-35129-website&view=aspnetcore-7.0)

src/roadmaps/aspnet-core/content/104-orm/index.md

@@ -2,4 +2,4 @@
 
 ORM stands for Object-Relational Mapping, and it is a technique that allows a developer to work with a database using objects. It is a way of abstracting the database so that the developer can think in terms of objects, rather than tables and SQL queries. This can make it easier to write and maintain code, as well as improve the performance of the application.
 
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.telerik.com/blogs/dotnet-basics-orm-object-relational-mapping'>ORM (Object Relational Mapping)</BadgeLink>
+- [ORM (Object Relational Mapping)](https://www.telerik.com/blogs/dotnet-basics-orm-object-relational-mapping)