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..2bc9f3b --- /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: Projection video by Arthur Lannelucq + flag: FR +sidebar: + order: 1 +--- + +## Informação + +Em Angular, projeção de conteúdo é uma técnica poderosa 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á longe de estar 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 movê-la para o `ParentCardComponent` como `TeacherCardComponent`. +- `CardComponent` não deve conter nenhum `NgIf` ou `NgSwitch`. +- CSS: tente evitar usar `::ng-deep` (motivo [aqui](https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep)). Ache uma maneira melhor para lidar com o CSS. diff --git a/docs/src/content/docs/pt-br/challenges/angular/39-injection-token.md b/docs/src/content/docs/pt-br/challenges/angular/39-injection-token.md deleted file mode 100644 index 184f080..0000000 --- a/docs/src/content/docs/pt-br/challenges/angular/39-injection-token.md +++ /dev/null @@ -1,31 +0,0 @@ ---- -title: 🟠 InjectionToken -description: Desafio 39 é sobre aprender o poder da injenção de dependências -author: thomas-laforge -challengeNumber: 39 -command: angular-injection-token -sidebar: - order: 118 - badge: New ---- - -## Informação - -In this small application, we start with a `VideoComponent` containing a **1-second** timer. The development team decided to use a global constant to store the timer value: `DEFAULT_TIMER`. However, a few weeks later, the product team wants to add a new screen for phone calls called `PhoneComponent`, and we want to reuse the `TimerComponent`. However, the product team wants a timer of **2 seconds**. How can we achieve this? - -## Statement - -Currently, the timer is still 1 second for the `PhoneComponent`. The goal of this challenge is to change the timer value to 2 seconds for the `PhoneComponent`. - -## Constraints - -The use of `@Input` is forbidden. This example is basic, and using `@Input` could be a good option, but in more complex applications, the component we need to update can be deeply nested, making the use of `@Input` a really bad design. - -## Hint - -
- Dica 1 - -Looking at this [blog post](https://itnext.io/stop-being-scared-of-injectiontokens-ab22f72f0fe9) can be of great help. - -
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..b590aa3 --- /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..e0b894c --- /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 é rodar, é 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ê desejar 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 a 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[Perigo] +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..6e78430 --- /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 rodo `nx serve`? + + Na maioria das vezes, o problema surge por que seu `node_modules` está desatualizado e você precisar 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). + +