Merge pull request #101 from LuizMeier/feat/87-review-posts-to-use-colored-prompts

Feat/87 review posts to use colored prompts

Author: LuizMeier

_posts/en/2025-02-04-authentication-backstage-entra-id.md

@@ -28,9 +28,11 @@ Since I found it difficult to locate online resources on authentication with Ent
 According to their official [description](https://backstage.io/docs/overview/what-is-backstage/):  
 
 > *[Backstage](https://backstage.io/) is an open-source framework for building developer portals. Powered by a centralized software catalog, Backstage restores order to your microservices and infrastructure and enables your product teams to ship high-quality code quickly — without compromising autonomy.*  
-> *Backstage unifies all your infrastructure tooling, services, and documentation to create a streamlined development environment from end to end.*  
+> *Backstage unifies all your infrastructure tooling, services, and documentation to create a streamlined development environment from end to end.*
+---
 
-💡 **Note:** Backstage is entirely **developer-focused**. If you, like me, come from an infrastructure background, you may find it challenging since all configurations are done through system files — there is no admin interface for managing users, permissions, integrations, or plugins.  
+> **Note:** Backstage is entirely **developer-focused**. If you, like me, come from an infrastructure background, you may find it challenging since all configurations are done through system files — there is no admin interface for managing users, permissions, integrations, or plugins.
+{: .prompt-info }
 
 ---
 
@@ -52,7 +54,8 @@ You can then access Backstage locally at `http://localhost:3000`, signing in as
 ![Guest home page](assets/img/backstage-entraid/user-home.png)
 *Guest home page*
 
-💡 **Guest access is meant for development purposes only and is not recommended for production.** However, if you still want to enable full guest access, you can find the documentation [here](https://backstage.io/docs/auth/guest/provider/).
+> **Guest access is meant for development purposes only and is not recommended for production.** However, if you still want to enable full guest access, you can find the documentation [here](https://backstage.io/docs/auth/guest/provider/).
+{: .prompt-info }
 
 ---
 
@@ -109,10 +112,12 @@ auth:
             - resolver: userIdMatchingUserEntityAnnotation
 ```
 
-📌 The values for `clientId`, `tenantId`, and `domainHint` can be found on the **Overview** page of your App Registration in Entra ID.  
-📌 The `clientSecret` is created under **Certificates & Secrets**.  
-
-⚠️ **Security Warning:** Never store `clientSecret` directly in the code. Use **environment variables** for production environments.
+> 📌 The values for `clientId`, `tenantId`, and `domainHint` can be found on the **Overview** page of your App Registration in Entra ID.  
+> 📌 The `clientSecret` is created under **Certificates & Secrets**.
+{: .prompt-tip }
+---
+> **Security Warning:** Never store `clientSecret` directly in the code. Use **environment variables** for production environments.
+{: .prompt-warning }
 
 ![clientId, tenantId and domainHint](assets/img/backstage-entraid/app-data.png)
 *clientId, tenantId and domainHint*
@@ -186,7 +191,8 @@ const app = createApp({
 
 Once this is done, you should see the **Microsoft login button** on the Backstage UI.
 
-🚨 However, authentication will fail at this point because Backstage does not recognize the user in its catalog. This leads us to the next step.
+> However, authentication will fail at this point because Backstage does not recognize the user in its catalog. This leads us to the next step.
+{: .prompt-danger }
 
 ![Authentication error](assets/img/backstage-entraid/auth-error.png)
 *Authentication error*
@@ -217,12 +223,14 @@ spec:
     - guests
 ```
 
+>
 📌 Notes:
-
+>
 - `metadata.name`: Mail nickname (value before @yourdomain.com).
 - `metadata.annotations.graph.microsoft.com/user-id`: `Object ID` of the user.
 - `displayName`: Full name of the user.
 - `email`: Full email address.
+{: .prompt-tip }
 
 ## Final Thoughts
 

_posts/en/2025-03-05-integrating-backstage-azure-devops.md

@@ -36,11 +36,13 @@ I'll keep a repository on my GitHub with the Backstage code resulting from these
 9. [Final Test](#final-test)
 10. [Conclusion](#conclusion)
 
-💡 **Note**: Having Entra ID as an IDP is not a prerequisite for working with Azure DevOps. However, it is common for both solutions to be used in a Microsoft environment.
+> **Note**: Having Entra ID as an IDP is not a prerequisite for working with Azure DevOps. However, it is common for both solutions to be used in a Microsoft environment.
+{: .prompt-tip }
 
 For this post, I created a new project in Azure DevOps called Backstage, where we will store our Backstage template, Terraform code, and the yaml file to create our pipeline.
 
-⚠️ **Attention**: I will assume that you already know how to create a project, repository, and use the minimum necessary git commands.
+> **Attention**: I will assume that you already know how to create a project, repository, and use the minimum necessary git commands.
+{: .prompt-warning}
 
 [In this link](https://backstage.io/docs/integrations/azure/locations) you can check the Backstage documentation for this integration. Backstage supports the use of managed identity, service principal, and PAT. For the purpose of this post, I will use PAT as it is simpler.
 
@@ -239,11 +241,12 @@ spec:
         entityRef: {% raw %}${{ steps.register.output.entityRef }}{% endraw %}
 ```
 
-> ⚠️**Important Note about Templates**⚠️:
->
-> When using relative paths for file handling in Backstage, it **always** starts from the location where **the template was imported**.
->
-> In other words, it always concatenates the path you provide with the path from where the template was imported. Thus, either you keep the files to be handled in the same location as the file from which you imported the template or use a URL from an external location, which is the approach I used here in the `fetch:template` action. More about this can be seen [here](https://backstage.io/docs/features/software-templates/) and [here](https://backstage.io/docs/tooling/cli/templates/).
+> **Important Note about Templates**:
+
+When using relative paths for file handling in Backstage, it **always** starts from the location where **the template was imported**.
+
+In other words, it always concatenates the path you provide with the path from where the template was imported. Thus, either you keep the files to be handled in the same location as the file from which you imported the template or use a URL from an external location, which is the approach I used here in the `fetch:template` action. More about this can be seen [here](https://backstage.io/docs/features/software-templates/) and [here](https://backstage.io/docs/tooling/cli/templates/).
+{: .prompt-warning }
 
 Returning to our process, create the template file in Azure DevOps (replacing the necessary fields) and then go to Backstage and follow the same import process we did before in the integration test. When importing the template, you might encounter the error below:
 
@@ -276,14 +279,16 @@ resource "azurerm_resource_group" "example" {
 }
 ```
 
-⚠️ I am not using a storage account here to store your Terraform state! For production environments, I suggest storing the state in a secure location.
+> I am not using a storage account here to store your Terraform state! For production environments, I suggest storing the state in a secure location.
+{: .prompt-tip }
 
 Pay attention to the `name` variable, as it will be filled with the value coming from Backstage. Here we are making a very simple example using only one variable, but extrapolate this idea to any code you want to execute.
 
 Once the Terraform code is created, upload it to our Azure DevOps repository.
 
-💡 **Important**: since the idea is for Backstage to handle this file and then upload it and subsequently create a Pull Request of code, this (containing the `name` variable) will be replaced by the value coming from Backstage, making the code **non-reusable**.
+> **Important**: since the idea is for Backstage to handle this file and then upload it and subsequently create a Pull Request of code, this (containing the `name` variable) will be replaced by the value coming from Backstage, making the code **non-reusable**.
 To avoid this, we will separate the code with the variable, which we will call `base`, from the code that will have the variable filled, which we will call `changed`, for simplicity. This way, we will always have a place with the code ready to be used.
+{: .prompt-info }
 
 Below is the approach I find the simplest, but feel free to adapt it to your needs:
 

_posts/pt-BR/2025-02-04-authentication-backstage-entra-id.md

@@ -28,9 +28,11 @@ Como tive dificuldades para encontrar recursos sobre autenticação com o Entra
 De acordo com sua [descrição](https://backstage.io/docs/overview/what-is-backstage) oficial:  
 
 > *[Backstage](https://backstage.io/) é uma estrutura de código aberto para construção de portais de desenvolvedores. Alimentado por um catálogo de software centralizado, o Backstage restaura a ordem de seus microsserviços e infraestrutura e permite que suas equipes de produto enviem códigos de alta qualidade rapidamente, sem comprometer a autonomia.*  
-> *Backstage unifica todas as ferramentas, serviços e documentação de sua infraestrutura para criar um ambiente de desenvolvimento simplificado de ponta a ponta.*  
+> *Backstage unifica todas as ferramentas, serviços e documentação de sua infraestrutura para criar um ambiente de desenvolvimento simplificado de ponta a ponta.*
+---
 
-💡 **Nota:** Backstage é totalmente **focado em desenvolvedores**. Se você, assim como eu, vem da área de infraestrutura, pode estranhar o fato de que toda a configuração é feita via arquivos de sistema—não há uma interface administrativa para gerenciar usuários, permissões, integrações ou plugins.  
+> **Nota:** O Backstage é totalmente **focado em desenvolvedores**. Se você, assim como eu, vem da área de infraestrutura, pode estranhar o fato de que toda a configuração é feita via arquivos de sistema—não há uma interface administrativa para gerenciar usuários, permissões, integrações ou plugins.
+{: .prompt-info }
 
 ---
 
@@ -52,8 +54,8 @@ Você pode então acessar o Backstage localmente em `http://localhost:3000`, ent
 ![Página inicial de convidado](assets/img/backstage-entraid/user-home.png)
 *Página inicial de convidado*
 
-💡 **O acesso de convidado é destinado apenas para desenvolvimento e não é recomendado para produção.** No entanto, se desejar habilitá-lo, consulte a documentação [aqui](https://backstage.io/docs/auth/guest/provider/).  
-
+> **O acesso de convidado é destinado apenas para desenvolvimento e não é recomendado para produção.** No entanto, se desejar habilitá-lo, consulte a documentação [aqui](https://backstage.io/docs/auth/guest/provider/).  
+{: .prompt-info }
 ---
 
 ## Passo 2: Criar um App Registration no Entra ID
@@ -110,10 +112,12 @@ auth:
             - resolver: userIdMatchingUserEntityAnnotation
 ```
 
-📌 Os valores para `clientId`, `tenantId` e `domainHint` podem ser encontrados na **página Overview** do seu App Registration no Entra ID.  
-📌 O `clientSecret` é gerado na seção **Certificates & Secrets**.  
-
-⚠️ **Aviso de Segurança:** Nunca armazene `clientSecret` diretamente no código. Utilize **variáveis de ambiente** em produção.
+> 📌 Os valores para `clientId`, `tenantId` e `domainHint` podem ser encontrados na **página Overview** do seu App Registration no Entra ID.  
+> 📌 O `clientSecret` é gerado na seção **Certificates & Secrets**.
+{: .prompt-tip }
+---
+> **Aviso de Segurança:** Nunca armazene `clientSecret` diretamente no código. Utilize **variáveis de ambiente** em produção.
+{: .prompt-warning }
 
 ![clientId, tenantId e domainHint](assets/img/backstage-entraid/app-data.png)
 *clientId, tenantId e domainHint*
@@ -187,7 +191,8 @@ const app = createApp({
 
 Com isto feito já é possível ver que o botão de autenticação via Entra ID está disponível na interface.
 
-🚨 Contudo, a autenticação falhará, pois o Backstage não é capaz de reconhecer o usuário no catálogo. Isso nos leva ao próximo passo.
+> Contudo, a autenticação falhará, pois o Backstage não é capaz de reconhecer o usuário no catálogo. Isso nos leva ao próximo passo.
+{: .prompt-danger }
 
 ![Erro de autenticação](assets/img/backstage-entraid/auth-error.png)
 *Erro de autenticação*
@@ -218,14 +223,14 @@ spec:
     - guests
 ```
 
+>
 📌 Notas:
-
+>
 - `metadata.name`: é o valor de `Mail nickname`, ou o valor antes de `@seudominio.com`;
 - `metadata.annotations.graph.microsoft.com/user-id`: é o valor de `Object ID`;
 - `displayName`: nome do usuário;
 - `email`: endereço de email completo
-
----
+{: .prompt-tip }
 
 ## Considerações Finais
 

_posts/pt-BR/2025-03-05-integrating-backstage-azure-devops.md

@@ -36,11 +36,13 @@ Eu vou manter no meu GitHub um repositório do Backstage com o resultado destes
 9. [Teste final](#teste-final)
 10. [Conclusão](#conclusão)
 
-💡 **Nota**: Ter o Entra ID como IDP não é um pré-requisito para o funcionamento com o Azure DevOps. Porém, é comum que as duas soluções sejam usadas em ambiente Microsoft.
+> **Nota**: Ter o Entra ID como IDP não é um pré-requisito para o funcionamento com o Azure DevOps. Porém, é comum que as duas soluções sejam usadas em ambiente Microsoft.
+{: .prompt-tip }
 
 Para este post, criei um projeto novo no Azure DevOps chamado Backstage, que é onde armazenaremos nosso template do Backstage, nosso código Terraform e o arquivo yaml para criarmos a nossa pipeline.
 
-⚠️ **Atenção**: Assumirei que você já sabe como criar um projeto, repositório e usar o mínimo de git necessário.
+> **Atenção**: Assumirei que você já sabe como criar um projeto, repositório e usar o mínimo de git necessário.
+{: .prompt-warning}
 
 [Neste link](https://backstage.io/docs/integrations/azure/locations) você pode checar a documentação do Backstage para fazer esta integração. O Backstage suporta uso de identidade gerenciada, service principal e PAT. Para o propósito do post, vou usar PAT por ser mais simples.
 
@@ -238,11 +240,12 @@ spec:
         entityRef: {% raw %}${{ steps.register.output.entityRef }}{% endraw %}
 ```
 
-> ⚠️**Nota Importante sobre os templates**⚠️:
->
-> Quando utilizamos caminho relativo na tratativa de arquivos no Backstage, ele **sempre** levará como local de partida o local de onde **o template foi importado**.
->
-> Em outras palavras, ele sempre concatenará o caminho que você informar com o caminho de onde o template foi importado. Dessa forma, ou você mantém os arquivos a serem tratados no mesmo local do arquivo de onde importou o template ou utiliza uma url de um lugar externo, que foi a abordagem que usei aqui na ação `fetch:template`. Mais sobre isso pode ser visto [aqui](https://backstage.io/docs/features/software-templates/) e [aqui](https://backstage.io/docs/tooling/cli/templates/).
+> **Nota Importante sobre os templates**:
+
+Quando utilizamos caminho relativo na tratativa de arquivos no Backstage, ele **sempre** levará como local de partida o local de onde **o template foi importado**.
+
+Em outras palavras, ele sempre concatenará o caminho que você informar com o caminho de onde o template foi importado. Dessa forma, ou você mantém os arquivos a serem tratados no mesmo local do arquivo de onde importou o template ou utiliza uma url de um lugar externo, que foi a abordagem que usei aqui na ação `fetch:template`. Mais sobre isso pode ser visto [aqui](https://backstage.io/docs/features/software-templates/) e [aqui](https://backstage.io/docs/tooling/cli/templates/).
+{: .prompt-warning }
 
 Voltando ao nosso processo, crie o arquivo do template no Azure DevOps (substituindo os campos devidos) e então vá até o Backstage e siga o mesmo processo de importação que fizemos antes no teste de integração. Na hora em que for importar o template, pode ser que se depare com o erro abaixo:
 
@@ -275,14 +278,16 @@ resource "azurerm_resource_group" "example" {
 }
 ```
 
-⚠️ Eu não estou usando aqui uma conta de armazenamento para que você guarde o estado do seu Terraform! Para ambientes de produção, sugiro armazenar o estado em algum lugar seguro.
+> Eu não estou usando aqui uma conta de armazenamento para que você guarde o estado do seu Terraform! Para ambientes de produção, sugiro armazenar o estado em algum lugar seguro.
+{: .prompt-tip }
 
 Atenção para a variável `name`, pois ela será preenchida pelo valor que vier do Backstage. Aqui estamos fazendo um exemplo bem simples, usando somente uma variável, mas extrapole essa ideia para qualquer código que você queira executar.
 
 Uma vez criado o código terraform, vamos fazer o upload dele para o nosso repositório do Azure DevOps.
 
-💡 **Importante**: como a ideia é que o Backstage faça a tratativa deste arquivo e depois faça o upload e subsequente criação de um Pull Request de código, este (contendo a variável `name`) será substituído pelo valor que virá do Backstage, tornando o código **não-reutilizável**.
+> **Importante**: como a ideia é que o Backstage faça a tratativa deste arquivo e depois faça o upload e subsequente criação de um Pull Request de código, este (contendo a variável `name`) será substituído pelo valor que virá do Backstage, tornando o código **não-reutilizável**.
 Para evitar isso, vamos separar o código com a variável, que chamaremos de `base`, do código que terá a variável preenchida, que chamaremos de `changed`, para facilitar. Assim, sempre teremos um lugar com o código pronto para ser utilizado.
+{: .prompt-info }
 
 Abaixo segue a abordagem que entendo ser a mais simples, mas fique a vontade para adaptar à sua necessidade: