diff --git a/docs/astro.config.mjs b/docs/astro.config.mjs index 23bfa5a..aac1882 100644 --- a/docs/astro.config.mjs +++ b/docs/astro.config.mjs @@ -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', + }, }, }), ], 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 new file mode 100644 index 0000000..184f080 --- /dev/null +++ b/docs/src/content/docs/pt-br/challenges/angular/39-injection-token.md @@ -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 + +
+ 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/getting-started.md b/docs/src/content/docs/pt-br/guides/getting-started.md new file mode 100644 index 0000000..875b33d --- /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 o 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 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 <> Code na sua própria instância 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: + +- Nome: indica sobre o que o desafio é sobre. +- 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/resolve-challenge.md b/docs/src/content/docs/pt-br/guides/resolve-challenge.md new file mode 100644 index 0000000..01ebdca --- /dev/null +++ b/docs/src/content/docs/pt-br/guides/resolve-challenge.md @@ -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). Nx é 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 +``` + +:::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 +``` + +## 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 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 Pull Request e clicar no botão New pull request. + +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 Answer: seguido pelo número do desafio. 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 Create pull request. + +Eu lerei e comentarei quando eu 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 para qualquer outro repositório público do GitHub e submeter um PR. É tão simples quanto isso. 🔥 +::: 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..81fe18a --- /dev/null +++ b/docs/src/content/docs/pt-br/index.mdx @@ -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'; + + + + Este repositório possui 39 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 é baixar 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. O 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 juntos 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 qualquer desafio técnico que encontrar em + uma entrevista a 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. + + + +--- + +
+ + + Patrocine o Projeto + +
+ +
+ Criado por{' '} + Thomas Laforge - + Fornecido por 🌟 Starlight +