docs(docs): modification en cours

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
-:::
+<div class="chip">Challenge #1</div>
 
-> Challenge #1
+## Information
+
+In Angular, content projection is a powerful technique for creating highly customizable components. Utilizing and understanding the concepts of <b>ng-content</b> and <b>ngTemplateOutlet</b> can sighificantly enhance your ability to create shareable components.
+
+You can learn all about <b>ng-content</b> [here](https://angular.io/guide/content-projection#projecting-content-in-more-complex-environments) from simple projection to more complex ones.
+
+To learn about <b>ngTemplateOutlet</b>, 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 <b>CardComponent</b> that can be customized without any modifications. Once you've created this component, you can begin implementing the <b>CityCardComponent</b> and ensure you are not touching the <b>CardComponent</b>.
 
 ## 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 <b>must</b> refactor the <b>CardComponent</b> and <b>ListItemComponent</b>.
+- The <b>NgFor</b> directive must be declared and remain inside the <b>CardComponent</b>. You might be tempted to move it to the <b>CardComponent</b> but avoid doing so.
+- <b>CardComponent</b> should not contain any <b>NgIf</b> or <b>NgSwitch</b>.
+- CSS: try to avoid using <b>::ng-deep</b>. 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`.
+:::
 
-<a href="https://github.com/tomalaforge/angular-challenges/pulls?q=label%3A1+label%3Aanswer">
-  <img
-    src="https://img.shields.io/badge/-Solutions-green"
-    alt="Projection solution"
-  />
-</a>
-<a href='https://github.com/tomalaforge/angular-challenges/pulls?q=label%3A1+label%3A"answer+author"'>
-  <img
-    src="https://img.shields.io/badge/-Author solution-important"
-    alt="Projection solution author"
-  />
-</a>
-<a
-  href="https://medium.com/@thomas.laforge/create-a-highly-customizable-component-cc3a9805e4c5"
-  target="_blank"
-  rel="noopener noreferrer">
-  <img
-    src="https://img.shields.io/badge/-Blog post explanation-blue"
-    alt="Projection blog article"
-  />
-</a>
+:::tip[Reminder]
+Your PR title must start with <b>Answer:1</b>.
+:::
 
-_You can ask any question on_ <a href="https://twitter.com/laforge_toma" target="_blank" rel="noopener noreferrer"><img src="./../../logo/twitter.svg" height=20px alt="twitter"/></a>
+<div class="article-footer">
+  <a href="https://github.com/tomalaforge/angular-challenges/pulls?q=label%3A1+label%3Aanswer" alt="Projection community solutions"> Community solutions
+  </a>
+  <a href='https://github.com/tomalaforge/angular-challenges/pulls?q=label%3A1+label%3A"answer+author"' alt="Projection solution author"> Author solution
+  </a>
+  <a
+    href="https://medium.com/@thomas.laforge/create-a-highly-customizable-component-cc3a9805e4c5"
+    target="_blank"
+    rel="noopener noreferrer"
+     alt="Projection blog article">
+  Blog Post
+  </a>
+</div>

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. 🔥
 
 <!-- gh repo set-default -->

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
 ---
 

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;
 }