From 3307d0570fa135c60cbfda66ca247912bad55b84 Mon Sep 17 00:00:00 2001 From: Nelson Gutierrez Date: Sun, 12 Nov 2023 16:15:26 -0600 Subject: [PATCH] feat(docs): add internationalization and add spanish lang --- docs/astro.config.mjs | 22 +++++ .../es/challenges/angular/1-projection.md | 37 ++++++++ .../challenges/angular/39-injection-token.md | 31 +++++++ .../content/docs/es/guides/checkout-answer.md | 36 ++++++++ docs/src/content/docs/es/guides/contribute.md | 20 +++++ .../docs/es/guides/create-challenge.md | 60 +++++++++++++ docs/src/content/docs/es/guides/faq.md | 17 ++++ .../content/docs/es/guides/getting-started.md | 57 ++++++++++++ docs/src/content/docs/es/guides/rebase.md | 55 ++++++++++++ .../docs/es/guides/resolve-challenge.md | 89 +++++++++++++++++++ docs/src/content/docs/es/index.mdx | 72 +++++++++++++++ 11 files changed, 496 insertions(+) create mode 100644 docs/src/content/docs/es/challenges/angular/1-projection.md create mode 100644 docs/src/content/docs/es/challenges/angular/39-injection-token.md create mode 100644 docs/src/content/docs/es/guides/checkout-answer.md create mode 100644 docs/src/content/docs/es/guides/contribute.md create mode 100644 docs/src/content/docs/es/guides/create-challenge.md create mode 100644 docs/src/content/docs/es/guides/faq.md create mode 100644 docs/src/content/docs/es/guides/getting-started.md create mode 100644 docs/src/content/docs/es/guides/rebase.md create mode 100644 docs/src/content/docs/es/guides/resolve-challenge.md create mode 100644 docs/src/content/docs/es/index.mdx diff --git a/docs/astro.config.mjs b/docs/astro.config.mjs index 74984f3..4224e1b 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: [ @@ -51,6 +62,17 @@ export default defineConfig({ TableOfContents: './src/components/TableOfContents.astro', PageTitle: './src/components/PageTitle.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..c73e104 --- /dev/null +++ b/docs/src/content/docs/es/challenges/angular/1-projection.md @@ -0,0 +1,37 @@ +--- +title: 🟢 Projecció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. + +![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 +``` 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..bc8d7cc --- /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 (Biolerplate) + +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 + 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 + 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. + +![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: + +- 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. + +![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 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: + +![Vista de nuevo pull request](../../../../assets/new-pull-request.png) + +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. + + + +--- + +
+ + + Patrocina el Proyecto + +
+ +
+ Creado por{' '} + Thomas Laforge - + Powered by 🌟 Starlight +