feat(projeto): Adiciona dados do contentful

- Adiciona dados do projeto a partir do contenful
- Adiciona função para gerar páginas do projeto a partir do template
- Ajusta styles

Refs #175303595

gatsby-node.js

@@ -0,0 +1,37 @@
+const path = require('path')
+
+module.exports.createPages = async ({ graphql, actions }) => {
+  const { createPage } = actions
+  const projetoTemplate = path.resolve('./src/templates/projeto.js')
+  const res = await graphql(`
+    query {
+      allContentfulProjetos (
+        sort: { order: ASC, fields: createdAt }
+      ){
+        edges {
+          node {
+            slug
+          }
+        }
+      }
+    }
+  `)
+
+  const projetos = res.data.allContentfulProjetos.edges
+
+  projetos.forEach(({ node }, index) => {
+    const indexUltimoProjeto = projetos.length - 1;
+    const projetoAnterior = index === 0 ? projetos[indexUltimoProjeto].node : projetos[index - 1].node
+    const proximoProjeto = index === indexUltimoProjeto ? projetos[0].node : projetos[index + 1].node;
+
+    createPage({
+      component: projetoTemplate,
+      path: `/portfolio/${node.slug}`,
+      context: {
+        slug: node.slug,
+        prev: projetoAnterior,
+        next: proximoProjeto
+      }
+    })
+  })
+}

src/styles/pages/projeto.module.scss → src/styles/templates/projeto.module.scss

@@ -7,9 +7,8 @@
   padding-bottom: 2rem;
   color: $default;
 
-  .botao-fechar {
+  .fechar {
     margin-left: 1.5rem;
-    margin-bottom: 1.5rem;
     font-size: .8rem;
     font-weight: 800;
     text-transform: uppercase;
@@ -22,6 +21,7 @@
   }
 
   .header {
+    margin-top: 1.5rem;
     width: 95%;
   }
 
@@ -39,6 +39,7 @@
       font-size: 1.3rem;
       font-weight: 800;
       line-height: 1.2;
+      text-transform: uppercase;
     }
 
     button {
@@ -101,6 +102,8 @@
   }
 
   .categorias {
+    margin-bottom: 1rem;
+    margin-right: 1rem;
     text-align: right;
   }
 
@@ -114,7 +117,7 @@
 
 @media (min-width: 990px) {
   .container {
-    .botao-fechar {
+    .fechar {
       margin-bottom: 2.5rem;
       font-size: 1rem;
     }

src/pages/projeto.js → src/templates/projeto.js

@@ -1,16 +1,21 @@
 import React, { useState } from 'react';
 import Layout from '../components/Layout';
-import styles from '../styles/pages/projeto.module.scss';
+import styles from '../styles/templates/projeto.module.scss';
 import { Button, Row, Col } from 'antd';
 import Icone from '../components/Icone';
 import Categorias from '../components/Categorias';
 import BotaoScrollTopo from '../components/BotaoScrollTopo'
+import { uniqueId } from 'lodash';
+import { Link } from 'gatsby';
+import { graphql } from 'gatsby';
+
+const Projeto = ({ data, pageContext }) => {
+  const projeto = data.contentfulProjetos;
+  const { next, prev } = pageContext;
 
-const Projeto = () => {
-  //TODO: Substituir descricao por dados do contentful
   const descricao = {
-    ptBr: 'Na Lata é um projeto nosso feito em parceira com @cafejoaodopo com muito carinho onde escolhemos 3 frases para ilustrar e se transformarem em lindas latas metálica decorativas. São latas para colocar café ou para qualquer outra coisa que você queira fazer com elas. São alegres, de bem com a vida (depois das 9h), não falam mal de ninguém... Ah é, elas vão bem em qualquer ambiente, juntas ou separadas',
-    en: 'Description in english'
+    ptBr: projeto.description.description,
+    en: projeto.descriptionEnUs?.descriptionEnUs
   }
 
   const [linguagemDescricao, setLinguagemDescricao] = useState('ptBr');
@@ -23,51 +28,31 @@ const Projeto = () => {
     setLinguagemDescricao('en')
   }
 
-  //TODO: Substituir titulo, categorias e imagens por dados do contentful
-  const titulo = 'COLEÇÃO DE LATAS ILUSTRADAS - NA LATA';
-  const categorias = [
-    {
-      nome: 'identidade visual',
-      href: ''
-    },
-    {
-      nome: 'ilustração',
-      href: ''
-    },
-  ]
-
-  const imagens = [
-    'https://mir-s3-cdn-cf.behance.net/project_modules/disp/dd1a05101643141.5f23381da7fe8.jpg',
-    'https://mir-s3-cdn-cf.behance.net/project_modules/disp/60f570101643141.5f23381da7a45.jpg',
-    'https://mir-s3-cdn-cf.behance.net/project_modules/disp/baeb13101643141.5f23381da9284.jpg',
-    'https://mir-s3-cdn-cf.behance.net/project_modules/disp/2362f8101643141.5f23381da9896.jpg'
-  ]
-
   return (
     <Layout>
       <div className={styles.container}>
         <BotaoScrollTopo />
 
         <Row>
           <Col lg={24}>
-            <Button
-              type='link'
-              href='/portfolio'
-              className={styles.botaoFechar}
+            <Link
+              to='/portfolio'
+              state={{ categoriaAtual: 'TODOS' }}
+              className={styles.fechar}
             >
               X Fechar
-            </Button>
+            </Link>
           </Col>
         </Row>
 
         <Row className={styles.header}>
           <Col xs={24} lg={24}>
             <div className={styles.containerTitulo}>
-              <Button icon={<Icone nome='setaEsquerda' />} className={styles.setaEsquerda} />
+              <Button icon={<Icone nome='setaEsquerda' />} className={styles.setaEsquerda} type='link' href={prev?.slug}/>
 
-              <h1 className={styles.titulo}>{titulo}</h1>
+              <h1>{projeto.name}</h1>
 
-              <Button icon={<Icone nome='setaDireita' />} className={styles.setaDireita} />
+              <Button icon={<Icone nome='setaDireita' />} className={styles.setaDireita} type='link' href={next?.slug} />
             </div>
           </Col>
         </Row>
@@ -99,16 +84,16 @@ const Projeto = () => {
 
           <Col xs={24} lg={12}>
             <div className={styles.categorias}>
-              <Categorias categorias={categorias} comHashtag/>
+              <Categorias categorias={projeto.tags.map(tag => tag.toUpperCase())} comHashtag/>
             </div>
           </Col>
         </Row>
 
         <Row>
           <Col xs={24} lg={24}>
             <div className={styles.containerImagem}>
-              {imagens.map((imagem, index) => (
-                <img src={imagem} alt={`imagem ${index + 1}`} />
+              {projeto.images.map((imagem, index) => (
+                <img src={imagem} alt={`imagem ${index + 1}`} key={uniqueId('imagem_')} />
               ))}
             </div>
           </Col>
@@ -119,3 +104,26 @@ const Projeto = () => {
 };
 
 export default Projeto;
+
+export const pageQuery = graphql`
+  query (
+    $slug: String
+  ) {
+    contentfulProjetos (
+      slug: {
+        eq: $slug
+      }
+    ) {
+      name
+      description {
+        description
+      }
+      descriptionEnUs {
+        descriptionEnUs
+      }
+      tags
+      cover
+      images
+    }
+  }
+`