Gatsby Crie um site PWA com React GraphQL Netlify CMS

/11. Deixando responsivo e adicionando transições de páginas/

1. Utilizando o styled-media-query.mp4

1.1 Código feito para todos os outros componentes.html

1.2 Código feito em vídeo para a Sidebar.html

1.3 Github do styled media query.html

2. Introdução ao gatsby-plugin-transition-link.mp4

2.1 Código feito na aula.html

2.2 Documentação do Transition Link.html

2.3 Site exemplo do Transition Link.html

3. Aplicando transições para as páginas.mp4

3.1 Documentação do AniLink.html

3.2 Código feito na aula.html

4. Mantendo elementos fixos durante a animação.mp4

4.1 Código feito na aula.html

5. Criando um método para mudar a animação de acordo com o tema.mp4

5.1 Código feito na aula.html

/1. Introdução/

1.1 Github do Projeto.html

1.2 Site em produção.html

2. Stack utilizada no curso.mp4

2.1 Site oficial do Netlify CMS.html

2.2 Site oficial do Gatsby.html

2.3 Site oficial do Styled Components.html

2.4 Site oficial do Netlify.html

2.5 Site oficial do GraphQL.html

2.6 Site oficial do Algolia.html

3. Requisitos para o curso.mp4

3.1 Site para download do VS Code.html

3.2 Tutorial oficial do Gatsby para instalar os requisitos.html

3.3 Link para download do NodeJS.html

3.4 Tutorial para instalar e configurar Git no Windows.html

4. O que é Gatsby e por que usar.mp4

1. Apresentando o Projeto.mp4

/2. Gatsby e sua estrutura/

1. Iniciando o projeto e entendendo os comandos do gatsby-cli.mp4

1.1 Gatsby Tutorial Part Zero.html

2. Entendendo a estrutura.mp4

2.1 Código feito na aula.html

3. Organizando os arquivos.mp4

3.1 Código feito na aula.html

4. Criando a página de About.mp4

4.1 Código feito na aula.html

5. Entendendo como o gatsby-link funciona.mp4

5.1 Código feito na aula.html

6. Criando um componente e compartilhando entre páginas.mp4

6.1 Código feito na aula.html

/3. Gatsby e GraphQL/

1. Uma introdução ao GraphQL.mp4

1.1 Site oficial do GraphQL.html

2. Conhecendo o GraphiQL e escrevendo nossa primeira query.mp4

2.1 Link para acessar o GraphiQL no localhost.html

3. Utilizando o Prisma Playground ao invés do GraphiQL.mp4

3.1 Como usar o GraphQL Playground tutorial.html

3.2 Código feito na aula.html

4. Renderizando dados com `StaticQuery`.mp4

4.1 Código feito na aula.html

5. Refatorando para o novo hook `useStaticQuery`.mp4

5.1 Código feito na aula.html

/4. Trabalhando com Imagens no Gatsby/

1. Conhecendo as maravilhas do gatsby-image.mp4

1.1 Site oficial do Gatsby Image.html

2. Configurando o gatsby-image.mp4

2.1 Link para o plugin oficial.html

3. Criando a primeira query para imagens.mp4

3.1 Código feito na aula.html

4. Entendendo os 2 tipos de imagem responsiva (fluid e fixed).mp4

/5. Layout e Styled Components/

1. Introdução ao Styled Components.mp4

1.1 Site oficial do Styled Components.html

2. Instalando e configurando o Styled Components.mp4

2.1 Código feito na aula.html

3. Criando o Layout Component.mp4

3.1 Código feito na aula.html

4. Criando estilos globais com `createGlobalStyle`.mp4

4.1 Código feito na aula.html

4.2 Documentação do createGlobalStyle.html

5. Refatorando o styled component para uma forma mais organizada.mp4

5.1 Código feito na aula.html

6. Criando o Avatar Component.mp4

6.1 Código feito na aula.html

7. Criando o Profile Component.mp4

7.1 Código feito na aula.html

8. Criando a Sidebar Component.mp4

8.1 Código feito na aula.html

9. Criando o SocialLinks Component - Parte 1.mp4

9.1 Código feito na aula.html

9.2 Site oficial do Styled Icons.html

10. Criando o SocialLinks Component - Parte 2.mp4

10.1 Código feito na aula.html

11. Criando o MenuLinks Component.mp4

11.1 Código feito na aula.html

12. Criando a MenuBar Component.mp4

12.1 Código feito na aula.html

13. Criando o PostItem Component.mp4

13.1 Código feito na aula.html

14. Estruturando os dados do PostItem.mp4

14.1 Código feito na aula.html

/6. GraphQL + Remark/

1. Criando posts em Markdown.mp4

1.1 Site oficial do Markdown.html

1.2 Código feito na aula.html

2. Configurando o gatsby-transformer-remark.mp4

2.1 Código feito na aula.html

2.2 Documentação do gatsby-transformer-remark.html

3. Pegando os dados do Markdown usando GraphQL.mp4

4. Tratando datas no GraphQL.mp4

5. Passando os dados do GraphQL para a página.mp4

5.1 Código feito na aula.html

6. Adicionando fields com o `onCreateNode`.mp4

6.1 Documentação do Gatsby Node APIs.html

6.2 Código feito na aula.html

6.3 Documentação do onCreateNode.html

7. Usando o createPages da Gatsby Node API.mp4

7.1 Código feito na aula.html

7.2 Documentação do createPages.html

8. Filtrando dados no GraphQL usando variáveis.mp4

8.1 Código feito na aula.html

9. Criando o template para o Blog Post.mp4

9.1 Código feito na aula.html

/7. Estruturando a Home/

1. Ordenando os posts pela data.mp4

1.1 Código feito na aula.html

2. Entendendo o limit e skip para criar uma paginação.mp4

2.1 Código feito na aula.html

3. Usando o Gatsby Node API para criar a paginação.mp4

3.1 Código feito na aula.html

4. Criando o template para a home.mp4

4.1 Código feito na aula.html

5. Criando um componente de paginação.mp4

5.1 Código feito na aula.html

/8. Estruturando a Página de Post/

1. Integrando o Layout ao Blog Post.mp4

1.1 Código feito na aula.html

2. Adicionando estilos bases para o post.mp4

2.1 Código feito na aula.html

3. Configurando as imagens dentro do post com gatsby-remark-images.mp4

3.1 Código feito na aula.html

3.2 Documentação do gatsby-remark-images.html

3.3 Documentação do gatsby-remark-lazy-load.html

4. Configurando o PrismJS para highlight de código.mp4

4.1 Site oficial do PrismJS.html

4.2 Documentação do gatsby-remark-prismjs.html

4.3 Código feito na aula.html

5. Criando contextos de post anterior e próximo post.mp4

5.1 Código feito na aula.html

6. Criando o RecommendedPosts component.mp4

6.1 Código feito na aula.html

7. Configurando o Disqus para comentários.mp4

7.1 Site oficial do Disqus.html

7.2 Código feito na aula.html

7.3 Github do react-disqus-comments.html

/9. Criando a página de Search/

1. Conhecendo o Algolia.mp4

1.1 Site oficial do Algolia.html

2. Criando o primeiro App e configurando indices.mp4

3. Instalando o plugin do Algolia e salvando as chaves da API.mp4

3.1 Documentação do gatsby-plugin-algolia-search.html

3.2 Código feito na aula.html

3.3 Github do dotenv.html

4. Configurando o plugin dentro do Gatsby.mp4

4.1 Código feito na aula.html

5. Configurando o searchable attributes e custom ranking do Algolia.mp4

6. Criando a página de Search.mp4

6.1 Código feito na aula.html

7. Criando o Search Component.mp4

7.1 Documentação do react instantsearch.html

7.2 Código feito na aula.html

8. Configurando o Input de busca e stats.mp4

8.1 Código feito na aula.html

9. Configurando os itens de resultados.mp4

9.1 Código feito na aula.html

/10. Criando LightDark Theme e Modo de Visualização/

1. As diferentes soluções para LightDark Theme.mp4

1.1 Artigo sobre diferentes soluções para o Dark Mode.html

2. Criando CSS Variables.mp4

2.1 Artigo do freeCodeCamp sobre CSS Variables.html

2.2 Código feito na aula.html

3. Criando um html.js customizável para o Gatsby.mp4

3.1 Código feito na aula.html

3.2 Documentação sobre custom html.js.html

4. Criando o método para a troca dos temas.mp4

4.1 Código feito na aula.html

5. Criando o método para troca de visualização.mp4

5.1 Código feito na aula.html

6. Estilizando com CSS Grid.mp4

6.1 Código feito na aula.html

6.2 Guia sobre CSS Grid do CSS Tricks.html

/12. SEO e PWA/

1. Utilizando o React-Helmet para otimizar o SEO do site.mp4

1.1 Código feito na aula.html

1.2 Documentação do Gatsby sobre SEO.html

1.3 Tutorial sobre criar o componente de SEO.html

2. Criando um Sitemap e robots.txt.mp4

2.1 Código feito na aula.html

2.2 Documentação do gatsby-plugin-sitemap.html

3. Criando um manifest.mp4

3.1 Código feito na aula.html

3.2 Documentação do gatsby-plugin-manifest.html

4. Habilitando o Gatsby para funcionar offline (PWA).mp4

4.1 Documentação do gatsby-plugin-offline.html

4.2 Código feito na aula.html

/13. Fazendo Deploy com Netlify e criando o CMS/

1. Usando o Netlify e fazendo nosso primeiro deploy.mp4

1.1 Site oficial do projeto.html

1.2 Link para os deploys do nosso projeto.html

1.3 Site oficial do Netlify.html

1.4 Github oficial do projeto.html

2. Configurando o Algolia para usar 2 ambientes.mp4

2.1 Código feito na aula.html

3. Conhecendo e configurando o Netlify CMS.mp4

3.1 Site oficial do Netlify CMS.html

3.2 Código feito na aula.html

4. Configurando campos extras na CMS e criando um post.mp4

4.1 Código do post novo.html

4.2 Pull Request criado pelo CMS.html

4.3 Código para configurar os campos.html

/14. Extra/

1. Ideias para próximos projetos e agradecimentos.mp4

1.1 Site do Dashbored (plugin dashboard para gatsby).html

1.2 Tutorial de ecommerce do Gatsby.html

1.3 Tutorial do Wordpress Source.html

1.4 Github do starter do Netlify CMS.html

Total files 208