feat(): add challenge label to support translations

This commit is contained in:
Eduardo Roth
2023-12-19 16:47:30 -06:00
parent 7a84ddec49
commit 1631a51894
58 changed files with 141 additions and 67 deletions

View File

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

View File

@@ -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(),

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@@ -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) => {