Brazilian Portuguese translation

.gitignore

@@ -68,3 +68,6 @@ yarn-error.log
 .pnp.js
 # Yarn Integrity file
 .yarn-integrity
+
+
+.nvmrc

gatsby-config.js

@@ -44,6 +44,7 @@ const plugins = [
   createSearchConfig('finnish', 'fi'),
   createSearchConfig('english', 'en'),
   createSearchConfig('chinese', 'zh'),
+  createSearchConfig('portuguese', 'ptbr'),
   {
     resolve: `gatsby-plugin-sitemap`,
   },

src/components/LanguagePicker/index.js

@@ -19,6 +19,14 @@ const LanguagePicker = ({
 
   const className = cn(classNameProp, styles.select);
 
+  const fontSizeStyle = {
+    fontSize: '1em'
+  };
+
+  if (value === 'ptbr') {
+    fontSizeStyle.fontSize = '0.65em'
+  };
+
   return (
     /*eslint jsx-a11y/no-onchange: "off" */
     <>
@@ -32,6 +40,7 @@ const LanguagePicker = ({
         value={value}
         onChange={selectOnChange}
         className={className}
+        style={fontSizeStyle }
       >
         {TRANSLATION_LANGUAGE_OPTIONS.map(({ value: optionValue, label }) => (
           <option value={optionValue} key={optionValue}>

src/components/LanguageSwitcher/LanguageSwitcher.js

@@ -23,6 +23,8 @@ const LanguageSwitcher = ({ lang }) => {
       <Language language="en" active={lang} />
 
       <Language language="zh" active={lang} />
+
+      <Language language="ptbr" active={lang} />
     </div>
   );
 };

src/components/Navigation/Navigation.js

@@ -37,7 +37,7 @@ export const getNavigation = (language, t) => {
 };
 
 const searchIsEnabledForLang = lang => {
-  return ['fi', 'en', 'zh'].includes(lang);
+  return ['fi', 'en', 'zh', 'ptbr'].includes(lang);
 };
 
 const handleCloseMenu = () =>

src/components/PartBanner/PartBanner.js

@@ -69,12 +69,38 @@ const partNameTranslations = {
     'Conteneurs',
     'Utilisation de bases de donées relationnelles'
   ],
+  ptbr: [
+    'Fundamentos de aplicações web',
+    'Introdução ao React',
+    'Comunicação com o servidor',
+    'Programando um servidor com NodeJS e Express',
+    'Teste de servidores Express e Administração de Usuários',
+    'Teste de aplicações React',
+    'Gerenciamento de Estado com Redux',
+    'React router, hooks personalizados, estilização de aplicações com CSS e Webpack',
+    'GraphQL',
+    'TypeScript',
+    'React Native',
+    'CI/CD',
+    'Containers',
+    'Utilizando bancos de dados relacionais',
+  ],
 };
 
 export const PartBanner = ({ lang }) => {
   // TODO change on release
   const parts = Object.keys(navigation[lang]);
 
+  function partName(lang) {
+    return lang === 'fi' ? 'Osa' : lang==='ptbr' ? 'Parte' : 'Part'
+    // if (lang === 'fi') {
+    //   return 'Osa'
+    // } else if (lang === 'ptbr') {
+    //   return 'Parte'
+    // } else {
+    //   return 'Part'
+    }
+
   return (
     <Banner
       className="spacing spacing--after-small spacing--after-mobile offset"
@@ -94,7 +120,8 @@ export const PartBanner = ({ lang }) => {
                 alt: partNames[part],
               }}
               hoverImageSrc={require(`../../images/thumbnails/part-${part}_ovr.svg`)}
-              name={`${lang === 'fi' ? 'Osa' : 'Part'} ${part}`}
+              // name={`${lang === 'fi' ? 'Osa' : 'Part'} ${part}`}
+              name={`${partName(lang)} ${part}`}
               summary={partNames[part]}
               path={getPartTranslationPath(lang, part)}
             />

src/config.js

@@ -1,9 +1,10 @@
-export const TRANSLATION_LANGUAGES = ['fi', 'en', 'zh', 'es', 'fr'];
+export const TRANSLATION_LANGUAGES = ['fi', 'en', 'zh', 'es', 'fr', 'ptbr'];
 
 export const TRANSLATION_LANGUAGE_OPTIONS = [
   { value: 'fi', label: 'Suomi' },
   { value: 'en', label: 'English' },
   { value: 'zh', label: '中文' },
   { value: 'es', label: 'Español' },
   { value: 'fr', label: 'Français' },
+  { value: 'ptbr', label: 'Português(BR)' },
 ];

src/content/0/ptbr/part0.md

@@ -0,0 +1,11 @@
+---
+mainImage: ../../../images/part-0.svg
+part: 0
+lang: ptbr
+---
+
+<div class="intro">
+
+Nesta parte, nos familiarizaremos com os requisitos necessários para fazer o curso. Após essa etapa, será introduzida uma visão geral dos fundamentos de desenvolvimento web como também falaremos sobre os avanços no desenvolvimento de aplicações web nas últimas décadas.
+
+</div>