Criando um blog com Gatsby e React - Parte 2
Este post é a parte 2 de uma série de posts ensinando a criar um blog com Gatsby.
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={graphql`
query 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.
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;
}
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!