df2c7ef323
Lodash already has support for safe property access via the explicit `get` method, and as a shorthand to many of the collection methods (such as `sortBy`. I also took this opportunity to refactor the code to be a bit more functional, which allows us to place the list tiems inline with the rest of the JSX, which I find far more readable. Interesting project!
53 lines
1.5 KiB
JavaScript
53 lines
1.5 KiB
JavaScript
import React from 'react'
|
|
import { Link } from 'react-router'
|
|
import sortBy from 'lodash/sortBy'
|
|
import get from 'lodash/get'
|
|
import { prefixLink } from 'gatsby-helpers'
|
|
import { rhythm } from 'utils/typography'
|
|
import Helmet from "react-helmet"
|
|
import { config } from 'config'
|
|
import include from 'underscore.string/include'
|
|
import Bio from 'components/Bio'
|
|
|
|
class BlogIndex extends React.Component {
|
|
render () {
|
|
// Sort pages.
|
|
const sortedPages = sortBy(this.props.route.pages, 'data.date')
|
|
// Posts are those with md extension that are not 404 pages OR have a date (meaning they're a react component post).
|
|
const visiblePages = sortedPages.filter(page => (
|
|
get(page, 'file.ext') === 'md' && !include(page.path, '/404') || get(page, 'data.date')
|
|
))
|
|
return (
|
|
<div>
|
|
<Helmet
|
|
title={config.blogTitle}
|
|
meta={[
|
|
{"name": "description", "content": "Sample blog"},
|
|
{"name": "keywords", "content": "blog, articles"},
|
|
]}
|
|
/>
|
|
<Bio />
|
|
<ul>
|
|
{visiblePages.map((page) => (
|
|
<li
|
|
key={page.path}
|
|
style={{
|
|
marginBottom: rhythm(1/4),
|
|
}}
|
|
>
|
|
<Link style={{boxShadow: 'none'}} to={prefixLink(page.path)}>
|
|
{get(page, 'data.title', page.path)}
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
)
|
|
}
|
|
}
|
|
|
|
BlogIndex.propTypes = {
|
|
route: React.PropTypes.object,
|
|
}
|
|
|
|
export default BlogIndex
|