From 0181ce30a1f7f0e16c6d92897012c403f1eb2781 Mon Sep 17 00:00:00 2001 From: kabrunko-dev Date: Sun, 10 Dec 2023 13:49:02 -0300 Subject: [PATCH 1/7] docs: add brazilian portuguese I18n Config Astro for new language pt-BR. Translate homepage, getting started, resolve challenge and injection token challenge MDX files. --- docs/astro.config.mjs | 7 ++ .../challenges/angular/39-injection-token.md | 31 +++++++ .../docs/pt-br/guides/getting-started.md | 57 ++++++++++++ .../docs/pt-br/guides/resolve-challenge.md | 93 +++++++++++++++++++ docs/src/content/docs/pt-br/index.mdx | 80 ++++++++++++++++ 5 files changed, 268 insertions(+) create mode 100644 docs/src/content/docs/pt-br/challenges/angular/39-injection-token.md create mode 100644 docs/src/content/docs/pt-br/guides/getting-started.md create mode 100644 docs/src/content/docs/pt-br/guides/resolve-challenge.md create mode 100644 docs/src/content/docs/pt-br/index.mdx 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 +
From 6cf59d2d555f85722a55548180c1c2e4d519977b Mon Sep 17 00:00:00 2001 From: kabrunko-dev Date: Sun, 10 Dec 2023 17:28:03 -0300 Subject: [PATCH 2/7] docs: translate more files Translate projection challenge. Translate more guides: contribute, faq and create-challenge --- .../pt-br/challenges/angular/1-projection.md | 37 +++++++++++++ .../challenges/angular/39-injection-token.md | 31 ----------- .../content/docs/pt-br/guides/contribute.md | 20 +++++++ .../docs/pt-br/guides/create-challenge.md | 54 +++++++++++++++++++ docs/src/content/docs/pt-br/guides/faq.md | 17 ++++++ 5 files changed, 128 insertions(+), 31 deletions(-) create mode 100644 docs/src/content/docs/pt-br/challenges/angular/1-projection.md delete mode 100644 docs/src/content/docs/pt-br/challenges/angular/39-injection-token.md create mode 100644 docs/src/content/docs/pt-br/guides/contribute.md create mode 100644 docs/src/content/docs/pt-br/guides/create-challenge.md create mode 100644 docs/src/content/docs/pt-br/guides/faq.md 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..2bc9f3b --- /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: Projection video by Arthur Lannelucq + flag: FR +sidebar: + order: 1 +--- + +## Informação + +Em Angular, projeção de conteúdo é uma técnica poderosa 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á longe de estar 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 movê-la para o `ParentCardComponent` como `TeacherCardComponent`. +- `CardComponent` não deve conter nenhum `NgIf` ou `NgSwitch`. +- CSS: tente evitar usar `::ng-deep` (motivo [aqui](https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep)). Ache uma maneira melhor para lidar com o CSS. 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 deleted file mode 100644 index 184f080..0000000 --- a/docs/src/content/docs/pt-br/challenges/angular/39-injection-token.md +++ /dev/null @@ -1,31 +0,0 @@ ---- -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/contribute.md b/docs/src/content/docs/pt-br/guides/contribute.md new file mode 100644 index 0000000..b590aa3 --- /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..e0b894c --- /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 é rodar, é 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ê desejar 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 a 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[Perigo] +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..6e78430 --- /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 rodo `nx serve`? + + Na maioria das vezes, o problema surge por que seu `node_modules` está desatualizado e você precisar 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). + +
From d5c44bd573a1b8797993f755b84c6f2eaf68bbb7 Mon Sep 17 00:00:00 2001 From: kabrunko-dev Date: Mon, 11 Dec 2023 11:05:03 -0300 Subject: [PATCH 3/7] docs: more files translated Change action in index Translate files: rebase and checkout-answer --- .../docs/pt-br/guides/checkout-answer.md | 48 +++++++++++++++ docs/src/content/docs/pt-br/guides/rebase.md | 61 +++++++++++++++++++ docs/src/content/docs/pt-br/index.mdx | 2 +- 3 files changed, 110 insertions(+), 1 deletion(-) create mode 100644 docs/src/content/docs/pt-br/guides/checkout-answer.md create mode 100644 docs/src/content/docs/pt-br/guides/rebase.md 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..ae8ff9b --- /dev/null +++ b/docs/src/content/docs/pt-br/guides/checkout-answer.md @@ -0,0 +1,48 @@ +--- +title: Verificar resposta dos outros +description: Guia para verificar a resposta de outra pessoa +sidebar: + order: 3 +--- + +Todas as respostas dos Desafios Angular são apresentadas na forma de _Pull Request_ (PR). Para ver e segui-las, 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. Assim, 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 ver as respostas que desejar. + +## 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 ficar 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, vá até o 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. + +![PR code modal](../../../../assets/PR-code-btn-modal.png) + +:::note[Nota] +Se o comando não funcionar, a CLI do GitHub vai guidar 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/rebase.md b/docs/src/content/docs/pt-br/guides/rebase.md new file mode 100644 index 0000000..11c3841 --- /dev/null +++ b/docs/src/content/docs/pt-br/guides/rebase.md @@ -0,0 +1,61 @@ +--- +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 quebrarão 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 o 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 atualizá-la 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 de escolha ou uma instância independente. + +### Git + +Siga os seguintes commandos para realizar um _rebase_ na sua _branch_ local: + +```bash +git checkout main +git pull +git checkout [sua branch] +git rebase main +# Por fim, resolva os conflitos +``` + +Neste passo, o _rebase_ pode parar, porque sua _branch_ local tem arquivos conflitantes com a _branch_ principal. Corrija-os e depois disso feito: + +```bash +git add . +git rebase --continue +``` + +Se sua _branch_ não tem nenhum conflito, uma mensagem de sucesso será mostrada. + +### _Push_ seu trabalho para a _branch_ remota + +Finalmente, faça um _push_ do seu trabalho de volta para o GitHub: + +```bash +git push -f +``` diff --git a/docs/src/content/docs/pt-br/index.mdx b/docs/src/content/docs/pt-br/index.mdx index 81fe18a..2d58271 100644 --- a/docs/src/content/docs/pt-br/index.mdx +++ b/docs/src/content/docs/pt-br/index.mdx @@ -8,7 +8,7 @@ hero: image: file: ../../../assets/angular-challenge.webp actions: - - text: Início + - text: Iniciar link: /pt-br/guides/getting-started/ icon: right-arrow variant: primary From c34ecfe64f11f804764ec9a35a93d5d73f154238 Mon Sep 17 00:00:00 2001 From: kabrunko-dev Date: Tue, 12 Dec 2023 09:16:09 -0300 Subject: [PATCH 4/7] docs: translate homepage banner and alt from videoLink in projection challenge --- docs/src/content/docs/pt-br/challenges/angular/1-projection.md | 2 +- docs/src/content/docs/pt-br/index.mdx | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) 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 index 2bc9f3b..ff266e2 100644 --- a/docs/src/content/docs/pt-br/challenges/angular/1-projection.md +++ b/docs/src/content/docs/pt-br/challenges/angular/1-projection.md @@ -7,7 +7,7 @@ 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: Projection video by Arthur Lannelucq + alt: Vídeo de projeção por Arthur Lannelucq flag: FR sidebar: order: 1 diff --git a/docs/src/content/docs/pt-br/index.mdx b/docs/src/content/docs/pt-br/index.mdx index 2d58271..384cc9f 100644 --- a/docs/src/content/docs/pt-br/index.mdx +++ b/docs/src/content/docs/pt-br/index.mdx @@ -3,6 +3,8 @@ 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: Eu terei menos tempo livre nos próximos dois meses, então não se preocupe se seus pull requests levarem um tempo para serem revisados. hero: tagline: Comece agora e vire um expert em Angular! image: From d6ba94e66d4dd9f0615c536f5f81762bca970350 Mon Sep 17 00:00:00 2001 From: kabrunko-dev Date: Tue, 12 Dec 2023 13:40:29 -0300 Subject: [PATCH 5/7] feat(docs): new I18n language pt-BR --- .../pt-br/challenges/angular/1-projection.md | 10 ++-- .../docs/pt-br/guides/checkout-answer.md | 16 +++---- .../content/docs/pt-br/guides/contribute.md | 6 +-- .../docs/pt-br/guides/create-challenge.md | 14 +++--- docs/src/content/docs/pt-br/guides/faq.md | 4 +- .../docs/pt-br/guides/getting-started.md | 12 ++--- docs/src/content/docs/pt-br/guides/rebase.md | 48 ++++++++----------- .../docs/pt-br/guides/resolve-challenge.md | 32 ++++++------- docs/src/content/docs/pt-br/index.mdx | 20 ++++---- 9 files changed, 78 insertions(+), 84 deletions(-) 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 index ff266e2..d507cc9 100644 --- a/docs/src/content/docs/pt-br/challenges/angular/1-projection.md +++ b/docs/src/content/docs/pt-br/challenges/angular/1-projection.md @@ -15,7 +15,7 @@ sidebar: ## Informação -Em Angular, projeção de conteúdo é uma técnica poderosa 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. +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. @@ -25,13 +25,13 @@ 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. +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á longe de estar 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`. +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 movê-la para o `ParentCardComponent` como `TeacherCardComponent`. +- 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` (motivo [aqui](https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep)). Ache uma maneira melhor para lidar com o CSS. +- 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 index ae8ff9b..425c408 100644 --- a/docs/src/content/docs/pt-br/guides/checkout-answer.md +++ b/docs/src/content/docs/pt-br/guides/checkout-answer.md @@ -1,25 +1,25 @@ --- -title: Verificar resposta dos outros +title: Verifique a resposta dos outros description: Guia para verificar a resposta de outra pessoa sidebar: order: 3 --- -Todas as respostas dos Desafios Angular são apresentadas na forma de _Pull Request_ (PR). Para ver e segui-las, 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. Assim, você pode preferir verificar a _branch_ e revisar a solução na sua IDE de preferência. +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 ver as respostas que desejar. +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. +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_. +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 ficar atualizada. +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) @@ -29,7 +29,7 @@ Vá até o PR que desejar conferir localmente e pegue seu ID. Você o achará no ![PR header](../../../../assets/PR-header.png) -Depois, abra um terminal, vá até o diretório de seu projeto e execute o seguinte comando: +Depois, abra um terminal dentro do diretório de seu projeto e execute o seguinte comando: ```bash gh pr checkout @@ -40,7 +40,7 @@ Se você não lembrar o comando, clique no butão