From 4194907f0196a3e437326b62980443d79eeef2b8 Mon Sep 17 00:00:00 2001 From: Florian Kissling Date: Wed, 19 Jul 2017 17:17:32 +0200 Subject: [PATCH 1/8] Reduce author avatar size --- www/src/templates/template-blog-post.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/www/src/templates/template-blog-post.js b/www/src/templates/template-blog-post.js index dcc4c89a9a25d..b0c1dfe6fb4e9 100644 --- a/www/src/templates/template-blog-post.js +++ b/www/src/templates/template-blog-post.js @@ -114,8 +114,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 +194,7 @@ export const pageQuery = graphql` twitter avatar { childImageSharp { - responsiveResolution(width: 75, height: 75, quality: 75) { + responsiveResolution(width: 63, height: 63, quality: 75) { src srcSet } From 91c437b3270b080c486ca04b264e7f6354603bf6 Mon Sep 17 00:00:00 2001 From: Florian Kissling Date: Wed, 19 Jul 2017 17:20:17 +0200 Subject: [PATCH 2/8] Consolidate styles, (better) fit author bio styles --- www/src/pages/blog/index.js | 19 ++++++------------- 1 file changed, 6 insertions(+), 13 deletions(-) diff --git a/www/src/pages/blog/index.js b/www/src/pages/blog/index.js index b3cdea9eb4c7a..ae35ce62cecc3 100644 --- a/www/src/pages/blog/index.js +++ b/www/src/pages/blog/index.js @@ -2,7 +2,7 @@ import React from "react" import Link from "gatsby-link" import colors from "../../utils/colors" -import { rhythm, scale } from "../../utils/typography" +import typography, { rhythm, scale } from "../../utils/typography" import presets from "../../utils/presets" import Container from "../../components/container" @@ -55,24 +55,17 @@ class BlogPostsIndex extends React.Component {
-
+
{post.frontmatter.author.id}
-
+
{post.frontmatter.date} From 8b72d7cd422a215779655cf257e93cb70302daf0 Mon Sep 17 00:00:00 2001 From: Florian Kissling Date: Wed, 19 Jul 2017 17:22:18 +0200 Subject: [PATCH 3/8] Remove excerpt dark green font color --- www/src/pages/blog/index.js | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/www/src/pages/blog/index.js b/www/src/pages/blog/index.js index ae35ce62cecc3..d79c1ccdc6ff6 100644 --- a/www/src/pages/blog/index.js +++ b/www/src/pages/blog/index.js @@ -27,11 +27,7 @@ class BlogPostsIndex extends React.Component { > {post.frontmatter.title} -

+

{post.frontmatter.excerpt ? post.frontmatter.excerpt : post.excerpt} From d6576b75bf7233f4352c62105cd30758f39afef1 Mon Sep 17 00:00:00 2001 From: Florian Kissling Date: Wed, 19 Jul 2017 17:36:24 +0200 Subject: [PATCH 4/8] Put author name and post date in one line, reduce author avatar size --- www/src/pages/blog/index.js | 14 ++------------ 1 file changed, 2 insertions(+), 12 deletions(-) diff --git a/www/src/pages/blog/index.js b/www/src/pages/blog/index.js index d79c1ccdc6ff6..39c994c7f5dea 100644 --- a/www/src/pages/blog/index.js +++ b/www/src/pages/blog/index.js @@ -53,20 +53,10 @@ class BlogPostsIndex extends React.Component { display: `inline-block`, fontFamily: typography.options.headerFontFamily.join(`,`), color: `rgba(0,0,0,.44)`, - lineHeight: 1.1, }} >

- - {post.frontmatter.author.id} - -
-
- - - {post.frontmatter.date} - - + {post.frontmatter.author.id} on {post.frontmatter.date}
@@ -103,7 +93,7 @@ export const pageQuery = graphql` id avatar { childImageSharp { - responsiveResolution(width: 35, height: 35) { + responsiveResolution(width: 24, height: 24) { width height src From e0c2c6a53e29fd4606e19807d8df14741decb56d Mon Sep 17 00:00:00 2001 From: Florian Kissling Date: Wed, 19 Jul 2017 18:29:24 +0200 Subject: [PATCH 5/8] Obsolete now --- www/src/pages/blog/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/www/src/pages/blog/index.js b/www/src/pages/blog/index.js index 39c994c7f5dea..08ead6f69c58b 100644 --- a/www/src/pages/blog/index.js +++ b/www/src/pages/blog/index.js @@ -1,6 +1,5 @@ import React from "react" import Link from "gatsby-link" -import colors from "../../utils/colors" import typography, { rhythm, scale } from "../../utils/typography" import presets from "../../utils/presets" From 8fcd3ea073d4e9fe27f35925a1a0649726e35757 Mon Sep 17 00:00:00 2001 From: Florian Kissling Date: Wed, 19 Jul 2017 18:34:16 +0200 Subject: [PATCH 6/8] More whitespace for blog post title on tablets and above --- www/src/templates/template-blog-post.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/www/src/templates/template-blog-post.js b/www/src/templates/template-blog-post.js index b0c1dfe6fb4e9..4ee1b7bcdfa3e 100644 --- a/www/src/templates/template-blog-post.js +++ b/www/src/templates/template-blog-post.js @@ -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), + }, }} >
Date: Wed, 19 Jul 2017 19:21:47 +0200 Subject: [PATCH 7/8] Revert "Put author name and post date in one line, reduce author avatar size" This reverts commit d6576b75bf7233f4352c62105cd30758f39afef1 and on top of that gets rid of in favor of `scale` to compensate for Futura rendering a lot smaller than Gyre Schola. --- www/src/pages/blog/index.js | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/www/src/pages/blog/index.js b/www/src/pages/blog/index.js index 08ead6f69c58b..7a0bdd930ca17 100644 --- a/www/src/pages/blog/index.js +++ b/www/src/pages/blog/index.js @@ -52,10 +52,19 @@ class BlogPostsIndex extends React.Component { 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, + }, }} >
- {post.frontmatter.author.id} on {post.frontmatter.date} + {post.frontmatter.author.id} +
+
+ {post.frontmatter.date}
@@ -92,7 +101,7 @@ export const pageQuery = graphql` id avatar { childImageSharp { - responsiveResolution(width: 24, height: 24) { + responsiveResolution(width: 36, height: 36) { width height src From eacb60d8027a78415b89aa103376c403c2283d94 Mon Sep 17 00:00:00 2001 From: Florian Kissling Date: Thu, 20 Jul 2017 03:15:45 +0200 Subject: [PATCH 8/8] Refactor blog post previews to component --- www/src/components/blog-post-preview-item.js | 95 +++++++++++++++++ www/src/pages/blog/index.js | 94 ++--------------- www/src/pages/index.js | 102 ++----------------- 3 files changed, 108 insertions(+), 183 deletions(-) create mode 100644 www/src/components/blog-post-preview-item.js diff --git a/www/src/components/blog-post-preview-item.js b/www/src/components/blog-post-preview-item.js new file mode 100644 index 0000000000000..5c84ffc60dc07 --- /dev/null +++ b/www/src/components/blog-post-preview-item.js @@ -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 ( +
+ +

+ {post.frontmatter.title} +

+

+ {post.frontmatter.excerpt ? post.frontmatter.excerpt : post.excerpt} +

+ +
+ {`Avatar +
+
+ {post.frontmatter.author.id} +
+
+ {post.frontmatter.date} +
+
+
+
+ ) + } +} + +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 + } + } + } + } + } + } +` diff --git a/www/src/pages/blog/index.js b/www/src/pages/blog/index.js index 7a0bdd930ca17..3bcf2e3afdc05 100644 --- a/www/src/pages/blog/index.js +++ b/www/src/pages/blog/index.js @@ -1,76 +1,17 @@ import React from "react" -import Link from "gatsby-link" - -import typography, { 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 (

Blog

- {blogPosts.map(post => { - const avatar = - post.frontmatter.author.avatar.childImageSharp.responsiveResolution - return ( -
- -

- {post.frontmatter.title} -

-

- {post.frontmatter.excerpt - ? post.frontmatter.excerpt - : post.excerpt} -

- -
- {`Avatar -
-
- {post.frontmatter.author.id} -
-
- {post.frontmatter.date} -
-
-
-
- ) - })} + {allMarkdownRemark.edges.map(({ node }) => + + )} ) } @@ -89,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: 36, height: 36) { - width - height - src - srcSet - } - } - } - } - } + ...BlogPostPreview_item } } } diff --git a/www/src/pages/index.js b/www/src/pages/index.js index 45d9107796c53..bbfa9cb2c3000 100644 --- a/www/src/pages/index.js +++ b/www/src/pages/index.js @@ -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 (
Latest from the Gatsby blog - {blogPosts.map(post => { - const avatar = - post.frontmatter.author.avatar.childImageSharp - .responsiveResolution - return ( -
- -

- {post.frontmatter.title} -

-

- {post.frontmatter.excerpt - ? post.frontmatter.excerpt - : post.excerpt} -

- -
- {`Avatar -
-
- - {post.frontmatter.author.id} - -
-
- - - {post.frontmatter.date} - - -
-
-
-
- ) - })} + {blogPosts.edges.map(({ node }) => + + )}
@@ -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 } } }