From 0181ce30a1f7f0e16c6d92897012c403f1eb2781 Mon Sep 17 00:00:00 2001 From: kabrunko-dev Date: Sun, 10 Dec 2023 13:49:02 -0300 Subject: [PATCH 01/17] 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 02/17] 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 03/17] 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 9a3bc613e8548566feed8a8146592f7eadc319a8 Mon Sep 17 00:00:00 2001 From: thomas Date: Mon, 11 Dec 2023 21:21:18 +0100 Subject: [PATCH 04/17] fix: fix pipeline --- .../performance/christmas-web-worker/src/app/app.component.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/performance/christmas-web-worker/src/app/app.component.ts b/apps/performance/christmas-web-worker/src/app/app.component.ts index ba55d27..6b9846b 100644 --- a/apps/performance/christmas-web-worker/src/app/app.component.ts +++ b/apps/performance/christmas-web-worker/src/app/app.component.ts @@ -11,11 +11,11 @@ import { UnknownPersonComponent } from './unknown-person/unknown-person.componen template: ` -
Progress: {{ loadingPercentage() }}%
+
Progress: {{ loadingPercentage() }}%
`, host: { class: `flex flex-col h-screen w-screen bg-[#1f75c0]`, From e92f044e0815a6f780f5c73c7acf2ad55f451758 Mon Sep 17 00:00:00 2001 From: thomas Date: Mon, 11 Dec 2023 21:24:03 +0100 Subject: [PATCH 05/17] fix: author --- .../docs/challenges/performance/40-christmas-web-worker.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/content/docs/challenges/performance/40-christmas-web-worker.md b/docs/src/content/docs/challenges/performance/40-christmas-web-worker.md index 0e6556c..a341d4d 100644 --- a/docs/src/content/docs/challenges/performance/40-christmas-web-worker.md +++ b/docs/src/content/docs/challenges/performance/40-christmas-web-worker.md @@ -1,7 +1,7 @@ --- title: 🟠 Web workers description: Challenge 40 is about learning how to create and use a web worker -author: Thomas Laforge +author: thomas-laforge challengeNumber: 40 command: performance-christmas-web-worker sidebar: From f11d34065ade3f83f2025ec7d79932c29a69a556 Mon Sep 17 00:00:00 2001 From: thomas Date: Mon, 11 Dec 2023 22:15:14 +0100 Subject: [PATCH 06/17] feat: start french translation --- docs/astro.config.mjs | 7 ++ .../content/docs/fr/guides/getting-started.md | 57 ++++++++++++ .../docs/fr/guides/resolve-challenge.md | 93 +++++++++++++++++++ docs/src/content/docs/fr/index.mdx | 78 ++++++++++++++++ 4 files changed, 235 insertions(+) create mode 100644 docs/src/content/docs/fr/guides/getting-started.md create mode 100644 docs/src/content/docs/fr/guides/resolve-challenge.md create mode 100644 docs/src/content/docs/fr/index.mdx diff --git a/docs/astro.config.mjs b/docs/astro.config.mjs index 23bfa5a..8457cd4 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' }, + fr: { label: 'Français', lang: 'fr' }, }; // https://astro.build/config @@ -28,6 +29,7 @@ export default defineConfig({ autogenerate: { directory: 'guides' }, translations: { es: 'Guías', + fr: 'Guides', }, }, { @@ -35,6 +37,7 @@ export default defineConfig({ autogenerate: { directory: 'challenges' }, translations: { es: 'Desafíos', + fr: 'Challenges', }, }, ], @@ -73,6 +76,10 @@ export default defineConfig({ label: 'Español', lang: 'es', }, + fr: { + label: 'Français', + lang: 'fr', + }, }, }), ], diff --git a/docs/src/content/docs/fr/guides/getting-started.md b/docs/src/content/docs/fr/guides/getting-started.md new file mode 100644 index 0000000..c74353a --- /dev/null +++ b/docs/src/content/docs/fr/guides/getting-started.md @@ -0,0 +1,57 @@ +--- +title: Comment démarrer +description: Un guide sur la manière de commencer avec sur Angular Challenges. +sidebar: + order: 1 +--- + +Pour commencer avec les Challenges Angular, suivez ces étapes : + +## Créez un compte Github + +Si vous souhaitez soumettre une réponse, vous devrez avoir votre propre compte GitHub. De plus, avoir un compte GitHub est toujours bénéfique et c'est gratuit. + +## Forkez le projet GitHub + +Accédez au [répertoire des Challenges Angular](https://github.com/tomalaforge/angular-challenges) et cliquez sur le bouton Fork dans l'en-tête. Cela créera une copie de ce dépôt sur votre propre page GitHub. + +## Clonez le dépôt sur votre machine locale + +Sélectionnez un répertoire sur votre ordinateur local et clonez ce dépôt. + +Ouvrez un terminal, accédez au répertoire choisi et tapez la commande suivante : + +```bash +git clone https://github.com/[VOTRE_NOM_GITHUB]/angular-challenges.git +``` + +:::note +Vous pouvez trouver l'URL de clonage en cliquant sur le bouton <> Code dans votre propre instance du dépôt des Challenges Angular. + +![Header of github workpspace](../../../../assets/header-github.png) + +::: + +## Ouvrez le projet dans votre IDE préféré + +Ouvrez le projet dans n'importe quel IDE de votre choix. + +## Installez toutes les dépendances + +```bash +npm ci +``` + +## Choisissez un challenge + +Votre projet est maintenant opérationnel. La seule étape restante est de choisir un challenge 🚀 + +Chaque challenge se compose de : + +- Nom : indiquant de quoi traite le défi. +- Numéro : ordre de création. Le numéro n'a pas de signification particulière mais aide pour la référence dans la section des Demandes de Tirage (Pull Requests) GitHub. +- Badge : aide à visualiser le degré de difficulté. C'est entièrement subjectif 😅 + - 🟢 facile + - 🟠 moyen + - 🔴 difficile diff --git a/docs/src/content/docs/fr/guides/resolve-challenge.md b/docs/src/content/docs/fr/guides/resolve-challenge.md new file mode 100644 index 0000000..e16ac5c --- /dev/null +++ b/docs/src/content/docs/fr/guides/resolve-challenge.md @@ -0,0 +1,93 @@ +--- +title: Résoudre un Challenge +description: Guide pour résoudre un challenge +sidebar: + order: 2 +--- + +Dans ce guide, vous apprendrez comment résoudre un challenge et soumettre une réponse sur le répertoire principal de Github. + +## Introduction + +Ce répertoire utilise [Nx](https://nx.dev/getting-started/intro). Nx est un monorépo qui vous permet de stocker plusieurs applications à l'intérieur du même espace de travail. Chaque challenge est une application distincte. Si vous ouvrez le répertoire `apps`, vous trouverez plusieurs dossiers, chacun lié à un challenge spécifique. Chaque dossier représente une application autonome complète `Nx`. Pour exécuter et démarrer l'une d'entre elles, ouvrez votre terminal et exécutez : + +```bash +npx nx serve +``` + +:::note +Si vous n'êtes pas sûr de votre `NOM_APPLICATION`, ouvrez le fichier README.md. La commande `serve` y est écrite, avec un lien vers la documentation du challenge. +::: + +:::note +Si vous installez `nx` globalement sur votre ordinateur, vous éviterez de préfixer chaque commande par `npx`. + +Pour installer `nx` globalement, exécutez + +```bash +npm i -g nx +``` + +::: + +## Créer une Branche Git + +Avant de commencer à résoudre un challenge, créez une branche git pour y ajouter vos modifications. + +```bash +git checkout -b +``` + +## Résoudre un Challenge + +Suivez les instructions décrites sur chaque Challenge pour le résoudre. + +## Commitez et Pousser votre Travail + +La dernière étape consiste à valider votre travail en suivant les [Conventional Guidelines](https://www.conventionalcommits.org/en/v1.0.0/). + +Enfin, poussez votre travail vers le répertoire distant avec la commande suivante + +```bash + git push --set-upstream origin +``` + +:::tip[Pas besoin de retenir la commande par coeur] +Vous n'avez pas besoin de mémoriser précisément la commande. Il vous suffit de vous rappeler `git push `et si c'est la première fois que vous poussez cette branche, `git` vous fournira la commande complète. +::: + +## Soumettre votre Travail sur le répertoire Principal + +Maintenant, tout votre travail se trouve dans votre instance locale du dépôt de Angular Challenges. + +La prochaine étape est de vous rendre sur la page principale de Angular Challenges et de créer une nouvelle Pull Request. + +Github devrait afficher en en-tête une notification pour vous aider à créer la pull request. + +Si ce n'est pas le cas, vous avez soit mal effectué l'une des étapes précédentes, soit vous pouvez vous rendre sur l'onglet Pull Request et cliquer sur le bouton New pull request. + +Une fois que vous avez choisi les deux branches à comparer, vous devriez arriver sur la page suivante : + +![New pull request screen](../../../../assets/new-pull-request.png) + +Dans la section du titre, commencez par Réponse : suivi de votre numéro de challenge. Ensuite, vous êtes libre d'ajouter tout ce que vous souhaitez. + +:::danger +C'est très important. Cela permet aux autres de savoir quel challenge vous tentez de résoudre. +::: + +Dans la section de description, vous pouvez ajouter des questions, des problèmes rencontrés ou tout autre contenu que vous souhaitez partager. Vous pouvez laisser vide si vous n'avez rien à dire. + +Vous pouvez maintenant cliquer sur Créer pull request. + +Je la lirai et commenterai quand j'aurai du temps libre. + +

Ne vous inquiétez pas si votre réponse n'est pas examinée immédiatement. Je le fais gratuitement et pendant mon temps libre. Si vous souhaitez me soutenir, vous pouvez le faire en me sponsorisant sur github. Cela validera que mon travail vous aide, vous ou votre équipe.

+ +:::note +Tout le monde peut commenter ou lire les Pull Requests des autres participants. +::: + +:::tip[Champion OSS] +🔥 Une fois que vous avez terminé ce tutoriel, vous êtes prêt à contribuer à n'importe quel répertoire public Github et à soumettre une PR. C'est aussi simple que ça. 🔥 +::: diff --git a/docs/src/content/docs/fr/index.mdx b/docs/src/content/docs/fr/index.mdx new file mode 100644 index 0000000..6907cdc --- /dev/null +++ b/docs/src/content/docs/fr/index.mdx @@ -0,0 +1,78 @@ +--- +title: Bienvenue sur Angular Challenges +description: Commence par résoudre ces défis et deviens un meilleur ingénieur FrontEnd Angular. +template: splash +noCommentSection: true +banner: + content: J'aurai moins de temps libre dans les deux prochains mois, donc ne vous inquiétez pas si vos pull requests prennent du temps à être examinées. +hero: + tagline: Commence maintenant et deviens un expert Angular ! + image: + file: ../../../assets/angular-challenge.webp + actions: + - text: C'est parti ! + link: /guides/getting-started/ + icon: right-arrow + variant: primary + - text: Aller au dernier Challenge + link: /challenges/performance/40-christmas-web-worker/ + icon: rocket + - text: Donne une étoile + link: https://github.com/tomalaforge/angular-challenges + icon: github + variant: secondary +--- + +import { Card, CardGrid } from '@astrojs/starlight/components'; +import MyIcon from '../../../components/MyIcon.astro'; + + + + Ce répertoire rassemble 40 défis liés à Angular, Nx, RxJS, Ngrx et Typescript. Ces défis portent sur des problèmes réels ou des fonctionnalités spécifiques pour améliorer vos compétences. + + + + L'un des objectifs de ce répertoire est de rendre plus accessible les + contributions aux logiciels Open Source (OSS). En résolvant ces défis, vous + apprendrez comment commencer à contribuer à n'importe quel projet Open Source. + + + + Apprendre et démarrer sur un nouveau framework est toujours difficile. Cette + série de défis propose des cas d'utilisation réels pour appliquer ce que vous + avez appris. N'importe qui peut commenter ou aider.{' '} + + Apprendre seul est bien, mais apprendre aux côtés des autres vous fera + progresser davantage et plus rapidement. + + + + + Avez-vous un problème, un bug intéressant ou une idée ? N'hésitez pas ;{' '} + créez vos propres challenges sans perdre de temps. + + + + Résoudre ces challenges vous préparera aux éventuels défis techniques que vous + pourriez rencontrer lors d'un entretien pour un rôle d'ingénieur frontend. + + + + Ce projet est gratuit et vise à le rester le plus longtemps possible. Cependant, tout est réalisé pendant mon temps libre, y compris la création de challenges et la relecture des pull requests. Le sponsoring peut me soutenir et contribuer à la croissance du projet. + + + +--- + +
+ + + Sponsoriser le Project + +
+ +
+ Créer par{' '} + Thomas Laforge - + Réaliser grâce à 🌟 Starlight +
From dc9e50a219b1f83b4d221d60a68a543eb4d4b587 Mon Sep 17 00:00:00 2001 From: thomas Date: Mon, 11 Dec 2023 22:18:04 +0100 Subject: [PATCH 07/17] feat: update read me --- .all-contributorsrc | 68 +++++++++++++++++---------------------------- 1 file changed, 26 insertions(+), 42 deletions(-) diff --git a/.all-contributorsrc b/.all-contributorsrc index 9005b37..afb4aab 100644 --- a/.all-contributorsrc +++ b/.all-contributorsrc @@ -3,9 +3,7 @@ "projectOwner": "tomalaforge", "repoType": "github", "repoHost": "https://github.com", - "files": [ - "README.md" - ], + "files": ["README.md"], "imageSize": 100, "commit": true, "commitConvention": "angular", @@ -13,6 +11,18 @@ "challenge": { "symbol": "🧩", "description": "Created a challenge" + }, + "translation-es": { + "symbol": "🇪🇸", + "description": "Translate the side in spanish" + }, + "translation-fr": { + "symbol": "🇫🇷", + "description": "Translate the side in french" + }, + "translation-pt": { + "symbol": "🇵🇹", + "description": "Translate the side in portugese" } }, "contributors": [ @@ -27,7 +37,8 @@ "doc", "content", "ideas", - "design" + "design", + "translation-fr" ] }, { @@ -35,104 +46,77 @@ "name": "Alan Dragicevich", "avatar_url": "https://avatars.githubusercontent.com/u/31838230?v=4", "profile": "https://github.com/alan-bio", - "contributions": [ - "doc" - ] + "contributions": ["doc"] }, { "login": "edimitchel", "name": "Michel EDIGHOFFER", "avatar_url": "https://avatars.githubusercontent.com/u/2922851?v=4", "profile": "https://github.com/edimitchel", - "contributions": [ - "doc" - ] + "contributions": ["doc"] }, { "login": "gsgonzalez88", "name": "Gerardo Sebastian Gonzalez", "avatar_url": "https://avatars.githubusercontent.com/u/39884678?v=4", "profile": "https://github.com/gsgonzalez88", - "contributions": [ - "doc" - ] + "contributions": ["doc"] }, { "login": "marryday", "name": "Evseev Yuriy", "avatar_url": "https://avatars.githubusercontent.com/u/57489315?v=4", "profile": "https://github.com/marryday", - "contributions": [ - "bug" - ] + "contributions": ["bug"] }, { "login": "tomer953", "name": "Tomer953", "avatar_url": "https://avatars.githubusercontent.com/u/1807493?v=4", "profile": "https://github.com/tomer953", - "contributions": [ - "bug", - "doc", - "code" - ] + "contributions": ["bug", "doc", "code"] }, { "login": "jdegand", "name": "J. Degand", "avatar_url": "https://avatars.githubusercontent.com/u/70610011?v=4", "profile": "https://github.com/jdegand", - "contributions": [ - "doc" - ] + "contributions": ["doc"] }, { "login": "DeveshChau", "name": "Devesh Chaudhari", "avatar_url": "https://avatars.githubusercontent.com/u/9509673?v=4", "profile": "https://github.com/DeveshChau", - "contributions": [ - "code", - "bug", - "challenge" - ] + "contributions": ["code", "bug", "challenge"] }, { "login": "dmmishchenko", "name": "Dmitriy Mishchenko", "avatar_url": "https://avatars.githubusercontent.com/u/51910160?v=4", "profile": "https://github.com/dmmishchenko", - "contributions": [ - "doc" - ] + "contributions": ["doc"] }, { "login": "Sagardevkota", "name": "Sagar Devkota", "avatar_url": "https://avatars.githubusercontent.com/u/30800393?v=4", "profile": "http://www.sagardev.com.np", - "contributions": [ - "doc", - "code" - ] + "contributions": ["doc", "code"] }, { "login": "nelsongutidev", "name": "Nelson Gutierrez", "avatar_url": "https://avatars.githubusercontent.com/u/62297014?v=4", "profile": "https://nelsonguti.dev/", - "contributions": [ - "doc" - ] + "contributions": ["translation-es"] }, { "login": "ho-ssain", "name": "Hossain K. M.", "avatar_url": "https://avatars.githubusercontent.com/u/61125174?v=4", "profile": "https://github.com/ho-ssain", - "contributions": [ - "doc" - ] + "contributions": ["doc"] } ], "contributorsPerLine": 7, From 0868e4fe2185face8f517b183422b02ffa60d9aa Mon Sep 17 00:00:00 2001 From: thomas Date: Mon, 11 Dec 2023 22:19:45 +0100 Subject: [PATCH 08/17] feat: update readme --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 4250a0a..f144392 100644 --- a/README.md +++ b/README.md @@ -34,7 +34,7 @@ Check [all 40 challenges](https://angular-challenges.vercel.app/) - + @@ -46,7 +46,7 @@ Check [all 40 challenges](https://angular-challenges.vercel.app/) - + From 103592d6e813c7c784060fcb4db27f05ef3dd10f Mon Sep 17 00:00:00 2001 From: thomas Date: Mon, 11 Dec 2023 22:21:14 +0100 Subject: [PATCH 09/17] fix: contributors --- .all-contributorsrc | 8 ++++---- README.md | 6 +++--- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/.all-contributorsrc b/.all-contributorsrc index afb4aab..2c4b901 100644 --- a/.all-contributorsrc +++ b/.all-contributorsrc @@ -10,19 +10,19 @@ "types": { "challenge": { "symbol": "🧩", - "description": "Created a challenge" + "description": "Create a challenge" }, "translation-es": { "symbol": "🇪🇸", - "description": "Translate the side in spanish" + "description": "Translate in Spanish" }, "translation-fr": { "symbol": "🇫🇷", - "description": "Translate the side in french" + "description": "Translate in French" }, "translation-pt": { "symbol": "🇵🇹", - "description": "Translate the side in portugese" + "description": "Translate in Portugese" } }, "contributors": [ diff --git a/README.md b/README.md index f144392..bc01dfb 100644 --- a/README.md +++ b/README.md @@ -34,7 +34,7 @@ Check [all 40 challenges](https://angular-challenges.vercel.app/)
Laforge Thomas
Laforge Thomas
🧩 💻 📖 🖋 🤔 🎨		Laforge Thomas
Laforge Thomas
🧩 💻 📖 🖋 🤔 🎨 🇫🇷		 Alan Dragicevich
Alan Dragicevich
📖		 Michel EDIGHOFFER
Michel EDIGHOFFER
📖		 Gerardo Sebastian Gonzalez
Gerardo Sebastian Gonzalez
📖		Devesh Chaudhari
Devesh Chaudhari
💻 🐛 🧩		 Dmitriy Mishchenko
Dmitriy Mishchenko
📖		 Sagar Devkota
Sagar Devkota
📖 💻		Nelson Gutierrez
Nelson Gutierrez
📖		Nelson Gutierrez
Nelson Gutierrez
🇪🇸		 Hossain K. M.
Hossain K. M.
📖
- + @@ -43,10 +43,10 @@ Check [all 40 challenges](https://angular-challenges.vercel.app/) - + - + From 6913cba220684feaf6b48c69d570b22b38d0265a Mon Sep 17 00:00:00 2001 From: jdegand <70610011+jdegand@users.noreply.github.com> Date: Mon, 11 Dec 2023 19:32:42 -0500 Subject: [PATCH 10/17] fix: calculation spelling --- .../src/app/heavy-calculation.service.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/apps/performance/christmas-web-worker/src/app/heavy-calculation.service.ts b/apps/performance/christmas-web-worker/src/app/heavy-calculation.service.ts index 84ce1e6..06dedd1 100644 --- a/apps/performance/christmas-web-worker/src/app/heavy-calculation.service.ts +++ b/apps/performance/christmas-web-worker/src/app/heavy-calculation.service.ts @@ -6,14 +6,14 @@ export class HeavyCalculationService { private loadingLength = signal(0); loadingPercentage = computed( - () => (this.loadingLength() * 100) / this.finalLength + () => (this.loadingLength() * 100) / this.finalLength, ); startLoading() { - this.randomHeavyCalculalationFunction(); + this.randomHeavyCalculationFunction(); } - private randomHeavyCalculalationFunction() { + private randomHeavyCalculationFunction() { for (let num = 2; num <= 10000000; num++) { let randomFlag = true; for (let i = 2; i <= Math.sqrt(num); i++) { From cace91a2073c893f0606cb7a8466105a1d8d8902 Mon Sep 17 00:00:00 2001 From: jdegand <70610011+jdegand@users.noreply.github.com> Date: Mon, 11 Dec 2023 19:43:13 -0500 Subject: [PATCH 11/17] docs: clarify command --- .../docs/challenges/performance/40-christmas-web-worker.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/content/docs/challenges/performance/40-christmas-web-worker.md b/docs/src/content/docs/challenges/performance/40-christmas-web-worker.md index a341d4d..badff8c 100644 --- a/docs/src/content/docs/challenges/performance/40-christmas-web-worker.md +++ b/docs/src/content/docs/challenges/performance/40-christmas-web-worker.md @@ -29,4 +29,4 @@ First, create a web worker using the schematics, then move the issuing function. ### Note -Since we are inside an Nx workspace, simply replace the `ng` command with `nx` when running the schematic. +Since we are inside an Nx workspace, simply replace the `ng` command with `nx` when running the schematic with `npx`. From c26e7251e87909fb23aed9831790bcd935117d84 Mon Sep 17 00:00:00 2001 From: thomas Date: Tue, 12 Dec 2023 08:25:43 +0100 Subject: [PATCH 12/17] feat: update doc following comments --- .../challenges/performance/40-christmas-web-worker.md | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/docs/src/content/docs/challenges/performance/40-christmas-web-worker.md b/docs/src/content/docs/challenges/performance/40-christmas-web-worker.md index badff8c..a1b81eb 100644 --- a/docs/src/content/docs/challenges/performance/40-christmas-web-worker.md +++ b/docs/src/content/docs/challenges/performance/40-christmas-web-worker.md @@ -19,14 +19,16 @@ This application is basic. We click on the **Discover** button to reveal the sur Since JavaScript is single-threaded, when we perform a heavy task, the browser cannot update the UI or respond to mouse clicks or any events. To free the main thread, the goal is to isolate the heavy computation into a different thread. To do so, we will need to use web workers. Web workers can run any scripts in the background, in isolation from the main thread, allowing the browser to still provide your user with a good experience. -In Angular, this technology is often underused, however, it's straightforward to create one. There is a schematic that you can find here. +In Angular, this technology is often underused, however, it's straightforward to create one. There is a schematic that you can find [here](https://angular.io/guide/web-worker). ## Statement The goal of this challenge is to create a smooth animation by isolating the heavy computation function into a web worker. -First, create a web worker using the schematics, then move the issuing function. Finally, the animation should be smooth and provide an awesome user experience. +First, create a web worker using a schematic, then move the issuing function. Finally, the animation should be smooth and the progress percentage should update, which will provide an awesome user experience. -### Note +:::note +Since we are inside an Nx workspace, simply replace the `ng` command with `nx` when running the schematic. -Since we are inside an Nx workspace, simply replace the `ng` command with `nx` when running the schematic with `npx`. +If `nx` is not install globally on your machine, prefix your command with `npx`. +::: From c34ecfe64f11f804764ec9a35a93d5d73f154238 Mon Sep 17 00:00:00 2001 From: kabrunko-dev Date: Tue, 12 Dec 2023 09:16:09 -0300 Subject: [PATCH 13/17] 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 14/17] 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 +
Laforge Thomas
Laforge Thomas
🧩 💻 📖 🖋 🤔 🎨 🇫🇷		Laforge Thomas
Laforge Thomas
🧩 💻 📖 🖋 🤔 🎨 🇫🇷		 Alan Dragicevich
Alan Dragicevich
📖		 Michel EDIGHOFFER
Michel EDIGHOFFER
📖		 Gerardo Sebastian Gonzalez
Gerardo Sebastian Gonzalez
📖		J. Degand
J. Degand
📖
Devesh Chaudhari
Devesh Chaudhari
💻 🐛 🧩		Devesh Chaudhari
Devesh Chaudhari
💻 🐛 🧩		 Dmitriy Mishchenko
Dmitriy Mishchenko
📖		 Sagar Devkota
Sagar Devkota
📖 💻		Nelson Gutierrez
Nelson Gutierrez
🇪🇸		Nelson Gutierrez
Nelson Gutierrez
🇪🇸		 Hossain K. M.
Hossain K. M.
📖
Sagar Devkota
Sagar Devkota
📖 💻		 Nelson Gutierrez
Nelson Gutierrez
🇪🇸		 Hossain K. M.
Hossain K. M.
📖		Diogo Nishikawa
Diogo Nishikawa
🇧🇷