waylon/gatsby-starter-blog-forestry
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Make frontpage list more interesting

Browse source
This commit is contained in:
Kyle Mathews 2017-08-18 09:24:58 -04:00
parent 79da05c169
commit b02f67b474
3 changed files with 41 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -7,7 +7,7 @@
"url": "https://github.com/gatsbyjs/gatsby-starter-blog/issues" "url": "https://github.com/gatsbyjs/gatsby-starter-blog/issues"
}, },
"dependencies": { "dependencies": {
"gatsby": "^1.8.10", "gatsby": "^1.8.11",
"gatsby-link": "^1.6.7", "gatsby-link": "^1.6.7",
"gatsby-plugin-google-analytics": "^1.0.3", "gatsby-plugin-google-analytics": "^1.0.3",
"gatsby-plugin-manifest": "^1.0.3", "gatsby-plugin-manifest": "^1.0.3",

58
src/pages/index.js
View file

@ -1,42 +1,46 @@
import React from 'react' import React from "react"
import Link from 'gatsby-link' import Link from "gatsby-link"
import get from 'lodash/get' import get from "lodash/get"
import Helmet from 'react-helmet' import Helmet from "react-helmet"
import Bio from '../components/Bio' import Bio from "../components/Bio"
import { rhythm } from '../utils/typography' import { rhythm } from "../utils/typography"
class BlogIndex extends React.Component { class BlogIndex extends React.Component {
render() { render() {
// console.log("props", this.props) const siteTitle = get(this, "props.data.site.siteMetadata.title")
const pageLinks = [] const posts = get(this, "props.data.allMarkdownRemark.edges")
const siteTitle = get(this, 'props.data.site.siteMetadata.title')
const posts = get(this, 'props.data.allMarkdownRemark.edges') return (
posts.forEach(post => { <div>
if (post.node.path !== '/404/') { <Helmet title={get(this, "props.data.site.siteMetadata.title")} />
const title = get(post, 'node.frontmatter.title') || post.node.path <Bio />
pageLinks.push( {posts.map(post => {
<li if (post.node.path !== "/404/") {
const title = get(post, "node.frontmatter.title") || post.node.path
return (
<div>
<h3
key={post.node.frontmatter.path} key={post.node.frontmatter.path}
style={{ style={{
marginBottom: rhythm(1 / 4), marginBottom: rhythm(1 / 4),
}} }}
> >
<Link style={{ boxShadow: 'none' }} to={post.node.frontmatter.path}> <Link
style={{ boxShadow: "none" }}
to={post.node.frontmatter.path}
>
{post.node.frontmatter.title} {post.node.frontmatter.title}
</Link> </Link>
</li> </h3>
<small>
{post.node.frontmatter.date}
</small>
<p dangerouslySetInnerHTML={{ __html: post.node.excerpt }} />
</div>
) )
} }
}) })}
return (
<div>
<Helmet title={get(this, 'props.data.site.siteMetadata.title')} />
<Bio />
<ul>
{pageLinks}
</ul>
</div> </div>
) )
} }
@ -58,8 +62,10 @@ export const pageQuery = graphql`
allMarkdownRemark(sort: { fields: [frontmatter___date], order: DESC }) { allMarkdownRemark(sort: { fields: [frontmatter___date], order: DESC }) {
edges { edges {
node { node {
excerpt
frontmatter { frontmatter {
path path
date(formatString: "DD MMMM, YYYY")
} }
frontmatter { frontmatter {
title title

6
yarn.lock
View file

@ -3289,9 +3289,9 @@ gatsby-transformer-sharp@^1.6.0:
fs-extra "^4.0.0" fs-extra "^4.0.0"
image-size "^0.6.0" image-size "^0.6.0"
gatsby@^1.8.10: gatsby@^1.8.11:
version "1.8.10" version "1.8.11"
resolved "https://registry.yarnpkg.com/gatsby/-/gatsby-1.8.10.tgz#7acd034ca9c3101cc51e8c7aaebe39c9cd315ce0" resolved "https://registry.yarnpkg.com/gatsby/-/gatsby-1.8.11.tgz#1602d67163709a220dceb095a8e55ea4c45dc44a"
dependencies: dependencies:
async "^2.1.2" async "^2.1.2"
babel-code-frame "^6.22.0" babel-code-frame "^6.22.0"