Engenheiro de Software, autor de livros sobe tecnologia e negócios. É mantenedor do site Ramos da Informática. Hobbies: investir em ações, natação e finanças.

admin

Criando um blog com Gatsby e React – Parte 2

Chatbots com Whatsapp e Cielo integrados – Nesse curso, eu vou te mostrar como o consumidor poder realizar um pagamento por dentro do aplicativo do WhatsApp, aonde o seu cliente vai entrar numa conversa como entraria numa conversa com qualquer pessoa ou com a sua empresa, navegar entre os produtos/serviços em menus simples enviados pelo chatbot, adicionar esses produtos/serviços no carrinho de compras, e num determinado ponto do chat, um link exclusivo é enviado para o cliente preencher os dados do cartão de crédito. No final, a análise é devolvida para o Whatsapp no qual a conversa foi iniciada. Inscreva-se.

Este é a parte 2 de uma série de posts ensinando a criar um blog com Gatsby e React.

Criando um blog com Gatsby e React – Parte 1

Introdução

Fala pessoal! Como vocês estão? Hoje estou de volta para dar continuidade a nossa série. Então já pega o cafezinho porque hoje vamos escrever bastante código.

E conforme eu comentei no final do último post, hoje nós vamos desenvolver toda a parte visual do blog, deixando ele bonitão. Por isso, já abra o projeto e bora colocar a mão na massa.

Adicionando um reset ao site

Antes de começarmos a fazer o header, sidebar e todo o site, precisamos primeiro adicionar um reset para remover o estilo padrão dos navegadores. Para isso eu vou usar o minireset.css, que pode ser instalado com o seguinte comando:

npm install minireset.css

Ao terminar a instalação abra o index.js dentro de pages e adicione a seguinte linha de código:

import ‘minireset.css’;

Adicionando uma fonte

Agora que temos um reset para o site vamos adicionar uma fonte para o blog, e, a escolhida da vez foi a Raleway.

Para usar uma fonte devemos primeiro importar ela, e isso pode ser feito adicionando uma tag no head do site ou adicionando um import no CSS, que é o que vamos usar. Para isso, crie um arquivo Layout.css e adicione esse código:

@import url(‘https://fonts.googleapis.com/css?family=Raleway:400,700’);

body {
font-family: ‘Raleway’, sans-serif;
background-color: #f2f3f4;
}

html,
body {
height: 100%;
}

p,
div {
font-size: 16px;
}

Agora, dentro do Layout.jsx adicione o seguite código para que possamos aplicar o CSS.

import ‘./Layout.css’;

Estilizando o header

Depois de aplicarmos um reset e de termos adicionado uma fonte para o site podemos finalmente começar a deixar esse blog mais bonito, e, nada mais justo do que começarmos pelo Header. Portanto, dentro da pasta do Header crie um arquivo Header.css e adicione o CSS abaixo:

.header {
padding: 1rem 1.5rem 1rem 1.5rem;
display: flex;
justify-content: flex-start;
align-items: center;
flex-direction: row;
font-size: 24px;
background-color: #ffffff;
margin-bottom: 1rem;
}

.header a {
text-decoration: none;
}

.header-title {
font-weight: bold;
color: #000000;
}

Agora vamos importar e realizar uma pequena melhoria ao nosso site. Vamos realizar a consulta do título de dentro do Header para evitar de fazermos consultas em todas as páginas que criarmos.

import React from ‘react’;
import { StaticQuery, graphql, Link } from ‘gatsby’;
import ‘./Header.css’;

export default () => (
<StaticQuery
query={graphqlquery HeaderQuery { site { siteMetadata { title } } }}
render={(data) => (
<header className=”header”>
<Link to=”/”>
<h1 className=”header-title”>{data.site.siteMetadata.title}</h1>
</Link>
</header>
)}
/>
);

Lembre-se que precisamos atualizar também o index.js para remover a consulta.

import React from ‘react’;
import Layout from ‘../components/Layout’;
import ‘minireset.css’;

export default () => (
<Layout>
<p>Página inicial</p>
</Layout>
);

Se tudo transcorreu bem até o momento esse deve ser o resultado parcial.

Resultado do blog até essa parte do post

Criando um container

Agora vamos criar um container para colocarmos o nosso sidebar e a nossa lista de posts.

import React from ‘react’;
import ‘./Container.css’;

export default ({ children }) => <div className=”container”>{children}</div>;

.container {
max-width: 980px;
display: flex;
justify-content: space-between;
padding: 15px;
flex-direction: row;
margin: 0 auto;
margin-top: 4rem;
}

export { default } from ‘./Container’;

Dentro do Layout.jsx adicione o container de modo que ele fique ao redor do {children}. Assim, podemos compartilhar a mesma estrutura entre as todas as páginas do blog.

Criando o sidebar

Seguindo a mesma lógica dos componentes anteriores vamos criar o nosso Sidebar.

import React from ‘react’;
import ‘./Sidebar.css’;

export default ({ title, description }) => (
<div className=”sidebar”>
<h3 className=”sidebar-title”>{title}</h3>
<p className=”sidebar-description”>{description}</p>
</div>
);

.sidebar {
padding: 1.5rem;
margin-bottom: 1rem;
border-radius: 0.5rem;
background-color: #ffffff;
}

.sidebar .sidebar-title {
font-size: 20px;
font-weight: bold;
}

.sidebar .sidebar-description {
text-align: justify;
margin-top: 1rem;
line-height: 1.5;
}

export { default } from ‘./Sidebar’;

Agora altere os arquivos Layout.jsx e Layout.css, para que possamos adicionar o Sidebar ao layout padrão.

import React from ‘react’;
import Header from ‘../Header’;
import Sidebar from ‘../Sidebar’;
import Container from ‘../Container’;
import ‘./Layout.css’;

export default ({ children, title }) => (
<div>
<Header title={title} />
<main role=”main”>
<Container>
{children}
<aside className=”aside”>
<Sidebar
title=”Sobre mim”
description=”Sou um desenvolvedor apaixonado por JavaScript e amo desenvolver produtos que melhoram a vida das pessoas.”
/>
<Sidebar
title=”Sobre o blog”
description=”Aqui você encontará muito conteúdo de FrontEnd e CSS, além de umas dicas senasacionais de carreira!”
/>
</aside>
</Container>
</main>
</div>
);

.aside {
flex: 0 0 33.333333%;
max-width: 33.333333%;
flex-direction: column;
padding: 10px;
}

Estágio atual do blog

Criando uma página de erro 404

Agora que temos quase toda a parte visual do nosso blog e layout pronta podemos criar páginas facilmente e compartilhar a mesma estrutura entre elas. E veja que bom, temos um site estático com uma ótima performance!

Também precisamos criar uma página de erro 404 personalizada, e, com o Gatsby isso é muito simples. Basta criar um arquivo 404.js dentro de pages e pronto.

import React from ‘react’;
import Layout from ‘../components/Layout’;

export default () => (
<Layout>
<p>Infelizmente a página desejada não pode ser encontrada!</p>
</Layout>
);

Se quiser testar a página basta acessar http://localhost:8000/404 ou digitar algo aleatório na url e ver a página de erro (em desenvolvimento você verá uma lista de todas as páginas do site).

Conclusão

No post de hoje criamos toda a parte visual do nosso blog, que já está pronto para começar a receber os posts e ganhar muitas funcionalidades legais. Por isso, no próximo tutorial da série vamos melhorar algumas coisas e também criar a listagem dos posts na home, além de um template para todos os posts do blog. Nos vemos lá! Deus abençoe!

Este artigo foi importado automaticamente por fazer parte do Planetário Dev. Quer fazer parte deste HUB de conteúdos? Faça parte do Planetário e veja as vantagens.

Não tem site ou blog? Seja um autor do site e ainda pode ser remunerado.

Mais sobre Newsletters?

32 melhores newsletters sobre negócios, startups e tecnologia para assinar em 2022