Merge pull request tomalaforge#278 from nelsongutidev/feat/add-internationalization-docs

feat(docs): add internationalization and add spanish lang

Author: tomalaforge

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',
+ },
+ },
  }),
  ],
 });

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 <b>ng-content</b> y <b>ngTemplateOutlet</b> puede mejorar significativamente su capacidad para crear componentes reutilizables.
+
+Puedes aprender todo sobre <b>ng-content</b> [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 <b>ngTemplateOutlet</b>, 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
+
+- <b>Debes</b> 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.

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
+
+<details>
+ <summary>Pista 1</summary>
+
+Mirar este [blog post](https://itnext.io/stop-being-scared-of-injectiontokens-ab22f72f0fe9) puede ser de gran ayuda.
+
+</details>

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.
+
+![Sync project header](../../../../assets/fork-sync.png)
+
+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.
+
+![Sync project update modal](../../../../assets/sync-fork-update.png)
+
+### 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).
+
+![PR header](../../../../assets/PR-header.png)
+
+A continuación, ve a cualquier terminal dentro de tu directorio de proyecto y ejecuta el siguiente comando:
+
+```bash
+gh pr checkout <ID>
+```

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)

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 <b>Nx Console > generate > @angular-challenges/cli - challenge</b>
+
+### Parámetros
+
+#### parámetros obligatorios
+
+- <b>title</b>: El título que quieres darle a tu desafío.
+ :::note[Nota]
+ El título debe tener un máximo de 25 caracteres.
+ :::
+
+- <b>challengeDifficulty</b>: La dificultad que crees que tiene tu desafío. Hay tres niveles de dificultad: 🟢 fácil / 🟠 medio / 🔴 difícil
+
+- <b>name</b>: nombre de la aplicación Nx.
+ :::note[Nota]
+ Debe escribirse en **kebab-case**
+ :::
+
+- <b>docRepository</b>: La categoría de tu Desafío: Nx, Angular, Angular Performance, Rxjs, NgRx, Typescript.
+
+#### parámetros opcionales
+
+- <b>directory</b>: Si quieres que tu aplicación se encuentre en una carpeta específica dentro de `apps`.
+
+- <b>addTest</b>: 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.

docs/src/content/docs/es/guides/faq.md

@@ -0,0 +1,17 @@
+---
+title: Preguntas Frecuentes
+description: Preguntas frecuentes sobre el proyecto
+sidebar:
+ order: 7
+---
+
+<details>
+ <summary>¿Por qué mi aplicación no se está iniciando o por qué encuentro errores en mi terminal cuando ejecuto `nx serve`?</summary>
+ 
+ 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).
+
+</details>

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 <b>Desafió de Angular</b>, 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 <span class="github-neutral-btn"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-repo-forked mr-2">
+<path d="M5 5.372v.878c0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75v-.878a2.25 2.25 0 1 1 1.5 0v.878a2.25 2.25 0 0 1-2.25 2.25h-1.5v2.128a2.251 2.251 0 1 1-1.5 0V8.5h-1.5A2.25 2.25 0 0 1 3.5 6.25v-.878a2.25 2.25 0 1 1 1.5 0ZM5 3.25a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Zm6.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm-3 8.75a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Z"></path></svg>Fork</span> 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 <span class="github-success-btn"><> Code</span> en su <b>propia instancia</b> del repositorio de Desafíos de Angular.
+
+![Header of github workpspace](../../../../assets/header-github.png)
+
+:::
+
+## 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:
+
+- <b>Nombre</b>: indicando de qué se trata el desafío.
+- <b>Número</b>: 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.
+- <b>Badge</b>: ayuda a visualizar el grado de dificultad. Es totalmente subjetivo 😅
+ - 🟢 fácil
+ - 🟠 medio
+ - 🔴 difícil

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.
+
+![Sync project header](../../../../assets/fork-sync.png)
+
+La imagen de arriba muestra que mi rama está detrás de la rama principal por 8 commits, y necesito sincronizarla para estar actualizada.
+
+![Sync project update modal](../../../../assets/sync-fork-update.png)
+
+### 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