From 1b1542f980ad147067caaffc07cfba509208d7eb Mon Sep 17 00:00:00 2001 From: thomas Date: Fri, 22 Sep 2023 14:50:22 +0200 Subject: [PATCH] docs(docs): modification en cours --- .../docs/challenges/angular/1-projection.md | 77 +++++++++---------- .../content/docs/guides/checkout-answer.md | 6 +- docs/src/content/docs/index.mdx | 2 +- docs/src/styles/custom-css.css | 28 +++++++ 4 files changed, 71 insertions(+), 42 deletions(-) diff --git a/docs/src/content/docs/challenges/angular/1-projection.md b/docs/src/content/docs/challenges/angular/1-projection.md index 0b482ef..7c6426d 100644 --- a/docs/src/content/docs/challenges/angular/1-projection.md +++ b/docs/src/content/docs/challenges/angular/1-projection.md @@ -3,54 +3,51 @@ title: 🟢 Projection description: Challenge 1 is about learning how to project DOM element through components --- -:::note -WIP: go [here]() if you want to do this challenge -::: +
Challenge #1
-> Challenge #1 +## Information + +In Angular, content projection is a powerful technique for creating highly customizable components. Utilizing and understanding the concepts of ng-content and ngTemplateOutlet can sighificantly enhance your ability to create shareable components. + +You can learn all about ng-content [here](https://angular.io/guide/content-projection#projecting-content-in-more-complex-environments) from simple projection to more complex ones. + +To learn about ngTemplateOutlet, you can find the API documentation [here](https://angular.io/api/common/NgTemplateOutlet) along with some basic examples. + +With this two tools in hand, you are now ready to take on the challenge. ## Statement -Refactor this working exemple of a dasboard containing multiple cards (teachers, students, ...) -Implement the City card. +You will start with an fully functional application that includes a dashboard containing a teacher card and a student card. The goal is to implement the city card. + +While the application works, the developer experience is far from being optimal. Every time you need to implement a new card, you have to modify the `card.component.ts`. In real-life projects, this component can be shared among many applications. The goal of the challenge is to create a CardComponent that can be customized without any modifications. Once you've created this component, you can begin implementing the CityCardComponent and ensure you are not touching the CardComponent. ## Constraints: -- You **must** keep **CardComponent** and **ListItemComponent** -- **NgFor** directive must be declare and stay inside **CardComponent** -- No **NgIf** or **NgSwitch** inside **CardComponent** -- CSS: prefer not to use **::ng-deep**, find a better way +- You must refactor the CardComponent and ListItemComponent. +- The NgFor directive must be declared and remain inside the CardComponent. You might be tempted to move it to the CardComponent but avoid doing so. +- CardComponent should not contain any NgIf or NgSwitch. +- CSS: try to avoid using ::ng-deep. Find a better way to handle CSS styling. -## Submitting your work +--- -1. Fork the project -2. clone it -3. npm ci -4. **nx serve projection** -5. _...work on it_ -6. Commit your work -7. Submit a PR with a title beginning with **Answer:1** that I will review and other dev can review. +:::note +Start the project by running: `npx nx serve projection`. +::: - - Projection solution - - - Projection solution author - - - Projection blog article - +:::tip[Reminder] +Your PR title must start with Answer:1. +::: -_You can ask any question on_ twitter +
+ Community solutions + + Author solution + + + Blog Post + +
diff --git a/docs/src/content/docs/guides/checkout-answer.md b/docs/src/content/docs/guides/checkout-answer.md index d703ba7..93856c8 100644 --- a/docs/src/content/docs/guides/checkout-answer.md +++ b/docs/src/content/docs/guides/checkout-answer.md @@ -1,5 +1,5 @@ --- -title: Checkout Answer +title: Checkout Somebody Answer description: Guide to checkout the answer of someone else sidebar: order: 3 @@ -39,6 +39,10 @@ If you don't remember the command, click on the Code button on the right side of ![PR code modal](../../../assets/PR-code-btn-modal.png) +:::note +If the command doesn't work or fails, Github CLI will guide you through the process. +::: + 🔥 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 1ba6bc4..1af2ed7 100644 --- a/docs/src/content/docs/index.mdx +++ b/docs/src/content/docs/index.mdx @@ -12,7 +12,7 @@ hero: icon: right-arrow variant: primary - text: Start your first challenge immediatly - link: /challenges/angular/projection/ + link: /challenges/angular/1-projection/ icon: rocket --- diff --git a/docs/src/styles/custom-css.css b/docs/src/styles/custom-css.css index 4ff83c1..1a510f0 100644 --- a/docs/src/styles/custom-css.css +++ b/docs/src/styles/custom-css.css @@ -32,6 +32,34 @@ margin: 0px 2px; } +.chip { + border: 1px solid rgba(240, 246, 252, 0.1); + border-radius: 6px; + padding: 2px 8px; + background-color: rgb(33, 38, 45); + color: rgb(201, 209, 217); + fill: rgb(201, 209, 217); + width: fit-content; +} + +.article-footer { + margin-top: 3rem !important; + display: flex; + justify-content: space-between; + flex-wrap: wrap; +} +.article-footer > a { + border: 1px solid var(--sl-color-gray-5); + border-radius: 0.5rem; + padding: 1rem; + text-decoration: none; + color: var(--sl-color-gray-2); + box-shadow: var(--sl-shadow-md); + color: var(--sl-color-white); + font-size: var(--sl-text-2xl); + line-height: var(--sl-line-height-headings); +} + a.primary { color: #fff !important; }