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

feat(docs): add internationalization and add spanish lang

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

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). <b>Nx</b> 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 <NOMBRE_DE_LA_APLICACION>
+```
+
+:::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 <NOMBRE_DE_LA_RAMA>
+```
+
+## 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 <NOMBRE_DE_LA_RAMA>
+```
+
+:::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 <b>Pull Request</b> y hacer click en el botón <span class="github-success-btn">New pull request</span>.
+
+Una vez hayas escogido las dos ramas a comparar, deberías llegar a la siguiente página:
+
+![Vista de nuevo pull request](../../../../assets/new-pull-request.png)
+
+En la sección de título, comienza con <b>Answer:</b> seguido de tu <b>challenge number</b>. 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 <span class="github-success-btn">Create pull request</span>.
+
+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. 🔥
+:::

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';
+
+<CardGrid>
+<Card title="39 Desafíos">
+   Este repositorio contiene 39 desafíos relacionados con <b>Angular</b>, <b>Nx</b>, <b>RxJS</b>, <b>Ngrx</b> y <b>Typescript</b>. 
+    Estos desafíos se resuelven en torno a problemas de la vida real o características específicas para mejorar tus habilidades.
+</Card>
+
+<Card title="Conviértete en un Contribuidor de OSS">
+  Uno de los objetivos de este repositorio es <b>reducir la barrera</b> 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.
+</Card>
+
+<Card title="Aprende Junto a Otros">
+  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.{' '}
+  <b>
+    Aprender solo es genial, pero aprender junto a otros te llevará más lejos.
+  </b>
+</Card>
+
+<Card title="Contribuye">
+  ¿Tienes un problema, un error interesante o una idea? No lo dudes;{' '}
+  <b>crea tus propios desafíos</b> sin perder tiempo.
+</Card>
+
+<Card title="Prepárate para Entrevistas">
+Completar estos desafíos te preparará para cualquier desafío técnico que puedas encontrar en un rol de frontend durante las entrevistas.
+</Card>
+</CardGrid>
+
+---
+
+<div class="article-footer">
+  <a href="https://github.com/sponsors/tomalaforge" alt="Sponsor link">
+    <MyIcon name="fillHeart" size="1.2rem" color="white" />
+    Patrocina el Proyecto
+  </a>
+</div>
+
+<div class="main-page-footer">
+  Creado por{' '}
+  <a href="https://github.com/tomalaforge?tab=repositories">Thomas Laforge</a> -
+  Powered by 🌟 <a href="https://starlight.astro.build/">Starlight</a>
+</div>