Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[www] Blog post meta styles #1561

Merged
merged 8 commits into from
Jul 20, 2017
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
95 changes: 95 additions & 0 deletions www/src/components/blog-post-preview-item.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
import React from "react"
import Link from "gatsby-link"

import typography, { rhythm, scale } from "../utils/typography"
import presets from "../utils/presets"

class BlogPostPreviewItem extends React.Component {
render() {
const post = this.props.post
const avatar =
post.frontmatter.author.avatar.childImageSharp.responsiveResolution

return (
<div css={{ marginBottom: rhythm(2) }}>
<Link to={post.fields.slug}>
<h2
css={{
marginBottom: rhythm(1 / 8),
}}
>
{post.frontmatter.title}
</h2>
<p>
{post.frontmatter.excerpt ? post.frontmatter.excerpt : post.excerpt}
</p>
</Link>
<div>
<img
alt={`Avatar for ${post.frontmatter.author.id}`}
src={avatar.src}
srcSet={avatar.srcSet}
height={avatar.height}
width={avatar.width}
css={{
borderRadius: `100%`,
display: `inline-block`,
marginRight: rhythm(1 / 2),
marginBottom: 0,
verticalAlign: `top`,
}}
/>
<div
css={{
display: `inline-block`,
fontFamily: typography.options.headerFontFamily.join(`,`),
color: `rgba(0,0,0,.44)`,
...scale(-2 / 5),
lineHeight: 1.3,
[presets.Mobile]: {
...scale(-1 / 5),
lineHeight: 1.3,
},
}}
>
<div>
{post.frontmatter.author.id}
</div>
<div>
{post.frontmatter.date}
</div>
</div>
</div>
</div>
)
}
}

export default BlogPostPreviewItem

export const blogPostPreviewFragment = graphql`
fragment BlogPostPreview_item on MarkdownRemark {
excerpt
fields {
slug
}
frontmatter {
excerpt
title
date(formatString: "DD MMMM, YYYY")
author {
id
avatar {
childImageSharp {
responsiveResolution(width: 36, height: 36) {
width
height
src
srcSet
}
}
}
}
}
}
`
107 changes: 7 additions & 100 deletions www/src/pages/blog/index.js
Original file line number Diff line number Diff line change
@@ -1,89 +1,17 @@
import React from "react"
import Link from "gatsby-link"
import colors from "../../utils/colors"

import { rhythm, scale } from "../../utils/typography"
import presets from "../../utils/presets"
import Container from "../../components/container"
import BlogPostPreviewItem from "../../components/blog-post-preview-item"

