mirror of
https://github.com/Raghu-Ch/angular-challenges.git
synced 2026-02-10 12:53:03 -05:00
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:
@@ -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',
|
||||
},
|
||||
},
|
||||
}),
|
||||
],
|
||||
|
||||
@@ -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>
|
||||
57
docs/src/content/docs/pt-br/guides/getting-started.md
Normal file
57
docs/src/content/docs/pt-br/guides/getting-started.md
Normal 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.
|
||||
|
||||

|
||||
|
||||
:::
|
||||
|
||||
## 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
|
||||
93
docs/src/content/docs/pt-br/guides/resolve-challenge.md
Normal file
93
docs/src/content/docs/pt-br/guides/resolve-challenge.md
Normal 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:
|
||||
|
||||

|
||||
|
||||
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. 🔥
|
||||
:::
|
||||
80
docs/src/content/docs/pt-br/index.mdx
Normal file
80
docs/src/content/docs/pt-br/index.mdx
Normal 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>
|
||||
Reference in New Issue
Block a user