diff --git a/docs/.vscode/settings.json b/docs/.vscode/settings.json new file mode 100644 index 0000000..1c5c156 --- /dev/null +++ b/docs/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "editor.wordWrapColumn": 120 +} diff --git a/docs/src/assets/PR-code-btn-modal.png b/docs/src/assets/PR-code-btn-modal.png new file mode 100644 index 0000000..2cc4b1b Binary files /dev/null and b/docs/src/assets/PR-code-btn-modal.png differ diff --git a/docs/src/assets/PR-header.png b/docs/src/assets/PR-header.png new file mode 100644 index 0000000..bb76c8c Binary files /dev/null and b/docs/src/assets/PR-header.png differ diff --git a/docs/src/assets/fork-sync.png b/docs/src/assets/fork-sync.png new file mode 100644 index 0000000..7374fac Binary files /dev/null and b/docs/src/assets/fork-sync.png differ diff --git a/docs/src/assets/sync-fork-update.png b/docs/src/assets/sync-fork-update.png new file mode 100644 index 0000000..c8a1eea Binary files /dev/null and b/docs/src/assets/sync-fork-update.png differ diff --git a/docs/src/content/docs/guides/checkout-answer.md b/docs/src/content/docs/guides/checkout-answer.md index 26358bf..31341c7 100644 --- a/docs/src/content/docs/guides/checkout-answer.md +++ b/docs/src/content/docs/guides/checkout-answer.md @@ -4,3 +4,39 @@ description: Guide to checkout the answer of someone else sidebar: order: 3 --- + +All Angular Challenges answers will be presented in the form of a Pull Request (PR). To view and follow them, navigate through the **Files Changes** page on GitHub. However, understanding and following this process may not be straightforward if you are not familiar with the interface. In many cases, you may prefer to check out the branch and review the solution in your preferred IDE. + +This guide has been created to help you in archieving this. + +## Checkout a PR locally from someone else + +### Sync your repository + +First you need to synchronize your fork to ensure it is up to date with the forked repository. + +This can be archieved by clicking the **Sync fork** button on the main page of your fork. + +![Sync project header](../../../assets/fork-sync.png) + +The image above shows that my branch is behind of the main branch by 8 commits, and I need to synchronize it to be up to date. + +![Sync project update modal](../../../assets/sync-fork-update.png) + +### Checkout locally + +Navigate to the PR you wish to check out locally and obtain its ID. You will find it in the title of the PR (as shown below). + +![PR header](../../../assets/PR-header.png) + +Next, go to any terminal within your project directory and run the following command: + +```bash +gh pr checkout +``` + +If you don't remember the command, click on the Code button on the right side of the header, and you can easily copy/paste the command. + +![PR code modal](../../../assets/PR-code-btn-modal.png) + +🔥 You can now navigate through the solution locally and serve it to test it. 🔥 diff --git a/docs/src/content/docs/index.mdx b/docs/src/content/docs/index.mdx index 14ed06c..1ba6bc4 100644 --- a/docs/src/content/docs/index.mdx +++ b/docs/src/content/docs/index.mdx @@ -19,27 +19,32 @@ hero: import { Card, CardGrid } from '@astrojs/starlight/components'; - - This repository gather more than 30 challenges about Angular, Nx, Ngrx, - Rxjs, Ngrx about real life issues or specific feature to level up your game. - - - One goal of this repository is to break the barrier to OSS. By answering - challenges, you will learn how to start contributing to any other Open - Source Project. - - - It's always hard to learn and practise a new framework. This set of - challenges will give your real use cases to practise what you have been - learning and anybody can comment or help you out. Learning alone is great, - but learning alongside other is way better. - - - You have an issue, an interesing bug, an idea. Don't waste any time and - create your own challenges. - - - Doing those challenges will get you ready for any technical challenges for a - frontend role. - + + This repository gathers over 30 challenges related to Angular, Nx, Ngrx, RxJS, and Ngrx. + These challenges revolve around real-life issues or specific features to elevate your skills. + + + + One of the goals of this repository is to lower the barrier to entry + for Open Source Software (OSS). By engaging with these challenges, you will + learn how to start contributing to any other Open Source Project. + + + + Learning and practicing a new framework is always challenging. This set of + challenges provides real-world use cases to apply what you've been learning. + Anyone can comment or offer assistance. + + Learning alone is great, but learning alongside others will get you farer. + + + + + Do you have an issue, an interesting bug, or an idea? Don't hesitate;{' '} + create your own challenges without wasting any time. + + + + Completing these challenges will prepare you for any technical challenges you may encounter in a frontend role during interviews. + diff --git a/docs/src/styles/custom-css.css b/docs/src/styles/custom-css.css index 5cb4156..4444a87 100644 --- a/docs/src/styles/custom-css.css +++ b/docs/src/styles/custom-css.css @@ -22,3 +22,7 @@ a.primary { color: #fff !important; } + +b { + color: var(--sl-color-accent-high); +}