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 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">
<Default {...Astro.props}><slot /></Default>
{challengeNumber && <div class="chip">Challenge #{challengeNumber}</div> }
{challengeNumber && <div class="chip">{challengeLabel} #{challengeNumber}</div> }
</div>
<style>

View File

@@ -15,7 +15,12 @@ const docs = defineCollection({
schema: (ctx) =>
docsSchema()(ctx).extend({
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(),
command: z.string().optional(),
blogLink: z.string().optional(),

View File

@@ -2,7 +2,8 @@
title: 🟢 Projection
description: Challenge 1 is about learning how to project DOM element through components
author: thomas-laforge
challengeNumber: 1
challenge:
number: 1
command: angular-projection
blogLink: https://medium.com/@thomas.laforge/create-a-highly-customizable-component-cc3a9805e4c5
videoLink:

View File

@@ -2,7 +2,8 @@
title: 🔴 Utility Wrapper Pipe
description: Challenge 10 is about creating a pipe to wrap utilities
author: thomas-laforge
challengeNumber: 10
challenge:
number: 10
command: angular-pipe-hard
sidebar:
order: 202

View File

@@ -2,7 +2,8 @@
title: 🟠 Highly Customizable CSS
description: Challenge 13 is about creating highly customizable CSS styles
author: thomas-laforge
challengeNumber: 13
challenge:
number: 13
command: angular-styling
sidebar:
order: 104

View File

@@ -2,7 +2,8 @@
title: 🔴 Master Dependancy Injection
description: Challenge 16 is about masjering how dependancy injection works
author: thomas-laforge
challengeNumber: 16
challenge:
number: 16
command: angular-di
sidebar:
order: 203

View File

@@ -2,7 +2,8 @@
title: 🟢 Anchor Navigation
description: Challenge 21 is about navigating inside the page with anchor
author: thomas-laforge
challengeNumber: 21
challenge:
number: 21
command: angular-anchor-scrolling
sidebar:
order: 4

View File

@@ -2,7 +2,8 @@
title: 🟢 @RouterInput()
description: Challenge 22 is about using the @Input decorator to retreive router params.
author: thomas-laforge
challengeNumber: 22
challenge:
number: 22
command: angular-router-input
blogLink: https://medium.com/ngconf/accessing-route-params-in-angular-1f8e12770617
sidebar:

View File

@@ -2,7 +2,8 @@
title: 🟠 Directive Enhancement
description: Challenge 3 is about enhancing a built-in directive
author: thomas-laforge
challengeNumber: 3
challenge:
number: 3
command: angular-ngfor-enhancement
blogLink: https://medium.com/@thomas.laforge/ngfor-enhancement-716b44656a6c
sidebar:

View File

@@ -2,7 +2,8 @@
title: 🔴 Interoperability Rxjs/Signal
description: Challenge 30 is about learning how to mix signal with Rxjs
author: thomas-laforge
challengeNumber: 30
challenge:
number: 30
command: angular-interop-rxjs-signal
sidebar:
order: 204

View File

@@ -2,7 +2,8 @@
title: 🟢 Module to Standalone
description: Challenge 31 is about migrating a module based application to a standalone application.
author: thomas-laforge
challengeNumber: 31
challenge:
number: 31
command: angular-module-to-standalone
sidebar:
order: 6

View File

@@ -2,7 +2,8 @@
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
challenge:
number: 32
command: angular-bug-cd
blogLink: https://medium.com/ngconf/function-calls-inside-template-are-dangerous-15f9822a6629
sidebar:

View File

@@ -2,7 +2,8 @@
title: 🟠 Decoupling Components
description: Challenge 33 is about decoupling two strongly coupled components using Injection Token
author: thomas-laforge
challengeNumber: 33
challenge:
number: 33
command: angular-decoupling
sidebar:
order: 106

View File

@@ -2,7 +2,8 @@
title: 🟠 InjectionToken
description: Challenge 39 is about learning the power of dependancy injection
author: thomas-laforge
challengeNumber: 39
challenge:
number: 39
command: angular-injection-token
sidebar:
order: 118

View File

@@ -2,7 +2,8 @@
title: 🔴 Typed ContextOutlet
description: Challenge 4 is about strongly typing ngContextOutlet directives
author: thomas-laforge
challengeNumber: 4
challenge:
number: 4
command: angular-context-outlet-type
blogLink: https://medium.com/@thomas.laforge/ngtemplateoutlet-type-checking-5d2dcb07a2c6
sidebar:

View File

@@ -2,7 +2,8 @@
title: 🟢 Crud application
description: Challenge 5 is about refactoring a crud application
author: thomas-laforge
challengeNumber: 5
challenge:
number: 5
command: angular-crud
sidebar:
order: 2

View File

@@ -2,7 +2,8 @@
title: 🟠 Structural Directive
description: Challenge 6 is about creating a structural directive to handle permissions
author: thomas-laforge
challengeNumber: 6
challenge:
number: 6
command: angular-permissions
blogLink: https://medium.com/@thomas.laforge/create-a-custom-structural-directive-to-manage-permissions-like-a-pro-11a1acad30ad
sidebar:

View File

@@ -2,7 +2,8 @@
title: 🟢 Pure Pipe
description: Challenge 8 is about creating a pure pipe
author: thomas-laforge
challengeNumber: 8
challenge:
number: 8
command: angular-pipe-easy
blogLink: https://medium.com/ngconf/deep-dive-into-angular-pipes-c040588cd15d
sidebar:

View File

@@ -2,7 +2,8 @@
title: 🟠 Wrap Function Pipe
description: Challenge 9 is about creating a pipe to wrap component fonctions
author: thomas-laforge
challengeNumber: 9
challenge:
number: 9
command: angular-pipe-intermediate
blogLink: https://medium.com/ngconf/boost-your-apps-performance-by-wrapping-your-functions-inside-a-pipe-7e889a901d1d
sidebar:

View File

@@ -2,7 +2,8 @@
title: 🟠 Control Value Accessor
description: Challenge 41 is about creating a custom form control that implements Control Value Accessor interface.
author: stanislav-gavrilov
challengeNumber: 41
challenge:
number: 41
command: forms-control-value-accessor
sidebar:
order: 1

View File

@@ -2,7 +2,8 @@
title: 🟠 Effect vs Selector
description: Challenge 2 is about learning the difference between effects and selectors in NgRx
author: thomas-laforge
challengeNumber: 2
challenge:
number: 2
command: ngrx-effect-selector
blogLink: https://medium.com/@thomas.laforge/ngrx-effect-vs-reducer-vs-selector-58337ab59043
sidebar:

View File

@@ -2,7 +2,8 @@
title: 🔴 Power of Effect
description: Challenge 7 is about creating an Ngrx effect with another Rxjs Hot observable
author: thomas-laforge
challengeNumber: 7
challenge:
number: 7
command: ngrx-notification
sidebar:
order: 206

View File

@@ -2,7 +2,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
challenge:
number: 25
sidebar:
order: 207
---

View File

@@ -2,7 +2,8 @@
title: 🟠 Component Generator
description: Challenge 26 is about creating a Nx generator to create a custom component
author: thomas-laforge
challengeNumber: 26
challenge:
number: 26
sidebar:
order: 116
---

View File

@@ -2,7 +2,8 @@
title: 🟢 Custom Eslint Rule
description: Challenge 27 is about creating a custom Eslint Rule to forbid enums
author: thomas-laforge
challengeNumber: 27
challenge:
number: 27
sidebar:
order: 12
---

View File

@@ -2,7 +2,8 @@
title: 🟠 Optimize Change Detection
description: Challenge 12 about optimizing the number of change detection cycle while scrolling
author: thomas-laforge
challengeNumber: 12
challenge:
number: 12
command: performance-scroll-cd
sidebar:
order: 107

View File

@@ -2,7 +2,8 @@
title: 🟢 Default vs OnPush
description: Challenge 34 is about learning the difference between Default and OnPush Change Detection Strategy.
author: thomas-laforge
challengeNumber: 34
challenge:
number: 34
command: performance-default-onpush
sidebar:
order: 7

View File

@@ -2,7 +2,8 @@
title: 🟢 Memoization
description: Challenge 35 is about learning how pure pipe works
author: thomas-laforge
challengeNumber: 35
challenge:
number: 35
command: performance-memoized
sidebar:
order: 8

View File

@@ -2,7 +2,8 @@
title: 🟢 NgFor Optimization
description: Challenge 36 is about learning how trackby works
author: thomas-laforge
challengeNumber: 36
challenge:
number: 36
command: performance-ngfor-optimize
sidebar:
order: 13

View File

@@ -2,7 +2,8 @@
title: 🟠 Optimize Big List
description: Challenge 37 is about learning how virtualization optimize big list rendering
author: thomas-laforge
challengeNumber: 37
challenge:
number: 37
command: performance-ngfor-biglist
sidebar:
order: 117

View File

@@ -2,7 +2,8 @@
title: 🟠 Web workers
description: Challenge 40 is about learning how to create and use a web worker
author: thomas-laforge
challengeNumber: 40
challenge:
number: 40
command: performance-christmas-web-worker
sidebar:
order: 119

View File

@@ -2,7 +2,8 @@
title: 🟠 High Order Operator Bug
description: Challenge 11 is about resolving a Rxjs bug because of high order operators
author: thomas-laforge
challengeNumber: 11
challenge:
number: 11
command: rxjs-pipe-bug
sidebar:
order: 114

View File

@@ -2,7 +2,8 @@
title: 🟢 Race Condition
description: Challenge 14 is about race condition in Rxjs
author: thomas-laforge
challengeNumber: 14
challenge:
number: 14
command: rxjs-race-condition
sidebar:
order: 11

View File

@@ -3,7 +3,8 @@ title: 🟢 catchError
description: Challenge 38 is about learning obervable completion.
author: devesh-chaudhari
command: rxjs-catch-error
challengeNumber: 38
challenge:
number: 38
sidebar:
order: 14
---

View File

@@ -2,7 +2,8 @@
title: 🟠 Router
description: Challenge 17 is about testing the router
author: thomas-laforge
challengeNumber: 17
challenge:
number: 17
command: testing-router-outlet
sidebar:
order: 108

View File

@@ -2,7 +2,8 @@
title: 🟠 Nested Components
description: Challenge 18 is about testing nested components
author: thomas-laforge
challengeNumber: 18
challenge:
number: 18
command: testing-nested
sidebar:
order: 109

View File

@@ -2,7 +2,8 @@
title: 🟠 Input Output
description: Challenge 19 is about testing inputs and ouputs
author: thomas-laforge
challengeNumber: 19
challenge:
number: 19
command: testing-input-output
sidebar:
order: 110

View File

@@ -2,7 +2,8 @@
title: 🟠 Modal
description: Challenge 20 is about testing modals
author: thomas-laforge
challengeNumber: 20
challenge:
number: 20
command: testing-modal
sidebar:
order: 111

View File

@@ -2,7 +2,8 @@
title: 🟢 Harness
description: Challenge 23 is about testing with component harnesses
author: thomas-laforge
challengeNumber: 23
challenge:
number: 23
command: testing-harness
sidebar:
order: 9

View File

@@ -2,7 +2,8 @@
title: 🟠 Harness Creation
description: Challenge 24 is about creating a component harness.
author: thomas-laforge
challengeNumber: 24
challenge:
number: 24
command: testing-create-harness
sidebar:
order: 112

View File

@@ -2,7 +2,8 @@
title: 🟢 Checkbox
description: Challenge 28 is about testing a simple checkbox
author: thomas-laforge
challengeNumber: 28
challenge:
number: 28
command: testing-checkbox
sidebar:
order: 10

View File

@@ -2,7 +2,8 @@
title: 🔴 Real-life Application
description: Challenge 29 is about testing a real-life application
author: thomas-laforge
challengeNumber: 29
challenge:
number: 29
command: testing-todos-list
sidebar:
order: 205

View File

@@ -2,7 +2,8 @@
title: 🟠 Function Overload
description: Challenge 15 is about creating overload functions
author: thomas-laforge
challengeNumber: 15
challenge:
number: 15
command: typescript-overload
blogLink: https://medium.com/ngconf/function-overloading-in-typescript-8236706b2c05
sidebar:

View File

@@ -2,7 +2,9 @@
title: 🟢 Proyección
description: Desafio 1 trata sobre aprender a proyectar elementos del DOM a través de componentes,
author: thomas-laforge
challengeNumber: 1
challenge:
label: Reto
number: 1
command: angular-projection
blogLink: https://medium.com/@thomas.laforge/create-a-highly-customizable-component-cc3a9805e4c5
videoLink:

View File

@@ -2,7 +2,9 @@
title: 🟢 @RouterInput()
description: El desafío 22 trata sobre el uso del decorador @Input para utilizar parámetros del router.
author: thomas-laforge
challengeNumber: 22
challenge:
label: Reto
number: 22
command: angular-router-input
blogLink: https://medium.com/ngconf/accessing-route-params-in-angular-1f8e12770617
sidebar:

View File

@@ -2,7 +2,9 @@
title: 🟠 Mejorar Directiva
description: El desafío 3 se trata de una directive incorporada.
author: thomas-laforge
challengeNumber: 3
challenge:
label: Reto
number: 3
command: angular-ngfor-enhancement
blogLink: https://medium.com/@thomas.laforge/ngfor-enhancement-716b44656a6c
sidebar:

View File

@@ -2,7 +2,9 @@
title: 🟠 InjectionToken
description: Desafio de Angular 39 para aprender sobre el poder del InjectionToken
author: thomas-laforge
challengeNumber: 39
challenge:
label: Reto
number: 39
command: angular-injection-token
sidebar:
order: 118

View File

@@ -2,7 +2,9 @@
title: 🔴 ContextOutlet en forma de tipo
description: El desafío 4 se trata de tipificar de manera fuerte las directivas de ngContextOutlet
author: thomas-laforge
challengeNumber: 4
challenge:
label: Reto
number: 4
command: angular-context-outlet-type
blogLink: https://medium.com/@thomas.laforge/ngtemplateoutlet-type-checking-5d2dcb07a2c6
sidebar:

View File

@@ -2,7 +2,9 @@
title: 🟢 Aplicación CRUD
description: El desafío 5 se trata de refactorizar una aplicación CRUD.
author: thomas-laforge
challengeNumber: 5
challenge:
label: Reto
number: 5
command: angular-crud
sidebar:
order: 2

View File

@@ -2,7 +2,9 @@
title: 🟠 Directiva Estructural
description: El Desafío 6 se trata de generar una Directiva Estructural que manipule los permisos
author: thomas-laforge
challengeNumber: 6
challenge:
label: Reto
number: 6
command: angular-permissions
blogLink: https://medium.com/@thomas.laforge/create-a-custom-structural-directive-to-manage-permissions-like-a-pro-11a1acad30ad
sidebar:

View File

@@ -2,7 +2,9 @@
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
author: thomas-laforge
challengeNumber: 12
challenge:
label: Reto
number: 12
command: performance-scroll-cd
sidebar:
order: 107

View File

@@ -2,7 +2,9 @@
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.
author: thomas-laforge
challengeNumber: 34
challenge:
label: Reto
number: 34
command: performance-default-onpush
sidebar:
order: 7

View File

@@ -2,7 +2,9 @@
title: 🟢 Memoización
description: El desafío 35 trata sobre cómo funcionan las tuberías puras
author: thomas-laforge
challengeNumber: 35
challenge:
label: Reto
number: 35
command: performance-memoized
sidebar:
order: 8

View File

@@ -2,7 +2,9 @@
title: 🟢 Optimización de NgFor
description: El Desafío 36 trata sobre como funciona trackby
author: thomas-laforge
challengeNumber: 36
challenge:
label: Reto
number: 36
command: performance-ngfor-optimize
sidebar:
order: 13

View File

@@ -2,7 +2,9 @@
title: 🟠 Optimizando una lista larga
description: El desafio 37 trata sobre como optimizar una lista grande de elementos
author: thomas-laforge
challengeNumber: 37
challenge:
label: Reto
number: 37
command: performance-ngfor-biglist
sidebar:
order: 117

View File

@@ -2,7 +2,8 @@
title: 🟢 Projeção
description: Desafio 1 é sobre aprender a projetar elementos DOM através de componentes
author: thomas-laforge
challengeNumber: 1
challenge:
number: 1
command: angular-projection
blogLink: https://medium.com/@thomas.laforge/create-a-highly-customizable-component-cc3a9805e4c5
videoLink:

View File

@@ -2,7 +2,9 @@
title: <%= difficulty %> <%= title %>
description: Challenge <%= challengeNumber %> is about ...
author: <%= author %>
challengeNumber: <%= challengeNumber %>
challenge:
label: Challenge
number: <%= challengeNumber %>
command: <%= appProjectName %>
sidebar:
order: <%= order %>

View File

@@ -42,7 +42,7 @@ function findPreviousChallengeFilePath(tree, path, number) {
export async function challengeGenerator(tree: Tree, options: Schema) {
const { appProjectName, appDirectory } = getProjectDir(
options.name,
`apps/${options.category}`
`apps/${options.category}`,
);
const difficulty = options.challengeDifficulty;
@@ -65,7 +65,7 @@ export async function challengeGenerator(tree: Tree, options: Schema) {
const challengeNumberPath = 'challenge-number.json';
const challangeNumberJson = JSON.parse(
tree.read(challengeNumberPath).toString()
tree.read(challengeNumberPath).toString(),
);
const challengeNumber = challangeNumberJson.total + 1;
const order = challangeNumberJson[difficulty] + 1;
@@ -97,7 +97,7 @@ export async function challengeGenerator(tree: Tree, options: Schema) {
challengeNumber,
difficulty,
order,
}
},
);
if (options.addTest) {
@@ -111,7 +111,7 @@ export async function challengeGenerator(tree: Tree, options: Schema) {
const readmeRegex = new RegExp(`all ${challengeNumber - 1} challenges`);
const readmeReplace = readme.replace(
readmeRegex,
`all ${challengeNumber} challenges`
`all ${challengeNumber} challenges`,
);
tree.write('./README.md', readmeReplace);
@@ -126,7 +126,7 @@ export async function challengeGenerator(tree: Tree, options: Schema) {
linkRegex,
`link: /challenges/${options.category}/${challengeNumber}-${
names(options.name).name
}/\n`
}/\n`,
);
tree.write('./docs/src/content/docs/index.mdx', replacedLink);
@@ -134,14 +134,14 @@ export async function challengeGenerator(tree: Tree, options: Schema) {
const previousChallengeFilePath = findPreviousChallengeFilePath(
tree,
`./docs/src/content/docs/challenges`,
String(challengeNumber - 1)
String(challengeNumber - 1),
);
const previousChallenge = tree.read(previousChallengeFilePath).toString();
tree.write(
previousChallengeFilePath,
previousChallenge.replace(`badge: New`, ``)
previousChallenge.replace(`badge: New`, ``),
);
updateJson(tree, challengeNumberPath, (json) => {