Merge pull request #405 from kabrunko-dev/translation-ptbr

New I18n langague support for "pt-BR"

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',
+        },
       },
     }),
   ],

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 <b>ng-content</b> e <b>ngTemplateOutlet</b> pode melhorar significativamente sua habilidade na criação de componentes compartilháveis.
+
+Você pode aprender tudo sobre <b>ng-content</b> [aqui](https://angular.io/guide/content-projection#projecting-content-in-more-complex-environments), desde projeção simples até casos mais complexos.
+
+Para aprender sobre <b>ngTemplateOutlet</b>, 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ê <b>deve</b> 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.

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 <ID>
+```
+
+Se você não lembrar o comando, clique no butão <span class="github-neutral-btn"><> Code</span> 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. 🔥
+
+<!-- gh repo set-default -->

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).

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 <b>Nx Console > generate > @angular-challenges/cli - challenge</b>
+
+### Parâmetros
+
+#### parâmetros obrigatórios
+
+- <b>title</b>: O título que você deseja dar para seu desafio.
+  :::note[Nota]
+  O título deve ter no máximo 25 caracteres.
+  :::
+
+- <b>challengeDifficulty</b>: A dificuldade que você acredita que o desafio tem. Têm três níveis de dificuldade: 🟢 fácil / 🟠 médio / 🔴 difícil
+- <b>name</b>: nome da aplicação Nx.
+  :::note[Nota]
+  Deve ser escrito em **kebab-case**.
+  :::
+- <b>docRepository</b>: A categoria do seu desafio: Nx, Angular, Angular Performance, Rxjs, NgRx, Typescript.
+
+#### parâmetros opcionais
+
+- <b>directory</b>: Se você quiser que sua aplicação esteja localizada dentro de uma pasta específica de `apps`.
+- <b>addTest</b>: 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.

docs/src/content/docs/pt-br/guides/faq.md

@@ -0,0 +1,17 @@
+---
+title: FAQ
+description: Respostas para perguntas
+sidebar:
+  order: 7
+---
+
+<details>
+  <summary>Por que minha aplicação não roda ou por que eu encontro erros no meu terminal quando executo `nx serve`?</summary>
+  
+  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).
+
+</details>

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 <b>Desafios Angular</b>, 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 <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> 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 <span class="github-success-btn"><> Code</span> na sua <b>própria instância</b> 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:
+
+- <b>Nome</b>: indica sobre o que o desafio é.
+- <b>Número</b>: 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.
+- <b>Indicador</b>: ajuda a visualizar o grau de dificuldade. É totalmente subjetivo 😅
+  - 🟢 fácil
+  - 🟠 médio
+  - 🔴 difícil

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

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). <b>Nx</b> é 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 <NOME_APLICACAO>
+```
+
+:::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 <NOME_BRANCH>
+```
+
+## 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 <NOME_BRANCH>
+```
+
+:::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 <b>Pull Request</b> e clicar no botão <span class="github-success-btn">New pull request</span>.
+
+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 <b>Answer:</b> seguido pelo <b>número do desafio</b>. 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 <span class="github-success-btn">Create pull request</span>.
+
+Eu o lerei e comentarei <b>quando tiver algum tempo livre.</b>
+
+<p class="important-block">Não se preocupe se sua resposta não for revisada imediatamente. Estou fazendo isso de <b>graça</b> e durante meu <b>tempo livre</b>. Se você quiser me ajudar, você pode fazê-lo <a href="https://github.com/sponsors/tomalaforge">me patrocinando no github</a>. Isso mostrará que meu trabalho é de grande ajuda para você e seu time.</p>
+
+:::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. 🔥
+:::

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';
+
+<CardGrid>
+  <Card title="40 Desafios">
+    Este repositório possui 40 desafios relacionados a <b>Angular</b>, <b>Nx</b>, <b>RxJS</b>,
+    <b>Ngrx</b> e <b>Typescript</b>.
+    Esses desafios são voltados para problemas reais ou funcionalidades específicas afim de
+    melhorar suas habilidades.
+  </Card>
+
+  <Card title="Torne-se um contribuidor OSS">
+    Um dos objetivos desse repositório é <b>diminuir a barreira</b> 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.
+  </Card>
+
+  <Card title="Aprenda junto com os outros">
+    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.
+    <b>
+      Aprender sozinho é legal, mas aprender junto com outras pessoas levará você mais longe.
+    </b>
+  </Card>
+
+  <Card title="Contribua">
+    Tem algum problema, um bug interessante ou uma ideia? Não hesite;
+    <b>crie seus próprios desafios</b> sem perder tempo.
+  </Card>
+
+  <Card title="Prepare-se para entrevistas">
+    Completar esses desafios vai preparar você para quaisquer desafios técnicos que encontrar em
+    uma entrevista para uma vaga frontend.
+  </Card>
+
+  <Card title="Patrocínio">
+    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).
+    <b>Patrocinar pode me ajudar e contribuir para o crescimento do projeto</b>.
+  </Card>
+</CardGrid>
+
+---
+
+<div class="article-footer">
+  <a href="https://github.com/sponsors/tomalaforge" alt="Sponsor link">
+    <MyIcon name="fillHeart" size="1.2rem" color="white" />
+    Patrocine o Projeto
+  </a>
+</div>
+
+<div class="main-page-footer">
+  Criado por{' '}
+  <a href="https://github.com/tomalaforge?tab=repositories">Thomas Laforge</a> -
+  Fornecido por 🌟 <a href="https://starlight.astro.build/">Starlight</a>
+</div>