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.

Sign up for GitHub

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

Jump to bottom

[www] Blog post meta styles #1561

Merged
merged 8 commits into from Jul 20, 2017
Merged

[www] Blog post meta styles #1561

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
4194907
Reduce author avatar size
Jul 19, 2017
91c437b
Consolidate styles, (better) fit author bio styles
Jul 19, 2017
8b72d7c
Remove excerpt dark green font color
Jul 19, 2017
d6576b7
Put author name and post date in one line, reduce author avatar size
Jul 19, 2017
e0c2c6a
Obsolete now
Jul 19, 2017
8fcd3ea
More whitespace for blog post title on tablets and above
Jul 19, 2017
232cefe
Revert "Put author name and post date in one line, reduce author avat…
Jul 19, 2017
eacb60d
Refactor blog post previews to component
Jul 20, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
95 changes: 95 additions & 0 deletions www/src/components/blog-post-preview-item.js
View file
Open in desktop
@@ -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
View file
Open in desktop
@@ -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>
)
}
Expand All @@ -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
}
}
}
Expand Down
102 changes: 6 additions & 96 deletions www/src/pages/index.js
View file
Open in desktop
Expand Up @@ -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"

Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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
}
}
}
Expand Down
10 changes: 7 additions & 3 deletions www/src/templates/template-blog-post.js
View file
Open in desktop
Expand Up @@ -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
Expand All @@ -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`,
Expand Down Expand Up @@ -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
}
Expand Down