-
Notifications
You must be signed in to change notification settings - Fork 0
/
blog-list.js
92 lines (87 loc) · 2.45 KB
/
blog-list.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
89
90
91
92
import React from 'react'
import { Link, graphql } from 'gatsby'
import DefaultLayout from '../components/layout'
import SEO from '../components/seo'
import BlogItems from './blog-item'
class BlogIndex extends React.Component {
render() {
const { data } = this.props
const siteTitle = data.site.siteMetadata.title
const posts = data.allMarkdownRemark.edges
const { currentPage, numPages } = this.props.pageContext
const isFirst = currentPage === 1
const isLast = currentPage === numPages
const prevPage = currentPage - 1 === 1 ? '/' : (currentPage - 1).toString()
const nextPage = (currentPage + 1).toString()
return (
<DefaultLayout>
<SEO
title={siteTitle}
keywords={[`blog`, `gatsby`, `javascript`, `react`, `aparna ravindra`, `books review`]}
/>
<div className="content-box clearfix">
<BlogItems items={posts} />
<div className="container">
<nav className="pagination" role="navigation">
<ul>
{!isFirst && (
<p>
<Link to={prevPage} rel="prev" className="newer-posts">
← Previous Page
</Link>
</p>
)}
<p>
<span className="page-number">
Page {currentPage} of {numPages}
</span>
</p>
{!isLast && (
<p>
<Link to={nextPage} rel="next" className="older-posts">
Next Page →
</Link>
</p>
)}
</ul>
</nav>
</div>
</div>
</DefaultLayout>
)
}
}
export default BlogIndex
export const pageQuery = graphql`
query blogPageQuery($skip: Int!, $limit: Int!) {
site {
siteMetadata {
title
}
}
allMarkdownRemark(
sort: { fields: [frontmatter___date], order: DESC }
limit: $limit
skip: $skip
) {
edges {
node {
excerpt
fields {
slug
}
timeToRead
frontmatter {
title
date(formatString: "YYYY, MMM DD")
img {
childImageSharp {
gatsbyImageData(placeholder: BLURRED, layout: FULL_WIDTH, formats: [AUTO, AVIF, WEBP])
}
}
}
}
}
}
}
`