Kamran Ahmed
2 years ago
parent
16ebf98164
commit
f9911b6597
1942 changed files with 5346 additions and 7063 deletions
@ -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}`); |
||||
}); |
||||
@ -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) |
||||
@ -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> |
||||
@ -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) |
||||
@ -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> |
||||
@ -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) |
||||
@ -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> |
||||
@ -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) |
||||
@ -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> |
||||
@ -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) |
||||
@ -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> |
||||
@ -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> |
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://ngrx.io/'>What is NGRX ? - ngrx.io </BadgeLink> |
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://ahmedrebai.medium.com/introduction-to-state-management-with-ngrx-and-angular-91f4ff27ec9f'>Details about NGRX - Medium </BadgeLink> |
||||
<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=f97ICOaekNU'>Practise of NGRX</BadgeLink> |
||||
- [What is NGRX ? - ngrx.io ](https://ngrx.io/) |
||||
- [Details about NGRX - Medium ](https://ahmedrebai.medium.com/introduction-to-state-management-with-ngrx-and-angular-91f4ff27ec9f) |
||||
- [Practise of NGRX](https://www.youtube.com/watch?v=f97ICOaekNU) |
||||
|
||||
|
||||
@ -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> |
||||
@ -1 +0,0 @@ |
||||
# |
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue