1212
:lipstick: Update post previews · orlowdev/orlow.dev@eb45eed · GitHub
Skip to content

Commit eb45eed

Browse files
author
Sergei Orlow
committed
💄 Update post previews
1 parent 9b75591 commit eb45eed

File tree

6 files changed

+58
-109
lines changed

6 files changed

+58
-109
lines changed

‎src/components/post-preview-small.js‎

Lines changed: 4 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -2,22 +2,9 @@ import React from 'react'
22
import PropTypes from 'prop-types'
33
import styled from '@emotion/styled'
44
import { Link } from 'gatsby'
5-
import GatsbyImage from 'gatsby-image'
65
import { Labels } from './labels'
76
import { useSiteMetadata } from '../hooks/use-site-metadata'
87

9-
const PostImage = styled(GatsbyImage)`
10-
border: 0;
11-
border-radius: 0.25rem;
12-
margin-right: 1rem;
13-
height: 100px;
14-
width: 100px;
15-
16-
@media screen and (max-width: 662px) {
17-
margin-right: 0;
18-
}
19-
`
20-
218
const PostLink = styled(Link)`
229
text-decoration: none;
2310
color: #333;
@@ -33,7 +20,9 @@ const PostPreviewSection = styled.section`
3320
flex-direction: row;
3421
3522
@media screen and (max-width: 662px) {
36-
flex-direction: column;
23+
h3 {
24+
font-size: 1.2rem;
25+
}
3726
}
3827
`
3928

@@ -46,18 +35,10 @@ const Column = styled.div`
4635
export const PostPreviewSmall = ({ post }) => {
4736
const { siteUrl } = useSiteMetadata()
4837
const pageUrl = `${siteUrl}${post.fields.slug}`
49-
const imageUrl = `${siteUrl}${post.frontmatter.image.sharp.fixed.src}`
38+
const imageUrl = `${siteUrl}${post.frontmatter.image.sharp.fluid.src}`
5039

5140
return (
5241
<PostPreviewSection itemProp='item' itemScope itemType='https://schema.org/Article'>
53-
<Link to={post.fields.slug}>
54-
<PostImage
55-
title={post.frontmatter.title}
56-
fixed={post.frontmatter.image.sharp.fixed}
57-
alt={post.frontmatter.imageAlt}
58-
fadeIn
59-
/>
60-
</Link>
6142
<Column>
6243
<h3>
6344
<PostLink itemProp='url' to={post.fields.slug}>

‎src/components/post-preview.js‎

Lines changed: 20 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -3,19 +3,22 @@ import PropTypes from 'prop-types'
33
import styled from '@emotion/styled'
44
import { Link } from 'gatsby'
55
import { Colours } from '../colours'
6-
import GatsbyImage from 'gatsby-image'
76
import { TimeToRead } from './time-to-read'
87
import { Labels } from './labels'
98
import { useSiteMetadata } from '../hooks/use-site-metadata'
9+
import BackgroundImage from 'gatsby-background-image'
1010

11-
const PostImage = styled(GatsbyImage)`
11+
const PostImage = styled(BackgroundImage)`
1212
border: 0;
1313
border-radius: 0.25rem;
1414
margin-right: 1rem;
15-
height: 300px;
16-
width: 300px;
15+
display: flex;
16+
align-items: center;
17+
flex-direction: row;
18+
box-shadow: 0 0 15px #0000000f;
1719
1820
@media screen and (max-width: 662px) {
21+
flex-direction: column;
1922
margin-right: 0;
2023
}
2124
`
@@ -35,36 +38,34 @@ const PostDate = styled.span`
3538
color: #666;
3639
`
3740

38-
const PostPreviewSection = styled.section`
39-
display: flex;
40-
align-items: center;
41-
flex-direction: row;
42-
@media screen and (max-width: 662px) {
43-
flex-direction: column;
44-
}
45-
`
46-
4741
const Column = styled.div`
42+
padding: 1rem;
4843
display: flex;
4944
flex-direction: column;
50-
max-width: calc(1000px - 2rem - 300px);
45+
background: -webkit-linear-gradient(#fafafabb, #ffffffff);
5146
`
5247

5348
export const PostPreview = ({ post }) => {
5449
const { siteUrl } = useSiteMetadata()
5550
const pageUrl = `${siteUrl}${post.fields.slug}`
56-
const imageUrl = `${siteUrl}${post.frontmatter.image.sharp.fixed.src}`
51+
const imageUrl = `${siteUrl}${post.frontmatter.image.sharp.fluid.src}`
5752

5853
return (
59-
<PostPreviewSection itemProp='item' itemScope itemType='https://schema.org/Article'>
60-
<Link to={post.fields.slug}>
54+
<PostImage
55+
Tag='section'
56+
itemProp='item'
57+
itemScope
58+
itemType='https://schema.org/Article'
59+
fluid={post.frontmatter.image.sharp.fluid}
60+
>
61+
{/* <Link to={post.fields.slug}>
6162
<PostImage
6263
title={post.frontmatter.title}
6364
fixed={post.frontmatter.image.sharp.fixed}
6465
alt={post.frontmatter.imageAlt}
6566
fadeIn
6667
/>
67-
</Link>
68+
</Link> */}
6869
<Column>
6970
<h2>
7071
<PostLink itemProp='url' to={post.fields.slug}>
@@ -89,7 +90,7 @@ export const PostPreview = ({ post }) => {
8990
</p>
9091
<Labels from={post.frontmatter.tags} />
9192
</Column>
92-
</PostPreviewSection>
93+
</PostImage>
9394
)
9495
}
9596

‎src/components/recent-posts.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import styled from '@emotion/styled'
2+
3+
export const RecentPosts = styled.ul`
4+
display: flex;
5+
flex-direction: row;
6+
flex-wrap: wrap;
7+
list-style: none;
8+
margin: 0;
9+
padding: 2rem 1rem 0;
10+
justify-content: space-between;
11+
12+
> li {
13+
flex-grow: 1;
14+
max-width: 500px;
15+
}
16+
`

‎src/graphql.js‎

Lines changed: 2 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -46,33 +46,8 @@ export const postPreviewFragment = graphql`
4646
imageAlt
4747
image {
4848
sharp: childImageSharp {
49-
fixed(quality: 90, width: 300, height: 300) {
50-
...GatsbyImageSharpFixed_withWebp
51-
}
52-
}
53-
}
54-
}
55-
fields {
56-
slug
57-
}
58-
excerpt(pruneLength: 150)
59-
timeToRead
60-
}
61-
`
62-
63-
export const postPreviewSmallFragment = graphql`
64-
fragment PostPreviewSmall on MarkdownRemark {
65-
frontmatter {
66-
title
67-
date(formatString: "DD MMMM, YYYY")
68-
description
69-
tags
70-
song
71-
imageAlt
72-
image {
73-
sharp: childImageSharp {
74-
fixed(quality: 90, width: 100, height: 100) {
75-
...GatsbyImageSharpFixed_withWebp
49+
fluid(quality: 100) {
50+
...GatsbyImageSharpFluid_withWebp
7651
}
7752
}
7853
}

‎src/layout.js‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,8 +39,6 @@ const GlobalStyles = () => (
3939
4040
h1 {
4141
font-size: 2.5rem;
42-
padding: 1rem 0;
43-
text-align: center;
4442
}
4543
4644
h2 {

‎src/pages/index.js‎

Lines changed: 16 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import Seo from '../components/seo'
99
import SubscriptionForm from '../components/subscription-form'
1010
import { PostPreviewSmall } from '../components/post-preview-small'
1111
import { TopTags } from '../components/top-tags'
12+
import { RecentPosts } from '../components/recent-posts'
1213

1314
const List = styled.ul`
1415
list-style: none;
@@ -18,37 +19,24 @@ const List = styled.ul`
1819
const Index = ({ data }) => (
1920
<Layout>
2021
<Seo />
22+
<RecentPosts itemScope itemType='https://schema.org/ItemList'>
23+
{data.allMarkdownRemark.edges.slice(0, 3).map(({ node }, i) => (
24+
<li
25+
key={node.fields.slug}
26+
itemProp='itemListElement'
27+
itemScope
28+
itemType='https://schema.org/ListItem'
29+
>
30+
<meta css={{ display: 'none' }} itemProp='position' content={i + 1} />
31+
<meta itemProp='name headline' content={node.frontmatter.title} />
32+
<PostPreview post={node} />
33+
</li>
34+
))}
35+
</RecentPosts>
2136

2237
<Centralise>
23-
<h1 itemProp='name headline'>
24-
<span role='img' aria-label='Full hourglass'>
25-
⏳
26-
</span>{' '}
27-
Recent Posts
28-
</h1>
2938
<List itemScope itemType='https://schema.org/ItemList'>
30-
{data.allMarkdownRemark.edges.slice(0, 3).map(({ node }, i) => (
31-
<li
32-
key={node.fields.slug}
33-
itemProp='itemListElement'
34-
itemScope
35-
itemType='https://schema.org/ListItem'
36-
>
37-
<meta css={{ display: 'none' }} itemProp='position' content={i + 1} />
38-
<meta itemProp='name headline' content={node.frontmatter.title} />
39-
<PostPreview post={node} />
40-
</li>
41-
))}
42-
</List>
43-
<h1>
44-
<span role='img' aria-label='Empty hourglass'>
45-
⌛️
46-
</span>{' '}
47-
More Posts
48-
</h1>
49-
50-
<List itemScope itemType='https://schema.org/ItemList'>
51-
{data.smallPreview.edges.slice(3).map(({ node }, i) => (
39+
{data.allMarkdownRemark.edges.slice(3).map(({ node }, i) => (
5240
<li
5341
key={node.fields.slug}
5442
itemProp='itemListElement'
@@ -86,15 +74,5 @@ export const query = graphql`
8674
}
8775
}
8876
}
89-
smallPreview: allMarkdownRemark(
90-
filter: { fileAbsolutePath: { regex: "/content/" }, frontmatter: { published: { eq: true } } }
91-
sort: { order: DESC, fields: frontmatter___date }
92-
) {
93-
edges {
94-
node {
95-
...PostPreviewSmall
96-
}
97-
}
98-
}
9977
}
10078
`

0 commit comments

Comments
 (0)