docs: add brazilian portuguese I18n

Config Astro for new language pt-BR. Translate homepage, getting started,
resolve challenge and injection token challenge MDX files.
This commit is contained in:
kabrunko-dev
2023-12-10 13:49:02 -03:00
parent 3e1dc89d78
commit 0181ce30a1
5 changed files with 268 additions and 0 deletions

View File

@@ -4,6 +4,7 @@ import { defineConfig } from 'astro/config';
export const locales = {
root: { label: 'English', lang: 'en' },
es: { label: 'Español', lang: 'es' },
'pt-br': { label: 'Português (Brasil)', lang: 'pt-BR' },
};
// https://astro.build/config
@@ -28,6 +29,7 @@ export default defineConfig({
autogenerate: { directory: 'guides' },
translations: {
es: 'Guías',
'pt-BR': 'Guias',
},
},
{
@@ -35,6 +37,7 @@ export default defineConfig({
autogenerate: { directory: 'challenges' },
translations: {
es: 'Desafíos',
'pt-BR': 'Desafios'
},
},
],
@@ -73,6 +76,10 @@ export default defineConfig({
label: 'Español',
lang: 'es',
},
'pt-br': {
label: 'Português (Brasil)',
lang: 'pt-BR',
},
},
}),
],

View File

@@ -0,0 +1,31 @@
---
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
<details>
<summary>Dica 1</summary>
Looking at this [blog post](https://itnext.io/stop-being-scared-of-injectiontokens-ab22f72f0fe9) can be of great help.
</details>

View File

@@ -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 o 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 o 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 na IDE de sua escolha.
## Instale todas dependências
```bash
npm ci
```
## Escolha um desafio
O seu projeto está pronto e executando. O que falta agora é escolher um desafio 🚀
Cada desafio consiste em:
- <b>Nome</b>: indica sobre o que o desafio é sobre.
- <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 <i>Pull Request</i> no GitHub.
- <b>Indicador</b>: ajuda a visualizar o grau de dificuldade. É totalmente subjetivo 😅
- 🟢 fácil
- 🟠 médio
- 🔴 difícil

View File

@@ -0,0 +1,93 @@
---
title: Resolver um desafio
description: Guia de como resolver um desafio
sidebar:
order: 2
---
Neste guia, você aprenderá em 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> é uma monorepositório que permite armazenar múltiplaa 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 representar 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 com o nome 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 lembre disso]
Você não precisa lembrar do comando. Você pode simplemente lembrar do `git push` e se é a primeira vez que você efetua 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 um cabeçalho 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 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[Perigo]
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.
Você pode clicar em <span class="github-success-btn">Create pull request</span>.
Eu lerei e comentarei <b>quando eu 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 para qualquer outro repositório público do GitHub e submeter um PR. É tão simples quanto isso. 🔥
:::

View File

@@ -0,0 +1,80 @@
---
title: Bem-vindos aos Desafios Angular
description: Comece resolvendo esses desafios e se torne um melhor desenvolvedor frontend Angular.
template: splash
noCommentSection: true
hero:
tagline: Comece agora e vire um expert em Angular!
image:
file: ../../../assets/angular-challenge.webp
actions:
- text: Início
link: /pt-br/guides/getting-started/
icon: right-arrow
variant: primary
- text: Ir para o desafio mais recente
link: /pt-br/challenges/angular/39-injection-token/
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="39 Desafios">
Este repositório possui 39 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>baixar 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 <i>framework</i> é sempre desafiador. O 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 juntos 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 qualquer desafio técnico que encontrar em
uma entrevista a 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 <i>pull requests</i> (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>