mirror of
https://github.com/Raghu-Ch/angular-challenges.git
synced 2026-02-10 04:43:03 -05:00
feat(): add challenge label to support translations
This commit is contained in:
@@ -2,12 +2,13 @@
|
|||||||
import type { Props } from '@astrojs/starlight/props';
|
import type { Props } from '@astrojs/starlight/props';
|
||||||
import Default from '@astrojs/starlight/components/PageTitle.astro';
|
import Default from '@astrojs/starlight/components/PageTitle.astro';
|
||||||
|
|
||||||
const challengeNumber = Astro.props.entry.data.challengeNumber;
|
const {label: challengeLabel, number: challengeNumber} = Astro.props.entry.data.challenge;
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<div class="page-title-content">
|
<div class="page-title-content">
|
||||||
<Default {...Astro.props}><slot /></Default>
|
<Default {...Astro.props}><slot /></Default>
|
||||||
{challengeNumber && <div class="chip">Challenge #{challengeNumber}</div> }
|
{challengeNumber && <div class="chip">{challengeLabel} #{challengeNumber}</div> }
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
@@ -22,7 +23,7 @@ const challengeNumber = Astro.props.entry.data.challengeNumber;
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.chip {
|
.chip {
|
||||||
border-width: 1px;
|
border-width: 1px;
|
||||||
@@ -36,4 +37,4 @@ const challengeNumber = Astro.props.entry.data.challengeNumber;
|
|||||||
height: fit-content;
|
height: fit-content;
|
||||||
margin-top: 1rem;
|
margin-top: 1rem;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -15,7 +15,12 @@ const docs = defineCollection({
|
|||||||
schema: (ctx) =>
|
schema: (ctx) =>
|
||||||
docsSchema()(ctx).extend({
|
docsSchema()(ctx).extend({
|
||||||
noCommentSection: z.boolean().optional().default(false),
|
noCommentSection: z.boolean().optional().default(false),
|
||||||
challengeNumber: z.union([z.number(), z.boolean()]).default(false),
|
challenge: z
|
||||||
|
.object({
|
||||||
|
label: z.string().default('Challenge'),
|
||||||
|
number: z.union([z.number(), z.boolean()]).default(false),
|
||||||
|
})
|
||||||
|
.optional(),
|
||||||
author: reference('authors').optional(),
|
author: reference('authors').optional(),
|
||||||
command: z.string().optional(),
|
command: z.string().optional(),
|
||||||
blogLink: z.string().optional(),
|
blogLink: z.string().optional(),
|
||||||
|
|||||||
@@ -2,7 +2,8 @@
|
|||||||
title: 🟢 Projection
|
title: 🟢 Projection
|
||||||
description: Challenge 1 is about learning how to project DOM element through components
|
description: Challenge 1 is about learning how to project DOM element through components
|
||||||
author: thomas-laforge
|
author: thomas-laforge
|
||||||
challengeNumber: 1
|
challenge:
|
||||||
|
number: 1
|
||||||
command: angular-projection
|
command: angular-projection
|
||||||
blogLink: https://medium.com/@thomas.laforge/create-a-highly-customizable-component-cc3a9805e4c5
|
blogLink: https://medium.com/@thomas.laforge/create-a-highly-customizable-component-cc3a9805e4c5
|
||||||
videoLink:
|
videoLink:
|
||||||
|
|||||||
@@ -2,7 +2,8 @@
|
|||||||
title: 🔴 Utility Wrapper Pipe
|
title: 🔴 Utility Wrapper Pipe
|
||||||
description: Challenge 10 is about creating a pipe to wrap utilities
|
description: Challenge 10 is about creating a pipe to wrap utilities
|
||||||
author: thomas-laforge
|
author: thomas-laforge
|
||||||
challengeNumber: 10
|
challenge:
|
||||||
|
number: 10
|
||||||
command: angular-pipe-hard
|
command: angular-pipe-hard
|
||||||
sidebar:
|
sidebar:
|
||||||
order: 202
|
order: 202
|
||||||
|
|||||||
@@ -2,7 +2,8 @@
|
|||||||
title: 🟠 Highly Customizable CSS
|
title: 🟠 Highly Customizable CSS
|
||||||
description: Challenge 13 is about creating highly customizable CSS styles
|
description: Challenge 13 is about creating highly customizable CSS styles
|
||||||
author: thomas-laforge
|
author: thomas-laforge
|
||||||
challengeNumber: 13
|
challenge:
|
||||||
|
number: 13
|
||||||
command: angular-styling
|
command: angular-styling
|
||||||
sidebar:
|
sidebar:
|
||||||
order: 104
|
order: 104
|
||||||
|
|||||||
@@ -2,7 +2,8 @@
|
|||||||
title: 🔴 Master Dependancy Injection
|
title: 🔴 Master Dependancy Injection
|
||||||
description: Challenge 16 is about masjering how dependancy injection works
|
description: Challenge 16 is about masjering how dependancy injection works
|
||||||
author: thomas-laforge
|
author: thomas-laforge
|
||||||
challengeNumber: 16
|
challenge:
|
||||||
|
number: 16
|
||||||
command: angular-di
|
command: angular-di
|
||||||
sidebar:
|
sidebar:
|
||||||
order: 203
|
order: 203
|
||||||
|
|||||||
@@ -2,7 +2,8 @@
|
|||||||
title: 🟢 Anchor Navigation
|
title: 🟢 Anchor Navigation
|
||||||
description: Challenge 21 is about navigating inside the page with anchor
|
description: Challenge 21 is about navigating inside the page with anchor
|
||||||
author: thomas-laforge
|
author: thomas-laforge
|
||||||
challengeNumber: 21
|
challenge:
|
||||||
|
number: 21
|
||||||
command: angular-anchor-scrolling
|
command: angular-anchor-scrolling
|
||||||
sidebar:
|
sidebar:
|
||||||
order: 4
|
order: 4
|
||||||
|
|||||||
@@ -2,7 +2,8 @@
|
|||||||
title: 🟢 @RouterInput()
|
title: 🟢 @RouterInput()
|
||||||
description: Challenge 22 is about using the @Input decorator to retreive router params.
|
description: Challenge 22 is about using the @Input decorator to retreive router params.
|
||||||
author: thomas-laforge
|
author: thomas-laforge
|
||||||
challengeNumber: 22
|
challenge:
|
||||||
|
number: 22
|
||||||
command: angular-router-input
|
command: angular-router-input
|
||||||
blogLink: https://medium.com/ngconf/accessing-route-params-in-angular-1f8e12770617
|
blogLink: https://medium.com/ngconf/accessing-route-params-in-angular-1f8e12770617
|
||||||
sidebar:
|
sidebar:
|
||||||
|
|||||||
@@ -2,7 +2,8 @@
|
|||||||
title: 🟠 Directive Enhancement
|
title: 🟠 Directive Enhancement
|
||||||
description: Challenge 3 is about enhancing a built-in directive
|
description: Challenge 3 is about enhancing a built-in directive
|
||||||
author: thomas-laforge
|
author: thomas-laforge
|
||||||
challengeNumber: 3
|
challenge:
|
||||||
|
number: 3
|
||||||
command: angular-ngfor-enhancement
|
command: angular-ngfor-enhancement
|
||||||
blogLink: https://medium.com/@thomas.laforge/ngfor-enhancement-716b44656a6c
|
blogLink: https://medium.com/@thomas.laforge/ngfor-enhancement-716b44656a6c
|
||||||
sidebar:
|
sidebar:
|
||||||
|
|||||||
@@ -2,7 +2,8 @@
|
|||||||
title: 🔴 Interoperability Rxjs/Signal
|
title: 🔴 Interoperability Rxjs/Signal
|
||||||
description: Challenge 30 is about learning how to mix signal with Rxjs
|
description: Challenge 30 is about learning how to mix signal with Rxjs
|
||||||
author: thomas-laforge
|
author: thomas-laforge
|
||||||
challengeNumber: 30
|
challenge:
|
||||||
|
number: 30
|
||||||
command: angular-interop-rxjs-signal
|
command: angular-interop-rxjs-signal
|
||||||
sidebar:
|
sidebar:
|
||||||
order: 204
|
order: 204
|
||||||
|
|||||||
@@ -2,7 +2,8 @@
|
|||||||
title: 🟢 Module to Standalone
|
title: 🟢 Module to Standalone
|
||||||
description: Challenge 31 is about migrating a module based application to a standalone application.
|
description: Challenge 31 is about migrating a module based application to a standalone application.
|
||||||
author: thomas-laforge
|
author: thomas-laforge
|
||||||
challengeNumber: 31
|
challenge:
|
||||||
|
number: 31
|
||||||
command: angular-module-to-standalone
|
command: angular-module-to-standalone
|
||||||
sidebar:
|
sidebar:
|
||||||
order: 6
|
order: 6
|
||||||
|
|||||||
@@ -2,7 +2,8 @@
|
|||||||
title: 🟠 Change Detection Bug
|
title: 🟠 Change Detection Bug
|
||||||
description: Challenge 32 is about debugging an application that has issue when change detection is triggered
|
description: Challenge 32 is about debugging an application that has issue when change detection is triggered
|
||||||
author: thomas-laforge
|
author: thomas-laforge
|
||||||
challengeNumber: 32
|
challenge:
|
||||||
|
number: 32
|
||||||
command: angular-bug-cd
|
command: angular-bug-cd
|
||||||
blogLink: https://medium.com/ngconf/function-calls-inside-template-are-dangerous-15f9822a6629
|
blogLink: https://medium.com/ngconf/function-calls-inside-template-are-dangerous-15f9822a6629
|
||||||
sidebar:
|
sidebar:
|
||||||
|
|||||||
@@ -2,7 +2,8 @@
|
|||||||
title: 🟠 Decoupling Components
|
title: 🟠 Decoupling Components
|
||||||
description: Challenge 33 is about decoupling two strongly coupled components using Injection Token
|
description: Challenge 33 is about decoupling two strongly coupled components using Injection Token
|
||||||
author: thomas-laforge
|
author: thomas-laforge
|
||||||
challengeNumber: 33
|
challenge:
|
||||||
|
number: 33
|
||||||
command: angular-decoupling
|
command: angular-decoupling
|
||||||
sidebar:
|
sidebar:
|
||||||
order: 106
|
order: 106
|
||||||
|
|||||||
@@ -2,7 +2,8 @@
|
|||||||
title: 🟠 InjectionToken
|
title: 🟠 InjectionToken
|
||||||
description: Challenge 39 is about learning the power of dependancy injection
|
description: Challenge 39 is about learning the power of dependancy injection
|
||||||
author: thomas-laforge
|
author: thomas-laforge
|
||||||
challengeNumber: 39
|
challenge:
|
||||||
|
number: 39
|
||||||
command: angular-injection-token
|
command: angular-injection-token
|
||||||
sidebar:
|
sidebar:
|
||||||
order: 118
|
order: 118
|
||||||
|
|||||||
@@ -2,7 +2,8 @@
|
|||||||
title: 🔴 Typed ContextOutlet
|
title: 🔴 Typed ContextOutlet
|
||||||
description: Challenge 4 is about strongly typing ngContextOutlet directives
|
description: Challenge 4 is about strongly typing ngContextOutlet directives
|
||||||
author: thomas-laforge
|
author: thomas-laforge
|
||||||
challengeNumber: 4
|
challenge:
|
||||||
|
number: 4
|
||||||
command: angular-context-outlet-type
|
command: angular-context-outlet-type
|
||||||
blogLink: https://medium.com/@thomas.laforge/ngtemplateoutlet-type-checking-5d2dcb07a2c6
|
blogLink: https://medium.com/@thomas.laforge/ngtemplateoutlet-type-checking-5d2dcb07a2c6
|
||||||
sidebar:
|
sidebar:
|
||||||
|
|||||||
@@ -2,7 +2,8 @@
|
|||||||
title: 🟢 Crud application
|
title: 🟢 Crud application
|
||||||
description: Challenge 5 is about refactoring a crud application
|
description: Challenge 5 is about refactoring a crud application
|
||||||
author: thomas-laforge
|
author: thomas-laforge
|
||||||
challengeNumber: 5
|
challenge:
|
||||||
|
number: 5
|
||||||
command: angular-crud
|
command: angular-crud
|
||||||
sidebar:
|
sidebar:
|
||||||
order: 2
|
order: 2
|
||||||
|
|||||||
@@ -2,7 +2,8 @@
|
|||||||
title: 🟠 Structural Directive
|
title: 🟠 Structural Directive
|
||||||
description: Challenge 6 is about creating a structural directive to handle permissions
|
description: Challenge 6 is about creating a structural directive to handle permissions
|
||||||
author: thomas-laforge
|
author: thomas-laforge
|
||||||
challengeNumber: 6
|
challenge:
|
||||||
|
number: 6
|
||||||
command: angular-permissions
|
command: angular-permissions
|
||||||
blogLink: https://medium.com/@thomas.laforge/create-a-custom-structural-directive-to-manage-permissions-like-a-pro-11a1acad30ad
|
blogLink: https://medium.com/@thomas.laforge/create-a-custom-structural-directive-to-manage-permissions-like-a-pro-11a1acad30ad
|
||||||
sidebar:
|
sidebar:
|
||||||
|
|||||||
@@ -2,7 +2,8 @@
|
|||||||
title: 🟢 Pure Pipe
|
title: 🟢 Pure Pipe
|
||||||
description: Challenge 8 is about creating a pure pipe
|
description: Challenge 8 is about creating a pure pipe
|
||||||
author: thomas-laforge
|
author: thomas-laforge
|
||||||
challengeNumber: 8
|
challenge:
|
||||||
|
number: 8
|
||||||
command: angular-pipe-easy
|
command: angular-pipe-easy
|
||||||
blogLink: https://medium.com/ngconf/deep-dive-into-angular-pipes-c040588cd15d
|
blogLink: https://medium.com/ngconf/deep-dive-into-angular-pipes-c040588cd15d
|
||||||
sidebar:
|
sidebar:
|
||||||
|
|||||||
@@ -2,7 +2,8 @@
|
|||||||
title: 🟠 Wrap Function Pipe
|
title: 🟠 Wrap Function Pipe
|
||||||
description: Challenge 9 is about creating a pipe to wrap component fonctions
|
description: Challenge 9 is about creating a pipe to wrap component fonctions
|
||||||
author: thomas-laforge
|
author: thomas-laforge
|
||||||
challengeNumber: 9
|
challenge:
|
||||||
|
number: 9
|
||||||
command: angular-pipe-intermediate
|
command: angular-pipe-intermediate
|
||||||
blogLink: https://medium.com/ngconf/boost-your-apps-performance-by-wrapping-your-functions-inside-a-pipe-7e889a901d1d
|
blogLink: https://medium.com/ngconf/boost-your-apps-performance-by-wrapping-your-functions-inside-a-pipe-7e889a901d1d
|
||||||
sidebar:
|
sidebar:
|
||||||
|
|||||||
@@ -2,7 +2,8 @@
|
|||||||
title: 🟠 Control Value Accessor
|
title: 🟠 Control Value Accessor
|
||||||
description: Challenge 41 is about creating a custom form control that implements Control Value Accessor interface.
|
description: Challenge 41 is about creating a custom form control that implements Control Value Accessor interface.
|
||||||
author: stanislav-gavrilov
|
author: stanislav-gavrilov
|
||||||
challengeNumber: 41
|
challenge:
|
||||||
|
number: 41
|
||||||
command: forms-control-value-accessor
|
command: forms-control-value-accessor
|
||||||
sidebar:
|
sidebar:
|
||||||
order: 1
|
order: 1
|
||||||
|
|||||||
@@ -2,7 +2,8 @@
|
|||||||
title: 🟠 Effect vs Selector
|
title: 🟠 Effect vs Selector
|
||||||
description: Challenge 2 is about learning the difference between effects and selectors in NgRx
|
description: Challenge 2 is about learning the difference between effects and selectors in NgRx
|
||||||
author: thomas-laforge
|
author: thomas-laforge
|
||||||
challengeNumber: 2
|
challenge:
|
||||||
|
number: 2
|
||||||
command: ngrx-effect-selector
|
command: ngrx-effect-selector
|
||||||
blogLink: https://medium.com/@thomas.laforge/ngrx-effect-vs-reducer-vs-selector-58337ab59043
|
blogLink: https://medium.com/@thomas.laforge/ngrx-effect-vs-reducer-vs-selector-58337ab59043
|
||||||
sidebar:
|
sidebar:
|
||||||
|
|||||||
@@ -2,7 +2,8 @@
|
|||||||
title: 🔴 Power of Effect
|
title: 🔴 Power of Effect
|
||||||
description: Challenge 7 is about creating an Ngrx effect with another Rxjs Hot observable
|
description: Challenge 7 is about creating an Ngrx effect with another Rxjs Hot observable
|
||||||
author: thomas-laforge
|
author: thomas-laforge
|
||||||
challengeNumber: 7
|
challenge:
|
||||||
|
number: 7
|
||||||
command: ngrx-notification
|
command: ngrx-notification
|
||||||
sidebar:
|
sidebar:
|
||||||
order: 206
|
order: 206
|
||||||
|
|||||||
@@ -2,7 +2,8 @@
|
|||||||
title: 🔴 Extend Lib Generator
|
title: 🔴 Extend Lib Generator
|
||||||
description: Challenge 25 is about creating a Nx generator to extend the built-in Library Generator
|
description: Challenge 25 is about creating a Nx generator to extend the built-in Library Generator
|
||||||
author: thomas-laforge
|
author: thomas-laforge
|
||||||
challengeNumber: 25
|
challenge:
|
||||||
|
number: 25
|
||||||
sidebar:
|
sidebar:
|
||||||
order: 207
|
order: 207
|
||||||
---
|
---
|
||||||
|
|||||||
@@ -2,7 +2,8 @@
|
|||||||
title: 🟠 Component Generator
|
title: 🟠 Component Generator
|
||||||
description: Challenge 26 is about creating a Nx generator to create a custom component
|
description: Challenge 26 is about creating a Nx generator to create a custom component
|
||||||
author: thomas-laforge
|
author: thomas-laforge
|
||||||
challengeNumber: 26
|
challenge:
|
||||||
|
number: 26
|
||||||
sidebar:
|
sidebar:
|
||||||
order: 116
|
order: 116
|
||||||
---
|
---
|
||||||
|
|||||||
@@ -2,7 +2,8 @@
|
|||||||
title: 🟢 Custom Eslint Rule
|
title: 🟢 Custom Eslint Rule
|
||||||
description: Challenge 27 is about creating a custom Eslint Rule to forbid enums
|
description: Challenge 27 is about creating a custom Eslint Rule to forbid enums
|
||||||
author: thomas-laforge
|
author: thomas-laforge
|
||||||
challengeNumber: 27
|
challenge:
|
||||||
|
number: 27
|
||||||
sidebar:
|
sidebar:
|
||||||
order: 12
|
order: 12
|
||||||
---
|
---
|
||||||
|
|||||||
@@ -2,7 +2,8 @@
|
|||||||
title: 🟠 Optimize Change Detection
|
title: 🟠 Optimize Change Detection
|
||||||
description: Challenge 12 about optimizing the number of change detection cycle while scrolling
|
description: Challenge 12 about optimizing the number of change detection cycle while scrolling
|
||||||
author: thomas-laforge
|
author: thomas-laforge
|
||||||
challengeNumber: 12
|
challenge:
|
||||||
|
number: 12
|
||||||
command: performance-scroll-cd
|
command: performance-scroll-cd
|
||||||
sidebar:
|
sidebar:
|
||||||
order: 107
|
order: 107
|
||||||
|
|||||||
@@ -2,7 +2,8 @@
|
|||||||
title: 🟢 Default vs OnPush
|
title: 🟢 Default vs OnPush
|
||||||
description: Challenge 34 is about learning the difference between Default and OnPush Change Detection Strategy.
|
description: Challenge 34 is about learning the difference between Default and OnPush Change Detection Strategy.
|
||||||
author: thomas-laforge
|
author: thomas-laforge
|
||||||
challengeNumber: 34
|
challenge:
|
||||||
|
number: 34
|
||||||
command: performance-default-onpush
|
command: performance-default-onpush
|
||||||
sidebar:
|
sidebar:
|
||||||
order: 7
|
order: 7
|
||||||
|
|||||||
@@ -2,7 +2,8 @@
|
|||||||
title: 🟢 Memoization
|
title: 🟢 Memoization
|
||||||
description: Challenge 35 is about learning how pure pipe works
|
description: Challenge 35 is about learning how pure pipe works
|
||||||
author: thomas-laforge
|
author: thomas-laforge
|
||||||
challengeNumber: 35
|
challenge:
|
||||||
|
number: 35
|
||||||
command: performance-memoized
|
command: performance-memoized
|
||||||
sidebar:
|
sidebar:
|
||||||
order: 8
|
order: 8
|
||||||
|
|||||||
@@ -2,7 +2,8 @@
|
|||||||
title: 🟢 NgFor Optimization
|
title: 🟢 NgFor Optimization
|
||||||
description: Challenge 36 is about learning how trackby works
|
description: Challenge 36 is about learning how trackby works
|
||||||
author: thomas-laforge
|
author: thomas-laforge
|
||||||
challengeNumber: 36
|
challenge:
|
||||||
|
number: 36
|
||||||
command: performance-ngfor-optimize
|
command: performance-ngfor-optimize
|
||||||
sidebar:
|
sidebar:
|
||||||
order: 13
|
order: 13
|
||||||
|
|||||||
@@ -2,7 +2,8 @@
|
|||||||
title: 🟠 Optimize Big List
|
title: 🟠 Optimize Big List
|
||||||
description: Challenge 37 is about learning how virtualization optimize big list rendering
|
description: Challenge 37 is about learning how virtualization optimize big list rendering
|
||||||
author: thomas-laforge
|
author: thomas-laforge
|
||||||
challengeNumber: 37
|
challenge:
|
||||||
|
number: 37
|
||||||
command: performance-ngfor-biglist
|
command: performance-ngfor-biglist
|
||||||
sidebar:
|
sidebar:
|
||||||
order: 117
|
order: 117
|
||||||
|
|||||||
@@ -2,7 +2,8 @@
|
|||||||
title: 🟠 Web workers
|
title: 🟠 Web workers
|
||||||
description: Challenge 40 is about learning how to create and use a web worker
|
description: Challenge 40 is about learning how to create and use a web worker
|
||||||
author: thomas-laforge
|
author: thomas-laforge
|
||||||
challengeNumber: 40
|
challenge:
|
||||||
|
number: 40
|
||||||
command: performance-christmas-web-worker
|
command: performance-christmas-web-worker
|
||||||
sidebar:
|
sidebar:
|
||||||
order: 119
|
order: 119
|
||||||
|
|||||||
@@ -2,7 +2,8 @@
|
|||||||
title: 🟠 High Order Operator Bug
|
title: 🟠 High Order Operator Bug
|
||||||
description: Challenge 11 is about resolving a Rxjs bug because of high order operators
|
description: Challenge 11 is about resolving a Rxjs bug because of high order operators
|
||||||
author: thomas-laforge
|
author: thomas-laforge
|
||||||
challengeNumber: 11
|
challenge:
|
||||||
|
number: 11
|
||||||
command: rxjs-pipe-bug
|
command: rxjs-pipe-bug
|
||||||
sidebar:
|
sidebar:
|
||||||
order: 114
|
order: 114
|
||||||
|
|||||||
@@ -2,7 +2,8 @@
|
|||||||
title: 🟢 Race Condition
|
title: 🟢 Race Condition
|
||||||
description: Challenge 14 is about race condition in Rxjs
|
description: Challenge 14 is about race condition in Rxjs
|
||||||
author: thomas-laforge
|
author: thomas-laforge
|
||||||
challengeNumber: 14
|
challenge:
|
||||||
|
number: 14
|
||||||
command: rxjs-race-condition
|
command: rxjs-race-condition
|
||||||
sidebar:
|
sidebar:
|
||||||
order: 11
|
order: 11
|
||||||
|
|||||||
@@ -3,7 +3,8 @@ title: 🟢 catchError
|
|||||||
description: Challenge 38 is about learning obervable completion.
|
description: Challenge 38 is about learning obervable completion.
|
||||||
author: devesh-chaudhari
|
author: devesh-chaudhari
|
||||||
command: rxjs-catch-error
|
command: rxjs-catch-error
|
||||||
challengeNumber: 38
|
challenge:
|
||||||
|
number: 38
|
||||||
sidebar:
|
sidebar:
|
||||||
order: 14
|
order: 14
|
||||||
---
|
---
|
||||||
|
|||||||
@@ -2,7 +2,8 @@
|
|||||||
title: 🟠 Router
|
title: 🟠 Router
|
||||||
description: Challenge 17 is about testing the router
|
description: Challenge 17 is about testing the router
|
||||||
author: thomas-laforge
|
author: thomas-laforge
|
||||||
challengeNumber: 17
|
challenge:
|
||||||
|
number: 17
|
||||||
command: testing-router-outlet
|
command: testing-router-outlet
|
||||||
sidebar:
|
sidebar:
|
||||||
order: 108
|
order: 108
|
||||||
|
|||||||
@@ -2,7 +2,8 @@
|
|||||||
title: 🟠 Nested Components
|
title: 🟠 Nested Components
|
||||||
description: Challenge 18 is about testing nested components
|
description: Challenge 18 is about testing nested components
|
||||||
author: thomas-laforge
|
author: thomas-laforge
|
||||||
challengeNumber: 18
|
challenge:
|
||||||
|
number: 18
|
||||||
command: testing-nested
|
command: testing-nested
|
||||||
sidebar:
|
sidebar:
|
||||||
order: 109
|
order: 109
|
||||||
|
|||||||
@@ -2,7 +2,8 @@
|
|||||||
title: 🟠 Input Output
|
title: 🟠 Input Output
|
||||||
description: Challenge 19 is about testing inputs and ouputs
|
description: Challenge 19 is about testing inputs and ouputs
|
||||||
author: thomas-laforge
|
author: thomas-laforge
|
||||||
challengeNumber: 19
|
challenge:
|
||||||
|
number: 19
|
||||||
command: testing-input-output
|
command: testing-input-output
|
||||||
sidebar:
|
sidebar:
|
||||||
order: 110
|
order: 110
|
||||||
|
|||||||
@@ -2,7 +2,8 @@
|
|||||||
title: 🟠 Modal
|
title: 🟠 Modal
|
||||||
description: Challenge 20 is about testing modals
|
description: Challenge 20 is about testing modals
|
||||||
author: thomas-laforge
|
author: thomas-laforge
|
||||||
challengeNumber: 20
|
challenge:
|
||||||
|
number: 20
|
||||||
command: testing-modal
|
command: testing-modal
|
||||||
sidebar:
|
sidebar:
|
||||||
order: 111
|
order: 111
|
||||||
|
|||||||
@@ -2,7 +2,8 @@
|
|||||||
title: 🟢 Harness
|
title: 🟢 Harness
|
||||||
description: Challenge 23 is about testing with component harnesses
|
description: Challenge 23 is about testing with component harnesses
|
||||||
author: thomas-laforge
|
author: thomas-laforge
|
||||||
challengeNumber: 23
|
challenge:
|
||||||
|
number: 23
|
||||||
command: testing-harness
|
command: testing-harness
|
||||||
sidebar:
|
sidebar:
|
||||||
order: 9
|
order: 9
|
||||||
|
|||||||
@@ -2,7 +2,8 @@
|
|||||||
title: 🟠 Harness Creation
|
title: 🟠 Harness Creation
|
||||||
description: Challenge 24 is about creating a component harness.
|
description: Challenge 24 is about creating a component harness.
|
||||||
author: thomas-laforge
|
author: thomas-laforge
|
||||||
challengeNumber: 24
|
challenge:
|
||||||
|
number: 24
|
||||||
command: testing-create-harness
|
command: testing-create-harness
|
||||||
sidebar:
|
sidebar:
|
||||||
order: 112
|
order: 112
|
||||||
|
|||||||
@@ -2,7 +2,8 @@
|
|||||||
title: 🟢 Checkbox
|
title: 🟢 Checkbox
|
||||||
description: Challenge 28 is about testing a simple checkbox
|
description: Challenge 28 is about testing a simple checkbox
|
||||||
author: thomas-laforge
|
author: thomas-laforge
|
||||||
challengeNumber: 28
|
challenge:
|
||||||
|
number: 28
|
||||||
command: testing-checkbox
|
command: testing-checkbox
|
||||||
sidebar:
|
sidebar:
|
||||||
order: 10
|
order: 10
|
||||||
|
|||||||
@@ -2,7 +2,8 @@
|
|||||||
title: 🔴 Real-life Application
|
title: 🔴 Real-life Application
|
||||||
description: Challenge 29 is about testing a real-life application
|
description: Challenge 29 is about testing a real-life application
|
||||||
author: thomas-laforge
|
author: thomas-laforge
|
||||||
challengeNumber: 29
|
challenge:
|
||||||
|
number: 29
|
||||||
command: testing-todos-list
|
command: testing-todos-list
|
||||||
sidebar:
|
sidebar:
|
||||||
order: 205
|
order: 205
|
||||||
|
|||||||
@@ -2,7 +2,8 @@
|
|||||||
title: 🟠 Function Overload
|
title: 🟠 Function Overload
|
||||||
description: Challenge 15 is about creating overload functions
|
description: Challenge 15 is about creating overload functions
|
||||||
author: thomas-laforge
|
author: thomas-laforge
|
||||||
challengeNumber: 15
|
challenge:
|
||||||
|
number: 15
|
||||||
command: typescript-overload
|
command: typescript-overload
|
||||||
blogLink: https://medium.com/ngconf/function-overloading-in-typescript-8236706b2c05
|
blogLink: https://medium.com/ngconf/function-overloading-in-typescript-8236706b2c05
|
||||||
sidebar:
|
sidebar:
|
||||||
|
|||||||
@@ -2,7 +2,9 @@
|
|||||||
title: 🟢 Proyección
|
title: 🟢 Proyección
|
||||||
description: Desafio 1 trata sobre aprender a proyectar elementos del DOM a través de componentes,
|
description: Desafio 1 trata sobre aprender a proyectar elementos del DOM a través de componentes,
|
||||||
author: thomas-laforge
|
author: thomas-laforge
|
||||||
challengeNumber: 1
|
challenge:
|
||||||
|
label: Reto
|
||||||
|
number: 1
|
||||||
command: angular-projection
|
command: angular-projection
|
||||||
blogLink: https://medium.com/@thomas.laforge/create-a-highly-customizable-component-cc3a9805e4c5
|
blogLink: https://medium.com/@thomas.laforge/create-a-highly-customizable-component-cc3a9805e4c5
|
||||||
videoLink:
|
videoLink:
|
||||||
|
|||||||
@@ -2,7 +2,9 @@
|
|||||||
title: 🟢 @RouterInput()
|
title: 🟢 @RouterInput()
|
||||||
description: El desafío 22 trata sobre el uso del decorador @Input para utilizar parámetros del router.
|
description: El desafío 22 trata sobre el uso del decorador @Input para utilizar parámetros del router.
|
||||||
author: thomas-laforge
|
author: thomas-laforge
|
||||||
challengeNumber: 22
|
challenge:
|
||||||
|
label: Reto
|
||||||
|
number: 22
|
||||||
command: angular-router-input
|
command: angular-router-input
|
||||||
blogLink: https://medium.com/ngconf/accessing-route-params-in-angular-1f8e12770617
|
blogLink: https://medium.com/ngconf/accessing-route-params-in-angular-1f8e12770617
|
||||||
sidebar:
|
sidebar:
|
||||||
|
|||||||
@@ -2,7 +2,9 @@
|
|||||||
title: 🟠 Mejorar Directiva
|
title: 🟠 Mejorar Directiva
|
||||||
description: El desafío 3 se trata de una directive incorporada.
|
description: El desafío 3 se trata de una directive incorporada.
|
||||||
author: thomas-laforge
|
author: thomas-laforge
|
||||||
challengeNumber: 3
|
challenge:
|
||||||
|
label: Reto
|
||||||
|
number: 3
|
||||||
command: angular-ngfor-enhancement
|
command: angular-ngfor-enhancement
|
||||||
blogLink: https://medium.com/@thomas.laforge/ngfor-enhancement-716b44656a6c
|
blogLink: https://medium.com/@thomas.laforge/ngfor-enhancement-716b44656a6c
|
||||||
sidebar:
|
sidebar:
|
||||||
|
|||||||
@@ -2,7 +2,9 @@
|
|||||||
title: 🟠 InjectionToken
|
title: 🟠 InjectionToken
|
||||||
description: Desafio de Angular 39 para aprender sobre el poder del InjectionToken
|
description: Desafio de Angular 39 para aprender sobre el poder del InjectionToken
|
||||||
author: thomas-laforge
|
author: thomas-laforge
|
||||||
challengeNumber: 39
|
challenge:
|
||||||
|
label: Reto
|
||||||
|
number: 39
|
||||||
command: angular-injection-token
|
command: angular-injection-token
|
||||||
sidebar:
|
sidebar:
|
||||||
order: 118
|
order: 118
|
||||||
|
|||||||
@@ -2,7 +2,9 @@
|
|||||||
title: 🔴 ContextOutlet en forma de tipo
|
title: 🔴 ContextOutlet en forma de tipo
|
||||||
description: El desafío 4 se trata de tipificar de manera fuerte las directivas de ngContextOutlet
|
description: El desafío 4 se trata de tipificar de manera fuerte las directivas de ngContextOutlet
|
||||||
author: thomas-laforge
|
author: thomas-laforge
|
||||||
challengeNumber: 4
|
challenge:
|
||||||
|
label: Reto
|
||||||
|
number: 4
|
||||||
command: angular-context-outlet-type
|
command: angular-context-outlet-type
|
||||||
blogLink: https://medium.com/@thomas.laforge/ngtemplateoutlet-type-checking-5d2dcb07a2c6
|
blogLink: https://medium.com/@thomas.laforge/ngtemplateoutlet-type-checking-5d2dcb07a2c6
|
||||||
sidebar:
|
sidebar:
|
||||||
|
|||||||
@@ -2,7 +2,9 @@
|
|||||||
title: 🟢 Aplicación CRUD
|
title: 🟢 Aplicación CRUD
|
||||||
description: El desafío 5 se trata de refactorizar una aplicación CRUD.
|
description: El desafío 5 se trata de refactorizar una aplicación CRUD.
|
||||||
author: thomas-laforge
|
author: thomas-laforge
|
||||||
challengeNumber: 5
|
challenge:
|
||||||
|
label: Reto
|
||||||
|
number: 5
|
||||||
command: angular-crud
|
command: angular-crud
|
||||||
sidebar:
|
sidebar:
|
||||||
order: 2
|
order: 2
|
||||||
|
|||||||
@@ -2,7 +2,9 @@
|
|||||||
title: 🟠 Directiva Estructural
|
title: 🟠 Directiva Estructural
|
||||||
description: El Desafío 6 se trata de generar una Directiva Estructural que manipule los permisos
|
description: El Desafío 6 se trata de generar una Directiva Estructural que manipule los permisos
|
||||||
author: thomas-laforge
|
author: thomas-laforge
|
||||||
challengeNumber: 6
|
challenge:
|
||||||
|
label: Reto
|
||||||
|
number: 6
|
||||||
command: angular-permissions
|
command: angular-permissions
|
||||||
blogLink: https://medium.com/@thomas.laforge/create-a-custom-structural-directive-to-manage-permissions-like-a-pro-11a1acad30ad
|
blogLink: https://medium.com/@thomas.laforge/create-a-custom-structural-directive-to-manage-permissions-like-a-pro-11a1acad30ad
|
||||||
sidebar:
|
sidebar:
|
||||||
|
|||||||
@@ -2,7 +2,9 @@
|
|||||||
title: 🟠 Optimizar el Change Detection al desplazarse
|
title: 🟠 Optimizar el Change Detection al desplazarse
|
||||||
description: Desafío 12 sobre la optimización del número de ciclos de detección de cambios al desplazarse
|
description: Desafío 12 sobre la optimización del número de ciclos de detección de cambios al desplazarse
|
||||||
author: thomas-laforge
|
author: thomas-laforge
|
||||||
challengeNumber: 12
|
challenge:
|
||||||
|
label: Reto
|
||||||
|
number: 12
|
||||||
command: performance-scroll-cd
|
command: performance-scroll-cd
|
||||||
sidebar:
|
sidebar:
|
||||||
order: 107
|
order: 107
|
||||||
|
|||||||
@@ -2,7 +2,9 @@
|
|||||||
title: 🟢 Default vs OnPush
|
title: 🟢 Default vs OnPush
|
||||||
description: El desafío 34 trata sobre aprender la diferencia entre las estrategias de detección de cambios Default y OnPush.
|
description: El desafío 34 trata sobre aprender la diferencia entre las estrategias de detección de cambios Default y OnPush.
|
||||||
author: thomas-laforge
|
author: thomas-laforge
|
||||||
challengeNumber: 34
|
challenge:
|
||||||
|
label: Reto
|
||||||
|
number: 34
|
||||||
command: performance-default-onpush
|
command: performance-default-onpush
|
||||||
sidebar:
|
sidebar:
|
||||||
order: 7
|
order: 7
|
||||||
|
|||||||
@@ -2,7 +2,9 @@
|
|||||||
title: 🟢 Memoización
|
title: 🟢 Memoización
|
||||||
description: El desafío 35 trata sobre cómo funcionan las tuberías puras
|
description: El desafío 35 trata sobre cómo funcionan las tuberías puras
|
||||||
author: thomas-laforge
|
author: thomas-laforge
|
||||||
challengeNumber: 35
|
challenge:
|
||||||
|
label: Reto
|
||||||
|
number: 35
|
||||||
command: performance-memoized
|
command: performance-memoized
|
||||||
sidebar:
|
sidebar:
|
||||||
order: 8
|
order: 8
|
||||||
|
|||||||
@@ -2,7 +2,9 @@
|
|||||||
title: 🟢 Optimización de NgFor
|
title: 🟢 Optimización de NgFor
|
||||||
description: El Desafío 36 trata sobre como funciona trackby
|
description: El Desafío 36 trata sobre como funciona trackby
|
||||||
author: thomas-laforge
|
author: thomas-laforge
|
||||||
challengeNumber: 36
|
challenge:
|
||||||
|
label: Reto
|
||||||
|
number: 36
|
||||||
command: performance-ngfor-optimize
|
command: performance-ngfor-optimize
|
||||||
sidebar:
|
sidebar:
|
||||||
order: 13
|
order: 13
|
||||||
|
|||||||
@@ -2,7 +2,9 @@
|
|||||||
title: 🟠 Optimizando una lista larga
|
title: 🟠 Optimizando una lista larga
|
||||||
description: El desafio 37 trata sobre como optimizar una lista grande de elementos
|
description: El desafio 37 trata sobre como optimizar una lista grande de elementos
|
||||||
author: thomas-laforge
|
author: thomas-laforge
|
||||||
challengeNumber: 37
|
challenge:
|
||||||
|
label: Reto
|
||||||
|
number: 37
|
||||||
command: performance-ngfor-biglist
|
command: performance-ngfor-biglist
|
||||||
sidebar:
|
sidebar:
|
||||||
order: 117
|
order: 117
|
||||||
|
|||||||
@@ -2,7 +2,8 @@
|
|||||||
title: 🟢 Projeção
|
title: 🟢 Projeção
|
||||||
description: Desafio 1 é sobre aprender a projetar elementos DOM através de componentes
|
description: Desafio 1 é sobre aprender a projetar elementos DOM através de componentes
|
||||||
author: thomas-laforge
|
author: thomas-laforge
|
||||||
challengeNumber: 1
|
challenge:
|
||||||
|
number: 1
|
||||||
command: angular-projection
|
command: angular-projection
|
||||||
blogLink: https://medium.com/@thomas.laforge/create-a-highly-customizable-component-cc3a9805e4c5
|
blogLink: https://medium.com/@thomas.laforge/create-a-highly-customizable-component-cc3a9805e4c5
|
||||||
videoLink:
|
videoLink:
|
||||||
|
|||||||
@@ -2,7 +2,9 @@
|
|||||||
title: <%= difficulty %> <%= title %>
|
title: <%= difficulty %> <%= title %>
|
||||||
description: Challenge <%= challengeNumber %> is about ...
|
description: Challenge <%= challengeNumber %> is about ...
|
||||||
author: <%= author %>
|
author: <%= author %>
|
||||||
challengeNumber: <%= challengeNumber %>
|
challenge:
|
||||||
|
label: Challenge
|
||||||
|
number: <%= challengeNumber %>
|
||||||
command: <%= appProjectName %>
|
command: <%= appProjectName %>
|
||||||
sidebar:
|
sidebar:
|
||||||
order: <%= order %>
|
order: <%= order %>
|
||||||
|
|||||||
@@ -42,7 +42,7 @@ function findPreviousChallengeFilePath(tree, path, number) {
|
|||||||
export async function challengeGenerator(tree: Tree, options: Schema) {
|
export async function challengeGenerator(tree: Tree, options: Schema) {
|
||||||
const { appProjectName, appDirectory } = getProjectDir(
|
const { appProjectName, appDirectory } = getProjectDir(
|
||||||
options.name,
|
options.name,
|
||||||
`apps/${options.category}`
|
`apps/${options.category}`,
|
||||||
);
|
);
|
||||||
|
|
||||||
const difficulty = options.challengeDifficulty;
|
const difficulty = options.challengeDifficulty;
|
||||||
@@ -65,7 +65,7 @@ export async function challengeGenerator(tree: Tree, options: Schema) {
|
|||||||
|
|
||||||
const challengeNumberPath = 'challenge-number.json';
|
const challengeNumberPath = 'challenge-number.json';
|
||||||
const challangeNumberJson = JSON.parse(
|
const challangeNumberJson = JSON.parse(
|
||||||
tree.read(challengeNumberPath).toString()
|
tree.read(challengeNumberPath).toString(),
|
||||||
);
|
);
|
||||||
const challengeNumber = challangeNumberJson.total + 1;
|
const challengeNumber = challangeNumberJson.total + 1;
|
||||||
const order = challangeNumberJson[difficulty] + 1;
|
const order = challangeNumberJson[difficulty] + 1;
|
||||||
@@ -97,7 +97,7 @@ export async function challengeGenerator(tree: Tree, options: Schema) {
|
|||||||
challengeNumber,
|
challengeNumber,
|
||||||
difficulty,
|
difficulty,
|
||||||
order,
|
order,
|
||||||
}
|
},
|
||||||
);
|
);
|
||||||
|
|
||||||
if (options.addTest) {
|
if (options.addTest) {
|
||||||
@@ -111,7 +111,7 @@ export async function challengeGenerator(tree: Tree, options: Schema) {
|
|||||||
const readmeRegex = new RegExp(`all ${challengeNumber - 1} challenges`);
|
const readmeRegex = new RegExp(`all ${challengeNumber - 1} challenges`);
|
||||||
const readmeReplace = readme.replace(
|
const readmeReplace = readme.replace(
|
||||||
readmeRegex,
|
readmeRegex,
|
||||||
`all ${challengeNumber} challenges`
|
`all ${challengeNumber} challenges`,
|
||||||
);
|
);
|
||||||
|
|
||||||
tree.write('./README.md', readmeReplace);
|
tree.write('./README.md', readmeReplace);
|
||||||
@@ -126,7 +126,7 @@ export async function challengeGenerator(tree: Tree, options: Schema) {
|
|||||||
linkRegex,
|
linkRegex,
|
||||||
`link: /challenges/${options.category}/${challengeNumber}-${
|
`link: /challenges/${options.category}/${challengeNumber}-${
|
||||||
names(options.name).name
|
names(options.name).name
|
||||||
}/\n`
|
}/\n`,
|
||||||
);
|
);
|
||||||
|
|
||||||
tree.write('./docs/src/content/docs/index.mdx', replacedLink);
|
tree.write('./docs/src/content/docs/index.mdx', replacedLink);
|
||||||
@@ -134,14 +134,14 @@ export async function challengeGenerator(tree: Tree, options: Schema) {
|
|||||||
const previousChallengeFilePath = findPreviousChallengeFilePath(
|
const previousChallengeFilePath = findPreviousChallengeFilePath(
|
||||||
tree,
|
tree,
|
||||||
`./docs/src/content/docs/challenges`,
|
`./docs/src/content/docs/challenges`,
|
||||||
String(challengeNumber - 1)
|
String(challengeNumber - 1),
|
||||||
);
|
);
|
||||||
|
|
||||||
const previousChallenge = tree.read(previousChallengeFilePath).toString();
|
const previousChallenge = tree.read(previousChallengeFilePath).toString();
|
||||||
|
|
||||||
tree.write(
|
tree.write(
|
||||||
previousChallengeFilePath,
|
previousChallengeFilePath,
|
||||||
previousChallenge.replace(`badge: New`, ``)
|
previousChallenge.replace(`badge: New`, ``),
|
||||||
);
|
);
|
||||||
|
|
||||||
updateJson(tree, challengeNumberPath, (json) => {
|
updateJson(tree, challengeNumberPath, (json) => {
|
||||||
|
|||||||
Reference in New Issue
Block a user