Next and previous posts component (#53)

* feat: add previous and next nodes on gatsby-node

* feat: add links on thumb and name of sidebar

* feat: previous and next navigation component
- import dependencies
- add propTypes
- add html structure
- add links
- add conditionals

* style: add all desktop styles of component

* feat: add component on blog-post file

* refactor: update all proptypes

* style: fix all mobile styles of component

* chore: update version to 1.2.0

* refactor: fix some alpha orders and break lines

* feat: add one paragraph at about page

gatsby-node.js

@@ -40,18 +40,36 @@ exports.createPages = ({ graphql, actions }) => {
             }
             timeToRead
           }
+          next {
+            fields {
+              slug
+            }
+            frontmatter {
+              title
+            }
+          }
+          previous {
+            fields {
+              slug
+            }
+            frontmatter {
+              title
+            }
+          }
         }
       }
     }
   `).then((result) => {
     const posts = result.data.allMarkdownRemark.edges;
 
     // Create posts
-    posts.forEach(({ node }) => {
+    posts.forEach(({ next, node, previous }) => {
       createPage({
         path: node.fields.slug,
         component: path.resolve('./src/templates/blog-post/index.js'),
         context: {
+          nextPost: previous,
+          previousPost: next,
           slug: node.fields.slug,
         },
       });

package.json

@@ -1,7 +1,7 @@
 {
   "name": "bruno-dulcetti-site",
   "description": "Bruno Dulcetti - web standards, css, xhtml e tecnologia em geral.",
-  "version": "1.1.2",
+  "version": "1.2.0",
   "author": "Bruno Dulcetti <brunodulcetti@gmail.com>",
   "scripts": {
     "build": "yarn clean && gatsby build",

src/components/navigation/index.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { useStaticQuery, graphql } from 'gatsby';
+import AniLink from 'gatsby-plugin-transition-link/AniLink';
 
 import * as S from './styles';
 import { themes } from '../../styles/themes';
@@ -24,8 +25,23 @@ export default function Navigation({ isOpen }) {
   return (
     <S.Navigation className={isOpen && 'active'}>
       <S.Menu>
-        <S.Thumb fluid={avatar.childImageSharp.fluid} />
-        <S.Name>Bruno Dulcetti</S.Name>
+        <AniLink
+          swipe
+          direction="left"
+          bg={themes.palette.general.bgTransition}
+          duration={0.6}
+          to="/">
+          <S.Thumb fluid={avatar.childImageSharp.fluid} />
+        </AniLink>
+
+        <AniLink
+          swipe
+          direction="left"
+          bg={themes.palette.general.bgTransition}
+          duration={0.6}
+          to="/">
+          <S.Name>Bruno Dulcetti</S.Name>
+        </AniLink>
         <S.List>
           {links.map((link, index) => (
             <S.Item key={index}>

src/components/previous-next/index.js

@@ -0,0 +1,49 @@
+import React from 'react';
+
+import * as S from './styles';
+import Icons from '../icons';
+import PropTypes from 'prop-types';
+
+export default function PreviousNext({ next, previous }) {
+  return (
+    <S.WrapPreviousNext className={(!next && '-singlePrevious') || (!previous && '-singleNext')}>
+      {next && (
+        <S.LinksNavigation className="-previous" to={next.fields.slug}>
+          <Icons name="arrow-single" />
+          <S.LinkInfos>
+            <S.LinksLabel>Próximo post:</S.LinksLabel>
+            <S.LinksTitle>{next.frontmatter.title}</S.LinksTitle>
+          </S.LinkInfos>
+        </S.LinksNavigation>
+      )}
+      {previous && (
+        <S.LinksNavigation className="-next" to={previous.fields.slug}>
+          <S.LinkInfos>
+            <S.LinksLabel>Post anterior:</S.LinksLabel>
+            <S.LinksTitle>{previous.frontmatter.title}</S.LinksTitle>
+          </S.LinkInfos>
+          <Icons name="arrow-single" />
+        </S.LinksNavigation>
+      )}
+    </S.WrapPreviousNext>
+  );
+}
+
+PreviousNext.propTypes = {
+  next: PropTypes.shape({
+    frontmatter: PropTypes.shape({
+      title: PropTypes.string.isRequired,
+    }),
+    fields: PropTypes.shape({
+      slug: PropTypes.string.isRequired,
+    }),
+  }),
+  previous: PropTypes.shape({
+    frontmatter: PropTypes.shape({
+      title: PropTypes.string.isRequired,
+    }),
+    fields: PropTypes.shape({
+      slug: PropTypes.string.isRequired,
+    }),
+  }),
+};

src/components/previous-next/styles.js

@@ -0,0 +1,146 @@
+import styled from 'styled-components';
+import media from 'styled-media-query';
+import { Link } from 'gatsby';
+import { themes } from '../../styles/themes';
+
+export const WrapPreviousNext = styled.section`
+  border-bottom: 1px solid ${themes.palette.general.borders};
+  border-top: 1px solid ${themes.palette.general.borders};
+  display: flex;
+  justify-content: space-between;
+  margin: 30px 0;
+
+  &.-singleNext {
+    justify-content: flex-start;
+  }
+
+  &.-singlePrevious {
+    justify-content: flex-end;
+  }
+`;
+
+export const LinksNavigation = styled(Link)`
+  align-items: center;
+  display: inline-flex;
+  width: 50%;
+
+  section.-singlePrevious &,
+  section.-singleNext & {
+    ${media.lessThan('small')`
+      width: 100%;
+    `}
+  }
+
+  ${media.lessThan('large')`
+    padding: 20px 0;
+  `}
+
+  ${media.greaterThan('medium')`
+    padding: 20px;
+  `}
+
+  > svg {
+    ${media.lessThan('medium')`
+      height: 24px;
+      min-height: 20px;
+      min-width: 20px;
+      width: 24px;
+    `}
+
+    ${media.greaterThan('medium')`
+      height: 42px;
+      width: 42px;
+    `}
+  }
+
+  &.-previous {
+    border-right: 1px solid ${themes.palette.general.borders};
+
+    ${media.lessThan('medium')`
+      padding-right: 10px;
+    `}
+
+    ${media.greaterThan('medium')`
+      padding-left: 20px;
+      transition: padding-left 0.3s;
+    `}
+
+    section.-singlePrevious &,
+    section.-singleNext & {
+      ${media.lessThan('medium')`
+        border-right: 0;
+      `}
+    }
+
+    > svg {
+      margin-right: 10px;
+      transform: rotate(180deg);
+    }
+  }
+
+  &.-next {
+    justify-content: flex-end;
+    text-align: right;
+
+    ${media.lessThan('medium')`
+      padding-left: 10px;
+    `}
+
+    ${media.greaterThan('medium')`
+      padding-right: 20px;
+      transition: padding-right 0.3s;
+    `}
+
+    section.-singlePrevious & {
+      ${media.greaterThan('small')`
+        border-left: 1px solid ${themes.palette.general.borders};
+      `}
+    }
+
+    > svg {
+      margin-left: 10px;
+    }
+  }
+
+  &:hover {
+    &.-previous {
+      padding-left: 0;
+      transition: padding-left 0.3s;
+    }
+
+    &.-next {
+      padding-right: 0;
+      transition: padding-right 0.3s;
+    }
+
+    strong {
+      text-decoration: underline;
+    }
+  }
+`;
+
+export const LinkInfos = styled.span``;
+
+export const LinksLabel = styled.span`
+  color: ${themes.palette.general.color};
+  display: block;
+  font-size: 0.9rem;
+  margin-bottom: 5px;
+`;
+
+export const LinksTitle = styled.strong`
+  color: ${themes.palette.general.links};
+  display: block;
+  font-family: ${themes.fonts.titles};
+  max-width: 450px;
+
+  ${media.lessThan('medium')`
+    font-size: 1.25rem;
+    line-height: 1;
+  `}
+
+  ${media.greaterThan('medium')`
+    font-size: 1.5rem;
+    line-height: 1.1;
+  `}
+`;

src/pages/sobre.js

@@ -229,6 +229,11 @@ export default function AboutPage() {
               há muitos anos.
             </S.PageText>
             <MySkillCharts />
+            <S.PageText>
+              Mas claro, sou campeão em falar besteira e zoar. Fora as atividades musicais, dentre
+              outras coisas nas horas vagas, fora do trabalho. Ficar fazendo site, blog, muito
+              formal e sério não é comigo, tem que ter uma sacanagem, sempre.
+            </S.PageText>
             <AniLink
               className="link-animated"
               cover

src/styles/pages/about.js

@@ -67,8 +67,8 @@ export const AboutImage = styled(Img)`
   `}
 
   &:after, &:before {
-    border-right: 10px solid;
     border-bottom: 10px solid;
+    border-right: 10px solid;
     content: '';
     display: block;
     position: absolute;
@@ -77,8 +77,8 @@ export const AboutImage = styled(Img)`
   }
 
   &:after {
-    border-right-color: rgba(${themes.palette.about.secondBorder}, 0.5);
     border-bottom-color: rgba(${themes.palette.about.secondBorder}, 0.5);
+    border-right-color: rgba(${themes.palette.about.secondBorder}, 0.5);
     height: 35%;
     width: 45%;
 
@@ -93,16 +93,17 @@ export const AboutImage = styled(Img)`
   }
 
   &:before {
-    border-right-color: rgba(${themes.palette.about.firstBorder}, 0.5);
     border-bottom-color: rgba(${themes.palette.about.firstBorder}, 0.5);
+    border-right-color: rgba(${themes.palette.about.firstBorder}, 0.5);
     bottom: 30px;
     height: 55%;
     right: 30px;
     width: 60%;
 
     ${media.lessThan('medium')`
       bottom: 10px;
-      right: 10px;`}
+      right: 10px;
+    `}
 
     ${media.greaterThan('medium')`
       bottom: 30px;

src/templates/blog-post/index.js

@@ -3,11 +3,14 @@ import { graphql } from 'gatsby';
 import Layout from '../../components/layout';
 import Comments from '../../components/comments';
 import SEO from '../../components/seo';
+import PreviousNext from '../../components/previous-next';
 
 import * as S from './styles';
 
-export default function BlogPost({ data }) {
+export default function BlogPost({ data, pageContext }) {
   const { fields, frontmatter, html, timeToRead } = data.markdownRemark;
+  const nextPost = pageContext.nextPost;
+  const previousPost = pageContext.previousPost;
 
   return (
     <Layout>
@@ -32,6 +35,7 @@ export default function BlogPost({ data }) {
           <S.DatePost>{frontmatter.date}</S.DatePost>
         </S.PostInfos>
         <S.PostContent dangerouslySetInnerHTML={{ __html: html }}></S.PostContent>
+        <PreviousNext next={nextPost} previous={previousPost} />
         <Comments slug={fields.slug} title={frontmatter.title} />
       </S.PostWrap>
     </Layout>