diff --git a/.all-contributorsrc b/.all-contributorsrc index 9005b37..92783d5 100644 --- a/.all-contributorsrc +++ b/.all-contributorsrc @@ -3,16 +3,30 @@ "projectOwner": "tomalaforge", "repoType": "github", "repoHost": "https://github.com", - "files": [ - "README.md" - ], + "files": ["README.md"], "imageSize": 100, "commit": true, "commitConvention": "angular", "types": { "challenge": { "symbol": "🧩", - "description": "Created a challenge" + "description": "Create a challenge" + }, + "translation-es": { + "symbol": "🇪🇸", + "description": "Translate in Spanish" + }, + "translation-fr": { + "symbol": "🇫🇷", + "description": "Translate in French" + }, + "translation-pt": { + "symbol": "🇵🇹", + "description": "Translate in Portuguese" + }, + "translation-pt-BR": { + "symbol": "🇧🇷", + "description": "Translate in Brazilian Portuguese" } }, "contributors": [ @@ -27,7 +41,8 @@ "doc", "content", "ideas", - "design" + "design", + "translation-fr" ] }, { @@ -35,104 +50,84 @@ "name": "Alan Dragicevich", "avatar_url": "https://avatars.githubusercontent.com/u/31838230?v=4", "profile": "https://github.com/alan-bio", - "contributions": [ - "doc" - ] + "contributions": ["doc"] }, { "login": "edimitchel", "name": "Michel EDIGHOFFER", "avatar_url": "https://avatars.githubusercontent.com/u/2922851?v=4", "profile": "https://github.com/edimitchel", - "contributions": [ - "doc" - ] + "contributions": ["doc"] }, { "login": "gsgonzalez88", "name": "Gerardo Sebastian Gonzalez", "avatar_url": "https://avatars.githubusercontent.com/u/39884678?v=4", "profile": "https://github.com/gsgonzalez88", - "contributions": [ - "doc" - ] + "contributions": ["doc"] }, { "login": "marryday", "name": "Evseev Yuriy", "avatar_url": "https://avatars.githubusercontent.com/u/57489315?v=4", "profile": "https://github.com/marryday", - "contributions": [ - "bug" - ] + "contributions": ["bug"] }, { "login": "tomer953", "name": "Tomer953", "avatar_url": "https://avatars.githubusercontent.com/u/1807493?v=4", "profile": "https://github.com/tomer953", - "contributions": [ - "bug", - "doc", - "code" - ] + "contributions": ["bug", "doc", "code"] }, { "login": "jdegand", "name": "J. Degand", "avatar_url": "https://avatars.githubusercontent.com/u/70610011?v=4", "profile": "https://github.com/jdegand", - "contributions": [ - "doc" - ] + "contributions": ["doc"] }, { "login": "DeveshChau", "name": "Devesh Chaudhari", "avatar_url": "https://avatars.githubusercontent.com/u/9509673?v=4", "profile": "https://github.com/DeveshChau", - "contributions": [ - "code", - "bug", - "challenge" - ] + "contributions": ["code", "bug", "challenge"] }, { "login": "dmmishchenko", "name": "Dmitriy Mishchenko", "avatar_url": "https://avatars.githubusercontent.com/u/51910160?v=4", "profile": "https://github.com/dmmishchenko", - "contributions": [ - "doc" - ] + "contributions": ["doc"] }, { "login": "Sagardevkota", "name": "Sagar Devkota", "avatar_url": "https://avatars.githubusercontent.com/u/30800393?v=4", "profile": "http://www.sagardev.com.np", - "contributions": [ - "doc", - "code" - ] + "contributions": ["doc", "code"] }, { "login": "nelsongutidev", "name": "Nelson Gutierrez", "avatar_url": "https://avatars.githubusercontent.com/u/62297014?v=4", "profile": "https://nelsonguti.dev/", - "contributions": [ - "doc" - ] + "contributions": ["translation-es"] }, { "login": "ho-ssain", "name": "Hossain K. M.", "avatar_url": "https://avatars.githubusercontent.com/u/61125174?v=4", "profile": "https://github.com/ho-ssain", - "contributions": [ - "doc" - ] + "contributions": ["doc"] + }, + { + "login": "kabrunko-dev", + "name": "Diogo Nishikawa", + "avatar_url": "https://avatars.githubusercontent.com/u/142346548?v=4", + "profile": "https://github.com/kabrunko-dev/", + "contributions": ["translation-pt-BR"] } ], "contributorsPerLine": 7, diff --git a/README.md b/README.md index 613850b..5d6d898 100644 --- a/README.md +++ b/README.md @@ -34,7 +34,7 @@ Check [all 41 challenges](https://angular-challenges.vercel.app/) - + @@ -43,11 +43,12 @@ Check [all 41 challenges](https://angular-challenges.vercel.app/) - + - + + diff --git a/apps/performance/christmas-web-worker/src/app/app.component.ts b/apps/performance/christmas-web-worker/src/app/app.component.ts index ba55d27..6b9846b 100644 --- a/apps/performance/christmas-web-worker/src/app/app.component.ts +++ b/apps/performance/christmas-web-worker/src/app/app.component.ts @@ -11,11 +11,11 @@ import { UnknownPersonComponent } from './unknown-person/unknown-person.componen template: ` -
Progress: {{ loadingPercentage() }}%
+
Progress: {{ loadingPercentage() }}%
`, host: { class: `flex flex-col h-screen w-screen bg-[#1f75c0]`, diff --git a/apps/performance/christmas-web-worker/src/app/heavy-calculation.service.ts b/apps/performance/christmas-web-worker/src/app/heavy-calculation.service.ts index 84ce1e6..06dedd1 100644 --- a/apps/performance/christmas-web-worker/src/app/heavy-calculation.service.ts +++ b/apps/performance/christmas-web-worker/src/app/heavy-calculation.service.ts @@ -6,14 +6,14 @@ export class HeavyCalculationService { private loadingLength = signal(0); loadingPercentage = computed( - () => (this.loadingLength() * 100) / this.finalLength + () => (this.loadingLength() * 100) / this.finalLength, ); startLoading() { - this.randomHeavyCalculalationFunction(); + this.randomHeavyCalculationFunction(); } - private randomHeavyCalculalationFunction() { + private randomHeavyCalculationFunction() { for (let num = 2; num <= 10000000; num++) { let randomFlag = true; for (let i = 2; i <= Math.sqrt(num); i++) { diff --git a/apps/performance/christmas-web-worker/src/app/unknown-person/unknown-person.component.ts b/apps/performance/christmas-web-worker/src/app/unknown-person/unknown-person.component.ts index 1682ddf..c230a4c 100644 --- a/apps/performance/christmas-web-worker/src/app/unknown-person/unknown-person.component.ts +++ b/apps/performance/christmas-web-worker/src/app/unknown-person/unknown-person.component.ts @@ -4,16 +4,16 @@ import { Component, Input } from '@angular/core'; standalone: true, template: `
@if (step !== 100) {
+ class="relative left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"> Who is here?
}
-
Happy Christmas !!!
+
Happy Christmas !!!
diff --git a/docs/astro.config.mjs b/docs/astro.config.mjs index 23bfa5a..fa9feca 100644 --- a/docs/astro.config.mjs +++ b/docs/astro.config.mjs @@ -4,6 +4,8 @@ import { defineConfig } from 'astro/config'; export const locales = { root: { label: 'English', lang: 'en' }, es: { label: 'Español', lang: 'es' }, + fr: { label: 'Français', lang: 'fr' }, + 'pt-br': { label: 'Português (Brasil)', lang: 'pt-BR' }, }; // https://astro.build/config @@ -28,6 +30,8 @@ export default defineConfig({ autogenerate: { directory: 'guides' }, translations: { es: 'Guías', + fr: 'Guides', + 'pt-BR': 'Guias', }, }, { @@ -35,6 +39,8 @@ export default defineConfig({ autogenerate: { directory: 'challenges' }, translations: { es: 'Desafíos', + fr: 'Challenges', + 'pt-BR': 'Desafios' }, }, ], @@ -73,6 +79,14 @@ export default defineConfig({ label: 'Español', lang: 'es', }, + fr: { + label: 'Français', + lang: 'fr', + }, + 'pt-br': { + label: 'Português (Brasil)', + lang: 'pt-BR', + }, }, }), ], diff --git a/docs/src/content/docs/challenges/performance/40-christmas-web-worker.md b/docs/src/content/docs/challenges/performance/40-christmas-web-worker.md index 0e6556c..a1b81eb 100644 --- a/docs/src/content/docs/challenges/performance/40-christmas-web-worker.md +++ b/docs/src/content/docs/challenges/performance/40-christmas-web-worker.md @@ -1,7 +1,7 @@ --- title: 🟠 Web workers description: Challenge 40 is about learning how to create and use a web worker -author: Thomas Laforge +author: thomas-laforge challengeNumber: 40 command: performance-christmas-web-worker sidebar: @@ -19,14 +19,16 @@ This application is basic. We click on the **Discover** button to reveal the sur Since JavaScript is single-threaded, when we perform a heavy task, the browser cannot update the UI or respond to mouse clicks or any events. To free the main thread, the goal is to isolate the heavy computation into a different thread. To do so, we will need to use web workers. Web workers can run any scripts in the background, in isolation from the main thread, allowing the browser to still provide your user with a good experience. -In Angular, this technology is often underused, however, it's straightforward to create one. There is a schematic that you can find here. +In Angular, this technology is often underused, however, it's straightforward to create one. There is a schematic that you can find [here](https://angular.io/guide/web-worker). ## Statement The goal of this challenge is to create a smooth animation by isolating the heavy computation function into a web worker. -First, create a web worker using the schematics, then move the issuing function. Finally, the animation should be smooth and provide an awesome user experience. - -### Note +First, create a web worker using a schematic, then move the issuing function. Finally, the animation should be smooth and the progress percentage should update, which will provide an awesome user experience. +:::note Since we are inside an Nx workspace, simply replace the `ng` command with `nx` when running the schematic. + +If `nx` is not install globally on your machine, prefix your command with `npx`. +::: diff --git a/docs/src/content/docs/fr/guides/getting-started.md b/docs/src/content/docs/fr/guides/getting-started.md new file mode 100644 index 0000000..c74353a --- /dev/null +++ b/docs/src/content/docs/fr/guides/getting-started.md @@ -0,0 +1,57 @@ +--- +title: Comment démarrer +description: Un guide sur la manière de commencer avec sur Angular Challenges. +sidebar: + order: 1 +--- + +Pour commencer avec les Challenges Angular, suivez ces étapes : + +## Créez un compte Github + +Si vous souhaitez soumettre une réponse, vous devrez avoir votre propre compte GitHub. De plus, avoir un compte GitHub est toujours bénéfique et c'est gratuit. + +## Forkez le projet GitHub + +Accédez au [répertoire des Challenges Angular](https://github.com/tomalaforge/angular-challenges) et cliquez sur le bouton Fork dans l'en-tête. Cela créera une copie de ce dépôt sur votre propre page GitHub. + +## Clonez le dépôt sur votre machine locale + +Sélectionnez un répertoire sur votre ordinateur local et clonez ce dépôt. + +Ouvrez un terminal, accédez au répertoire choisi et tapez la commande suivante : + +```bash +git clone https://github.com/[VOTRE_NOM_GITHUB]/angular-challenges.git +``` + +:::note +Vous pouvez trouver l'URL de clonage en cliquant sur le bouton <> Code dans votre propre instance du dépôt des Challenges Angular. + +![Header of github workpspace](../../../../assets/header-github.png) + +::: + +## Ouvrez le projet dans votre IDE préféré + +Ouvrez le projet dans n'importe quel IDE de votre choix. + +## Installez toutes les dépendances + +```bash +npm ci +``` + +## Choisissez un challenge + +Votre projet est maintenant opérationnel. La seule étape restante est de choisir un challenge 🚀 + +Chaque challenge se compose de : + +- Nom : indiquant de quoi traite le défi. +- Numéro : ordre de création. Le numéro n'a pas de signification particulière mais aide pour la référence dans la section des Demandes de Tirage (Pull Requests) GitHub. +- Badge : aide à visualiser le degré de difficulté. C'est entièrement subjectif 😅 + - 🟢 facile + - 🟠 moyen + - 🔴 difficile diff --git a/docs/src/content/docs/fr/guides/resolve-challenge.md b/docs/src/content/docs/fr/guides/resolve-challenge.md new file mode 100644 index 0000000..e16ac5c --- /dev/null +++ b/docs/src/content/docs/fr/guides/resolve-challenge.md @@ -0,0 +1,93 @@ +--- +title: Résoudre un Challenge +description: Guide pour résoudre un challenge +sidebar: + order: 2 +--- + +Dans ce guide, vous apprendrez comment résoudre un challenge et soumettre une réponse sur le répertoire principal de Github. + +## Introduction + +Ce répertoire utilise [Nx](https://nx.dev/getting-started/intro). Nx est un monorépo qui vous permet de stocker plusieurs applications à l'intérieur du même espace de travail. Chaque challenge est une application distincte. Si vous ouvrez le répertoire `apps`, vous trouverez plusieurs dossiers, chacun lié à un challenge spécifique. Chaque dossier représente une application autonome complète `Nx`. Pour exécuter et démarrer l'une d'entre elles, ouvrez votre terminal et exécutez : + +```bash +npx nx serve +``` + +:::note +Si vous n'êtes pas sûr de votre `NOM_APPLICATION`, ouvrez le fichier README.md. La commande `serve` y est écrite, avec un lien vers la documentation du challenge. +::: + +:::note +Si vous installez `nx` globalement sur votre ordinateur, vous éviterez de préfixer chaque commande par `npx`. + +Pour installer `nx` globalement, exécutez + +```bash +npm i -g nx +``` + +::: + +## Créer une Branche Git + +Avant de commencer à résoudre un challenge, créez une branche git pour y ajouter vos modifications. + +```bash +git checkout -b +``` + +## Résoudre un Challenge + +Suivez les instructions décrites sur chaque Challenge pour le résoudre. + +## Commitez et Pousser votre Travail + +La dernière étape consiste à valider votre travail en suivant les [Conventional Guidelines](https://www.conventionalcommits.org/en/v1.0.0/). + +Enfin, poussez votre travail vers le répertoire distant avec la commande suivante + +```bash + git push --set-upstream origin +``` + +:::tip[Pas besoin de retenir la commande par coeur] +Vous n'avez pas besoin de mémoriser précisément la commande. Il vous suffit de vous rappeler `git push `et si c'est la première fois que vous poussez cette branche, `git` vous fournira la commande complète. +::: + +## Soumettre votre Travail sur le répertoire Principal + +Maintenant, tout votre travail se trouve dans votre instance locale du dépôt de Angular Challenges. + +La prochaine étape est de vous rendre sur la page principale de Angular Challenges et de créer une nouvelle Pull Request. + +Github devrait afficher en en-tête une notification pour vous aider à créer la pull request. + +Si ce n'est pas le cas, vous avez soit mal effectué l'une des étapes précédentes, soit vous pouvez vous rendre sur l'onglet Pull Request et cliquer sur le bouton New pull request. + +Une fois que vous avez choisi les deux branches à comparer, vous devriez arriver sur la page suivante : + +![New pull request screen](../../../../assets/new-pull-request.png) + +Dans la section du titre, commencez par Réponse : suivi de votre numéro de challenge. Ensuite, vous êtes libre d'ajouter tout ce que vous souhaitez. + +:::danger +C'est très important. Cela permet aux autres de savoir quel challenge vous tentez de résoudre. +::: + +Dans la section de description, vous pouvez ajouter des questions, des problèmes rencontrés ou tout autre contenu que vous souhaitez partager. Vous pouvez laisser vide si vous n'avez rien à dire. + +Vous pouvez maintenant cliquer sur Créer pull request. + +Je la lirai et commenterai quand j'aurai du temps libre. + +

Ne vous inquiétez pas si votre réponse n'est pas examinée immédiatement. Je le fais gratuitement et pendant mon temps libre. Si vous souhaitez me soutenir, vous pouvez le faire en me sponsorisant sur github. Cela validera que mon travail vous aide, vous ou votre équipe.

+ +:::note +Tout le monde peut commenter ou lire les Pull Requests des autres participants. +::: + +:::tip[Champion OSS] +🔥 Une fois que vous avez terminé ce tutoriel, vous êtes prêt à contribuer à n'importe quel répertoire public Github et à soumettre une PR. C'est aussi simple que ça. 🔥 +::: diff --git a/docs/src/content/docs/fr/index.mdx b/docs/src/content/docs/fr/index.mdx new file mode 100644 index 0000000..6907cdc --- /dev/null +++ b/docs/src/content/docs/fr/index.mdx @@ -0,0 +1,78 @@ +--- +title: Bienvenue sur Angular Challenges +description: Commence par résoudre ces défis et deviens un meilleur ingénieur FrontEnd Angular. +template: splash +noCommentSection: true +banner: + content: J'aurai moins de temps libre dans les deux prochains mois, donc ne vous inquiétez pas si vos pull requests prennent du temps à être examinées. +hero: + tagline: Commence maintenant et deviens un expert Angular ! + image: + file: ../../../assets/angular-challenge.webp + actions: + - text: C'est parti ! + link: /guides/getting-started/ + icon: right-arrow + variant: primary + - text: Aller au dernier Challenge + link: /challenges/performance/40-christmas-web-worker/ + icon: rocket + - text: Donne une étoile + link: https://github.com/tomalaforge/angular-challenges + icon: github + variant: secondary +--- + +import { Card, CardGrid } from '@astrojs/starlight/components'; +import MyIcon from '../../../components/MyIcon.astro'; + + + + Ce répertoire rassemble 40 défis liés à Angular, Nx, RxJS, Ngrx et Typescript. Ces défis portent sur des problèmes réels ou des fonctionnalités spécifiques pour améliorer vos compétences. + + + + L'un des objectifs de ce répertoire est de rendre plus accessible les + contributions aux logiciels Open Source (OSS). En résolvant ces défis, vous + apprendrez comment commencer à contribuer à n'importe quel projet Open Source. + + + + Apprendre et démarrer sur un nouveau framework est toujours difficile. Cette + série de défis propose des cas d'utilisation réels pour appliquer ce que vous + avez appris. N'importe qui peut commenter ou aider.{' '} + + Apprendre seul est bien, mais apprendre aux côtés des autres vous fera + progresser davantage et plus rapidement. + + + + + Avez-vous un problème, un bug intéressant ou une idée ? N'hésitez pas ;{' '} + créez vos propres challenges sans perdre de temps. + + + + Résoudre ces challenges vous préparera aux éventuels défis techniques que vous + pourriez rencontrer lors d'un entretien pour un rôle d'ingénieur frontend. + + + + Ce projet est gratuit et vise à le rester le plus longtemps possible. Cependant, tout est réalisé pendant mon temps libre, y compris la création de challenges et la relecture des pull requests. Le sponsoring peut me soutenir et contribuer à la croissance du projet. + + + +--- + +
+ + + Sponsoriser le Project + +
+ +
+ Créer par{' '} + Thomas Laforge - + Réaliser grâce à 🌟 Starlight +
diff --git a/docs/src/content/docs/pt-br/challenges/angular/1-projection.md b/docs/src/content/docs/pt-br/challenges/angular/1-projection.md new file mode 100644 index 0000000..d507cc9 --- /dev/null +++ b/docs/src/content/docs/pt-br/challenges/angular/1-projection.md @@ -0,0 +1,37 @@ +--- +title: 🟢 Projeção +description: Desafio 1 é sobre aprender a projetar elementos DOM atravé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: Vídeo de projeção por Arthur Lannelucq + flag: FR +sidebar: + order: 1 +--- + +## Informação + +Em Angular, projeção de conteúdo é uma técnica robusta para criar componente altamente personalizados. Usar e entender os conceitos do ng-content e ngTemplateOutlet pode melhorar significativamente sua habilidade na criação de componentes compartilháveis. + +Você pode aprender tudo sobre ng-content [aqui](https://angular.io/guide/content-projection#projecting-content-in-more-complex-environments), desde projeção simples até casos mais complexos. + +Para aprender sobre ngTemplateOutlet, você pode acessar a documentação [aqui](https://angular.io/api/common/NgTemplateOutlet) junto a alguns exemplos básicos. + +Com essas duas ferramentas em mãos, você está pronto para realizar o desafio. + +## Declaração + +Você começará com uma aplicação totalmente funcional que inclui um dashboard, que possui um cartão de professor e de estudante. O objetivo é implementar o cartão de cidade. + +Apesar da aplicação funcionar, a experiência do desenvolvedor (DX) está nem um pouco otimizada. Toda vez que você precisar implementar um novo cartão, você terá que modificar o `card.component.ts`. Em projetos reais, esse componente pode ser compartilhado entre várias aplicações. O objetivo do desafio é criar um `CardComponent` que possa ser personalizado sem nenhuma modificação. Uma vez criado o componente, você pode começar a implementar o `CityCardComponent` e assegurar que não mexerá no `CardComponent`. + +## Restrições + +- Você deve refatorar o `CardComponent` e `ListItemComponent`. +- A diretiva `NgFor` deve ser declarada e permanecer dentro do `CardComponent`. Você pode ficar instigado em querer mover ela para o `ParentCardComponent` como `TeacherCardComponent`. +- `CardComponent` não deve conter nenhum `NgIf` ou `NgSwitch`. +- CSS: tente evitar usar `::ng-deep`. Ache uma maneira melhor para lidar com o CSS. diff --git a/docs/src/content/docs/pt-br/guides/checkout-answer.md b/docs/src/content/docs/pt-br/guides/checkout-answer.md new file mode 100644 index 0000000..425c408 --- /dev/null +++ b/docs/src/content/docs/pt-br/guides/checkout-answer.md @@ -0,0 +1,48 @@ +--- +title: Verifique a resposta dos outros +description: Guia para verificar a resposta de outra pessoa +sidebar: + order: 3 +--- + +Todas as respostas do Desafios Angular são apresentadas na forma de Pull Request (PR). Para ver e seguir elas, navegue pela página **Files Changes** no GitHub. Entretanto, entender e seguir esse processo pode não ser direto se você não estiver familiarizado com a interface. Muitas vezes, você pode preferir verificar a branch e revisar a solução na sua IDE de preferência. + +Este guia foi criado para ajudar você a conseguir isso. + +## Confire PR de outra pessoa localmente + +### Sincronize seu repositório + +Primeiro, você precisa sincronizar seu fork para garantir que ele está atualizado com o repositório bifurcado. + +Isso pode ser feito clicando no botão Sync fork na página principal de seu fork. + +![Sync project header](../../../../assets/fork-sync.png) + +A imagem acima mostra que minha branch está atrás da branch principal por 8 commits, e será necessário sincronizá-la para deixar ela atualizada. + +![Sync project update modal](../../../../assets/sync-fork-update.png) + +### Confira localmente + +Vá até o PR que desejar conferir localmente e pegue seu ID. Você o achará no título do PR (como mostrado abaixo). + +![PR header](../../../../assets/PR-header.png) + +Depois, abra um terminal dentro do diretório de seu projeto e execute o seguinte comando: + +```bash +gh pr checkout +``` + +Se você não lembrar o comando, clique no butão <> Code no lado direito do cabeçalho e você poderá copiar/colar o comando. + +![PR code modal](../../../../assets/PR-code-btn-modal.png) + +:::note[Nota] +Se o comando não funcionar ou fracassar, a CLI do GitHub vai guiar você durante o processo. +::: + +🔥 Agora você pode navegar nas soluções localmente e rodá-las para testar. 🔥 + + diff --git a/docs/src/content/docs/pt-br/guides/contribute.md b/docs/src/content/docs/pt-br/guides/contribute.md new file mode 100644 index 0000000..686830f --- /dev/null +++ b/docs/src/content/docs/pt-br/guides/contribute.md @@ -0,0 +1,20 @@ +--- +title: Contribua +description: Guia para contribuir +sidebar: + order: 4 +--- + +Você pode contribuir para este repositório das seguintes maneiras: + +🔥 Criar um novo desafio seguindo as instruções [aqui](/pt-br/guides/create-challenge). + +🔥 Responder desafios e submeter sua resposta (guia [aqui](/pt-br/guides/resolve-challenge)). + +🔥 Comentar as soluções de outras pessoas dando feedback construtivo e solidário. + +🔥 Corrigindo erros de digitação (typos) ou erros de inglês na documentação. + +🔥 Enviar um problema (issue) para sugerir novas ideias de desafios ou reportar um bug. + +🔥 Patrocinar o projeto [aqui](https://github.com/sponsors/tomalaforge). diff --git a/docs/src/content/docs/pt-br/guides/create-challenge.md b/docs/src/content/docs/pt-br/guides/create-challenge.md new file mode 100644 index 0000000..d081e0b --- /dev/null +++ b/docs/src/content/docs/pt-br/guides/create-challenge.md @@ -0,0 +1,54 @@ +--- +title: Crie seu próprio desafio +description: Guia para criar seu próprio desafio +sidebar: + order: 5 +--- + +Você tem uma ideia que gostaria de compartilhar, um bug interessante que você está batendo a cabeça em um de seus projetos pessoais ou um truque no Angular que você descobriu. Todas essas possibilidades são um bom ponto de partida para criar um desafio e compartilhar a solução com as outras pessoas. + +Mas como você pode criar esses desafios? + +## Código Boilerplate + +Para simplificar o processo, criei um gerador Nx que configurará todo código boilerplate para você começar mais rápido. A maneira mais fácil de rodar o código, é usando o console Nx: vá para Nx Console > generate > @angular-challenges/cli - challenge + +### Parâmetros + +#### parâmetros obrigatórios + +- title: O título que você deseja dar para seu desafio. + :::note[Nota] + O título deve ter no máximo 25 caracteres. + ::: + +- challengeDifficulty: A dificuldade que você acredita que o desafio tem. Têm três níveis de dificuldade: 🟢 fácil / 🟠 médio / 🔴 difícil +- name: nome da aplicação Nx. + :::note[Nota] + Deve ser escrito em **kebab-case**. + ::: +- docRepository: A categoria do seu desafio: Nx, Angular, Angular Performance, Rxjs, NgRx, Typescript. + +#### parâmetros opcionais + +- directory: Se você quiser que sua aplicação esteja localizada dentro de uma pasta específica de `apps`. +- addTest: Se você quer adicionar configuração de testes. + +### O que é criado + +- O gerador criará todos os arquivos necessários para ter uma nova aplicação funcional. Todos esses arquivos serão criado dentro de `apps/${directory}/${name}` +- Um arquivo Markdown com uma configuração mínima será criado dentro de `docs/src/content/docs/challenges/${docRepository}` + +## Criação do Desafio + +A única coisa que falta é criar seu desafio. 🚀 + +:::danger[Importante] +Não esqueça de atualizar a documentação para introduzir seu desafio e providenciar suas instruções. +::: + +É sua vez de agir!!! 💪 + +## Submissão da Solução + +Depois de uma semana mais ou menos, não esqueça de providenciar sua solução para seu desafio. diff --git a/docs/src/content/docs/pt-br/guides/faq.md b/docs/src/content/docs/pt-br/guides/faq.md new file mode 100644 index 0000000..4d87d45 --- /dev/null +++ b/docs/src/content/docs/pt-br/guides/faq.md @@ -0,0 +1,17 @@ +--- +title: FAQ +description: Respostas para perguntas +sidebar: + order: 7 +--- + +
+ Por que minha aplicação não roda ou por que eu encontro erros no meu terminal quando executo `nx serve`? + + Na maioria das vezes, o problema surge por que seu `node_modules` está desatualizado e você precisa atualizá-lo executando o comando `npm ci`. + +Se a instalação fracassar, você pode resolver deletando o diretório `node_modules` através do comando `rm -rf node_modules` ou `npx npkill`, e depois executar `npm ci` novamente. + +Se o problema persistir, por favor reporte ele [aqui](https://github.com/tomalaforge/angular-challenges/issues/new). + +
diff --git a/docs/src/content/docs/pt-br/guides/getting-started.md b/docs/src/content/docs/pt-br/guides/getting-started.md new file mode 100644 index 0000000..7d87c60 --- /dev/null +++ b/docs/src/content/docs/pt-br/guides/getting-started.md @@ -0,0 +1,57 @@ +--- +title: Começando +description: Um guia de como começar com Desafios Angular. +sidebar: + order: 1 +--- + +Para começar com Desafios Angular, siga os seguintes passos: + +## Crie uma conta GitHub + +Se você desejar submeter uma resposta, será necessário ter uma conta pessoal no GitHub. Além disso, ter uma conta GitHub é sempre benéfico e é de graça. + +## Crie um fork do projeto GitHub + +Navegue para o [reposítório do Desafios Angular](https://github.com/tomalaforge/angular-challenges) e clique no botão Fork no cabeçalho. Isso criará uma cópia do repositório no seu GitHub pessoal. + +## Clone o repositório para sua máquina local + +Escolha um diretório/pasta no seu computador e clone o repositório. + +Abra um terminal, navegue até a pasta selecionada e digite o comando: + +```bash +git clone https://github.com/[SEU_NOME_GITHUB]/angular-challenges.git +``` + +:::note[Nota] +Você pode achar a URL para clonar clicando no botão <> Code na sua própria instância do repositório do Desafios Angular. + +![Header of github workpspace](../../../../assets/header-github.png) + +::: + +## Abra o projeto na sua IDE favorita + +Abra o projeto em uma IDE de sua escolha. + +## Instale todas dependências + +```bash +npm ci +``` + +## Escolha um desafio + +O seu projeto está pronto e funcional. O que falta agora é escolher um desafio 🚀 + +Cada desafio consiste em: + +- Nome: indica sobre o que o desafio é. +- Número: ordem de criação. O número não tem nenhum significado, mas ajuda na referência para a seção de Pull Request no GitHub. +- Indicador: ajuda a visualizar o grau de dificuldade. É totalmente subjetivo 😅 + - 🟢 fácil + - 🟠 médio + - 🔴 difícil diff --git a/docs/src/content/docs/pt-br/guides/rebase.md b/docs/src/content/docs/pt-br/guides/rebase.md new file mode 100644 index 0000000..38973c2 --- /dev/null +++ b/docs/src/content/docs/pt-br/guides/rebase.md @@ -0,0 +1,55 @@ +--- +title: Rebase sua branch +description: Guia para realizar rebase em uma branch e atualizá-la com as mudanças mais recentes +sidebar: + order: 6 +--- + +De tempos em tempos, mudanças podem ser adicionadas no projeto. Eu tentarei fazer mudanças que não quebrem nada, mas algumas vezes é inevitável. + +Na maioria das vezes, você não precisará fazer rebase na sua solução, mas aqui está um guia para ajudar em como fazer isso. + +:::note[Nota] +Este guia é aplicável para qualquer Projeto de Código Aberto. +::: + +## Passos para fazer rebase na sua branch + +### Sincronize seu repositório + +Primeiro, você precisa sincronizar seu fork para garantir que está tudo atualizado com o repositório bifurcado. + +Você pode fazer isso clicando no botão Sync fork na página principal de seu fork. + +![Sync project header](../../../../assets/fork-sync.png) + +A imagem acima mostra que minha branch está atrás da branch principal por 8 commits e eu preciso sincronizar para atualizar ela com as mudanças mais recentes. + +![Sync project update modal](../../../../assets/sync-fork-update.png) + +### Abra um terminal + +Abra um terminal de sua escolha, pode ser tanto na sua IDE favorita ou uma instância independente. + +### Git + +Siga os seguintes comandos para realizar um rebase na sua branch local: + +- git checkout main +- git pull +- git checkout [sua branch] +- git rebase main +- Resolva Conflitos + +Neste passo, o rebase pode parar, porque sua branch local tem arquivos conflitantes com a branch principal. Corrija-os e depois disso feito: + +- git add . +- git rebase --continue + +Se sua branch não tem nenhum conflito, uma mensagem de sucesso será mostrada. + +### Faça um Push do seu trabalho para a branch remota + +Por último, faça um push do seu trabalho de volta para o GitHub: + +- git push -f diff --git a/docs/src/content/docs/pt-br/guides/resolve-challenge.md b/docs/src/content/docs/pt-br/guides/resolve-challenge.md new file mode 100644 index 0000000..27e2393 --- /dev/null +++ b/docs/src/content/docs/pt-br/guides/resolve-challenge.md @@ -0,0 +1,93 @@ +--- +title: Resolva um desafio +description: Guia de como resolver um desafio +sidebar: + order: 2 +--- + +Neste guia, você aprenderá como resolver um desafio e submeter uma resposta para o repositório principal no GitHub. + +## Introdução + +Este repositório é feito com [Nx](https://nx.dev/getting-started/intro). Nx é um monorepositório que permite armazenar múltiplas aplicações dentro de um mesmo espaço de trabalho. Cada desafio é uma aplicação separada. Se você abrir o diretório `apps`, achará várias pastas, sendo cada uma relacionada a um desafio específico. Cada diretório representa um aplicação `Nx` completa e independente. Para executar e começar uma aplicação, abra seu terminal e use: + +```bash +npx nx serve +``` + +:::note[Nota] +Se você não tem certeza quanto ao `NOME_APLICACAO`, abra o arquivo README.md do desafio. O comando `serve` está escrito nele com um link para a documentação do desafio. +::: + +:::note[Nota] +Se `nx` está instalado globalmente no seu dispositivo, você pode pular o uso de `npx`. + +Para instalar `nx` globalmente, execute: + +```bash +npm i -g nx +``` + +::: + +## Crie uma branch Git + +Antes de começar a implementação de sua solução para um desafio, crie uma branch para commitar seu trabalho. + +```bash +git checkout -b +``` + +## Resolva o Desafio + +Siga as instruções para resolver o desafio. + +## Commitar e fazer o _Push_ do seu trabalho + +O último passo é commitar seu trabalho seguindo o [Conventional Guidelines](https://www.conventionalcommits.org/en/v1.0.0/). + +Finalmente, faça um push do trabalho ao repositório remoto com o seguinte comando: + +```bash +git push --set-upstream origin +``` + +:::tip[Não precisa lembrar disso] +Você não precisa lembrar do comando. Você pode simplemente lembrar do `git push` e, se é a primeira vez que você faz um push na branch, `git` fornecerá para você o comando completo. +::: + +## Submeta seu Trabalho no Repositório Principal + +Agora, todo seu trabalho está localizado dentro de sua instância local do repositório do Desafios Angular. + +O próximo passo é ir para a [página principal do Desafios Angular](https://github.com/tomalaforge/angular-challenges) e criar um novo Pull Request. + +GitHub deve mostrar no cabeçalho uma notificação para ajudar a criação do pull request. + +Se não mostrar, você pode ter feito um dos passos anteriores errado ou você pode ir para a aba Pull Request e clicar no botão New pull request. + +Uma vez escolhidas as duas branches para comparar, você deve ser redirecionado para a seguinte página: + +![New pull request screen](../../../../assets/new-pull-request.png) + +Na seção do título, comece com Answer: seguido pelo número do desafio. Depois, você está livre para adicionar o que você desejar. + +:::danger[Importante] +Isso é muito importante. Isso deixará as outras pessoas saberem qual desafio você tentou resolver. +::: + +Na seção de descrição, você pode adicionar perguntas, problemas que encontrou ou qualquer coisa que queira compartilhar. Você pode deixar vazio caso não tenha nada para dizer. + +Agora você pode clicar em Create pull request. + +Eu o lerei e comentarei quando tiver algum tempo livre. + +

Não se preocupe se sua resposta não for revisada imediatamente. Estou fazendo isso de graça e durante meu tempo livre. Se você quiser me ajudar, você pode fazê-lo me patrocinando no github. Isso mostrará que meu trabalho é de grande ajuda para você e seu time.

+ +:::note[Nota] +Todo mundo é bem-vindo para comentar e ver outros PRs. +::: + +:::tip[Campeão OSS] +🔥 Ao terminar este tutorial, você está pronto para contribuir em qualquer outro repositório público do GitHub e submeter um PR. Simples assim. 🔥 +::: diff --git a/docs/src/content/docs/pt-br/index.mdx b/docs/src/content/docs/pt-br/index.mdx new file mode 100644 index 0000000..f593235 --- /dev/null +++ b/docs/src/content/docs/pt-br/index.mdx @@ -0,0 +1,82 @@ +--- +title: Bem-vindos aos Desafios Angular +description: Comece resolvendo esses desafios e se torne um melhor desenvolvedor frontend Angular. +template: splash +noCommentSection: true +banner: + content: Terei menos tempo livre nos próximos dois meses, não se preocupe se seus pull requests levarem um tempo para serem revisados. +hero: + tagline: Comece agora e vire um especialista em Angular! + image: + file: ../../../assets/angular-challenge.webp + actions: + - text: Iniciar + link: /pt-br/guides/getting-started/ + icon: right-arrow + variant: primary + - text: Ir para o desafio mais recente + link: /pt-br/challenges/performance/40-christmas-web-worker/ + icon: rocket + - text: Dar uma estrela + 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 repositório possui 40 desafios relacionados a Angular, Nx, RxJS, + Ngrx e Typescript. + Esses desafios são voltados para problemas reais ou funcionalidades específicas afim de + melhorar suas habilidades. + + + + Um dos objetivos desse repositório é diminuir a barreira de entrada para o Software de + Código Aberto (OSS). Ao realizar esses desafios, você aprenderá como começar a contruibuir em + qualquer outro Projeto de Código Aberto. + + + + Aprender e praticar um novo framework é sempre desafiador. Este conjunto de desafios + possui casos de uso reais para aplicarmos o que aprendemos. Qualquer um pode comentar e + oferecer assistência. + + Aprender sozinho é legal, mas aprender junto com outras pessoas levará você mais longe. + + + + + Tem algum problema, um bug interessante ou uma ideia? Não hesite; + crie seus próprios desafios sem perder tempo. + + + + Completar esses desafios vai preparar você para quaisquer desafios técnicos que encontrar em + uma entrevista para uma vaga frontend. + + + + Este projeto é livre e tem o objetivo de permanecer assim o máximo possível. No entanto, + tudo é feito durante meu tempo livre, incluindo a criação de desafios e revisão de pull requests (PRs). + Patrocinar pode me ajudar e contribuir para o crescimento do projeto. + + + +--- + +
+ + + Patrocine o Projeto + +
+ +
+ Criado por{' '} + Thomas Laforge - + Fornecido por 🌟 Starlight +
Laforge Thomas
Laforge Thomas
🧩 💻 📖 🖋 🤔 🎨		Laforge Thomas
Laforge Thomas
🧩 💻 📖 🖋 🤔 🎨 🇫🇷		 Alan Dragicevich
Alan Dragicevich
📖		 Michel EDIGHOFFER
Michel EDIGHOFFER
📖		 Gerardo Sebastian Gonzalez
Gerardo Sebastian Gonzalez
📖		J. Degand
J. Degand
📖
Devesh Chaudhari
Devesh Chaudhari
💻 🐛 🧩		Devesh Chaudhari
Devesh Chaudhari
💻 🐛 🧩		 Dmitriy Mishchenko
Dmitriy Mishchenko
📖		 Sagar Devkota
Sagar Devkota
📖 💻		Nelson Gutierrez
Nelson Gutierrez
📖		Nelson Gutierrez
Nelson Gutierrez
🇪🇸		 Hossain K. M.
Hossain K. M.
📖		Diogo Nishikawa
Diogo Nishikawa
🇧🇷