Blog > index.js

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>
    )
  }
}