diff --git a/docs/astro.config.mjs b/docs/astro.config.mjs
index b14ac6c..23bfa5a 100644
--- a/docs/astro.config.mjs
+++ b/docs/astro.config.mjs
@@ -1,6 +1,11 @@
import starlight from '@astrojs/starlight';
import { defineConfig } from 'astro/config';
+export const locales = {
+ root: { label: 'English', lang: 'en' },
+ es: { label: 'Español', lang: 'es' },
+};
+
// https://astro.build/config
export default defineConfig({
integrations: [
@@ -21,10 +26,16 @@ export default defineConfig({
{
label: 'Guides',
autogenerate: { directory: 'guides' },
+ translations: {
+ es: 'Guías',
+ },
},
{
label: 'Challenges',
autogenerate: { directory: 'challenges' },
+ translations: {
+ es: 'Desafíos',
+ },
},
],
head: [
@@ -52,6 +63,17 @@ export default defineConfig({
PageTitle: './src/components/PageTitle.astro',
MobileMenuFooter: './src/components/MobileMenuFooter.astro',
},
+ defaultLocale: 'root',
+ locales: {
+ root: {
+ label: 'English',
+ lang: 'en',
+ },
+ es: {
+ label: 'Español',
+ lang: 'es',
+ },
+ },
}),
],
});
diff --git a/docs/src/content/docs/es/challenges/angular/1-projection.md b/docs/src/content/docs/es/challenges/angular/1-projection.md
new file mode 100644
index 0000000..300b5ec
--- /dev/null
+++ b/docs/src/content/docs/es/challenges/angular/1-projection.md
@@ -0,0 +1,37 @@
+---
+title: 🟢 Proyección
+description: Desafio 1 trata sobre aprender a proyectar elementos del DOM a través de componentes,
+author: Thomas Laforge
+challengeNumber: 1
+command: angular-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
+---
+
+## Información
+
+En Angular, la proyección de contenido es una técnica poderosa para crear componentes altamente personalizables. Utilizar y comprender los conceptos de ng-content y ngTemplateOutlet puede mejorar significativamente su capacidad para crear componentes reutilizables.
+
+Puedes aprender todo sobre ng-content [aquí](https://angular.io/guide/content-projection#projecting-content-in-more-complex-environments) desde la proyección simple hasta las más complejas.
+
+Para aprender sobre ngTemplateOutlet, puedes encontrar la documentación de la API [aquí](https://angular.io/api/common/NgTemplateOutlet) junto con algunos ejemplos básicos.
+
+Con estas dos herramientas en la mano, ahora estás listo para asumir el desafío.
+
+## Declaración
+
+Comenzarás con una aplicación completamente funcional que incluye un tablero con una tarjeta de profesor y una tarjeta de estudiante. El objetivo es implementar la tarjeta de la ciudad.
+
+Aunque la aplicación funciona, la experiencia del desarrollador está lejos de ser óptima. Cada vez que necesitas implementar una nueva tarjeta, tienes que modificar el `card.component.ts`. En proyectos reales, este componente puede ser compartido entre muchas aplicaciones. El objetivo del desafío es crear un `CardComponent` que se pueda personalizar sin ninguna modificación. Una vez que hayas creado este componente, puedes comenzar a implementar el `CityCardComponent` y asegurarte de que no estás tocando el `CardComponent`.
+
+## Restricciones
+
+- Debes refactorizar el `CardComponent` and `ListItemComponent`.
+- La directiva NgFor debe ser declarada y permanecer dentro del `CardComponent`. Puedes sentirte tentado a moverla al `ParentCardComponent` como `TeacherCardComponent`.
+- CardComponent no debe contener ningún `NgIf` o `NgSwitch`.
+- CSS: intenta evitar usar `::ng-deep`. Encuentra una mejor manera de manejar los estilos de CSS.
diff --git a/docs/src/content/docs/es/challenges/angular/39-injection-token.md b/docs/src/content/docs/es/challenges/angular/39-injection-token.md
new file mode 100644
index 0000000..91989d2
--- /dev/null
+++ b/docs/src/content/docs/es/challenges/angular/39-injection-token.md
@@ -0,0 +1,31 @@
+---
+title: 🟠 InjectionToken
+description: Desafio de Angular 39 para aprender sobre el poder del InjectionToken
+author: Thomas Laforge
+challengeNumber: 39
+command: angular-injection-token
+sidebar:
+ order: 118
+ badge: New
+---
+
+## Información
+
+En esta pequeña aplicación, comenzamos con un `VideoComponent` que contiene un timer de **1 segundo**. El equipo de desarrollo decidió usar una constante global para almacenar el valor del temporizador: `DEFAULT_TIMER`. Sin embargo, unas semanas más tarde, el equipo de producto quiere agregar una nueva pantalla para llamadas telefónicas llamada `PhoneComponent`, y queremos reutilizar el `TimerComponent`. Sin embargo, el equipo de producto quiere un temporizador de **2 segundos**. ¿Cómo podemos lograr esto?
+
+## Enunciado
+
+Actualmente, el temporizador sigue siendo de 1 segundo para el `PhoneComponent`. El objetivo de este desafío es cambiar el valor del temporizador a 2 segundos para el `PhoneComponent`.
+
+## Restricciones
+
+Se prohíbe el uso de `@Input`. Este ejemplo es básico, y el uso de `@Input` podría ser una buena opción, pero en aplicaciones más complejas, el componente que necesitamos actualizar puede estar profundamente anidado, lo que hace que el uso de `@Input` sea un diseño realmente malo.
+
+## Pista
+
+
+ Pista 1
+
+Mirar este [blog post](https://itnext.io/stop-being-scared-of-injectiontokens-ab22f72f0fe9) puede ser de gran ayuda.
+
+
diff --git a/docs/src/content/docs/es/guides/checkout-answer.md b/docs/src/content/docs/es/guides/checkout-answer.md
new file mode 100644
index 0000000..99ecd8e
--- /dev/null
+++ b/docs/src/content/docs/es/guides/checkout-answer.md
@@ -0,0 +1,36 @@
+---
+title: Revisar la Respuesta de Alguien
+description: Guía para revisar la respuesta de otra persona.
+sidebar:
+ order: 3
+---
+
+Todas las respuestas a los Desafíos de Angular se presentarán en forma de Pull Request (PR). Para verlas y seguirlas, navega a través de la página **Files Changes** en GitHub. Sin embargo, entender y seguir este proceso puede no ser sencillo si no estás familiarizado con la interfaz. En muchos casos, puedes preferir revisar la rama y revisar la solución en tu IDE preferido.
+
+Esta guía ha sido creada para ayudarte a lograr esto.
+
+## Revisar localmente una PR de otra persona
+
+### Sincroniza tu repositorio
+
+Primero necesitas sincronizar tu fork para asegurarte de que está al día con el repositorio del que hiciste fork.
+
+Esto se puede lograr haciendo clic en el botón **Sync fork** en la página principal de tu fork.
+
+
+
+La imagen de arriba muestra que mi rama está atrasada respecto a la rama principal por 8 commits, y necesito sincronizarla para estar al día.
+
+
+
+### Revisar localmente
+
+Navega a la PR que deseas revisar localmente y obtén su ID. La encontrarás en el título de la PR (como se muestra a continuación).
+
+
+
+A continuación, ve a cualquier terminal dentro de tu directorio de proyecto y ejecuta el siguiente comando:
+
+```bash
+gh pr checkout
+```
diff --git a/docs/src/content/docs/es/guides/contribute.md b/docs/src/content/docs/es/guides/contribute.md
new file mode 100644
index 0000000..f04d927
--- /dev/null
+++ b/docs/src/content/docs/es/guides/contribute.md
@@ -0,0 +1,20 @@
+---
+title: Contribuye
+description: Guía para contribuir al proyecto
+sidebar:
+ order: 4
+---
+
+Puedes contribuir a este repositorio de muchas maneras:
+
+🔥 Crea un nuevo desafío siguiendo las instrucciones [aquí](/guides/create-challenge).
+
+🔥 Resuelve desafíos y envía los resultados. (guía [aquí](/guides/resolve-challenge)).
+
+🔥 Comenta las soluciones de otros proporcionando retroalimentación constructiva y afectuosa.
+
+🔥 Corrige errores tipográficos o de inglés dentro de la documentación.
+
+🔥 Envía un issue para sugerir nuevas ideas de desafíos o reportar un error.
+
+🔥 Patrocina el proyecto [aquí](https://github.com/sponsors/tomalaforge)
diff --git a/docs/src/content/docs/es/guides/create-challenge.md b/docs/src/content/docs/es/guides/create-challenge.md
new file mode 100644
index 0000000..b2e7fe7
--- /dev/null
+++ b/docs/src/content/docs/es/guides/create-challenge.md
@@ -0,0 +1,60 @@
+---
+title: Crea tu propio desafío
+description: Guía para crear un desafío
+sidebar:
+ order: 5
+---
+
+Tienes una idea que quieres compartir, un error interesante con el que estás luchando en uno de tus proyectos privados o secundarios, o un tip de Angular que descubriste. Todas estas posibilidades son un buen punto de partida para crear un desafío y compartir la solución con los demás.
+
+Pero, ¿cómo empiezas a crear estos desafíos?
+
+## Configuración de Plantillas (Boilerplate)
+
+Para agilizar el proceso, he creado un generador Nx que configurará todo el boilerplate por ti y te preparará más rápido. La forma más sencilla de ejecutarlo es utilizando la consola Nx: ve a Nx Console > generate > @angular-challenges/cli - challenge
+
+### Parámetros
+
+#### parámetros obligatorios
+
+- title: El título que quieres darle a tu desafío.
+ :::note[Nota]
+ El título debe tener un máximo de 25 caracteres.
+ :::
+
+- challengeDifficulty: La dificultad que crees que tiene tu desafío. Hay tres niveles de dificultad: 🟢 fácil / 🟠 medio / 🔴 difícil
+
+- name: nombre de la aplicación Nx.
+ :::note[Nota]
+ Debe escribirse en **kebab-case**
+ :::
+
+- docRepository: La categoría de tu Desafío: Nx, Angular, Angular Performance, Rxjs, NgRx, Typescript.
+
+#### parámetros opcionales
+
+- directory: Si quieres que tu aplicación se encuentre en una carpeta específica dentro de `apps`.
+
+- addTest: Si quieres agregar configuración de pruebas.
+
+### Qué se crea
+
+- El generador creará todos los archivos necesarios para tener una nueva aplicación de trabajo. Todos estos archivos se crearán dentro de `apps/${directory}/${name}`
+
+- Se creará un archivo Markdown con la configuración mínima dentro de `docs/src/content/docs/challenges/${docRepository}`
+
+## Creación del Desafío
+
+Lo único que queda por hacer es crear tu desafío. 🚀
+
+:::danger[Importante]
+
+No olvides actualizar la documentación para presentar tu desafío y proporcionar tus instrucciones.
+
+:::
+
+¡Es tu turno de actuar! 💪
+
+## Envío de la Solución
+
+Después de una semana más o menos, no olvides proporcionar tu solución a tu desafío.
diff --git a/docs/src/content/docs/es/guides/faq.md b/docs/src/content/docs/es/guides/faq.md
new file mode 100644
index 0000000..37a9d27
--- /dev/null
+++ b/docs/src/content/docs/es/guides/faq.md
@@ -0,0 +1,17 @@
+---
+title: Preguntas Frecuentes
+description: Preguntas frecuentes sobre el proyecto
+sidebar:
+ order: 7
+---
+
+
+ ¿Por qué mi aplicación no se está iniciando o por qué encuentro errores en mi terminal cuando ejecuto `nx serve`?
+
+ La mayoría de las veces, este problema surge porque sus node_modules están desactualizados y necesita actualizarlos ejecutando `npm ci`.
+
+Si el proceso de instalación falla, puede resolverlo eliminando su carpeta node_modules usando el comando `rm -rf node_modules` o `npx npkill` y luego volviendo a ejecutar `npm ci`.
+
+Si el problema persiste, informe el problema [aquí](https://github.com/tomalaforge/angular-challenges/issues/new).
+
+
diff --git a/docs/src/content/docs/es/guides/getting-started.md b/docs/src/content/docs/es/guides/getting-started.md
new file mode 100644
index 0000000..c31c40b
--- /dev/null
+++ b/docs/src/content/docs/es/guides/getting-started.md
@@ -0,0 +1,57 @@
+---
+title: Inicio
+description: Una guía para comenzar con los Desafíos de Angular
+sidebar:
+ order: 1
+---
+
+Para comenzar con Desafió de Angular, siga estos pasos:
+
+## Crea una cuenta de Github
+
+Si desea enviar una solución, deberá tener su propia cuenta de GitHub. Además, tener una cuenta de GitHub siempre es beneficioso y es gratis.
+
+## Crea un fork del proyecto de github
+
+Navegue al [Repositorio de Desafíos de Angular](https://github.com/tomalaforge/angular-challenges) y haga clic en el Fork button in the header. This will create a copy of this repository on your own GitHub page.
+
+## Clone el repositorio en su máquina local
+
+Seleccione un directorio en su computadora local y clone este repositorio.
+
+Abra una terminal, navegue hasta el directorio elegido y escriba el siguiente comando:
+
+```bash
+git clone https://github.com/[YOUR_GITHUB_NAME]/angular-challenges.git
+```
+
+:::note
+Puede encontrar la URL de clonación haciendo clic en el botón <> Code en su propia instancia del repositorio de Desafíos de Angular.
+
+
+
+:::
+
+## Abra el proyecto en su IDE favorito
+
+Abra el proyecto en cualquier IDE de su elección.
+
+## Instale todas las dependencias
+
+```bash
+npm ci
+```
+
+## Escoja un desafío
+
+Su proyecto ahora está corriendo. El único paso restante es elegir un desafío 🚀
+
+Cada desafío consta de:
+
+- Nombre: indicando de qué se trata el desafío.
+- Número: orden de creación. El número no tiene ningún significado en particular, pero ayuda para hacer referencia en la sección de Pull Request de Github.
+- Badge: ayuda a visualizar el grado de dificultad. Es totalmente subjetivo 😅
+ - 🟢 fácil
+ - 🟠 medio
+ - 🔴 difícil
diff --git a/docs/src/content/docs/es/guides/rebase.md b/docs/src/content/docs/es/guides/rebase.md
new file mode 100644
index 0000000..ff54314
--- /dev/null
+++ b/docs/src/content/docs/es/guides/rebase.md
@@ -0,0 +1,55 @@
+---
+title: Hacer rebase a tu rama
+description: Guía para hacer rebase a tu rama
+sidebar:
+ order: 6
+---
+
+En ocasiones, pueden agregarse cambios al proyecto. Intentaré hacer cambios que no rompan nada, pero a veces es inevitable.
+
+La mayoría de las veces, no necesitarás hacer rebase a tu solución, pero aquí hay una guía para ayudarte a saber cómo hacerlo en caso de ser necesario.
+
+:::note[Nota]
+Esta guía es aplicable a cualquier Proyecto de Código Abierto.
+:::
+
+## Pasos para hacer rebase a tu rama
+
+### Sincroniza tu repositorio
+
+Primero, necesitas sincronizar tu fork para asegurarte de que esté actualizado con el repositorio bifurcado.
+
+Puedes lograr esto haciendo clic en el botón Sync fork en la página principal de tu fork.
+
+
+
+La imagen de arriba muestra que mi rama está detrás de la rama principal por 8 commits, y necesito sincronizarla para estar actualizada.
+
+
+
+### Abre una terminal
+
+Abre cualquier terminal de tu elección, ya sea la de tu IDE favorito o una instancia independiente.
+
+### Git
+
+Sigue los siguientes comandos para hacer rebase a tu rama local:
+
+- git checkout main
+- git pull
+- git checkout [tu rama]
+- git rebase main
+- Resuelve los conflictos
+
+En este paso, el rebase puede detenerse porque tu rama local tiene archivos conflictivos con la rama principal. Corrígelos. Después de esto:
+
+- git add .
+- git rebase --continue
+
+Si tu rama no tiene conflictos, se mostrará un mensaje de éxito.
+
+### Envía tu trabajo de vuelta a la rama remota
+
+Finalmente, envía tu trabajo de vuelta a GitHub:
+
+- git push -f
diff --git a/docs/src/content/docs/es/guides/resolve-challenge.md b/docs/src/content/docs/es/guides/resolve-challenge.md
new file mode 100644
index 0000000..7316050
--- /dev/null
+++ b/docs/src/content/docs/es/guides/resolve-challenge.md
@@ -0,0 +1,89 @@
+---
+title: Resolver un Desafío
+description: Guía para resolver un desafío
+sidebar:
+ order: 2
+---
+
+En esta guía, aprenderás cómo resolver un desafío y enviar una respuesta al repositorio principal de Github.
+
+## Introducción
+
+Este repositorio ha sido creado utilizando [Nx](https://nx.dev/getting-started/intro). Nx es un monorepositorio que te permite almacenar múltiples aplicaciones dentro del mismo espacio de trabajo. Cada desafío es una aplicación separada. Si abres el directorio `apps`, encontrarás múltiples directorios, cada uno relacionado con un desafío específico. Cada directorio representa una aplicación `Nx` completa e independiente. Para ejecutar e iniciar una, abre tu terminal y ejecuta:
+
+```bash
+npx nx serve
+```
+
+:::note[Nota]
+Si no estás seguro de tu `NOMBRE_DE_LA_APLICACION`, abre el archivo README.md. El comando `serve` está escrito allí, con un enlace a la documentación del desafío.
+:::
+
+:::note[Nota]
+Si `nx` está instalado globalmente en tu dispositivo, puedes omitir el uso de `npx`.
+
+Para instalar `nx` globalmente, ejecuta
+
+```bash
+npm i -g nx
+```
+
+:::
+
+## Crear una Rama de Git
+
+Antes de comenzar a implementar tu solución para resolver un desafío, crea una rama de git para comprometer tu trabajo.
+
+```bash
+git checkout -b
+```
+
+## Resolver el Desafío
+
+Sigue las instrucciones para resolver el desafío.
+
+## Hacer Commit y Enviar tu Trabajo
+
+El último paso es hacer `commit` a tu trabajo siguiendo las [Directrices Convencionales](https://www.conventionalcommits.org/en/v1.0.0/).
+
+Finalmente, envía tu trabajo al repositorio remoto con el siguiente comando
+
+```bash
+ git push --set-upstream origin
+```
+
+:::tip[No es necesario que lo memorices]
+No tienes que recordar el comando con precisión. Solo necesitas recordar `git push` y si es la primera vez que estás enviando esta rama, `git` te proporcionará el comando completo.
+:::
+
+## Enviar tu Trabajo al Repositorio Principal
+
+Ahora, todo tu trabajo está ubicado dentro de tu instancia local del repositorio de Desafíos de Angular.
+
+El siguiente paso es ir a la página principal de [Desafíos de Angular](https://github.com/tomalaforge/angular-challenges) y crear una nueva Pull Request.
+
+Si no es asi, es posible que hayas hecho incorrectamente uno de los pasos anteriores o puedes ir a la pestaña Pull Request y hacer click en el botón New pull request.
+
+Una vez hayas escogido las dos ramas a comparar, deberías llegar a la siguiente página:
+
+
+
+En la sección de título, comienza con Answer: seguido de tu challenge number. Después de eso, eres libre de agregar cualquier cosa que desees.
+
+:::danger[Importante]
+Esto es muy importante. Le permite a otros saber qué desafío estás intentando resolver.
+:::
+
+En la sección de descripción, puedes agregar preguntas, problemas que hayas encontrado o cualquier otra cosa que quieras compartir. Puedes dejarlo vacío si no tienes nada que decir.
+
+Ahora puedes hacer click en Create pull request.
+
+Lo leeré y comentaré cuando tenga algo de tiempo libre.
+
+:::note[Nota]
+Todos son bienvenidos a comentar y leer otros PR.
+:::
+
+:::tip[Campeón de OSS]
+🔥 Una vez que hayas completado este tutorial, estarás listo para contribuir a cualquier otro repositorio público de Github y enviar un PR. Es tan fácil como eso. 🔥
+:::
diff --git a/docs/src/content/docs/es/index.mdx b/docs/src/content/docs/es/index.mdx
new file mode 100644
index 0000000..f965b16
--- /dev/null
+++ b/docs/src/content/docs/es/index.mdx
@@ -0,0 +1,72 @@
+---
+title: Bienvenido a Desafíos de Angular
+description: Comienza resolviendo esos desafíos y convirtiéndote en un mejor ingeniero de FrontEnd Angular.
+template: splash
+noCommentSection: true
+hero:
+ tagline: ¡Comienza ahora y conviértete en un experto en Angular!
+ image:
+ file: ../../../assets/angular-challenge.webp
+ actions:
+ - text: Inicio
+ link: /es/guides/getting-started/
+ icon: right-arrow
+ variant: primary
+ - text: Ir al Desafío mas Reciente
+ link: /es/challenges/angular/39-injection-token/
+ icon: rocket
+ - text: Dale una estrella
+ link: https://github.com/tomalaforge/angular-challenges
+ icon: github
+ variant: secondary
+---
+
+import { Card, CardGrid } from '@astrojs/starlight/components';
+import MyIcon from '../../../components/MyIcon.astro';
+
+
+
+ Este repositorio contiene 39 desafíos relacionados con Angular, Nx, RxJS, Ngrx y Typescript.
+ Estos desafíos se resuelven en torno a problemas de la vida real o características específicas para mejorar tus habilidades.
+
+
+
+ Uno de los objetivos de este repositorio es reducir la barrera de
+ entrada para el Software de Código Abierto (OSS). Al participar en estos
+ desafíos, aprenderás cómo empezar a contribuir a cualquier otro Proyecto de
+ Código Abierto.
+
+
+
+ Aprender y practicar un framwork siempre es un desafío. Este conjunto de
+ desafíos proporciona casos de uso del mundo real para aplicar lo que has
+ estado aprendiendo. Cualquiera puede comentar u ofrecer asistencia.{' '}
+
+ Aprender solo es genial, pero aprender junto a otros te llevará más lejos.
+
+
+
+
+ ¿Tienes un problema, un error interesante o una idea? No lo dudes;{' '}
+ crea tus propios desafíos sin perder tiempo.
+
+
+
+Completar estos desafíos te preparará para cualquier desafío técnico que puedas encontrar en un rol de frontend durante las entrevistas.
+
+
+
+---
+
+
+
+