+ 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 8457cd4..fa9feca 100644
--- a/docs/astro.config.mjs
+++ b/docs/astro.config.mjs
@@ -5,6 +5,7 @@ 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
@@ -30,6 +31,7 @@ export default defineConfig({
translations: {
es: 'Guías',
fr: 'Guides',
+ 'pt-BR': 'Guias',
},
},
{
@@ -38,6 +40,7 @@ export default defineConfig({
translations: {
es: 'Desafíos',
fr: 'Challenges',
+ 'pt-BR': 'Desafios'
},
},
],
@@ -80,6 +83,10 @@ export default defineConfig({
label: 'Français',
lang: 'fr',
},
+ 'pt-br': {
+ label: 'Português (Brasil)',
+ lang: 'pt-BR',
+ },
},
}),
],
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.
+
+
+
+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.
+
+
+
+### 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).
+
+
+
+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.
+
+
+
+:::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.
+
+
+
+:::
+
+## 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.
+
+
+
+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.
+
+
+
+### 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:
+
+
+
+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.
+
+
+
+---
+
+
+
+