From e8bf7cbe4379e376f5a75367cb062c1893813fba Mon Sep 17 00:00:00 2001 From: thomas Date: Sat, 14 Oct 2023 21:01:45 +0200 Subject: [PATCH] feat(doc): improve documentation authoring exp --- docs/astro.config.mjs | 1 + docs/src/components/ChallengeFooter.astro | 59 +++++++++++++++++++ docs/src/components/CommentSection.astro | 29 +++++++++ docs/src/components/Content.astro | 37 ++++-------- docs/src/components/PageTitle.astro | 39 ++++++++++++ docs/src/components/VideoButton.astro | 16 +++++ docs/src/content/config.ts | 14 ++++- .../angular-performance/12-scroll-cd.md | 28 +-------- .../angular-performance/34-default-onpush.md | 28 +-------- .../angular-performance/35-memoize.md | 26 +------- .../angular-performance/36-ngfor-optimize.md | 28 +-------- .../angular-performance/37-ngfor-biglist.md | 28 +-------- .../docs/challenges/angular/1-projection.md | 50 +++------------- .../challenges/angular/10-pipe-utility.md | 28 +-------- .../docs/challenges/angular/13-styling.md | 26 +------- .../content/docs/challenges/angular/16-di.md | 28 +-------- .../challenges/angular/21-achor-scrolling.md | 28 +-------- .../challenges/angular/22-router-input.md | 37 ++---------- .../angular/3-directive-enhancement.md | 37 ++---------- .../angular/30-interop-rxjs-signal.md | 26 +------- .../angular/31-module-to-standalone.md | 28 +-------- .../docs/challenges/angular/32-bug-cd.md | 37 ++---------- .../docs/challenges/angular/33-decoupling.md | 28 +-------- .../angular/4-context-outlet-typed.md | 37 ++---------- .../content/docs/challenges/angular/5-crud.md | 28 +-------- .../docs/challenges/angular/6-permissions.md | 37 ++---------- .../docs/challenges/angular/8-pipe-pure.md | 37 ++---------- .../docs/challenges/angular/9-pipe-wrapFn.md | 35 ++--------- .../docs/challenges/ngrx/2-effect-selector.md | 37 ++---------- .../docs/challenges/ngrx/7-power-effect.md | 28 +-------- .../challenges/nx/25-generator-lib-ext.md | 21 +------ .../docs/challenges/nx/26-generator-comp.md | 21 +------ .../docs/challenges/nx/27-forbid-enum-rule.md | 21 +------ .../rxjs/11-bug-chaining-operator.md | 28 +-------- .../docs/challenges/rxjs/14-race-condition.md | 28 +-------- .../docs/challenges/testing/17-router.md | 28 +-------- .../docs/challenges/testing/18-nested-comp.md | 28 +-------- .../challenges/testing/19-input-output.md | 28 +-------- .../docs/challenges/testing/20-modal.md | 28 +-------- .../docs/challenges/testing/23-harness.md | 28 +-------- .../challenges/testing/24-harness-creation.md | 28 +-------- .../docs/challenges/testing/28-checkbox.md | 28 +-------- .../challenges/testing/29-real-application.md | 28 +-------- .../challenges/typescript/15-overload-fn.md | 37 ++---------- docs/src/styles/custom-css.css | 15 ++--- 45 files changed, 293 insertions(+), 1027 deletions(-) create mode 100644 docs/src/components/ChallengeFooter.astro create mode 100644 docs/src/components/CommentSection.astro create mode 100644 docs/src/components/PageTitle.astro create mode 100644 docs/src/components/VideoButton.astro diff --git a/docs/astro.config.mjs b/docs/astro.config.mjs index 3e90cbd..74984f3 100644 --- a/docs/astro.config.mjs +++ b/docs/astro.config.mjs @@ -49,6 +49,7 @@ export default defineConfig({ components: { MarkdownContent: './src/components/Content.astro', TableOfContents: './src/components/TableOfContents.astro', + PageTitle: './src/components/PageTitle.astro', }, }), ], diff --git a/docs/src/components/ChallengeFooter.astro b/docs/src/components/ChallengeFooter.astro new file mode 100644 index 0000000..cd20bef --- /dev/null +++ b/docs/src/components/ChallengeFooter.astro @@ -0,0 +1,59 @@ +--- +import VideoButton from './VideoButton.astro' + +const {author, challengeNumber, title, blogLink, videoLink, command} = Astro.props.entry.data; + +const authorLink = `https://github.com/tomalaforge/angular-challenges/pulls?q=label%3A${challengeNumber}+label%3A"answer+author"`; +const authorDescription = `${title} solution author`; +const communityLink = `https://github.com/tomalaforge/angular-challenges/pulls?q=label%3A${challengeNumber}+label%3Aanswer`; +const communityDescription = `${title} community solutions`; + +--- + +
+ +{command && + +} + + + +
+ + ❖ Community Answers + + + ▶︎ Author Answer + + {blogLink && + + Blog Post + } + {videoLink && } +
+ + \ No newline at end of file diff --git a/docs/src/components/CommentSection.astro b/docs/src/components/CommentSection.astro new file mode 100644 index 0000000..a306de6 --- /dev/null +++ b/docs/src/components/CommentSection.astro @@ -0,0 +1,29 @@ +--- + +--- + +
+ + + + \ No newline at end of file diff --git a/docs/src/components/Content.astro b/docs/src/components/Content.astro index fdfd614..0203249 100644 --- a/docs/src/components/Content.astro +++ b/docs/src/components/Content.astro @@ -1,41 +1,26 @@ --- +import ChallengeFooter from './ChallengeFooter.astro' +import CommentSection from './CommentSection.astro' import type { Props } from '@astrojs/starlight/props'; import Default from '@astrojs/starlight/components/MarkdownContent.astro'; -const slug = Astro.props.slug; +const {challengeNumber, author} = Astro.props.entry.data; const renderCommentSection = !Astro.props.entry.data.noCommentSection; + --- +{ challengeNumber && author &&

Created by {author}

} +{challengeNumber && } -
- -{ renderCommentSection - ? - -: ``} +{ renderCommentSection && } \ No newline at end of file diff --git a/docs/src/components/PageTitle.astro b/docs/src/components/PageTitle.astro new file mode 100644 index 0000000..78cccce --- /dev/null +++ b/docs/src/components/PageTitle.astro @@ -0,0 +1,39 @@ +--- +import type { Props } from '@astrojs/starlight/props'; +import Default from '@astrojs/starlight/components/PageTitle.astro'; + +const challengeNumber = Astro.props.entry.data.challengeNumber; +--- + +
+ + {challengeNumber &&
Challenge #{challengeNumber}
} +
+ + \ No newline at end of file diff --git a/docs/src/components/VideoButton.astro b/docs/src/components/VideoButton.astro new file mode 100644 index 0000000..496dd50 --- /dev/null +++ b/docs/src/components/VideoButton.astro @@ -0,0 +1,16 @@ +--- + +const { link, alt, flag } = Astro.props; +const isFR = flag === 'FR'; +--- + + + + Video + {isFR && 🇫🇷} + + \ No newline at end of file diff --git a/docs/src/content/config.ts b/docs/src/content/config.ts index 17ff562..e6c8bee 100644 --- a/docs/src/content/config.ts +++ b/docs/src/content/config.ts @@ -5,8 +5,18 @@ export const collections = { docs: defineCollection({ schema: (ctx) => docsSchema()(ctx).extend({ - // Add a new optional field to the schema. - noCommentSection: z.boolean().optional(), + noCommentSection: z.boolean().optional().default(false), + challengeNumber: z.union([z.number(), z.boolean()]).default(false), + author: z.string().optional(), + command: z.string().optional(), + blogLink: z.string().optional(), + videoLink: z + .object({ + link: z.string(), + alt: z.string(), + flag: z.enum(['FR']).optional(), + }) + .optional(), }), }), i18n: defineCollection({ type: 'data', schema: i18nSchema() }), diff --git a/docs/src/content/docs/challenges/angular-performance/12-scroll-cd.md b/docs/src/content/docs/challenges/angular-performance/12-scroll-cd.md index 5792c29..14b9d08 100644 --- a/docs/src/content/docs/challenges/angular-performance/12-scroll-cd.md +++ b/docs/src/content/docs/challenges/angular-performance/12-scroll-cd.md @@ -1,12 +1,13 @@ --- title: 🟠 Optimize Change Detection description: Challenge 12 about optimizing the number of change detection cycle while scrolling +author: Thomas Laforge +challengeNumber: 12 +command: scroll-cd sidebar: order: 107 --- -
Challenge #12
- ## Information In Angular, there is a library called Zone.js that performs a lot of magic to simplify a developer's life. Zone.js monkey patches all DOM events so that it will recheck and rerender the view when something has changed inside the application. The developer doesn't have to manually trigger change detection. @@ -35,26 +36,3 @@ Your goal for this challenge is to avoid all unnecessary change detection cycles ## Constraint: You cannot opt-out of Zone.js globally. If this code is part of a large project and you opt out of Zone.js, you will break your application without any doubt. - ---- - -:::note -Start the project by running: `npx nx serve scroll-cd`. -::: - -:::tip[Reminder] -Your PR title must start with Answer:12. -::: - -
- - ❖ Community Answers - - - ▶︎ Author Answer - -
diff --git a/docs/src/content/docs/challenges/angular-performance/34-default-onpush.md b/docs/src/content/docs/challenges/angular-performance/34-default-onpush.md index 2aa2ff1..6d4ec59 100644 --- a/docs/src/content/docs/challenges/angular-performance/34-default-onpush.md +++ b/docs/src/content/docs/challenges/angular-performance/34-default-onpush.md @@ -1,12 +1,13 @@ --- title: 🟢 Default vs OnPush description: Challenge 34 is about learning the difference between Default and OnPush Change Detection Strategy. +author: Thomas Laforge +challengeNumber: 34 +command: performance-default-onpush sidebar: order: 7 --- -
Challenge #34
- ## Information In this challenge, we will explore the differences and impacts of using `ChangeDetectionStrategy.Default` versus `ChangeDetectionStrategy.OnPush`. @@ -52,26 +53,3 @@ Use `ChangeDetectionStrategy.OnPush` but this will not be enough. Create smaller components to better separate the input field from the list. - ---- - -:::note -Start the project by running: `npx nx serve performance-default-onpush`. -::: - -:::tip[Reminder] -Your PR title must start with Answer:34. -::: - -
- - ❖ Community Answers - - - ▶︎ Author Answer - -
diff --git a/docs/src/content/docs/challenges/angular-performance/35-memoize.md b/docs/src/content/docs/challenges/angular-performance/35-memoize.md index 0c774bb..5ea6788 100644 --- a/docs/src/content/docs/challenges/angular-performance/35-memoize.md +++ b/docs/src/content/docs/challenges/angular-performance/35-memoize.md @@ -1,6 +1,9 @@ --- title: 🟢 Memoization description: Challenge 35 is about learning how pure pipe works +author: Thomas Laforge +challengeNumber: 35 +command: performance-memoized sidebar: order: 8 --- @@ -45,26 +48,3 @@ The goal of this challenge is to understand what is causing this latency and to Use `Pipes` to memoize the Fibonnaci computation. - ---- - -:::note -Start the project by running: `npx nx serve performance-memoized`. -::: - -:::tip[Reminder] -Your PR title must start with Answer:35. -::: - -
- - ❖ Community Answers - - - ▶︎ Author Answer - -
diff --git a/docs/src/content/docs/challenges/angular-performance/36-ngfor-optimize.md b/docs/src/content/docs/challenges/angular-performance/36-ngfor-optimize.md index 8a043f1..e8f2753 100644 --- a/docs/src/content/docs/challenges/angular-performance/36-ngfor-optimize.md +++ b/docs/src/content/docs/challenges/angular-performance/36-ngfor-optimize.md @@ -1,12 +1,13 @@ --- title: 🟢 NgFor Optimization description: Challenge 36 is about learning how trackby works +author: Thomas Laforge +challengeNumber: 36 +command: performance-ngfor-optimize sidebar: order: 13 --- -
Challenge #36
- ## Information In this application, we have a list of individuals that we can add, delete or update. If you open the developer Chrome panel by pressing **F12**, go to he source tab, and expand the element to see the list, you will notice that each time, you add, delete or update a list item, the entire DOM elements are destroyed and initialized again. (See video below). @@ -28,26 +29,3 @@ If you need more information about `NgFor`, I invite you to read the [documentat ## Statement The goal of this challenge is to understand what is causing this DOM refresh and to solve it. - ---- - -:::note -Start the project by running: `npx nx serve performance-ngfor-optimize`. -::: - -:::tip[Reminder] -Your PR title must start with Answer:36. -::: - -
- - ❖ Community Answers - - - ▶︎ Author Answer - -
diff --git a/docs/src/content/docs/challenges/angular-performance/37-ngfor-biglist.md b/docs/src/content/docs/challenges/angular-performance/37-ngfor-biglist.md index 84e28f3..6b181ae 100644 --- a/docs/src/content/docs/challenges/angular-performance/37-ngfor-biglist.md +++ b/docs/src/content/docs/challenges/angular-performance/37-ngfor-biglist.md @@ -1,13 +1,14 @@ --- title: 🟠 Optimize Big List description: Challenge 37 is about learning how virtualization optimize big list rendering +author: Thomas Laforge +challengeNumber: 37 +command: performance-ngfor-biglist sidebar: order: 117 badge: New --- -
Challenge #37
- ## Information In this application, we will render a list of 100,000 individuals by clicking on the **loadList** button. If you open the Chrome developer panel by pressing **F12**, go to the Source tab, and expand the element to see the list, you will notice that all 100,000 elements are rendered in the DOM, even though we can only see about 20 elements in the viewport. This process takes a lot of time, which is why the application is very slow at displaying the list. @@ -33,26 +34,3 @@ The goal of this challenge is to implement a better alternative to display big l If you're unsure where to begin, I recommend reading the [Angular CDK virtualization documentation](https://material.angular.io/cdk/scrolling/overview) - ---- - -:::note -Start the project by running: `npx nx serve performance-ngfor-biglist`. -::: - -:::tip[Reminder] -Your PR title must start with Answer:37. -::: - -
- - ❖ Community Answers - - - ▶︎ Author Answer - -
diff --git a/docs/src/content/docs/challenges/angular/1-projection.md b/docs/src/content/docs/challenges/angular/1-projection.md index 8a280b5..f835d02 100644 --- a/docs/src/content/docs/challenges/angular/1-projection.md +++ b/docs/src/content/docs/challenges/angular/1-projection.md @@ -1,12 +1,18 @@ --- title: 🟢 Projection description: Challenge 1 is about learning how to project DOM element through components +author: Thomas Laforge +challengeNumber: 1 +command: projection +blogLink: https://medium.com/@thomas.laforge/create-a-highly-customizable-component-cc3a9805e4c5 +videoLink: + link: https://www.youtube.com/watch?v=npyEyUZxoIw&ab_channel=ArthurLannelucq + alt: Projection video by Arthur Lannelucq + flag: FR sidebar: order: 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. @@ -29,43 +35,3 @@ While the application works, the developer experience is far from being optimal. - 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. - ---- - -:::note -Start the project by running: `npx nx serve projection`. -::: - -:::tip[Reminder] -Your PR title must start with Answer:1. -::: - -
- - ❖ Community Answers - - - ▶︎ Author Answer - - - - Blog Post - - - - Video - 🇫🇷 - -
diff --git a/docs/src/content/docs/challenges/angular/10-pipe-utility.md b/docs/src/content/docs/challenges/angular/10-pipe-utility.md index d9cc5dc..b9c3438 100644 --- a/docs/src/content/docs/challenges/angular/10-pipe-utility.md +++ b/docs/src/content/docs/challenges/angular/10-pipe-utility.md @@ -1,6 +1,9 @@ --- title: 🔴 Utility Wrapper Pipe description: Challenge 10 is about creating a pipe to wrap utilities +author: Thomas Laforge +challengeNumber: 10 +command: pipe-hard sidebar: order: 202 --- @@ -9,8 +12,6 @@ sidebar: WIP: The following documentation will be reviewed and improved. However, you can still take on the challenge. If you don't understand a certain part, please feel free to reach out or create an issue. ::: -
Challenge #10
- The goal of this serie of 3 pipe challenges is to master PIPES in Angular. Pure pipe are a very useful way to transform data from your template. The difference between calling a function and a pipe is that pure pire are memoized. So they won't be recalculated every change detection cycle if the inputs hasn't changed. @@ -22,26 +23,3 @@ In this third exercice, you want to access utils functions. Currently we cannot ## Constraints: - must be strongly typed - ---- - -:::note -Start the project by running: `npx nx serve pipe-hard`. -::: - -:::tip[Reminder] -Your PR title must start with Answer:10. -::: - -
- - ❖ Community Answers - - - ▶︎ Author Answer - -
diff --git a/docs/src/content/docs/challenges/angular/13-styling.md b/docs/src/content/docs/challenges/angular/13-styling.md index 431452c..154859b 100644 --- a/docs/src/content/docs/challenges/angular/13-styling.md +++ b/docs/src/content/docs/challenges/angular/13-styling.md @@ -1,6 +1,9 @@ --- title: 🟠 Highly Customizable CSS description: Challenge 13 is about creating highly customizable CSS styles +author: Thomas Laforge +challengeNumber: 13 +command: styling sidebar: order: 104 --- @@ -24,26 +27,3 @@ In this challenge, you will need to use both CSS variables and :host-context to ## Constraints: - In your final submission, your component should not contain any lines of code. All styling should be handled within the decorator _(or external css files if you prefer)_ - ---- - -:::note -Start the project by running: `npx nx serve styling`. -::: - -:::tip[Reminder] -Your PR title must start with Answer:13. -::: - -
- - ❖ Community Answers - - - ▶︎ Author Answer - -
diff --git a/docs/src/content/docs/challenges/angular/16-di.md b/docs/src/content/docs/challenges/angular/16-di.md index 1897bfe..be8dcb7 100644 --- a/docs/src/content/docs/challenges/angular/16-di.md +++ b/docs/src/content/docs/challenges/angular/16-di.md @@ -1,6 +1,9 @@ --- title: 🔴 Master Dependancy Injection description: Challenge 16 is about masjering how dependancy injection works +author: Thomas Laforge +challengeNumber: 16 +command: di sidebar: order: 203 --- @@ -9,8 +12,6 @@ sidebar: WIP: The following documentation will be reviewed and improved. However, you can still take on the challenge. If you don't understand a certain part, please feel free to reach out or create an issue. ::: -
Challenge #16
- ## Information To successfully complete this challenge, you will need to have a good understanding of how Dependency Injection works inside Angular. @@ -27,26 +28,3 @@ One way to achieve this is by adding a second argument to the pipe, but this is - You cannot modify the pipe. - You cannot wrap the row inside a component, as this will break the layout. - ---- - -:::note -Start the project by running: `npx nx serve di`. -::: - -:::tip[Reminder] -Your PR title must start with Answer:16. -::: - -
- - ❖ Community Answers - - - ▶︎ Author Answer - -
diff --git a/docs/src/content/docs/challenges/angular/21-achor-scrolling.md b/docs/src/content/docs/challenges/angular/21-achor-scrolling.md index 1a3c1ce..27d78d9 100644 --- a/docs/src/content/docs/challenges/angular/21-achor-scrolling.md +++ b/docs/src/content/docs/challenges/angular/21-achor-scrolling.md @@ -1,6 +1,9 @@ --- title: 🟢 Anchor Navigation description: Challenge 21 is about navigating inside the page with anchor +author: Thomas Laforge +challengeNumber: 21 +command: anchor-scrolling sidebar: order: 4 --- @@ -9,8 +12,6 @@ sidebar: WIP: The following documentation will be reviewed and improved. However, you can still take on the challenge. If you don't understand a certain part, please feel free to reach out or create an issue. ::: -
Challenge #21
- ## Information You begin with an application that has basic navigation and anchor navigation in the `HomeComponent`. However, using `href` recreates the path each time and refreshes the page. @@ -19,26 +20,3 @@ You begin with an application that has basic navigation and anchor navigation in - Your task is to refactor this application to use the built-in navigation tool to better fit within the Angular Framework. You can explore the router, but it's better to stay within the template and use the `RouterLink` directive. - To improve the user experience, add smooth scrolling. - ---- - -:::note -Start the project by running: `npx nx serve anchor-scrolling`. -::: - -:::tip[Reminder] -Your PR title must start with Answer:21. -::: - -
- - ❖ Community Answers - - - ▶︎ Author Answer - -
diff --git a/docs/src/content/docs/challenges/angular/22-router-input.md b/docs/src/content/docs/challenges/angular/22-router-input.md index c8fc9e2..3347839 100644 --- a/docs/src/content/docs/challenges/angular/22-router-input.md +++ b/docs/src/content/docs/challenges/angular/22-router-input.md @@ -1,12 +1,14 @@ --- title: 🟢 @RouterInput() description: Challenge 22 is about using the @Input decorator to retreive router params. +author: Thomas Laforge +challengeNumber: 22 +command: router-input +blogLink: https://medium.com/ngconf/accessing-route-params-in-angular-1f8e12770617 sidebar: order: 5 --- -
Challenge #22
- ## Information In this application, we retrieve three pieces of information inside our `TestComponent` provided by the router: @@ -23,34 +25,3 @@ In version 16, Angular introduced a new `Input` that can listen to route data. Y ## Statement The goal of this exercice is to refactor the code to use the new `RouterInput` strategy. - ---- - -:::note -Start the project by running: `npx nx serve router-input`. -::: - -:::tip[Reminder] -Your PR title must start with Answer:22. -::: - -
- - ❖ Community Answers - - - ▶︎ Author Answer - - - - Blog Post - -
diff --git a/docs/src/content/docs/challenges/angular/3-directive-enhancement.md b/docs/src/content/docs/challenges/angular/3-directive-enhancement.md index a76b566..433b1cd 100644 --- a/docs/src/content/docs/challenges/angular/3-directive-enhancement.md +++ b/docs/src/content/docs/challenges/angular/3-directive-enhancement.md @@ -1,6 +1,10 @@ --- title: 🟠 Directive Enhancement description: Challenge 3 is about enhancing a built-in directive +author: Thomas Laforge +challengeNumber: 3 +command: ngfor-enhancement +blogLink: https://medium.com/@thomas.laforge/ngfor-enhancement-716b44656a6c sidebar: order: 101 --- @@ -9,8 +13,6 @@ sidebar: WIP: The following documentation will be reviewed and improved. However, you can still take on the challenge. If you don't understand a certain part, please feel free to reach out or create an issue. ::: -
Challenge #3
- ## Information Directive is a very powerful tool only offered by the Angular framework. You can apply the DRY principal by having shared logic inside a directive and applying it to any component you want. @@ -42,34 +44,3 @@ We want to get rid of the ng-container by writing : ``` The goal is to **improve the ngFor directive** - ---- - -:::note -Start the project by running: `npx nx serve ngfor-enhancement`. -::: - -:::tip[Reminder] -Your PR title must start with Answer:3. -::: - -
- - ❖ Community Answers - - - ▶︎ Author Answer - - - - Blog Post - -
diff --git a/docs/src/content/docs/challenges/angular/30-interop-rxjs-signal.md b/docs/src/content/docs/challenges/angular/30-interop-rxjs-signal.md index ddf26ac..d00b54b 100644 --- a/docs/src/content/docs/challenges/angular/30-interop-rxjs-signal.md +++ b/docs/src/content/docs/challenges/angular/30-interop-rxjs-signal.md @@ -1,6 +1,9 @@ --- title: 🔴 Interoperability Rxjs/Signal description: Challenge 30 is about learning how to mix signal with Rxjs +author: Thomas Laforge +challengeNumber: 30 +command: interop-rxjs-signal sidebar: order: 204 --- @@ -16,26 +19,3 @@ WIP: The following documentation will be reviewed and improved. However, you can In this challenge, we have a small reactive application using RxJS and NgRx/Component-Store. The goal of this challenge is to use the new **Signal API** introduced in Angular v16. However, we should not convert everything. Certain portions of the code are better suited for RxJS rather than Signal. It is up to you to determine the threshold and observe how **Signal and RxJS coexist**, as well as how the interoperability is achieved in Angular. - ---- - -:::note -Start the project by running: `npx nx serve interop-rxjs-signal`. -::: - -:::tip[Reminder] -Your PR title must start with Answer:30. -::: - -
- - ❖ Community Answers - - - ▶︎ Author Answer - -
diff --git a/docs/src/content/docs/challenges/angular/31-module-to-standalone.md b/docs/src/content/docs/challenges/angular/31-module-to-standalone.md index b98131f..9372f53 100644 --- a/docs/src/content/docs/challenges/angular/31-module-to-standalone.md +++ b/docs/src/content/docs/challenges/angular/31-module-to-standalone.md @@ -1,6 +1,9 @@ --- title: 🟢 Module to Standalone description: Challenge 31 is about migrating a module based application to a standalone application. +author: Thomas Laforge +challengeNumber: 31 +command: module-to-standalone sidebar: order: 6 --- @@ -9,8 +12,6 @@ sidebar: WIP: The following documentation will be reviewed and improved. However, you can still take on the challenge. If you don't understand a certain part, please feel free to reach out or create an issue. ::: -
Challenge #31
- ## Information In v14, standalone components were released and made stable in v15. If you haven't played with them, it's never too late. You can try them out in this challenge. @@ -24,26 +25,3 @@ After completing this challenge, standalone components will no longer hold any s ## Statement The goal of this challenge is to migrate your application from module based components to standalone components. - ---- - -:::note -Start the project by running: `npx nx serve module-to-standalone`. -::: - -:::tip[Reminder] -Your PR title must start with Answer:31. -::: - -
- - ❖ Community Answers - - - ▶︎ Author Answer - -
diff --git a/docs/src/content/docs/challenges/angular/32-bug-cd.md b/docs/src/content/docs/challenges/angular/32-bug-cd.md index 258d418..493952e 100644 --- a/docs/src/content/docs/challenges/angular/32-bug-cd.md +++ b/docs/src/content/docs/challenges/angular/32-bug-cd.md @@ -1,6 +1,10 @@ --- title: 🟠 Change Detection Bug description: Challenge 32 is about debugging an application that has issue when change detection is triggered +author: Thomas Laforge +challengeNumber: 32 +command: bug-cd +blogLink: https://medium.com/ngconf/function-calls-inside-template-are-dangerous-15f9822a6629 sidebar: order: 105 --- @@ -9,8 +13,6 @@ sidebar: WIP: The following documentation will be reviewed and improved. However, you can still take on the challenge. If you don't understand a certain part, please feel free to reach out or create an issue. ::: -
Challenge #32
- :::note This challenge is inspired by a real-life example that I simplified to create this nice challenge. ::: @@ -37,34 +39,3 @@ The goal of the challenge is to debug this application and make it work. If you open the [`RouterLinkActive` source code](https://github.com/angular/angular/blob/main/packages/router/src/directives/router_link_active.ts) and go to **line 196**, Angular is calling `this.cdr.markForCheck` inside a microTask which triggers a new CD cycle. If you comment out this line, the application loads again, however the bug is not inside the Angular Framework. 😅😯 - ---- - -:::note -Start the project by running: `npx nx serve bug-cd`. -::: - -:::tip[Reminder] -Your PR title must start with Answer:32. -::: - -
- - ❖ Community Answers - - - ▶︎ Author Answer - - - - Blog Post - -
diff --git a/docs/src/content/docs/challenges/angular/33-decoupling.md b/docs/src/content/docs/challenges/angular/33-decoupling.md index c317820..e5fadd4 100644 --- a/docs/src/content/docs/challenges/angular/33-decoupling.md +++ b/docs/src/content/docs/challenges/angular/33-decoupling.md @@ -1,6 +1,9 @@ --- title: 🟠 Decoupling Components description: Challenge 33 is about decoupling two strongly coupled components using Injection Token +author: Thomas Laforge +challengeNumber: 33 +command: decoupling sidebar: order: 106 --- @@ -9,8 +12,6 @@ sidebar: WIP: The following documentation will be reviewed and improved. However, you can still take on the challenge. If you don't understand a certain part, please feel free to reach out or create an issue. ::: -
Challenge #33
- > Big thanks to **Robin Goetz** and his [Spartan Project](https://github.com/goetzrobin/spartan). > This challenge was proposed by Robin and is strongly inspired by his project. @@ -32,26 +33,3 @@ The goal of this challenge is to find a way to decouple both Directives. Hint 1 Carefully read the title of the challenge 😇 - ---- - -:::note -Start the project by running: `npx nx serve decoupling`. -::: - -:::tip[Reminder] -Your PR title must start with Answer:33. -::: - -
- - ❖ Community Answers - - - ▶︎ Author Answer - -
diff --git a/docs/src/content/docs/challenges/angular/4-context-outlet-typed.md b/docs/src/content/docs/challenges/angular/4-context-outlet-typed.md index 1ab2ab0..8ca906f 100644 --- a/docs/src/content/docs/challenges/angular/4-context-outlet-typed.md +++ b/docs/src/content/docs/challenges/angular/4-context-outlet-typed.md @@ -1,6 +1,10 @@ --- title: 🔴 Typed ContextOutlet description: Challenge 4 is about strongly typing ngContextOutlet directives +author: Thomas Laforge +challengeNumber: 4 +command: context-outlet-type +blogLink: https://medium.com/@thomas.laforge/ngtemplateoutlet-type-checking-5d2dcb07a2c6 sidebar: order: 201 --- @@ -9,8 +13,6 @@ sidebar: WIP: The following documentation will be reviewed and improved. However, you can still take on the challenge. If you don't understand a certain part, please feel free to reach out or create an issue. ::: -
Challenge #4
- ## Information Angular offer the static function **ngTemplateContextGuard** to strongly type structural directive. @@ -40,34 +42,3 @@ Currently we have the following piece of code. As we can see, student is of type "any". We want to infer the correct type. But in this part, we can pass to ListComponent, a list of **any object**. And we still want the correct type to be infered. - ---- - -:::note -Start the project by running: `npx nx serve context-outlet-type`. -::: - -:::tip[Reminder] -Your PR title must start with Answer:4. -::: - -
- - ❖ Community Answers - - - ▶︎ Author Answer - - - - Blog Post - -
diff --git a/docs/src/content/docs/challenges/angular/5-crud.md b/docs/src/content/docs/challenges/angular/5-crud.md index 2bde197..5b53ed6 100644 --- a/docs/src/content/docs/challenges/angular/5-crud.md +++ b/docs/src/content/docs/challenges/angular/5-crud.md @@ -1,6 +1,9 @@ --- title: 🟢 Crud application description: Challenge 5 is about refactoring a crud application +author: Thomas Laforge +challengeNumber: 5 +command: crud sidebar: order: 2 --- @@ -9,8 +12,6 @@ sidebar: WIP: The following documentation will be reviewed and improved. However, you can still take on the challenge. If you don't understand a certain part, please feel free to reach out or create an issue. ::: -
Challenge #5
- ## Information Communicating and having a global/local state in sync with your backend is the heart of any application. You will need to master those following best practises to build strong and reliable Angular Application. @@ -54,26 +55,3 @@ this.todos = [...this.todos.filter((t) => t.id !== todoUpdated.id), todoUpdated] - Use the **component store of ngrx** as a local state of your component. _(or any other 3rd Party lib)_ - Have a **localize** Loading/Error indicator, e.g. only on the Todo being processed and **disable** all buttons of the processed Todo. _(Hint: you will need to create an ItemComponent)_ - ---- - -:::note -Start the project by running: `npx nx serve crud`. -::: - -:::tip[Reminder] -Your PR title must start with Answer:5. -::: - -
- - ❖ Community Answers - - - ▶︎ Author Answer - -
diff --git a/docs/src/content/docs/challenges/angular/6-permissions.md b/docs/src/content/docs/challenges/angular/6-permissions.md index 4d823df..4286a1c 100644 --- a/docs/src/content/docs/challenges/angular/6-permissions.md +++ b/docs/src/content/docs/challenges/angular/6-permissions.md @@ -1,6 +1,10 @@ --- title: 🟠 Structural Directive description: Challenge 6 is about creating a structural directive to handle permissions +author: Thomas Laforge +challengeNumber: 6 +command: permissions +blogLink: https://medium.com/@thomas.laforge/create-a-custom-structural-directive-to-manage-permissions-like-a-pro-11a1acad30ad sidebar: order: 102 --- @@ -9,8 +13,6 @@ sidebar: WIP: The following documentation will be reviewed and improved. However, you can still take on the challenge. If you don't understand a certain part, please feel free to reach out or create an issue. ::: -
Challenge #6
- ## Information Structural directive is an important concept you will need to master to improve your angular skills and knowledge. This will be the first part of this challenge. @@ -55,34 +57,3 @@ You should end up with something like below: ## Step 2 In **Routes.ts**, route all user to the correct **DashboardComponent** using **CanMatch** guard. - ---- - -:::note -Start the project by running: `npx nx serve permissions`. -::: - -:::tip[Reminder] -Your PR title must start with Answer:6. -::: - -
- - ❖ Community Answers - - - ▶︎ Author Answer - - - - Blog Post - -
diff --git a/docs/src/content/docs/challenges/angular/8-pipe-pure.md b/docs/src/content/docs/challenges/angular/8-pipe-pure.md index e09db9e..8baadef 100644 --- a/docs/src/content/docs/challenges/angular/8-pipe-pure.md +++ b/docs/src/content/docs/challenges/angular/8-pipe-pure.md @@ -1,6 +1,10 @@ --- title: 🟢 Pure Pipe description: Challenge 8 is about creating a pure pipe +author: Thomas Laforge +challengeNumber: 8 +command: pipe-easy +blogLink: https://medium.com/ngconf/deep-dive-into-angular-pipes-c040588cd15d sidebar: order: 3 --- @@ -9,8 +13,6 @@ sidebar: WIP: The following documentation will be reviewed and improved. However, you can still take on the challenge. If you don't understand a certain part, please feel free to reach out or create an issue. ::: -
Challenge #8
- The goal of this serie of 3 pipe challenges is to master PIPES in Angular. Pure pipe are a very useful way to transform data from your template. The difference between calling a function and a pipe is that pure pire are memoized. So they won't be recalculated every change detection cycle if the inputs hasn't changed. @@ -22,34 +24,3 @@ In this first exercice, you add calling a simple function inside your template. ## Constraints: - must be strongly typed - ---- - -:::note -Start the project by running: `npx nx serve pipe-easy`. -::: - -:::tip[Reminder] -Your PR title must start with Answer:8. -::: - -
- - ❖ Community Answers - - - ▶︎ Author Answer - - - - Blog Post - -
diff --git a/docs/src/content/docs/challenges/angular/9-pipe-wrapFn.md b/docs/src/content/docs/challenges/angular/9-pipe-wrapFn.md index 427a4d6..78b119d 100644 --- a/docs/src/content/docs/challenges/angular/9-pipe-wrapFn.md +++ b/docs/src/content/docs/challenges/angular/9-pipe-wrapFn.md @@ -1,6 +1,10 @@ --- title: 🟠 Wrap Function Pipe description: Challenge 9 is about creating a pipe to wrap component fonctions +author: Thomas Laforge +challengeNumber: 9 +command: pipe-intermediate +blogLink: https://medium.com/ngconf/boost-your-apps-performance-by-wrapping-your-functions-inside-a-pipe-7e889a901d1d sidebar: order: 103 --- @@ -23,34 +27,3 @@ The goal is to create a `wrapFn` pipe to wrap your callback function though a pi ## Constraints: - must be strongly typed - ---- - -:::note -Start the project by running: `npx nx serve pipe-intermediate`. -::: - -:::tip[Reminder] -Your PR title must start with Answer:9. -::: - -
- - ❖ Community Answers - - - ▶︎ Author Answer - - - - Blog Post - -
diff --git a/docs/src/content/docs/challenges/ngrx/2-effect-selector.md b/docs/src/content/docs/challenges/ngrx/2-effect-selector.md index 1c08893..e6256ae 100644 --- a/docs/src/content/docs/challenges/ngrx/2-effect-selector.md +++ b/docs/src/content/docs/challenges/ngrx/2-effect-selector.md @@ -1,6 +1,10 @@ --- title: 🟠 Effect vs Selector description: Challenge 2 is about learning the difference between effects and selectors in NgRx +author: Thomas Laforge +challengeNumber: 2 +command: ngrx-1 +blogLink: https://medium.com/@thomas.laforge/ngrx-effect-vs-reducer-vs-selector-58337ab59043 sidebar: order: 113 --- @@ -9,8 +13,6 @@ sidebar: WIP: The following documentation will be reviewed and improved. However, you can still take on the challenge. If you don't understand a certain part, please feel free to reach out or create an issue. ::: -
Challenge #2
- For this exercice, you will have a dashboard of activities displaying the name, the main teacher and a list of subtitutes. ## Information @@ -30,34 +32,3 @@ You will have to Refactor this working example of a dashboard of activities. - Only **one action** should be dispatched from a component - Status effect is useless. Using **combineLatest** should be a red flag. And Effect are made for side effect, not transforming data. That's a selector role - Status state might not be useful, it's only a **derived state** of existing state. - ---- - -:::note -Start the project by running: `npx nx serve ngrx-1`. -::: - -:::tip[Reminder] -Your PR title must start with Answer:2. -::: - -
- - ❖ Community Answers - - - ▶︎ Author Answer - - - - Blog Post - -
diff --git a/docs/src/content/docs/challenges/ngrx/7-power-effect.md b/docs/src/content/docs/challenges/ngrx/7-power-effect.md index 8eee6a9..2047b19 100644 --- a/docs/src/content/docs/challenges/ngrx/7-power-effect.md +++ b/docs/src/content/docs/challenges/ngrx/7-power-effect.md @@ -1,6 +1,9 @@ --- title: 🔴 Power of Effect description: Challenge 7 is about creating an Ngrx effect with another Rxjs Hot observable +author: Thomas Laforge +challengeNumber: 7 +command: ngrx-notification sidebar: order: 206 --- @@ -9,8 +12,6 @@ sidebar: WIP: The following documentation will be reviewed and improved. However, you can still take on the challenge. If you don't understand a certain part, please feel free to reach out or create an issue. ::: -
Challenge #7
- ## Information NgRx Effect is a very powerful library develop by the NgRx team. Effects subscribe to a HOT Observable and listen to any event dispatch from any place inside the application. @@ -33,26 +34,3 @@ create one ngrx effect, or component store effect for each push type, and implem load your effect only when necessary. the application contain a root route, a lazy loaded route and a component with a local state (implemented with Component store) - ---- - -:::note -Start the project by running: `npx nx serve ngrx-notification`. -::: - -:::tip[Reminder] -Your PR title must start with Answer:7. -::: - -
- - ❖ Community Answers - - - ▶︎ Author Answer - -
diff --git a/docs/src/content/docs/challenges/nx/25-generator-lib-ext.md b/docs/src/content/docs/challenges/nx/25-generator-lib-ext.md index ca072bb..1e46c0f 100644 --- a/docs/src/content/docs/challenges/nx/25-generator-lib-ext.md +++ b/docs/src/content/docs/challenges/nx/25-generator-lib-ext.md @@ -1,6 +1,8 @@ --- title: 🔴 Extend Lib Generator description: Challenge 25 is about creating a Nx generator to extend the built-in Library Generator +author: Thomas Laforge +challengeNumber: 25 sidebar: order: 207 --- @@ -53,22 +55,3 @@ export default { `eslintrc.json` add this rule `"@typescript-eslint/member-ordering": "off"` inside the rules properties of ts files. - ---- - -:::tip[Reminder] -Your PR title must start with Answer:25. -::: - -
- - ❖ Community Answers - - - ▶︎ Author Answer - -
diff --git a/docs/src/content/docs/challenges/nx/26-generator-comp.md b/docs/src/content/docs/challenges/nx/26-generator-comp.md index 25045d1..c59a146 100644 --- a/docs/src/content/docs/challenges/nx/26-generator-comp.md +++ b/docs/src/content/docs/challenges/nx/26-generator-comp.md @@ -1,6 +1,8 @@ --- title: 🟠 Component Generator description: Challenge 26 is about creating a Nx generator to create a custom component +author: Thomas Laforge +challengeNumber: 26 sidebar: order: 116 --- @@ -141,22 +143,3 @@ export interface User { name: string; } ``` - ---- - -:::tip[Reminder] -Your PR title must start with Answer:26. -::: - -
- - ❖ Community Answers - - - ▶︎ Author Answer - -
diff --git a/docs/src/content/docs/challenges/nx/27-forbid-enum-rule.md b/docs/src/content/docs/challenges/nx/27-forbid-enum-rule.md index fbc25ff..d2193b8 100644 --- a/docs/src/content/docs/challenges/nx/27-forbid-enum-rule.md +++ b/docs/src/content/docs/challenges/nx/27-forbid-enum-rule.md @@ -1,6 +1,8 @@ --- title: 🟢 Custom Eslint Rule description: Challenge 27 is about creating a custom Eslint Rule to forbid enums +author: Thomas Laforge +challengeNumber: 27 sidebar: order: 12 --- @@ -22,22 +24,3 @@ To test the rule inside your project, add `"@nrwl/nx/workspace/forbidden-enum": To assist you with AST (Abstract Syntax Tree) definitions, you can visit the [AST explorer](https://astexplorer.net/) and use JavaScript, @typescript-eslint/parser, and Eslint-v8 as the transformation method. However, please note that you will only get the type information there. The transformation function may not work for TypeScript types since the editor is in JavaScript. You can also check this [repo](https://github.com/typescript-eslint/typescript-eslint/tree/master/packages/eslint-plugin/src/rules) for eslint rule examples. - ---- - -:::tip[Reminder] -Your PR title must start with Answer:27. -::: - -
- - ❖ Community Answers - - - ▶︎ Author Answer - -
diff --git a/docs/src/content/docs/challenges/rxjs/11-bug-chaining-operator.md b/docs/src/content/docs/challenges/rxjs/11-bug-chaining-operator.md index 9bb1a62..9c33a5e 100644 --- a/docs/src/content/docs/challenges/rxjs/11-bug-chaining-operator.md +++ b/docs/src/content/docs/challenges/rxjs/11-bug-chaining-operator.md @@ -1,6 +1,9 @@ --- title: 🟠 High Order Operator Bug description: Challenge 11 is about resolving a Rxjs bug because of high order operators +author: Thomas Laforge +challengeNumber: 11 +command: rxjs-pipe-bu sidebar: order: 114 --- @@ -9,8 +12,6 @@ sidebar: WIP: The following documentation will be reviewed and improved. However, you can still take on the challenge. If you don't understand a certain part, please feel free to reach out or create an issue. ::: -
Challenge #11
- Let's dive inside the wonderful word of RxJs. This challenge is inspired by a real-life example. @@ -30,26 +31,3 @@ We can only pass one object to our DB for deletion at the time. The DB will resp The QA team reports a **bug**. The UI shows **All [topic] have been deleted** all the time, even if some deletions fail. 👉 Spot the bug and correct it. - ---- - -:::note -Start the project by running: `npx nx serve rxjs-pipe-bug`. -::: - -:::tip[Reminder] -Your PR title must start with Answer:11. -::: - -
- - ❖ Community Answers - - - ▶︎ Author Answer - -
diff --git a/docs/src/content/docs/challenges/rxjs/14-race-condition.md b/docs/src/content/docs/challenges/rxjs/14-race-condition.md index 36646d1..2b08d92 100644 --- a/docs/src/content/docs/challenges/rxjs/14-race-condition.md +++ b/docs/src/content/docs/challenges/rxjs/14-race-condition.md @@ -1,6 +1,9 @@ --- title: 🟢 Race Condition description: Challenge 14 is about race condition in Rxjs +author: Thomas Laforge +challengeNumber: 14 +command: rxjs-race-condition sidebar: order: 11 --- @@ -9,8 +12,6 @@ sidebar: WIP: The following documentation will be reviewed and improved. However, you can still take on the challenge. If you don't understand a certain part, please feel free to reach out or create an issue. ::: -
Challenge #14
- ## Information The goal of this application is to display a list of topics in a modal when a button is clicked. The application functions correctly. However, your tech lead has asked you to add tests and they are failing. @@ -28,26 +29,3 @@ Correct your application to pass the test HEADLESS : `npx nx component-test rxjs-race-condition` WATCH MODE : `npx nx component-test rxjs-race-condition --watch` - ---- - -:::note -Start the project by running: `npx nx serve rxjs-race-condition`. -::: - -:::tip[Reminder] -Your PR title must start with Answer:14. -::: - -
- - ❖ Community Answers - - - ▶︎ Author Answer - -
diff --git a/docs/src/content/docs/challenges/testing/17-router.md b/docs/src/content/docs/challenges/testing/17-router.md index 982d3d4..12e0611 100644 --- a/docs/src/content/docs/challenges/testing/17-router.md +++ b/docs/src/content/docs/challenges/testing/17-router.md @@ -1,12 +1,13 @@ --- title: 🟠 Router description: Challenge 17 is about testing the router +author: Thomas Laforge +challengeNumber: 17 +command: testing-router-outlet sidebar: order: 108 --- -
Challenge #17
- ## Information We have a functional application that lists available books for borrowing inside a library. If the book you searched for is available, you will be directed to the corresponding book(s), otherwise, you will end up on an error page. @@ -22,26 +23,3 @@ The goal is to test multiple behaviors of the application described in each test :::note I have created some `it` blocks but feel free to add more tests if you want. ::: - ---- - -:::note -Start the project by running: `npx nx serve testing-router-outlet`. -::: - -:::tip[Reminder] -Your PR title must start with Answer:17. -::: - -
- - ❖ Community Answers - - - ▶︎ Author Answer - -
diff --git a/docs/src/content/docs/challenges/testing/18-nested-comp.md b/docs/src/content/docs/challenges/testing/18-nested-comp.md index 0a81533..02c539f 100644 --- a/docs/src/content/docs/challenges/testing/18-nested-comp.md +++ b/docs/src/content/docs/challenges/testing/18-nested-comp.md @@ -1,12 +1,13 @@ --- title: 🟠 Nested Components description: Challenge 18 is about testing nested components +author: Thomas Laforge +challengeNumber: 18 +command: testing-nested sidebar: order: 109 --- -
Challenge #18
- ## Information We have a small application that sends a title, typed into an input to a fake backend. @@ -26,26 +27,3 @@ The goal is to test multiple behaviors of the application describe inside each t :::note I have created some `it` blocks but feel free to add more tests if you want. ::: - ---- - -:::note -Start the project by running: `npx nx serve testing-nested`. -::: - -:::tip[Reminder] -Your PR title must start with Answer:18. -::: - -
- - ❖ Community Answers - - - ▶︎ Author Answer - -
diff --git a/docs/src/content/docs/challenges/testing/19-input-output.md b/docs/src/content/docs/challenges/testing/19-input-output.md index baf6901..b461f4e 100644 --- a/docs/src/content/docs/challenges/testing/19-input-output.md +++ b/docs/src/content/docs/challenges/testing/19-input-output.md @@ -1,12 +1,13 @@ --- title: 🟠 Input Output description: Challenge 19 is about testing inputs and ouputs +author: Thomas Laforge +challengeNumber: 19 +command: testing-input-output sidebar: order: 110 --- -
Challenge #19
- ## Information: We have a small counter application that increments or decrements a number. The `CounterComponent` takes an initial value as an `@Input` and emits the result of the counter as an `@Output` when we click on the **Send** button. Since we are testing our component as a black box, we only have access to our inputs and listen to the output values. We should not rely on any internal implementation details!!! @@ -24,26 +25,3 @@ The goal is to test multiple behaviors of the application describe inside each t :::note I have created some `it` blocks but feel free to add more tests if you want. ::: - ---- - -:::note -Start the project by running: `npx nx serve testing-input-output`. -::: - -:::tip[Reminder] -Your PR title must start with Answer:19. -::: - -
- - ❖ Community Answers - - - ▶︎ Author Answer - -
diff --git a/docs/src/content/docs/challenges/testing/20-modal.md b/docs/src/content/docs/challenges/testing/20-modal.md index 813e7b1..cddedd1 100644 --- a/docs/src/content/docs/challenges/testing/20-modal.md +++ b/docs/src/content/docs/challenges/testing/20-modal.md @@ -1,12 +1,13 @@ --- title: 🟠 Modal description: Challenge 20 is about testing modals +author: Thomas Laforge +challengeNumber: 20 +command: testing-modal sidebar: order: 111 --- -
Challenge #20
- ## Information: In this small application, you have an input prompting you to enter a name, and a **Confirm** button to submit your form. @@ -28,26 +29,3 @@ The goal is to test multiple behaviors of the application describe inside each t :::note I have created some `it` blocks but feel free to add more tests if you want. ::: - ---- - -:::note -Start the project by running: `npx nx serve testing-modal`. -::: - -:::tip[Reminder] -Your PR title must start with Answer:20. -::: - -
- - ❖ Community Answers - - - ▶︎ Author Answer - -
diff --git a/docs/src/content/docs/challenges/testing/23-harness.md b/docs/src/content/docs/challenges/testing/23-harness.md index b0d64c7..131152d 100644 --- a/docs/src/content/docs/challenges/testing/23-harness.md +++ b/docs/src/content/docs/challenges/testing/23-harness.md @@ -1,6 +1,9 @@ --- title: 🟢 Harness description: Challenge 23 is about testing with component harnesses +author: Thomas Laforge +challengeNumber: 23 +command: testing-harness sidebar: order: 9 --- @@ -9,8 +12,6 @@ sidebar: WIP: The following documentation will be reviewed and improved. However, you can still take on the challenge. If you don't understand a certain part, please feel free to reach out or create an issue. ::: -
Challenge #23
- ## Statement: The objective of this challenge is to have a better understanding of the CDK test harness API. In this initial challenge, we will only use Angular Material's built-in harnesses. @@ -21,26 +22,3 @@ The goal is to test the functionality of `child.component.ts`. I have prepared a Documentation for CDK Component Harness is [here](https://material.angular.io/cdk/test-harnesses/overview#api-for-test-authors) Documentation for Angular Material component is [here](https://material.angular.io/components/button/overview) - ---- - -:::note -Start the project by running: `npx nx serve testing-harness`. -::: - -:::tip[Reminder] -Your PR title must start with Answer:23. -::: - -
- - ❖ Community Answers - - - ▶︎ Author Answer - -
diff --git a/docs/src/content/docs/challenges/testing/24-harness-creation.md b/docs/src/content/docs/challenges/testing/24-harness-creation.md index c27ce77..7573b4f 100644 --- a/docs/src/content/docs/challenges/testing/24-harness-creation.md +++ b/docs/src/content/docs/challenges/testing/24-harness-creation.md @@ -1,6 +1,9 @@ --- title: 🟠 Harness Creation description: Challenge 24 is about creating a component harness. +author: Thomas Laforge +challengeNumber: 24 +command: create-harness sidebar: order: 112 --- @@ -9,8 +12,6 @@ sidebar: WIP: The following documentation will be reviewed and improved. However, you can still take on the challenge. If you don't understand a certain part, please feel free to reach out or create an issue. ::: -
Challenge #24
- ## Information The goal of this challenge is to create a test harness for `slider.component.ts`. The harness file, `slider.harness.ts`, has already been created. @@ -45,26 +46,3 @@ Lastly, you will need to create the test suite for `app.component`. Some default > Angular Material documentation can be found [here](https://material.angular.io/cdk/test-harnesses/overview) Good luck !!! 💪 - ---- - -:::note -Start the project by running: `npx nx serve create-harness`. -::: - -:::tip[Reminder] -Your PR title must start with Answer:24. -::: - -
- - ❖ Community Answers - - - ▶︎ Author Answer - -
diff --git a/docs/src/content/docs/challenges/testing/28-checkbox.md b/docs/src/content/docs/challenges/testing/28-checkbox.md index e157d22..5cec17a 100644 --- a/docs/src/content/docs/challenges/testing/28-checkbox.md +++ b/docs/src/content/docs/challenges/testing/28-checkbox.md @@ -1,12 +1,13 @@ --- title: 🟢 Checkbox description: Challenge 28 is about testing a simple checkbox +author: Thomas Laforge +challengeNumber: 10 +command: testing-checkbox sidebar: order: 10 --- -
Challenge #28
- ## Information This application is very simple. It consists of a checkbox that enables or disables a button. The primary goal of this application is to become familiar with the debug API of Testing Library. Knowing how to debug your tests is a crucial tool you need to have in your toolkit. @@ -22,26 +23,3 @@ The main functions to remember are as follows: ## Statement The goal of this challenge is not to submit an answer, but you can if you want. It's more about using the debugging API to play around. These tools will be of great help for the upcoming testing challenges. - ---- - -:::note -Start the project by running: `npx nx serve testing-checkbox`. -::: - -:::tip[Reminder] -Your PR title must start with Answer:28. -::: - -
- - ❖ Community Answers - - - ▶︎ Author Answer - -
diff --git a/docs/src/content/docs/challenges/testing/29-real-application.md b/docs/src/content/docs/challenges/testing/29-real-application.md index 38aaab6..f65ed65 100644 --- a/docs/src/content/docs/challenges/testing/29-real-application.md +++ b/docs/src/content/docs/challenges/testing/29-real-application.md @@ -1,12 +1,13 @@ --- title: 🔴 Real-life Application description: Challenge 29 is about testing a real-life application +author: Thomas Laforge +challengeNumber: 29 +command: testing-todos-list sidebar: order: 205 --- -
Challenge #29
- ## Information: This application presents a greater challenge because it closely resembles a real-life application that you might encounter in your day-to-day activities as an Angular developer. What makes it more difficult is the need to handle asynchronous tasks and create appropriate mocks. @@ -30,26 +31,3 @@ The goal is to test multiple behaviors of the application describe inside each t :::note I have created some `it` blocks but feel free to add more tests if you want. ::: - ---- - -:::note -Start the project by running: `npx nx serve testing-todos-list`. -::: - -:::tip[Reminder] -Your PR title must start with Answer:29. -::: - -
- - ❖ Community Answers - - - ▶︎ Author Answer - -
diff --git a/docs/src/content/docs/challenges/typescript/15-overload-fn.md b/docs/src/content/docs/challenges/typescript/15-overload-fn.md index 5a3e630..c8b0df0 100644 --- a/docs/src/content/docs/challenges/typescript/15-overload-fn.md +++ b/docs/src/content/docs/challenges/typescript/15-overload-fn.md @@ -1,6 +1,10 @@ --- title: 🟠 Function Overload description: Challenge 15 is about creating overload functions +author: Thomas Laforge +challengeNumber: 15 +command: overload +blogLink: https://medium.com/ngconf/function-overloading-in-typescript-8236706b2c05 sidebar: order: 115 --- @@ -9,8 +13,6 @@ sidebar: WIP: The following documentation will be reviewed and improved. However, you can still take on the challenge. If you don't understand a certain part, please feel free to reach out or create an issue. ::: -
Challenge #15
- ## Information Angular uses TypeScript, and mastering TypeScript can help you avoid runtime errors by catching them at compile time. @@ -24,34 +26,3 @@ To achieve this, we will use overload functions. ## Statement - Use function overload - ---- - -:::note -Start the project by running: `npx nx serve overload``. -::: - -:::tip[Reminder] -Your PR title must start with Answer:15. -::: - -
- - ❖ Community Answers - - - ▶︎ Author Answer - - - - Blog Post - -
diff --git a/docs/src/styles/custom-css.css b/docs/src/styles/custom-css.css index a4e5bd1..99a9627 100644 --- a/docs/src/styles/custom-css.css +++ b/docs/src/styles/custom-css.css @@ -49,17 +49,6 @@ margin: 0px 2px; } -.chip { - border-width: 1px; - border-style: solid; - border-color: var(--color-chip-border); - border-radius: 6px; - padding: 2px 8px; - background-color: var(--color-chip); - color: var(--sl-color-text); - width: fit-content; -} - .article-footer { margin-top: 3rem !important; display: flex; @@ -131,3 +120,7 @@ starlight-menu-button svg { flex-direction: column; justify-content: space-between; } + +/* .content-panel { + padding-top: 2px; +} */