Skip to content

Instantly share code, notes, and snippets.

@domtaylor
Last active June 3, 2020 15:03
Show Gist options
  • Save domtaylor/daa34c10d87bf2bdab22a5b2bc08e9aa to your computer and use it in GitHub Desktop.
Save domtaylor/daa34c10d87bf2bdab22a5b2bc08e9aa to your computer and use it in GitHub Desktop.
Blog > index.js
import React from 'react'
import { Link } from 'gatsby'
import Layout from '../../components/Layout'
import BlogRoll from '../../components/BlogRoll'
import SEO from '../../components/SEO'
const PaginationLink = props => {
if (!props.test) {
return (
<Link to={`/blog/${props.url}`} className='button is-rounded'>
{props.text}
</Link>
)
} else {
return (
<span disabled className='button is-rounded'>
{props.text}
</span>
)
}
}
export default class BlogIndexPage extends React.Component {
render() {
const { pageContext } = this.props
const { postLimit, index, first, last } = pageContext
const previousUrl = index - 1 === 1 ? '' : (index - 1).toString()
const nextUrl = (index + 1).toString() + '/'
return (
<Layout>
<div
className="full-width-image-container margin-top-0"
style={{
backgroundImage: `url('/img/beach_clean_up.jpg')`,
}}
>
<h1
className="has-text-weight-bold is-size-1"
style={{
boxShadow: '0.5rem 0 0 #f40, -0.5rem 0 0 #f40',
backgroundColor: '#f40',
color: 'white',
padding: '1rem',
}}
>
Latest Stories
</h1>
</div>
<section className="section">
<SEO title="Blog - Latest Stories | Shaka Surf" desc="News and stories about environmental issues, surfing and sustainability. Read our latest news stories at Shaka Surf." defaultbanner="" pathname="/blog" article={false}>
</SEO>
<div className="container">
<div className="content">
<BlogRoll posts={pageContext} postLimit={postLimit} />
</div>
</div>
</section>
<section>
<div className="buttons is-centered" style={{ marginBottom: `2em` }}>
<PaginationLink test={first} url={previousUrl} text="Previous Page" />
<PaginationLink test={last} url={nextUrl} text="Next Page" />
</div>
</section>
</Layout>
)
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment