feat: add initial support to en-US content (alura#50)

* Add React guide in English * Add support in GraphQL to English conrtent Co-authored-by: Mario Souto <[email protected]>
Pierry · Oct 2, 2022 · f16124f · f16124f
1 parent 8ae7c72
commit f16124f
Show file tree

Hide file tree

Showing 255 changed files with 2,039 additions and 43 deletions.
diff --git a/_api/gql_types.ts b/_api/gql_types.ts
@@ -47,7 +47,9 @@ export type BlockContent = {
 
 export enum BlockContentType {
   Article = 'ARTICLE',
+  Challenge = 'CHALLENGE',
   Course = 'COURSE',
+  Podcast = 'PODCAST',
   Site = 'SITE',
   Youtube = 'YOUTUBE'
 }
@@ -72,6 +74,7 @@ export type BlockKeyObjective = {
 export type BlocksInput = {
   filter?: InputMaybe<BlockFilters>;
   limit?: InputMaybe<Scalars['Int']>;
+  locale?: InputMaybe<SiteLocale>;
   offset?: InputMaybe<Scalars['Int']>;
 };
 
@@ -127,6 +130,7 @@ export type GuideInput = {
 export type GuidesInput = {
   filter?: InputMaybe<GuideFilters>;
   limit?: InputMaybe<Scalars['Int']>;
+  locale?: InputMaybe<SiteLocale>;
   offset?: InputMaybe<Scalars['Int']>;
 };
 

diff --git a/_api/modules/blocks/index.ts b/_api/modules/blocks/index.ts
@@ -1,5 +1,5 @@
 import { gql } from "apollo-server-micro";
-import { Resolvers } from "@api/gql_types";
+import { Resolvers, SiteLocale } from "@api/gql_types";
 import { blocksRepository } from "@api/modules/blocks/repository";
 import { gqlInput } from "@api/infra/graphql/gqlInput";
 import { guidesRepository } from "../guides/repository";
@@ -30,6 +30,7 @@ const typeDefs = gql`
     PODCAST
     ARTICLE
     YOUTUBE
+    CHALLENGE
   }
   type Block {
     id: String
@@ -57,6 +58,7 @@ const typeDefs = gql`
     limit: Int
     offset: Int
     filter: BlockFilters
+    locale: SiteLocale
   }
   input BlockInput {
     slug: String!
@@ -95,16 +97,21 @@ const resolvers: Resolvers = {
     },
   },
   Query: {
-    async blocks(_, { input }) {
+    async blocks(_, { input, locale }) {
       const blocks = await blocksRepository().getAll({
-        input: gqlInput(input),
+        input: gqlInput({
+          ...input,
+          locale: locale || SiteLocale.PtBr,
+        }),
       });
-
       return blocks;
     },
-    async block(_, { input }) {
+    async block(_, { input, locale }) {
       const block = await blocksRepository().getBySlug({
-        input: gqlInput(input),
+        input: gqlInput({
+          ...input,
+          locale: locale || SiteLocale.PtBr,
+        }),
       });
       return block;
     },

diff --git a/_api/modules/blocks/repository.ts b/_api/modules/blocks/repository.ts
@@ -4,16 +4,21 @@ import sift from "sift";
 import readYamlFile from "read-yaml-file/index";
 import { slugify } from "@src/infra/slugify";
 import { paginate } from "@src/infra/paginate";
-import { Block, BlockInput, BlocksInput } from "@api/gql_types";
+import { Block, BlockInput, BlocksInput, SiteLocale } from "@api/gql_types";
 import { gqlInput } from "@api/infra/graphql/gqlInput";
 
 const ALLOW_LIST = [];
 
+const pathToBlocksByLocale = {
+  [SiteLocale.PtBr]: path.resolve(".", "_data", "blocks", "pt_BR"),
+  [SiteLocale.EnUs]: path.resolve(".", "_data", "blocks", "en_US"),
+};
+
 export function blocksRepository() {
-  const pathToBlocks = path.resolve(".", "_data", "blocks");
   const repository = {
     async getAll({ input }: { input: BlocksInput }): Promise<Block[]> {
-      const { filter = {}, offset, limit } = input;
+      const { filter = {}, offset, limit, locale } = input;
+      const pathToBlocks = pathToBlocksByLocale[locale];
 
       const blockFileNames = await (
         await Promise.all(await fs.readdir(pathToBlocks))
@@ -23,7 +28,7 @@ export function blocksRepository() {
         const fileContent = await readYamlFile<any>(
           path.resolve(pathToBlocks, fileName)
         );
-        const slug = slugify(fileName.replace(".pt_BR.yaml", ""));
+        const slug = slugify(fileName.split(".")[0]);
 
         return {
           ...fileContent,
@@ -89,6 +94,7 @@ export function blocksRepository() {
     async getBySlug({ input }: { input: BlockInput }): Promise<Block> {
       const blocks = await repository.getAll({
         input: gqlInput<BlocksInput>({
+          ...input,
           filter: {
             slug: {
               eq: input.slug,

diff --git a/_api/modules/guides/index.ts b/_api/modules/guides/index.ts
@@ -40,6 +40,7 @@ const typeDefs = gql`
     limit: Int
     offset: Int
     filter: GuideFilters
+    locale: SiteLocale
   }
   input GuideInput {
     slug: String!
@@ -52,16 +53,22 @@ const typeDefs = gql`
 
 const resolvers: Resolvers = {
   Query: {
-    async guides(_, { input }) {
+    async guides(_, { input, locale }) {
       const guides = await guidesRepository().getAll({
-        input: gqlInput(input),
+        input: gqlInput({
+          ...input,
+          locale,
+        }),
       });
 
       return guides;
     },
-    async guide(_, { input }) {
+    async guide(_, { input, locale }) {
       const guide = await guidesRepository().getBySlug({
-        input: gqlInput(input),
+        input: gqlInput({
+          ...input,
+          locale,
+        }),
       });
       return guide;
     },
@@ -83,9 +90,12 @@ const resolvers: Resolvers = {
     },
   },
   GuideBlock: {
-    async item(parent) {
+    async item(parent, _, __, args) {
       return blocksRepository().getBySlug({
-        input: gqlInput({ slug: parent.item.slug }),
+        input: gqlInput({
+          slug: parent.item.slug,
+          locale: args.variableValues.locale,
+        }),
       });
     },
   },

diff --git a/_api/modules/guides/repository.ts b/_api/modules/guides/repository.ts
@@ -4,16 +4,21 @@ import sift from "sift";
 import readYamlFile from "read-yaml-file/index";
 import { slugify } from "@src/infra/slugify";
 import { paginate } from "@src/infra/paginate";
-import { Guide, GuideInput, GuidesInput } from "@api/gql_types";
+import { Guide, GuideInput, GuidesInput, SiteLocale } from "@api/gql_types";
 import { gqlInput } from "@api/infra/graphql/gqlInput";
 
 const ALLOW_LIST = [];
 
+const pathToGuideByLocale = {
+  [SiteLocale.PtBr]: path.resolve(".", "_data", "guides", "pt_BR"),
+  [SiteLocale.EnUs]: path.resolve(".", "_data", "guides", "en_US"),
+};
+
 export function guidesRepository() {
-  const pathToGuides = path.resolve(".", "_data", "guides");
   const repository = {
     async getAll({ input }: { input: GuidesInput }): Promise<Guide[]> {
-      const { filter = {}, offset, limit } = input;
+      const { filter = {}, offset, limit, locale } = input;
+      const pathToGuides = pathToGuideByLocale[locale];
 
       const guideFileNames = (await fs.readdir(pathToGuides)).filter(
         (fileName) => !ALLOW_LIST.includes(fileName)
@@ -91,6 +96,7 @@ export function guidesRepository() {
     async getBySlug({ input }: { input: GuideInput }): Promise<Guide> {
       const guides = await repository.getAll({
         input: gqlInput<GuidesInput>({
+          ...input,
           filter: {
             slug: {
               eq: input.slug,

diff --git a/_data/blocks/apollo-client.pt_BR.yaml → _data/blocks/en_US/apollo-client.en_US.yaml b/_data/blocks/apollo-client.pt_BR.yaml → _data/blocks/en_US/apollo-client.en_US.yaml
diff --git a/_data/blocks/en_US/babel-fundamentals.en_US.yaml b/_data/blocks/en_US/babel-fundamentals.en_US.yaml
@@ -0,0 +1,26 @@
+name: Babel - Fundamentals
+logo: 
+short-description:
+key-objectives:
+  - Compreender como Babel converte a sintaxe para JavaScript
+aditional-objectives:
+contents:
+  - type: SITE
+    title: "Documentação: What is Babel? (inglês)"
+    link: https://babeljs.io/docs/en/
+  - type: ARTICLE
+    title: "O que é babel?"
+    link: https://coodesh.com/blog/dicionario/o-que-e-babel/
+  - type: ARTICLE
+    title: "React e Babel — Como melhorar o desempenho de suas aplicações com plugins, presets e benchmark!"
+    link: https://medium.com/nossa-coletividad/react-e-babel-como-melhorar-o-desempenho-de-suas-aplica%C3%A7%C3%B5es-com-plugins-presets-e-benchmark-fb35700a52e9
+  - type: YOUTUBE
+    title: "Matheus Castiglioni: React, Babel e Webpack, o que é tudo isso?"
+    link: https://www.youtube.com/watch?v=y5B0MXmt428
+  - type: YOUTUBE
+    title: "web3escola: Introdução ao React - Babel"
+    link: https://www.youtube.com/watch?v=jSGg2j2UNr4
+alura-contents:
+  - type: COURSE
+    title: "Curso JavaScript: salvando dados localmente com IndexedDB"
+    link: https://www.alura.com.br/curso-online-javascript-es6-orientacao-a-objetos-parte-3
diff --git a/_data/blocks/en_US/cloud-fundamentals.en_US.yaml b/_data/blocks/en_US/cloud-fundamentals.en_US.yaml
@@ -0,0 +1,50 @@
+name: Cloud - Fundamentals
+logo: 
+short-description:
+key-objectives:
+  - Cloud, ou computação em nuvem é a distribuição de serviços de computação pela Internet usando um modelo de preço pago conforme o uso. Uma nuvem é composta de vários recursos de computação, que abrangem desde os próprios computadores (ou instâncias, na terminologia de nuvem) até redes, armazenamento, bancos de dados e o que estiver em torno deles. Ou seja, tudo o que normalmente é necessário para montar o equivalente a uma sala de servidores, ou mesmo um data center completo, estará pronto para ser utilizado, configurado e executado.
+  - Conhecer a diferença entre IaaS, PaaS e SaaS
+  - Conhecer os maiores provedores de cloud
+  - Especializar-se em algum provedor
+aditional-objectives:
+contents:
+ - type: ARTICLE
+   title: "Computação em nuvem"
+   link: https://medium.com/sysadminas/computa%C3%A7%C3%A3o-em-nuvem-515930304cf9
+ - type: ARTICLE
+   title: "O que é cloud?"
+   link: https://gabriel-faraday.medium.com/o-que-%C3%A9-cloud-991109e708c6
+alura-contents:
+ - type: PODCAST
+   title: "Hipsters.tech: Uma jornada Para o Cloud - Hipsters Deep Dive 005"
+   link: https://cursos.alura.com.br/extra/hipsterstech/uma-jornada-para-o-cloud-hipsters-deep-dive-005-a1100
+ - type: PODCAST
+   title: "Hipsters.tech: Histórias do Cloud - Hipsters 04"
+   link: https://cursos.alura.com.br/extra/hipsterstech/historias-do-cloud-hipsters-04-a582
+ - type: ARTICLE
+   title: "O que é Cloud e seus principais serviços"
+   link: https://www.alura.com.br/artigos/o-que-e-cloud-e-seus-principais-servicos
+ - type: ARTICLE
+   title: "Heroku, Vercel e outras opções de cloud como plataforma"
+   link: https://www.alura.com.br/artigos/heroku-vercel-outras-opcoes-cloud-plataforma
+ - type: ARTICLE
+   title: "Terraform: criando máquinas na Azure"
+   link: https://www.alura.com.br/artigos/terraform-maquinas-na-azure
+ - type: YOUTUBE
+   title: "Alura: O que é cloud?"
+   link: https://www.YOUTUBE.com/watch?v=wev9fMrg-TU
+ - type: YOUTUBE
+   title: "Alura: AWS, Google Cloud e Azure: Por onde começar? | Hipsters.Talks"
+   link: https://www.YOUTUBE.com/watch?v=z9k6rsdmWc0&t=300s
+ - type: YOUTUBE
+   title: "Alura: Certificação em Cloud: Azure, AWS, Google | Hipsters.Talks"
+   link: https://www.YOUTUBE.com/watch?v=W4K82n_WK5g&t=290s
+ - type: COURSE
+   title: "Formação Começando em Cloud Computing"
+   link: https://cursos.alura.com.br/formacao-cloud-computing
+ - type: COURSE
+   title: "Formação Amazon Web Services"
+   link: https://cursos.alura.com.br/formacao-amazon-web-services
+ - type: COURSE
+   title: "Formação Google Certified Associate Cloud Engineer"
+   link: https://cursos.alura.com.br/formacao-google-certified-associate-cloud-engineer
diff --git a/_data/blocks/en_US/color-systems.en_US.yaml b/_data/blocks/en_US/color-systems.en_US.yaml
@@ -0,0 +1,29 @@
+name: Color systems
+logo: 
+short-description:
+key-objectives:
+  - Definir uma paleta de cores que faça sentido para determinada interface
+aditional-objectives:
+contents:
+  - type: ARTICLE
+    title: "Cores em UI: Um Guia Rápido Para Usar em Seus Projetos"
+    link: https://medium.com/aela/cores-em-ui-um-guia-r%C3%A1pido-para-usar-em-seus-projetos-31ccffe3e16b
+  - type: ARTICLE
+    title: "A Psicologia das cores e sua relação com o UX Design"
+    link: https://brasil.uxdesign.cc/a-psicologia-das-cores-e-sua-rela%C3%A7%C3%A3o-com-o-ux-design-af02460639cd
+  - type: YOUTUBE
+    title: "kacio.design: Aplicação de Cores - Princípios do UI"
+    link: https://www.youtube.com/watch?v=C_VhzEyqT6U
+alura-contents:
+  - type: COURSE
+    title: "Curso Cores para Designers: escolhendo e trabalhando com cores em um projeto"
+    link: https://www.alura.com.br/curso-online-cores-para-seu-projeto
+  - type: SITE
+    title: "Primeiras aulas do curso Cores: sistemas básicos e paletas"
+    link: https://www.alura.com.br/conteudo/fundamentos-da-cor
+  - type: COURSE
+    title: "Cores: sistemas básicos e paletas"
+    link: https://www.alura.com.br/curso-online-fundamentos-da-cor
+  - type: COURSE
+    title: "Curso Design editorial: criação de materiais gráficos"
+    link: https://www.alura.com.br/curso-online-design-editorial
diff --git a/_data/blocks/en_US/command-line-fundamentals.en_US.yaml b/_data/blocks/en_US/command-line-fundamentals.en_US.yaml
@@ -0,0 +1,26 @@
+name: Command line - Fundamentals
+logo: 
+short-description:
+key-objectives:
+  - Conhecer os principais comandos
+aditional-objectives:
+contents:
+  - type: SITE
+    title: "Microsoft Docs: Como usar argumentos de linha de comando para terminal do Windows"
+    link: https://docs.microsoft.com/pt-br/windows/terminal/command-line-arguments?tabs=windows
+  - type: YOUTUBE
+    title: "Estevan Maito: Linha de comando básica - 8 comandos mais frequentes - WINDOWS e LINUX"
+    link: https://www.youtube.com/watch?v=rKBqXJZocYk
+  - type: YOUTUBE
+    title: "Ninja do Linux: Comandos básicos da linha de comando do Linux"
+    link: https://www.youtube.com/watch?v=rs_yshFGu8E
+alura-contents:
+  - type: ARTICLE
+    title: "CMD: dicas para trabalhar no prompt do Windows"
+    link: https://www.alura.com.br/artigos/cmd-dicas-para-trabalhar-no-prompt-do-windows
+  - type: SITE
+    title: "Primeiras aulas do Curso Windows Prompt: Trabalhando na linha de comando"
+    link: https://www.alura.com.br/conteudo/prompt
+  - type: COURSE
+    title: "Curso Windows Prompt: Trabalhando na linha de comando"
+    link: https://www.alura.com.br/curso-online-prompt
diff --git a/_data/blocks/en_US/create-react-app.en_US.yaml b/_data/blocks/en_US/create-react-app.en_US.yaml
@@ -0,0 +1,51 @@
+name: Creating a React app
+logo: 
+short-description:
+key-objectives:
+  - Estruturar um novo projeto React
+  - Criar uma aplicação funcional do zero
+aditional-objectives:
+contents:
+  - type: SITE
+    title: "React: Documentação - Crie um novo React App"
+    link: https://pt-br.reactjs.org/docs/create-a-new-react-app.html#gatsby-focus-wrapper
+  - type: SITE
+    title: "React: Documentação - Usando TypeScript com Create React App"
+    link: https://pt-br.reactjs.org/docs/static-type-checking.html#using-typescript-with-create-react-app
+  - type: SITE
+    title: "MDN Web Docs: Começando com React - Configurando seu primeiro app React"
+    link: https://developer.mozilla.org/pt-BR/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started#configurando_seu_primeiro_app_react
+  - type: YOUTUBE
+    title: "Mario Souto - Dev Soutinho: Como começar a estruturar um projeto React? com NextJS, Styled Components"
+    link: https://www.youtube.com/watch?v=mJK5oGixSYo
+  - type: YOUTUBE
+    title: "Mario Souto - Dev Soutinho: Do Zero ao React | Como fazer o React e aprender a ideia do Virtual DOM na prática"
+    link: https://www.youtube.com/watch?v=5MzOCxSWrrc
+alura-contents:
+  - type: ARTICLE
+    title: "React: componentes com Styled Components"
+    link: https://www.alura.com.br/artigos/react-componentes-com-styled-components
+  - type: podcast
+    title: "Hipsters.tech: Guia do iniciante em React"
+    link: https://www.hipsters.tech/guia-do-iniciante-em-react-hipsters-209/
+  - type: podcast
+    title: "Hipsters.tech: Do Front End ao React"
+    link: https://www.hipsters.tech/do-front-end-ao-react-hipsters-ponto-tech-258/
+  - type: COURSE
+    title: "Imersão React: AluraFlix"
+    link: https://cursos.alura.com.br/imersoes/aulas/aula-1-react-components-e-aluraflix-c18
+  - type: COURSE
+    title: "Imersão React: AluraQuiz"
+    link: https://cursos.alura.com.br/imersoes/aulas/aula-1-react-styled-components-e-next-js-c33
+  - type: COURSE
+    title: "Imersão React: AluraKut"
+    link: https://cursos.alura.com.br/imersoes/aulas/aula-1-components-com-react-styled-components-e-nextjs-c53
+  - type: COURSE
+    title: "Imersão React: AluraCord"
+    link: https://cursos.alura.com.br/imersoes/aulas/aula-01-criando-o-nosso-projeto-aluracord-c68
+  - type: COURSE
+    title: "Curso React: escrevendo com Typescript"
+    link: https://www.alura.com.br/curso-online-react-modernizando-escrever-typescript
+  - type: challenge
+    title: "7 Days of Code: React"
+    link: https://7daysofcode.io/matricula/react