Feat/translation (#26)

* feat: traduz index * feat: traduz index melhorado * feat: traduz index sec * Feat/localization (#25) * feat: Adds localization menu * feat: Rm unused translations fix menu when there are no translations * feat: Gray out components if translation is not available * feat: Adds informative tooltip to translations button * fix: Home link on translated pages * chore: Editor config and indentation * feat: Hide i18n menu when there are not translations available * feat: Uses pt only for pt-br pages * feat: Adds metadata and improves menu * feat: Improve nav menu * feat: traduz about * feat: traduz parte de uma postagem * fix: Menu links and file extension * feat: Rm language tools checks * feat: Adds translations to pr preview * fix: PR build * fix: Out of date hugo version on workflows * fix: Links with double language prefix * fix: Localized links * feat: Includes language on home link * feat: Translate strings * feat: Translate blog post strings * feat: Translates the footer * feat: termina traduçao wiping your aws * feat: traduz o nome do artigo * feat: apaga um ponto final errado * fix: Dropdown menu * feat: Don't show current translation on menu * feat: Translates about permalink * feat: Translates post slug * feat: Adds translatedBy to blog posts * feat: Adds translations references * feat: add translate e language * chore: Minor improvements * feat: Minor improvements * fix: link --------- Co-authored-by: o-leolleo <[email protected]>
o-leolleo · Feb 16, 2024 · 6a8558a · 6a8558a
1 parent eb451e4
commit 6a8558a
Show file tree

Hide file tree

Showing 23 changed files with 588 additions and 81 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -1,5 +1,6 @@
-[*]
 root = true
+
+[*]
 charset = utf-8
 end_of_line = lf
 indent_size = 2

diff --git a/.github/workflows/languagetool.yml b/.github/workflows/languagetool.yml
diff --git a/.github/workflows/live.yml b/.github/workflows/live.yml
@@ -9,7 +9,7 @@ jobs:
   build:
     runs-on: ubuntu-latest
     env:
-      HUGO_VERSION: 0.111.3
+      HUGO_VERSION: 0.121.1
     steps:
       - uses: actions/setup-node@v3
         with:

diff --git a/.github/workflows/pr.yml b/.github/workflows/pr.yml
@@ -14,7 +14,7 @@ jobs:
   build:
     runs-on: ubuntu-latest
     env:
-      HUGO_VERSION: 0.111.3
+      HUGO_VERSION: 0.121.1
     steps:
       - uses: actions/setup-node@v3
         with:

diff --git a/assets/js/index.js b/assets/js/index.js
@@ -62,4 +62,21 @@ function handleScroll() {
   }
 }
 
+function toggleI18nMenu(e) {
+  const i18nMenu = document.getElementById('i18n-menu');
+
+  if (e.type === 'focusout' && i18nMenu.contains(e.relatedTarget)) {
+    return;
+  }
+
+  i18nMenu.classList.toggle('hidden');
+}
+
+const i18nButton = document.getElementById('i18n-btn');
+
+if (i18nButton) {
+  i18nButton.addEventListener('click', toggleI18nMenu);
+  i18nButton.addEventListener('focusout', toggleI18nMenu);
+}
+
 window.addEventListener('DOMContentLoaded', main);
diff --git a/config.pr.toml b/config.pr.toml
@@ -1,5 +1,5 @@
 baseURL = '/'
-languageCode = 'en-us'
+defaultContentLanguage = 'en'
 title = 'Leonardo Prado'
 sectionPagesMenu = "main"
 disableKinds = ['taxonomy', 'term']
@@ -8,20 +8,45 @@ summaryLength = 40
 [params]
   dateFormat = 'Jan 02, 2006'
   iconSize = '40px'
+
 [menu]
-[[menu.main]]
-  identifier = 'blog'
-  name = 'Blog'
-  title = 'Blog'
-  pageref = '/blog'
-  weight = -110
-[[menu.main]]
-  identifier = 'about'
-  name = 'About'
-  title = 'About'
-  pageref = '/about'
-  weight = -100
+  [[menu.main]]
+    identifier = 'blog'
+    name = 'Blog'
+    title = 'Blog'
+    pageref = '/blog'
+    weight = -110
+  [[menu.main]]
+    identifier = 'about'
+    name = 'About'
+    title = 'About'
+    pageref = '/about'
+    weight = -100
 
 [markup]
   [markup.highlight]
     noClasses = false
+
+[languages]
+  [languages.en]
+    languageCode = 'en'
+    languageName = 'English'
+    weight = 1
+  [languages.pt]
+    languageCode = 'pt'
+    languageName = 'Português'
+    weight = 2
+    [languages.pt.permalinks]
+      [languages.pt.permalinks.section]
+        about = 'sobre'
+    [languages.pt.menus]
+      [[languages.pt.menus.main]]
+        identifier = 'blog'
+        name = 'Blog'
+        title = 'Blog'
+        pageref = '/blog'
+      [[languages.pt.menus.main]]
+        identifier = 'about'
+        name = 'Sobre'
+        title = 'Sobre'
+        pageref = '/about'
diff --git a/config.toml b/config.toml
@@ -1,5 +1,5 @@
 baseURL = '/'
-languageCode = 'en-us'
+defaultContentLanguage = 'en'
 title = 'Leonardo Prado'
 sectionPagesMenu = "main"
 disableKinds = ['taxonomy', 'term']
@@ -9,20 +9,45 @@ summaryLength = 40
   dateFormat = 'Jan 02, 2006'
   iconSize = '40px'
   googleAnalyticsTag = 'G-C6FZCFZCC4'
+
 [menu]
-[[menu.main]]
-  identifier = 'blog'
-  name = 'Blog'
-  title = 'Blog'
-  pageref = '/blog'
-  weight = -110
-[[menu.main]]
-  identifier = 'about'
-  name = 'About'
-  title = 'About'
-  pageref = '/about'
-  weight = -100
+  [[menu.main]]
+    identifier = 'blog'
+    name = 'Blog'
+    title = 'Blog'
+    pageref = '/blog'
+    weight = -110
+  [[menu.main]]
+    identifier = 'about'
+    name = 'About'
+    title = 'About'
+    pageref = '/about'
+    weight = -100
 
 [markup]
   [markup.highlight]
     noClasses = false
+
+[languages]
+  [languages.en]
+    languageCode = 'en'
+    languageName = 'English'
+    weight = 1
+  [languages.pt]
+    languageCode = 'pt'
+    languageName = 'Português'
+    weight = 2
+    [languages.pt.permalinks]
+      [languages.pt.permalinks.section]
+        about = 'sobre'
+    [languages.pt.menus]
+      [[languages.pt.menus.main]]
+        identifier = 'blog'
+        name = 'Blog'
+        title = 'Blog'
+        pageref = '/blog'
+      [[languages.pt.menus.main]]
+        identifier = 'about'
+        name = 'Sobre'
+        title = 'Sobre'
+        pageref = '/about'
diff --git a/content/_index.pt.md b/content/_index.pt.md
@@ -0,0 +1,13 @@
+---
+title: "Leonardo Prado"
+date: 2023-01-04T17:08:40-03:00
+command: cd ~
+translatedBy: amanda-sato
+---
+
+# Olá 👋
+
+Eu sou Leo, e este é o meu blog, meu espaço pessoal na web. Em breve, estarei escrevendo sobre tecnologia e alguns outros tópicos interessantes.
+
+Espero que você goste da leitura!
+
diff --git a/content/about/_index.pt.md b/content/about/_index.pt.md
@@ -0,0 +1,17 @@
+---
+title: Sobre
+slug: sobre
+date: 2023-03-11T15:43:00-00:00
+command: whoami
+translatedBy: amanda-sato
+---
+
+# Eu 👨‍💻
+
+Olá, meu nome é Leonardo Cavalcante do Prado, sou um Engenheiro DevOps brasileiro, vindo da região Nordeste do País.
+
+Minha paixão por trabalhos criativos remonta aos meus primeiros anos, e inicialmente a expressei através do desenho. Até tenho algumas de minhas obras publicadas online, e posso compartilhá-las aqui no futuro. Depois, eu me graduei em Engenharia da Computação pela Universidade Federal do Vale do São Francisco (UNIVASF). Embora eu tenha inclinação para artes, eu também sempre tive um grande interesse nas matérias [CTEM](https://pt.wikipedia.org/wiki/STEM) - ou [STEAM](https://en.wikipedia.org/wiki/Science,_technology,_engineering,_and_mathematics), em inglês. Eu, particularmente, acho fascinantes as maneiras criativas pelas quais a abstração é usada para resolver problemas complexos e dar sentido ao desconhecido.
+
+Programação, resolução de problemas, GNU Linux, desenvolvimento web, DevOps, automação e Agile são todas áreas que capturaram minha atenção ao longo dos anos. Fui incentivado por colegas, postagens em blogs e especialmente por minha esposa a compartilhar meu conhecimento e experiências, sendo uma das razões pelas quais criei este blog. Escrever também me ajuda a manter-me atualizado e alimenta minha curiosidade e vontade de aprender.
+
+Espero que você aprecie a leitura do meu blog tanto quanto eu aprecio escrevê-lo 😁.
diff --git a/content/blog/_index.pt.md b/content/blog/_index.pt.md
@@ -0,0 +1,10 @@
+---
+title: "Blog"
+date: 2023-01-04T17:08:40-03:00
+command: "ls -la"
+translatedBy: amanda-sato
+---
+
+Olá👋, eu estou escrevendo sem um calendário específico, e sobre coisas que, no momento da escrita, me interessem mais. A ideia é que eu possa aprender ao mesmo tempo em que compartilho conhecimento. **_Aprenda em público_** é o que eles dizem.
+
+
diff --git a/content/blog/hugo-tailwind-cf-pages--and-gh-actions.pt.md b/content/blog/hugo-tailwind-cf-pages--and-gh-actions.pt.md
@@ -0,0 +1,115 @@
+---
+title: "Hugo, Tailwind, Cloudflare Pages e GitHub Actions"
+slug: hugo-tailwind-cloudflare-pages-e-gitHub-actions
+date: 2023-03-14T19:14:47Z
+language: pt
+translatedBy: amanda-sato
+---
+
+
+Neste post, discuto a tech stack deste blog e as decisões por trás dela. É meu primeiro conteúdo em um bom tempo, espero que você o ache útil.
+
+<!--more-->
+
+A vida e a carreira mudaram bastante desde a minha última [presença](https://medium.com/sysvale/iac-infraestrutura-como-c%C3%B3digo-c514a869b88d) na web três anos atrás. Fiz a transição completa para o mundo DevOps e comecei a trabalhar com CI/CD, IaC, automação e toneladas de YAML diariamente. No entanto, o mundo da tecnologia está em constante movimento, e senti a necessidade de uma forma de continuar aprendendo e me mantendo atualizado. Por isso, este blog foi criado, sendo também uma das razões para escolher cada uma das tecnologias discutidas nas seções seguintes.
+
+## Hugo
+
+Além de sua popularidade e velocidade, o Hugo utiliza Go e seus modelos de templates. Tenho experiência prática com o Helm, que também utiliza essa mesma stack. Portanto, escolher o Hugo me permitiria intercambiar habilidades entre essas ferramentas. Ao utilizá-lo, eu aprimoraria minhas habilidades no Helm e vice-versa.
+
+Algumas pessoas poderiam listar os modelos de Go como a razão para não escolher o Hugo, curiosamente, foi isso que me atraiu para ele. No entanto, tenho que concordar que, à primeira vista, não é tão intuitivo quanto outros motores de templates, como [jinja2](https://jinja.palletsprojects.com/en/3.1.x/templates/). Para ter um vislumbre de como é, o trecho abaixo mostra o código Hugo para a [página](/blog) deste post no blog.
+
+```html
+{{ define "main" }}
+{{ $shouldCenter := cond (gt (len .Pages) 0) "text-center" "" }}
+<article class="{{ $shouldCenter }} prose  dark:prose-invert mx-auto">
+  {{ .Content }}
+</article>
+
+{{ if len .Pages }}
+<article class="prose dark:prose-invert mx-auto mt-10 mb-6">
+  <h2 class="text-center">All articles</h2>
+
+  <ul class="pl-0 list-outside">
+    {{ range .Pages.ByLastmod.Reverse }}
+    <li class="pl-0 flex flex-col">
+      <h2>{{ .Title }}</h2>
+      <p class="text-sm">
+        :: {{ .Date.Format .Site.Params.DateFormat }}
+        :: {{ partial "minread.html" . }}
+      </p>
+      <p>{{ .Summary }}</p>
+      <div class="not-prose">
+        <a class="anchor" href="{{ .Permalink }}">
+          Read more &#x21C0;
+        </a>
+      </div>
+    </li>
+    {{ end }}
+  </ul>
+</article>
+{{ end }}
+{{ end }}
+```
+
+## Tailwind
+
+O Tailwind é um framework muito popular, e sua abordagem baseada em utilitários afirma exigir praticamente nenhuma escrita de CSS personalizado. Isso parecia muito persuasivo, já que a popularidade facilitaria encontrar recursos online, e sua abordagem se alinharia ao meu conhecimento prévio -- Não tenho muita experiência em frontend, então escrever CSS personalizado levaria mais tempo do que eu gostaria.
+
+As alegações mostraram-se verdadeiras, e você pode verificar abaixo um trecho mostrando todo o CSS personalizado usado neste blog.
+
+```scss
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer components {
+  /* Isso apenas fornece um alias para um conjunto de classes 
+     do Tailwind comumente usadas juntas. */
+  .anchor {
+    @apply
+      font-medium
+      text-indigo-700
+      dark:text-indigo-400
+      hover:underline;
+  }
+}
+
+/* CSS personalizado começa aqui :D */
+.terminal-cursor {
+  animation: cursor .8s infinite;
+}
+
+@keyframes cursor {
+  from {
+    opacity: 0;
+  }
+
+  50% {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+```
+
+## Cloudflare Pages
+
+Eu precisava de uma maneira fácil de obter o máximo da hospedagem estática integrada. Algumas opções estavam disponíveis, como [GitHub pages](https://pages.github.com/), [Netlify](https://www.netlify.com/) e outros. Como eu hospedo a configuração do meu domínio no Cloudflare, a solução deles pareceu interessante, pois as coisas poderiam ser mantidas em um único lugar. Ter um [cli](https://developers.cloudflare.com/workers/wrangler/) para automatizar o fluxo de trabalho por conta própria, também parecia uma boa ideia, pois, dessa forma, eu poderia adicionar quaisquer passos personalizados que desejasse, por exemplo:
+
+- [limpar o cache DNS após implantações.](https://github.com/o-leolleo/blog/blob/main/.github/workflows/cicd.yml#L85)
+- [ter suporte para ambientes de recursos com limpeza automática em pull requests.](https://github.com/o-leolleo/blog/blob/main/.github/workflows/clean-up.yml)
+- quaisquer verificações automatizadas futuras.
+
+O Wrangler (a CLI) também possui uma biblioteca oficial [GitHub action](https://github.com/marketplace/actions/deploy-to-cloudflare-workers-with-wrangler) com boa documentação e que eu uso para implantar este blog.
+
+## GitHub Actions
+
+Esta é a ferramenta CI/CD integrada ao GitHub. Além de ser uma solução nativa, é uma ferramenta muito fácil de usar com uma comunidade extensa ao seu redor. Você pode encontrar uma ação para praticamente tudo e também criar a sua própria quando as existentes não se encaixam. 
+Tem uma documentação muito boa e uma estrutura muito clara. Não precisei pensar muito e fui direto usá-la.
+
+## Conclusão
+
+Finalmente, reuni as ferramentas e consegui arranjar tempo para escrever este primeiro post em muito tempo. As ferramentas escolhidas tornaram todo o processo tranquilo, especialmente devido ao conteúdo e à comunidade ao seu redor. Com o tempo, posso preencher este espaço na web com mais e mais conteúdo 😄. Espero que tenha gostado deste primeiro!