class BlogPostsIndex extends React.Component {
render() {
const blogPosts = this.props.data.allMarkdownRemark.edges.map(
edge => edge.node
)
const { allMarkdownRemark } = this.props.data

return (
<Container>
<h1 css={{ marginTop: 0 }}>Blog</h1>
{blogPosts.map(post => {
const avatar =
post.frontmatter.author.avatar.childImageSharp.responsiveResolution
return (
<div key={post.fields.slug} css={{ marginBottom: rhythm(2) }}>
<Link to={post.fields.slug}>
<h2
css={{
marginBottom: rhythm(1 / 8),
}}
>
{post.frontmatter.title}
</h2>
<p
css={{
color: colors.b[13],
}}
>
{post.frontmatter.excerpt
? post.frontmatter.excerpt
: post.excerpt}
</p>
</Link>
<div>
<img
alt={`Avatar for ${post.frontmatter.author.id}`}
src={avatar.src}
srcSet={avatar.srcSet}
height={avatar.height}
width={avatar.width}
css={{
borderRadius: `100%`,
display: `inline-block`,
marginRight: rhythm(1 / 2),
marginBottom: 0,
verticalAlign: `top`,
}}
/>
<div
css={{
display: `inline-block`,
}}
>
<div
css={{
color: colors.b[12],
lineHeight: 1.1,
}}
>
<small>
{post.frontmatter.author.id}
</small>
</div>
<div
css={{
color: colors.b[12],
lineHeight: 1.1,
}}
>
<small>
<em>
{post.frontmatter.date}
</em>
</small>
</div>
</div>
</div>
</div>
)
})}
{allMarkdownRemark.edges.map(({ node }) =>
<BlogPostPreviewItem post={node} key={node.fields.slug} />
)}
</Container>
)
}
@@ -102,28 +30,7 @@ export const pageQuery = graphql`
) {
edges {
node {
excerpt
fields {
slug
}
frontmatter {
excerpt
title
date(formatString: "DD MMMM, YYYY")
author {
id
avatar {
childImageSharp {
responsiveResolution(width: 35, height: 35) {
width
height
src
srcSet
}
}
}
}
}
...BlogPostPreview_item
}
}
}
102 changes: 6 additions & 96 deletions www/src/pages/index.js
Original file line number Diff line number Diff line change
@@ -2,6 +2,7 @@ import React from "react"
import Link from "gatsby-link"
import { rhythm, scale, options } from "../utils/typography"
import Container from "../components/container"
import BlogPostPreviewItem from "../components/blog-post-preview-item"
import presets from "../utils/presets"
import colors from "../utils/colors"

@@ -45,9 +46,7 @@ const ctaButtonStyles = {
const IndexRoute = React.createClass({
render() {
console.log(this.props)
const blogPosts = this.props.data.allMarkdownRemark.edges.map(
edge => edge.node
)
const blogPosts = this.props.data.allMarkdownRemark
return (
<div>
<div
@@ -280,77 +279,9 @@ const IndexRoute = React.createClass({
>
Latest from the Gatsby blog
</h2>
{blogPosts.map(post => {
const avatar =
post.frontmatter.author.avatar.childImageSharp
.responsiveResolution
return (
<div key={post.fields.slug} css={{ paddingBottom: rhythm(2) }}>
<Link to={post.fields.slug}>
<h2
css={{
marginBottom: rhythm(1 / 8),
}}
>
{post.frontmatter.title}
</h2>
<p
css={{
color: colors.b[13],
}}
>
{post.frontmatter.excerpt
? post.frontmatter.excerpt
: post.excerpt}
</p>
</Link>
<div>
<img
alt={`Avatar for ${post.frontmatter.author.id}`}
src={avatar.src}
srcSet={avatar.srcSet}
height={avatar.height}
width={avatar.width}
css={{
borderRadius: `100%`,
display: `inline-block`,
marginRight: rhythm(1 / 2),
marginBottom: 0,
verticalAlign: `top`,
}}
/>
<div
css={{
display: `inline-block`,
}}
>
<div
css={{
color: colors.b[12],
lineHeight: 1.1,
}}
>
<small>
{post.frontmatter.author.id}
</small>
</div>
<div
css={{
color: colors.b[12],
lineHeight: 1.1,
}}
>
<small>
<em>
{post.frontmatter.date}
</em>
</small>
</div>
</div>
</div>
</div>
)
})}
{blogPosts.edges.map(({ node }) =>
<BlogPostPreviewItem post={node} key={node.fields.slug} />
)}
</Container>
</div>
</div>
@@ -386,28 +317,7 @@ export const pageQuery = graphql`
) {
edges {
node {
excerpt
fields {
slug
}
frontmatter {
excerpt
title
date(formatString: "DD MMMM, YYYY")
author {
id
avatar {
childImageSharp {
responsiveResolution(width: 35, height: 35) {
width
height
src
srcSet
}
}
}
}
}
...BlogPostPreview_item
}
}
}
10 changes: 7 additions & 3 deletions www/src/templates/template-blog-post.js
Original file line number Diff line number Diff line change
@@ -97,6 +97,10 @@ const BlogPostTemplate = React.createClass({
display: `flex`,
marginTop: rhythm(-1 / 4),
marginBottom: rhythm(1),
[presets.Tablet]: {
marginTop: rhythm(1 / 2),
marginBottom: rhythm(2),
},
}}
>
<div
@@ -114,8 +118,8 @@ const BlogPostTemplate = React.createClass({
.responsiveResolution.srcSet
}
css={{
height: rhythm(2.75),
width: rhythm(2.75),
height: rhythm(2.5),
width: rhythm(2.5),
margin: 0,
borderRadius: `100%`,
display: `inline-block`,
@@ -194,7 +198,7 @@ export const pageQuery = graphql`
twitter
avatar {
childImageSharp {
responsiveResolution(width: 75, height: 75, quality: 75) {
responsiveResolution(width: 63, height: 63, quality: 75) {
src
srcSet
}