-
Notifications
You must be signed in to change notification settings - Fork 120
/
tag.js
88 lines (82 loc) · 2.17 KB
/
tag.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
import React from 'react'
import { graphql } from 'gatsby'
import { startCase, orderBy } from 'lodash'
import SEO from '../components/SEO'
import moment from 'moment'
import Layout from '../components/Layout'
import Card from '../components/Card'
import CardList from '../components/CardList'
import PageTitle from '../components/PageTitle'
import Pagination from '../components/Pagination'
import Container from '../components/Container'
const TagTemplate = ({ data, pageContext }) => {
const posts = orderBy(
data.contentfulTag.post,
// eslint-disable-next-line
[(object) => new moment(object.publishDateISO)],
['desc']
)
const { title } = data.contentfulTag
const numberOfPosts = posts.length
const skip = pageContext.skip
const limit = pageContext.limit
const { humanPageNumber, basePath } = pageContext
let ogImage
try {
ogImage = posts[0].heroImage.gatsbyImageData.images.fallback.src
} catch (error) {
ogImage = null
}
return (
<>
<Layout>
<SEO
title={`Tag: ${startCase(title)}`}
description={`Posts Tagged: ${startCase(title)}`}
image={ogImage}
/>
<Container>
<PageTitle small>
{numberOfPosts} Posts Tagged: “
{title}
”
</PageTitle>
<CardList>
{posts.slice(skip, limit * humanPageNumber).map((post) => (
<Card {...post} key={post.id} basePath={basePath} />
))}
</CardList>
</Container>
<Pagination context={pageContext} />
</Layout>
</>
)
}
export const query = graphql`
query ($slug: String!) {
contentfulTag(slug: { eq: $slug }) {
title
id
slug
post {
id
title
slug
publishDate(formatString: "MMMM DD, YYYY")
publishDateISO: publishDate(formatString: "YYYY-MM-DD")
heroImage {
title
gatsbyImageData(width: 1800, placeholder: BLURRED)
}
body {
childMarkdownRemark {
timeToRead
html
excerpt(pruneLength: 80)
}
}
}
}
}
`
export default TagTemplate