blog-index-parrot

/** @jsx jsx */
// import React from 'react';
import { jsx } from 'theme-ui';
import { Link, graphql } from 'gatsby';
import { PostCard } from '@nickymeuleman/gatsby-theme-blog';
import testImg from './test.jpg';

const IndexPage = ({ data }) => {
  console.log(data);

  const posts = data.allBlogPost.nodes;
  return (
    <div
      sx={{
        minHeight: '100vh',
      }}
    >
      <div
        sx={{
          position: 'relative',
          display: 'flex',
          flexDirection: 'column',
          height: '40vh',
          minHeight: '20rem',
          backgroundImage:
            'linear-gradient(90deg, #425c86 20%, transparent), linear-gradient(175deg, #425c86 20%, transparent )',
          '::after': {
            content: '""',
            position: 'absolute',
            top: 0,
            bottom: 0,
            left: 0,
            right: 0,
            zIndex: -1,
            backgroundColor: 'mutedBackground',
            backgroundImage:
              ' url(https://images.unsplash.com/photo-1506220926022-cc5c12acdb35?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80)',
            backgroundPositionX: 'right',
            backgroundRepeat: 'no-repeat',
            backgroundBlendMode: 'luminosity',
          },
        }}
      >
        <header
          sx={{
            display: 'grid',
            gridTemplateColumns:
              'minmax(1rem, 1fr) minmax(20ch, 70ch)  minmax(1rem, 1fr)',
            fontSize: 3,
            py: 3,
          }}
        >
          <span
            sx={{ gridColumn: '2/3', gridRow: '1/1', justifySelf: 'start' }}
          >
            <Link
              to="/"
              sx={{
                textDecoration: 'none',
                color: 'text',
              }}
            >
              NickyMeuleman
            </Link>
          </span>
          <nav
            sx={{
              gridColumn: '2/3',
              gridRow: '1/1',
              justifySelf: 'end',
              display: 'flex',
              //   Chrome doesn't support "gap" for flexbox yet, sadface
              span: {
                marginLeft: 4,
              },
            }}
          >
            <span>
              <Link
                to="/"
                sx={{
                  variant: 'styles.a',
                  border: 'none',
                  '&.is-active': {
                    borderBottomWidth: `2px`,
                    borderBottomStyle: `solid`,
                    borderBottomColor: `mutedPrimary`,
                  },
                }}
                activeClassName="is-active"
              >
                Home
              </Link>
            </span>
            <span>
              <Link
                to="/uses"
                sx={{
                  variant: 'styles.a',
                  border: 'none',
                  '&.is-active': {
                    borderBottomWidth: `2px`,
                    borderBottomStyle: `solid`,
                    borderBottomColor: `mutedPrimary`,
                  },
                }}
                activeClassName="is-active"
              >
                Uses
              </Link>
            </span>
            <span>
              <Link
                to="/blog"
                sx={{
                  variant: 'styles.a',
                  border: 'none',
                  '&.is-active': {
                    borderBottomWidth: `2px`,
                    borderBottomStyle: `solid`,
                    borderBottomColor: `mutedPrimary`,
                  },
                }}
                activeClassName="is-active"
              >
                Blog
              </Link>
            </span>
          </nav>
        </header>
        <div
          sx={{
            flex: 1,
            display: 'grid',
            gridTemplateColumns:
              'minmax(1rem, 1fr) minmax(20ch, 70ch)  minmax(1rem, 1fr)',
            gridTemplateRows: '1fr',
            fontSize: 3,
          }}
        >
          <div sx={{ gridColumn: '2/3', alignSelf: 'end' }}>
            <h2
              sx={{
                fontSize: 4,
                my: 0,
                lineHeight: 1,
                fontWeight: 'normal',
              }}
            >
              Hey!
            </h2>
            <h1
              sx={{
                fontSize: 7,
                mt: 0,
                mb: 5,
                lineHeight: 1,
                fontWeight: 'normal',
              }}
            >
              <span
                sx={{
                  color: 'mutedPrimary',
                  fontWeight: 'bold',
                }}
              >
                Build
              </span>{' '}
              for the modern web
            </h1>
          </div>
        </div>
      </div>
      <div
        sx={{
          display: 'grid',
          gridTemplateColumns:
            'minmax(1rem, 1fr) minmax(20ch, 70ch)  minmax(1rem, 1fr)',
          fontSize: 3,
          my: 5,
          gap: 3,
        }}
      >
        <div
          sx={{
            gridColumn: '2/3',
            display: 'flex',
            justifyContent: 'space-between',
          }}
        >
          <div sx={{ color: 'text' }}>Latest blogposts</div>
          <div sx={{ textTransform: 'uppercase', color: 'mutedTextBg' }}>
            <Link
              to="/blog"
              sx={{
                textDecoration: 'none',
                color: 'inherit',
                letterSpacing: 'wide',
                ':hover': {
                  color: 'mutedPrimary',
                },
              }}
            >
              View all
            </Link>
          </div>
        </div>
        <div
          sx={{
            gridColumn: '2/3',
            display: 'grid',
            gap: 4,
            fontSize: 1,
          }}
        >
          {posts.map(post => {
            return (
              <PostCard
                key={post.id}
                url={`/blog/${post.slug}`}
                title={post.title}
                date={post.date}
                authors={post.authors}
                coverSizes={
                  post.cover ? post.cover.childImageSharp.fluid : null
                }
              />
            );
          })}
        </div>
      </div>
    </div>
  );
};

export const indexQuery = graphql`
  query IndexQuery {
    allBlogPost(
      sort: { order: DESC, fields: date }
      limit: 3
      filter: { published: { eq: true } }
    ) {
      nodes {
        id
        authors {
          shortName
          name
        }
        date
        id
        slug
        title
        cover {
          childImageSharp {
            fluid {
              ...GatsbyImageSharpFluid_withWebp
            }
          }
        }
      }
    }
  }
`;

export default IndexPage;