From 4995a64df557901453f50aad92cd9aec64f9d444 Mon Sep 17 00:00:00 2001 From: greglobinski Date: Fri, 2 Nov 2018 15:40:20 +0100 Subject: [PATCH 01/23] feat(www): rebase Ecosystem and Blog sections feat(www): add Ecosystem section to Homepage feat(www): homepage WIP wip feat(www): finish sections style for mobile feat(www): add Ecosystsem featured items to Hompage feat(www): homepage ecosystem section styling WIP feat(www): add arrow to action button fix(www): fix code formating fix(www): fix code formating and eslint errors fix(www): fix hovering effect on Featured Item fix(www): fix hovering effect sequel fix(www): fix hover bug fix(www): update texts (intro & link labels) feat(www): add scroller observer to Home page refactor(www): use imported scrollers observer fix(www): change link labes on Ecosystem page fix(www): fix some small style issues refactor(www): refator combineEcosystemFeaturedItems and reorder some css properties feat(www): add Blog section to Homepage feat(www): mobile styles for Blog section feat(www): mobile styles for Blog section feat(www): desktoop style for Blog section WIP feat(www): desktoop style for Blog section WIP feat(www): desktop style for Homepage Blog section WIP feat(www): finish desktop style of Blog section feat(www): finish desktop style of Blog section --- .../components/homepage/homepage-blog-post.js | 265 ++++++++++++++++++ .../homepage/homepage-blog-posts.js | 228 +++++++++++++++ www/src/components/homepage/homepage-blog.js | 34 +++ .../components/homepage/homepage-section.js | 17 +- www/src/pages/index.js | 68 +---- 5 files changed, 548 insertions(+), 64 deletions(-) create mode 100644 www/src/components/homepage/homepage-blog-post.js create mode 100644 www/src/components/homepage/homepage-blog-posts.js create mode 100644 www/src/components/homepage/homepage-blog.js diff --git a/www/src/components/homepage/homepage-blog-post.js b/www/src/components/homepage/homepage-blog-post.js new file mode 100644 index 0000000000000..330cf3b66a141 --- /dev/null +++ b/www/src/components/homepage/homepage-blog-post.js @@ -0,0 +1,265 @@ +import React from "react" +import PropTypes from "prop-types" +import styled from "react-emotion" +import { Link, graphql } from "gatsby" +import Img from "gatsby-image" + +import ArrowForwardIcon from "react-icons/lib/md/arrow-forward" + +import presets, { colors } from "../../utils/presets" +import { rhythm, options } from "../../utils/typography" + +export const ScrollerItem = styled(`div`)` + background: #fff; + border-radius: ${presets.radiusLg}px; + box-shadow: 0 0 6px rgba(0, 0, 0, 0.15); +` + +const HomepageBlogPostRoot = styled(ScrollerItem)` + display: flex; + flex-direction: column; + font-family: ${options.systemFontFamily.join(`,`)}; + margin-right: ${rhythm(presets.gutters.default)}; + margin-bottom: ${rhythm(presets.gutters.default)}; + padding-bottom: ${rhythm(3)}; + position: relative; + width: 77vw; + + ${presets.Tablet} { + width: 320px; + } + + ${presets.Desktop} { + flex-shrink: 0; + margin-right: 0; + width: ${props => (props.fullWidth ? `100%` : `80%`)}; + + :hover { + background: ${colors.ui.whisper}; + } + } +` + +const Cover = styled(Img)` + display: none; + + ${presets.Desktop} { + display: block; + margin-bottom: -${rhythm(0.5)}; + } +` + +const Header = styled(`h1`)` + color: ${colors.gatsbyDark}; + font-size: 1.25rem; + font-weight: bold; + line-height: 1.25; + margin: 0; + padding: ${rhythm(4 / 5)}; + padding-bottom: 0; + + ${presets.Desktop} { + font-size: ${props => (props.first ? `1.75rem` : `1.5rem`)}; + padding: ${rhythm(1.5)}; + padding-bottom: 0; + } +` + +const Meta = styled(`div`)` + align-items: center; + color: ${colors.gray.calm}; + display: flex; + flex-wrap: wrap; + font-size: 0.875rem; + padding: ${rhythm(1 / 4)} ${rhythm(4 / 5)}; + + & > * { + flex-shrink: 0; + } + + ${presets.Desktop} { + padding: ${rhythm(0.75)} ${rhythm(1.5)}; + } +` + +const Author = styled(Link)` + align-items: center; + display: flex; + z-index: 1; + + img { + border-radius: 50%; + height: 28px; + width: 28px; + } + + span { + color: ${colors.gatsby}; + border-bottom: 1px solid ${colors.ui.bright}; + box-shadow: inset 0 -2px 0px 0px ${colors.ui.bright}; + margin-left: 0.5rem; + } + + a& { + font-weight: normal; + } + + ${presets.Desktop} { + :hover { + span { + background: ${colors.ui.bright}; + } + } + } +` + +const Excerpt = styled(`p`)` + color: ${colors.gray.copy}; + font-size: 0.875rem; + line-height: 1.4; + padding: 0 ${rhythm(4 / 5)}; + + ${presets.Desktop} { + margin-top: 0.2rem; + padding: 0 ${rhythm(1.5)}; + } +` + +const ReadMore = styled(Link)` + align-items: flex-end; + background: transparent; + bottom: 0; + color: ${colors.gatsby}; + display: flex; + flex-grow: 1; + font-size: 0.875rem; + left: 0; + padding: ${rhythm(4 / 5)}; + position: absolute; + right: 0; + top: 0; + z-index: 0; + + &:hover { + background: yellow; + } + + svg { + height: 18px; + width: 18px; + } + + span { + color: ${colors.gatsby}; + border-bottom: 1px solid ${colors.ui.bright}; + box-shadow: inset 0 -2px 0px 0px ${colors.ui.bright}; + font-weight: bold; + margin-right: 0.2rem; + } + + ${presets.Desktop} { + padding: ${rhythm(1.5)}; + + span { + :hover { + background: ${colors.ui.bright}; + } + } + } +` + +const HomepageBlogPost = ({ post, first = false, fullWidth = false }) => { + const { + fields: { slug }, + frontmatter: { + excerpt, + author: { + id: authorName, + avatar: { + childImageSharp: { fixed: authorFixed }, + }, + fields: { slug: authorSlug }, + }, + date, + title, + cover, + }, + } = post + + return ( + + {cover && } + + +
+ {title} +
+ + + + + {authorName} + {authorName} + +  on  + {date} + + {first && {excerpt}} + + Read more + + +
+ ) +} + +HomepageBlogPost.propTypes = { + post: PropTypes.object.isRequired, + first: PropTypes.bool, + fullWidth: PropTypes.bool, +} + +export const homepageBlogPostFragment = graphql` + fragment HomepageBlogPostData on MarkdownRemark { + excerpt + fields { + slug + } + frontmatter { + excerpt + title + date(formatString: "MM/DD/YY") + author { + id + fields { + slug + } + avatar { + childImageSharp { + fixed( + width: 30 + height: 30 + quality: 80 + traceSVG: { + turdSize: 10 + background: "#f6f2f8" + color: "#e0d6eb" + } + ) { + ...GatsbyImageSharpFixed_tracedSVG + } + } + } + } + cover { + childImageSharp { + fluid(maxWidth: 700, quality: 80) { + ...GatsbyImageSharpFluid_withWebp + } + } + } + } + } +` + +export default HomepageBlogPost diff --git a/www/src/components/homepage/homepage-blog-posts.js b/www/src/components/homepage/homepage-blog-posts.js new file mode 100644 index 0000000000000..eeb3cb9ed0476 --- /dev/null +++ b/www/src/components/homepage/homepage-blog-posts.js @@ -0,0 +1,228 @@ +import React, { Component } from "react" +import PropTypes from "prop-types" +import styled from "react-emotion" +import { Link } from "gatsby" + +import ArrowForwardIcon from "react-icons/lib/md/arrow-forward" + +import HomepageBlogPost, { ScrollerItem } from "./homepage-blog-post" + +import presets, { colors } from "../../utils/presets" +import { rhythm, options } from "../../utils/typography" +import { SCROLLER_CLASSNAME } from "../../utils/scrollers-observer" + +const ScrollerOuter = styled(`div`)` + overflow-x: scroll; + -webkit-overflow-scrolling: touch; +` + +const ScrollerInner = styled(`div`)` + display: inline-flex; + margin: 0; + padding: 6px ${rhythm(presets.gutters.default / 2)} 12px; +` + +const HomepageBlogPostsRoot = styled(ScrollerOuter)` + margin: 0 -${rhythm(presets.gutters.default / 2)}; + + ${presets.Desktop} { + margin: 0; + margin-left: calc(3rem - (${rhythm(options.blockMarginBottom)})); + margin-right: 1rem; + overflow-x: auto; + } + + ${presets.Hd} { + margin-right: 3rem; + } +` + +const MobilePosts = styled(ScrollerInner)`` + +const DesktopPosts = styled(`div`)` + display: flex; + margin: 0; + margin-left: calc(3rem - (${rhythm(options.blockMarginBottom)})); + margin-right: 1rem; + + a { + border: none; + box-shadow: none; + font-family: inherit; + + :hover { + background: transparent; + } + } +` + +const DesktopPostsColumn = styled(`div`)` + align-items: flex-end; + display: flex; + flex-direction: column; + flex-basis: 43%; + margin-right: 30px; + position: relative; + + :last-child { + align-items: flex-start; + margin-right: 0; + top: 30px; + } +` + +const ViewAllStyle = styled(ScrollerItem)` + display: flex; + overflow: hidden; + font-family: ${options.headerFontFamily.join(`,`)}; + margin-left: ${rhythm(presets.gutters.default)}; + + & > a { + display: flex; + flex-direction: column; + font-weight: bold; + font-size: 1.25rem; + line-height: 1.2; + padding: ${rhythm(0.75)}; + width: 100%; + + span { + align-items: center; + display: flex; + } + + svg { + height: 18x; + margin-left: 0.2rem; + width: 18px; + } + } + + ${presets.Desktop} { + background: ${colors.gatsby}; + color: white; + flex-shrink: 0; + height: 160px; + width: 160px; + + &:hover { + color: ${colors.gatsby}; + background: ${colors.ui.whisper}; + } + } +` + +const AddViewAll = styled(`div`)` + display: flex; +` + +const ViewAll = () => ( + + + View all + + posts + + + + +) + +class HomepageBlogPosts extends Component { + desktopMediaQuery + + state = { + inDesktopViewPort: false, + } + + componentDidMount = () => { + this.desktopMediaQuery = window.matchMedia(presets.desktop) + this.desktopMediaQuery.addListener(this.updateViewPortState) + this.setState({ inDesktopViewPort: this.desktopMediaQuery.matches }) + } + + componentWillUnmount = () => { + this.desktopMediaQuery.removeListener(this.updateViewPortState) + } + + updateViewPortState = e => { + this.setState({ inDesktopViewPort: this.desktopMediaQuery.matches }) + } + + splitPostsToColumns = posts => + posts.reduce( + (merge, post, idx) => { + if (idx % 2) { + merge[1].push(post) + } else { + merge[0].push(post) + } + + return merge + }, + [[], []] + ) + + render() { + const { posts } = this.props + const postsInColumns = this.splitPostsToColumns(posts) + const { inDesktopViewPort } = this.state + + return ( + + {inDesktopViewPort ? ( + + {postsInColumns.map((column, colIdx) => ( + + {column.map((post, postIdx) => { + const { + fields: { slug }, + } = post + + if (colIdx & postIdx) { + return ( + + + + + ) + } + + return ( + + ) + })} + + ))} + + ) : ( + + + {posts.map((post, idx) => { + const { + fields: { slug }, + } = post + return + })} + + + + )} + + ) + } +} + +HomepageBlogPosts.propTypes = { + posts: PropTypes.array.isRequired, +} + +export default HomepageBlogPosts diff --git a/www/src/components/homepage/homepage-blog.js b/www/src/components/homepage/homepage-blog.js new file mode 100644 index 0000000000000..822d2f3e47c01 --- /dev/null +++ b/www/src/components/homepage/homepage-blog.js @@ -0,0 +1,34 @@ +import React from "react" +import PropTypes from "prop-types" + +import HomepageSection from "./homepage-section" +import HomepageBlogPosts from "./homepage-blog-posts" + +import { BlogIcon } from "../../assets/mobile-nav-icons" + +const HomepageBlog = ({ posts }) => ( + + + +) + +HomepageBlog.propTypes = { + posts: PropTypes.array.isRequired, +} + +export default HomepageBlog diff --git a/www/src/components/homepage/homepage-section.js b/www/src/components/homepage/homepage-section.js index 04f02b86be6e2..847dd2f28d86e 100644 --- a/www/src/components/homepage/homepage-section.js +++ b/www/src/components/homepage/homepage-section.js @@ -60,6 +60,7 @@ const Icon = styled(`span`)` } svg { + fill: transparent; height: ${ICON_SIZE}; stroke: ${props => (props.inverse ? colors.ui.light : colors.lilac)}; width: ${ICON_SIZE}; @@ -70,14 +71,14 @@ const Title = styled(`h1`)` color: ${props => (props.inverse ? colors.lemon : colors.gatsby)}; font-size: 1.75rem; margin: 0; - margin-bottom: 0.5em; ` const Introduction = styled(`p`)` color: ${props => (props.inverse ? colors.ui.light : colors.gatsbyDark)}; font-size: 1.125rem; font-family: ${options.headerFontFamily.join(`,`)}; - margin-bottom: 0; + margin: 0; + margin-top: ${rhythm(4 / 5)}; ` const Actions = styled(`div`)` @@ -86,7 +87,7 @@ const Actions = styled(`div`)` margin-top: -${rhythm(1 / 4)}; > a { - margin: ${rhythm(1.2)} 0 ${rhythm(1.5)}; + margin: ${rhythm(1.2)} ${rhythm(0.2)} ${rhythm(1.5)} 0; } ` @@ -118,10 +119,16 @@ const HomepageSection = ({ )} {links.map((item, idx) => { - const { to, label, icon: Icon } = item + const { to, label, icon: Icon, secondary } = item return ( - ) diff --git a/www/src/pages/index.js b/www/src/pages/index.js index ef14655156029..319cd84f7a3ea 100644 --- a/www/src/pages/index.js +++ b/www/src/pages/index.js @@ -3,7 +3,7 @@ import { graphql } from "gatsby" import Helmet from "react-helmet" import Layout from "../components/layout" import presets, { colors } from "../utils/presets" -import { rhythm, options } from "../utils/typography" +import { rhythm } from "../utils/typography" import { WebpackIcon, ReactJSIcon, GraphQLIcon } from "../assets/logos" import { vP } from "../components/gutters" import Container from "../components/container" @@ -14,12 +14,11 @@ import Card from "../components/card" import UsedBy from "../components/used-by" import CardHeadline from "../components/card-headline" import Diagram from "../components/diagram" -import BlogPostPreviewItem from "../components/blog-post-preview-item" import FuturaParagraph from "../components/futura-paragraph" import Button from "../components/button" import TechWithIcon from "../components/tech-with-icon" -import EmailCaptureForm from "../components/email-capture-form" import HomepageEcosystem from "../components/homepage/homepage-ecosystem" +import HomepageBlog from "../components/homepage/homepage-blog" import { setupScrollersObserver, unobserveScrollers, @@ -45,7 +44,7 @@ class IndexRoute extends React.Component { render() { const { data: { - allMarkdownRemark: blogPosts, + allMarkdownRemark: { edges: postsData }, allStartersYaml: { edges: startersData }, allNpmPackage: { edges: pluginsData }, }, @@ -86,6 +85,8 @@ class IndexRoute extends React.Component { starters, }) + const posts = postsData.map(item => item.node) + return ( @@ -111,7 +112,7 @@ class IndexRoute extends React.Component { padding: rhythm(presets.gutters.default / 2), flex: `0 0 100%`, maxWidth: `100%`, - [presets.Hd]: { padding: vP, paddingTop: 0 }, + [presets.Hd]: { padding: vP, paddingTop: 0, paddingBottom: 0 }, }} >
- -
- - -

- Latest from the Gatsby blog -

- {blogPosts.edges.map(({ node }) => ( - - ))} - -
-
-
+
@@ -302,7 +252,7 @@ export const pageQuery = graphql` } allMarkdownRemark( sort: { order: DESC, fields: [frontmatter___date, fields___slug] } - limit: 3 + limit: 4 filter: { frontmatter: { draft: { ne: true } } fileAbsolutePath: { regex: "/docs.blog/" } @@ -311,7 +261,7 @@ export const pageQuery = graphql` ) { edges { node { - ...BlogPostPreview_item + ...HomepageBlogPostData } } } From a92fa816bd15614547f046c4e3a7d61c3e9b6b26 Mon Sep 17 00:00:00 2001 From: greglobinski Date: Thu, 15 Nov 2018 23:29:01 +0100 Subject: [PATCH 02/23] fix(www): fix stylelint error --- www/src/components/homepage/homepage-blog-posts.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/www/src/components/homepage/homepage-blog-posts.js b/www/src/components/homepage/homepage-blog-posts.js index eeb3cb9ed0476..e29efa29cabef 100644 --- a/www/src/components/homepage/homepage-blog-posts.js +++ b/www/src/components/homepage/homepage-blog-posts.js @@ -92,7 +92,7 @@ const ViewAllStyle = styled(ScrollerItem)` } svg { - height: 18x; + height: 18px; margin-left: 0.2rem; width: 18px; } From 8f791a4daad1d29e89fc811a03f1a4bdce169728 Mon Sep 17 00:00:00 2001 From: greglobinski Date: Fri, 16 Nov 2018 13:47:17 +0100 Subject: [PATCH 03/23] feat(): finish styles of Blog section --- .../components/homepage/homepage-blog-post.js | 61 +++++++------ .../homepage/homepage-blog-posts.js | 85 ++++++++----------- .../components/shared/horizontal-scroller.js | 29 +++++++ www/src/utils/colors.js | 1 + 4 files changed, 103 insertions(+), 73 deletions(-) create mode 100644 www/src/components/shared/horizontal-scroller.js diff --git a/www/src/components/homepage/homepage-blog-post.js b/www/src/components/homepage/homepage-blog-post.js index 330cf3b66a141..422a5b9cc56a7 100644 --- a/www/src/components/homepage/homepage-blog-post.js +++ b/www/src/components/homepage/homepage-blog-post.js @@ -6,24 +6,27 @@ import Img from "gatsby-image" import ArrowForwardIcon from "react-icons/lib/md/arrow-forward" +import { HorizontalScrollerItem } from "../shared/horizontal-scroller" + import presets, { colors } from "../../utils/presets" import { rhythm, options } from "../../utils/typography" -export const ScrollerItem = styled(`div`)` - background: #fff; - border-radius: ${presets.radiusLg}px; - box-shadow: 0 0 6px rgba(0, 0, 0, 0.15); -` - -const HomepageBlogPostRoot = styled(ScrollerItem)` +const HomepageBlogPostRoot = styled(HorizontalScrollerItem)` display: flex; flex-direction: column; font-family: ${options.systemFontFamily.join(`,`)}; - margin-right: ${rhythm(presets.gutters.default)}; - margin-bottom: ${rhythm(presets.gutters.default)}; - padding-bottom: ${rhythm(3)}; + padding-bottom: ${rhythm(2.5)}; position: relative; - width: 77vw; + + a { + border: none; + box-shadow: none; + font-family: inherit; + + :hover { + background: transparent; + } + } ${presets.Tablet} { width: 320px; @@ -32,6 +35,8 @@ const HomepageBlogPostRoot = styled(ScrollerItem)` ${presets.Desktop} { flex-shrink: 0; margin-right: 0; + margin-bottom: ${rhythm(presets.gutters.default)}; + padding-bottom: ${rhythm(3.5)}; width: ${props => (props.fullWidth ? `100%` : `80%`)}; :hover { @@ -41,19 +46,15 @@ const HomepageBlogPostRoot = styled(ScrollerItem)` ` const Cover = styled(Img)` - display: none; - - ${presets.Desktop} { - display: block; - margin-bottom: -${rhythm(0.5)}; - } + display: block; + margin-bottom: -${rhythm(0.5)}; ` const Header = styled(`h1`)` - color: ${colors.gatsbyDark}; + color: ${colors.gatsbyDarker}; font-size: 1.25rem; font-weight: bold; - line-height: 1.25; + line-height: 1.2; margin: 0; padding: ${rhythm(4 / 5)}; padding-bottom: 0; @@ -71,14 +72,16 @@ const Meta = styled(`div`)` display: flex; flex-wrap: wrap; font-size: 0.875rem; - padding: ${rhythm(1 / 4)} ${rhythm(4 / 5)}; + margin-top: 1rem; + padding: 0 ${rhythm(4 / 5)}; & > * { flex-shrink: 0; } ${presets.Desktop} { - padding: ${rhythm(0.75)} ${rhythm(1.5)}; + margin-top: 1.5rem; + padding: 0 ${rhythm(1.5)}; } ` @@ -116,11 +119,12 @@ const Author = styled(Link)` const Excerpt = styled(`p`)` color: ${colors.gray.copy}; font-size: 0.875rem; - line-height: 1.4; + line-height: 1.5; padding: 0 ${rhythm(4 / 5)}; ${presets.Desktop} { - margin-top: 0.2rem; + margin: 0; + margin-top: 1.5rem; padding: 0 ${rhythm(1.5)}; } ` @@ -168,7 +172,12 @@ const ReadMore = styled(Link)` } ` -const HomepageBlogPost = ({ post, first = false, fullWidth = false }) => { +const HomepageBlogPost = ({ + post, + first = false, + fullWidth = false, + desktopViewport = false, +}) => { const { fields: { slug }, frontmatter: { @@ -188,7 +197,8 @@ const HomepageBlogPost = ({ post, first = false, fullWidth = false }) => { return ( - {cover && } + {desktopViewport && + cover && }
@@ -217,6 +227,7 @@ HomepageBlogPost.propTypes = { post: PropTypes.object.isRequired, first: PropTypes.bool, fullWidth: PropTypes.bool, + desktopViewport: PropTypes.bool, } export const homepageBlogPostFragment = graphql` diff --git a/www/src/components/homepage/homepage-blog-posts.js b/www/src/components/homepage/homepage-blog-posts.js index e29efa29cabef..53cd1f17a518e 100644 --- a/www/src/components/homepage/homepage-blog-posts.js +++ b/www/src/components/homepage/homepage-blog-posts.js @@ -5,24 +5,18 @@ import { Link } from "gatsby" import ArrowForwardIcon from "react-icons/lib/md/arrow-forward" -import HomepageBlogPost, { ScrollerItem } from "./homepage-blog-post" +import HomepageBlogPost from "./homepage-blog-post" +import { + HorizontalScroller, + HorizontalScrollerContent, + HorizontalScrollerItem, +} from "../shared/horizontal-scroller" import presets, { colors } from "../../utils/presets" import { rhythm, options } from "../../utils/typography" import { SCROLLER_CLASSNAME } from "../../utils/scrollers-observer" -const ScrollerOuter = styled(`div`)` - overflow-x: scroll; - -webkit-overflow-scrolling: touch; -` - -const ScrollerInner = styled(`div`)` - display: inline-flex; - margin: 0; - padding: 6px ${rhythm(presets.gutters.default / 2)} 12px; -` - -const HomepageBlogPostsRoot = styled(ScrollerOuter)` +const HomepageBlogPostsRootMobile = styled(HorizontalScroller)` margin: 0 -${rhythm(presets.gutters.default / 2)}; ${presets.Desktop} { @@ -37,26 +31,14 @@ const HomepageBlogPostsRoot = styled(ScrollerOuter)` } ` -const MobilePosts = styled(ScrollerInner)`` - -const DesktopPosts = styled(`div`)` +const HomepageBlogPostsRootDesktop = styled(`div`)` display: flex; margin: 0; margin-left: calc(3rem - (${rhythm(options.blockMarginBottom)})); margin-right: 1rem; - - a { - border: none; - box-shadow: none; - font-family: inherit; - - :hover { - background: transparent; - } - } ` -const DesktopPostsColumn = styled(`div`)` +const PostsColumn = styled(`div`)` align-items: flex-end; display: flex; flex-direction: column; @@ -71,19 +53,21 @@ const DesktopPostsColumn = styled(`div`)` } ` -const ViewAllStyle = styled(ScrollerItem)` +const ViewAllStyle = styled(HorizontalScrollerItem)` display: flex; - overflow: hidden; font-family: ${options.headerFontFamily.join(`,`)}; - margin-left: ${rhythm(presets.gutters.default)}; + overflow: hidden; + width: auto; - & > a { + a { + box-shadow: none; display: flex; flex-direction: column; font-weight: bold; font-size: 1.25rem; + justify-content: center; line-height: 1.2; - padding: ${rhythm(0.75)}; + padding: ${rhythm(1.5)}; width: 100%; span { @@ -103,6 +87,7 @@ const ViewAllStyle = styled(ScrollerItem)` color: white; flex-shrink: 0; height: 160px; + margin-left: ${rhythm(presets.gutters.default)}; width: 160px; &:hover { @@ -112,7 +97,7 @@ const ViewAllStyle = styled(ScrollerItem)` } ` -const AddViewAll = styled(`div`)` +const LastPost = styled(`div`)` display: flex; ` @@ -132,13 +117,13 @@ class HomepageBlogPosts extends Component { desktopMediaQuery state = { - inDesktopViewPort: false, + desktopViewport: false, } componentDidMount = () => { this.desktopMediaQuery = window.matchMedia(presets.desktop) this.desktopMediaQuery.addListener(this.updateViewPortState) - this.setState({ inDesktopViewPort: this.desktopMediaQuery.matches }) + this.setState({ desktopViewport: this.desktopMediaQuery.matches }) } componentWillUnmount = () => { @@ -146,7 +131,7 @@ class HomepageBlogPosts extends Component { } updateViewPortState = e => { - this.setState({ inDesktopViewPort: this.desktopMediaQuery.matches }) + this.setState({ desktopViewport: this.desktopMediaQuery.matches }) } splitPostsToColumns = posts => @@ -166,28 +151,31 @@ class HomepageBlogPosts extends Component { render() { const { posts } = this.props const postsInColumns = this.splitPostsToColumns(posts) - const { inDesktopViewPort } = this.state + const { desktopViewport } = this.state return ( - {inDesktopViewPort ? ( - + {desktopViewport ? ( + {postsInColumns.map((column, colIdx) => ( - + {column.map((post, postIdx) => { const { fields: { slug }, } = post if (colIdx & postIdx) { + { + /* add 'View all posts' link as a sibling of the last post card */ + } return ( - + - + ) } @@ -197,15 +185,16 @@ class HomepageBlogPosts extends Component { first={!colIdx && !postIdx} key={slug} post={post} + desktopViewport={desktopViewport} /> ) })} - + ))} - + ) : ( - - + + {posts.map((post, idx) => { const { fields: { slug }, @@ -213,8 +202,8 @@ class HomepageBlogPosts extends Component { return })} - - + + )} ) diff --git a/www/src/components/shared/horizontal-scroller.js b/www/src/components/shared/horizontal-scroller.js new file mode 100644 index 0000000000000..39dc9feadaa7e --- /dev/null +++ b/www/src/components/shared/horizontal-scroller.js @@ -0,0 +1,29 @@ +import styled from "react-emotion" + +import { rhythm } from "../../utils/typography" +import presets from "../../utils/presets" + +const BOX_SHADOW_BLUR = `8px` + +export const HorizontalScroller = styled(`div`)` + overflow-x: scroll; + -webkit-overflow-scrolling: touch; +` + +export const HorizontalScrollerContent = styled(`div`)` + display: inline-flex; + padding: ${BOX_SHADOW_BLUR} ${rhythm(presets.gutters.default / 2)} + calc(${BOX_SHADOW_BLUR} * 1.5); +` + +export const HorizontalScrollerItem = styled(`article`)` + background: #fff; + border-radius: ${presets.radiusLg}px; + box-shadow: 0 0 ${BOX_SHADOW_BLUR} rgba(0, 0, 0, 0.2); + margin-right: ${rhythm(presets.gutters.default / 2)}; + width: 77vw; + + :last-child { + margin-right: 0; + } +` diff --git a/www/src/utils/colors.js b/www/src/utils/colors.js index e814a01573a84..e5c1063b96c1b 100644 --- a/www/src/utils/colors.js +++ b/www/src/utils/colors.js @@ -5,6 +5,7 @@ const colors = { // @see https://www.figma.com/file/J6IYJEtdRmwJQOrcZ2DfvxDD/Gatsby gatsby: `#663399`, // was #744c9e gatsbyDark: `#442266`, + gatsbyDarker: `#221133`, lemon: `#ffdf37`, lilac: `#8c65b3`, lavender: `#b190d5`, From bf10d9d04b5d2c4538be40b83e8293018b1c8827 Mon Sep 17 00:00:00 2001 From: greglobinski Date: Fri, 16 Nov 2018 13:50:24 +0100 Subject: [PATCH 04/23] fix(www): add cover to one post for development --- docs/blog/2018-11-05-deploying-gatsby-to-azure/index.md | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/blog/2018-11-05-deploying-gatsby-to-azure/index.md b/docs/blog/2018-11-05-deploying-gatsby-to-azure/index.md index 0bd3478f8db25..477285d938087 100644 --- a/docs/blog/2018-11-05-deploying-gatsby-to-azure/index.md +++ b/docs/blog/2018-11-05-deploying-gatsby-to-azure/index.md @@ -5,6 +5,7 @@ date: 2018-11-05 image: images/rocket.jpg showImageInArticle: false tags: ["deployment", "azure"] +cover: successfullysignedin.png --- In this post we will walk through the process of deploying a Gatsby blog to Microsoft Azure Storage using VS Code. From 26dc29533c774851dead428ca4b95a85070d56a3 Mon Sep 17 00:00:00 2001 From: greglobinski Date: Fri, 16 Nov 2018 14:03:20 +0100 Subject: [PATCH 05/23] fix(www): update margins for section action btns --- .../components/homepage/homepage-blog-posts.js | 17 +++++------------ www/src/components/homepage/homepage-section.js | 8 ++++++-- 2 files changed, 11 insertions(+), 14 deletions(-) diff --git a/www/src/components/homepage/homepage-blog-posts.js b/www/src/components/homepage/homepage-blog-posts.js index 53cd1f17a518e..ff78023b9e952 100644 --- a/www/src/components/homepage/homepage-blog-posts.js +++ b/www/src/components/homepage/homepage-blog-posts.js @@ -17,18 +17,7 @@ import { rhythm, options } from "../../utils/typography" import { SCROLLER_CLASSNAME } from "../../utils/scrollers-observer" const HomepageBlogPostsRootMobile = styled(HorizontalScroller)` - margin: 0 -${rhythm(presets.gutters.default / 2)}; - - ${presets.Desktop} { - margin: 0; - margin-left: calc(3rem - (${rhythm(options.blockMarginBottom)})); - margin-right: 1rem; - overflow-x: auto; - } - - ${presets.Hd} { - margin-right: 3rem; - } + margin: -6px -${rhythm(presets.gutters.default / 2)}; ` const HomepageBlogPostsRootDesktop = styled(`div`)` @@ -36,6 +25,10 @@ const HomepageBlogPostsRootDesktop = styled(`div`)` margin: 0; margin-left: calc(3rem - (${rhythm(options.blockMarginBottom)})); margin-right: 1rem; + + ${presets.Hd} { + margin-right: 3rem; + } ` const PostsColumn = styled(`div`)` diff --git a/www/src/components/homepage/homepage-section.js b/www/src/components/homepage/homepage-section.js index 847dd2f28d86e..714a00c6a2b3e 100644 --- a/www/src/components/homepage/homepage-section.js +++ b/www/src/components/homepage/homepage-section.js @@ -84,10 +84,14 @@ const Introduction = styled(`p`)` const Actions = styled(`div`)` display: flex; flex-wrap: wrap; - margin-top: -${rhythm(1 / 4)}; + margin: 1rem 0 1.5rem; > a { - margin: ${rhythm(1.2)} ${rhythm(0.2)} ${rhythm(1.5)} 0; + margin-right: ${rhythm(0.2)}; + } + + ${presets.Desktop} { + margin: 1rem 0 2.5rem; } ` From a09dec8a94506b24594834f802a55086c0842c22 Mon Sep 17 00:00:00 2001 From: greglobinski Date: Fri, 16 Nov 2018 14:31:13 +0100 Subject: [PATCH 06/23] fix(www): update margins of Blog section --- .../homepage/homepage-blog-posts.js | 29 ++++++++++++------- www/src/pages/index.js | 1 + 2 files changed, 20 insertions(+), 10 deletions(-) diff --git a/www/src/components/homepage/homepage-blog-posts.js b/www/src/components/homepage/homepage-blog-posts.js index ff78023b9e952..866f3f98e2dbf 100644 --- a/www/src/components/homepage/homepage-blog-posts.js +++ b/www/src/components/homepage/homepage-blog-posts.js @@ -22,9 +22,7 @@ const HomepageBlogPostsRootMobile = styled(HorizontalScroller)` const HomepageBlogPostsRootDesktop = styled(`div`)` display: flex; - margin: 0; - margin-left: calc(3rem - (${rhythm(options.blockMarginBottom)})); - margin-right: 1rem; + margin: 0 1.5rem 0 2.5rem; ${presets.Hd} { margin-right: 3rem; @@ -35,7 +33,7 @@ const PostsColumn = styled(`div`)` align-items: flex-end; display: flex; flex-direction: column; - flex-basis: 43%; + flex-basis: 45%; margin-right: 30px; position: relative; @@ -46,7 +44,7 @@ const PostsColumn = styled(`div`)` } ` -const ViewAllStyle = styled(HorizontalScrollerItem)` +const ViewAllStyle = styled(HorizontalScrollerItem.withComponent(`div`))` display: flex; font-family: ${options.headerFontFamily.join(`,`)}; overflow: hidden; @@ -54,6 +52,7 @@ const ViewAllStyle = styled(HorizontalScrollerItem)` a { box-shadow: none; + border: 0; display: flex; flex-direction: column; font-weight: bold; @@ -80,14 +79,24 @@ const ViewAllStyle = styled(HorizontalScrollerItem)` color: white; flex-shrink: 0; height: 160px; + margin-left: ${rhythm(presets.gutters.default)}; - width: 160px; + width: 120px; - &:hover { - color: ${colors.gatsby}; - background: ${colors.ui.whisper}; + a { + padding: ${rhythm(1)}; + justify-content: flex-start; + + &:hover { + color: ${colors.gatsby}; + background: ${colors.ui.whisper}; + } } } + + ${presets.Hd} { + width: 160px; + } ` const LastPost = styled(`div`)` @@ -97,7 +106,7 @@ const LastPost = styled(`div`)` const ViewAll = () => ( - View all + View all posts diff --git a/www/src/pages/index.js b/www/src/pages/index.js index 319cd84f7a3ea..394332232f29b 100644 --- a/www/src/pages/index.js +++ b/www/src/pages/index.js @@ -110,6 +110,7 @@ class IndexRoute extends React.Component {
Date: Fri, 16 Nov 2018 17:19:02 +0100 Subject: [PATCH 07/23] refactor(www): email-cature-form --- www/src/components/email-capture-form.js | 208 +++++++++++------- .../homepage/homepage-newsletter.js | 22 ++ www/src/pages/index.js | 3 + 3 files changed, 152 insertions(+), 81 deletions(-) create mode 100644 www/src/components/homepage/homepage-newsletter.js diff --git a/www/src/components/email-capture-form.js b/www/src/components/email-capture-form.js index 8111661cfcbe6..8faed25604a63 100644 --- a/www/src/components/email-capture-form.js +++ b/www/src/components/email-capture-form.js @@ -1,55 +1,66 @@ import React from "react" +import styled from "react-emotion" + +import SendIcon from "react-icons/lib/md/send" + import { rhythm, options } from "../utils/typography" import presets, { colors } from "../utils/presets" import hex2rgba from "hex2rgba" import { formInput } from "../utils/form-styles" import { buttonStyles } from "../utils/styles" -const Label = props => ( - -) - -const SingleLineInput = React.forwardRef((props, ref) => ( - -)) - -const ErrorMessage = ({ children }) => ( -
- {children} -
-) +const Label = styled(`label`)` + :after { + content: ${props => (props.isRequired ? `'*'` : "")}; + color: ${colors.warning}; + } +` + +const SingleLineInput = styled(`input`)` + ${formInput}; + width: 100%; + + ${props => { + if (props.newStyle) { + return ` + font-family: ${options.systemFontFamily.join(`,`)}; + font-size: 1rem; + padding: .6rem; + ` + } + }}; + + :focus { + border-color: ${colors.gatsby}; + outline: 0; + box-shadow: 0 0 0 0.2rem ${hex2rgba(colors.lilac, 0.25)}; + } +` + +const ErrorMessage = styled(`div`)` + margin-bottom: calc(1.05rem / 2); + color: ${colors.warning}; + fontsize: ${rhythm(1 / 2)}; +` + +const Submit = styled(`button`)` + ${buttonStyles.default}; + + ${props => { + if (props.newStyle) { + return ` + font-size: 1.25rem; + width: 100%; + + span { + display: flex; + width: 100%; + justify-content: space-between; + } + ` + } + }}; +` class Form extends React.Component { constructor(props) { @@ -58,7 +69,7 @@ class Form extends React.Component { this.onSubmit = this.onSubmit.bind(this) // let's use uncontrolled components https://reactjs.org/docs/uncontrolled-components.html - this.email = React.createRef() + this.email = null } state = { @@ -78,7 +89,7 @@ class Form extends React.Component { fields: [ { name: `email`, - value: this.email.current.value, + value: this.email.value, }, ], context: { @@ -133,32 +144,42 @@ class Form extends React.Component { } render() { + const { newStyle = false } = this.props + return (
-
- +
+ {!this.props.newStyle && ( + + )} { + this.email = input + }} + placeholder={newStyle ? "your.email@example.com" : ""} + newStyle={newStyle} /> {this.state.fieldErrors.email && ( {this.state.fieldErrors.email} )}
+ {this.state.errorMessage && ( {this.state.errorMessage} )} - + + + Subscribe + + + ) } @@ -179,32 +200,17 @@ class EmailCaptureForm extends React.Component { } render() { - const { signupMessage, overrideCSS } = this.props + const { signupMessage, overrideCSS, newStyle } = this.props return ( -
-
-

{signupMessage}

-
+ + {newStyle ? ( +
{this.state.successMessage ? (
) : (
)}
-
-
+ ) : ( +
+
+

{signupMessage}

+
+ {this.state.successMessage ? ( +
+ ) : ( + + )} +
+
+
+ )} + ) } } @@ -225,6 +270,7 @@ EmailCaptureForm.defaultProps = { signupMessage: `Enjoyed this post? Receive the next one in your inbox!`, confirmMessage: `Thank you! Youʼll receive your first email shortly.`, overrideCSS: {}, + newStyle: false, } export default EmailCaptureForm diff --git a/www/src/components/homepage/homepage-newsletter.js b/www/src/components/homepage/homepage-newsletter.js new file mode 100644 index 0000000000000..fdcc3a70b477f --- /dev/null +++ b/www/src/components/homepage/homepage-newsletter.js @@ -0,0 +1,22 @@ +import React from "react" +import styled from "react-emotion" + +import EmailCaptureForm from "../../components/email-capture-form" + +import presets, { colors } from "../../utils/presets" +import { rhythm } from "../../utils/typography" + +const HomepageNewsletterRoot = styled(`section`)` + background: #fff; + margin: 0 -${rhythm(presets.gutters.default / 2)}; + padding: ${rhythm(presets.gutters.default / 2)}; + width: calc(100% + ${rhythm(presets.gutters.default)}); +` + +const HomepageNewsletter = ({ posts }) => ( + + + +) + +export default HomepageNewsletter diff --git a/www/src/pages/index.js b/www/src/pages/index.js index 394332232f29b..5520242f02e65 100644 --- a/www/src/pages/index.js +++ b/www/src/pages/index.js @@ -19,6 +19,7 @@ import Button from "../components/button" import TechWithIcon from "../components/tech-with-icon" import HomepageEcosystem from "../components/homepage/homepage-ecosystem" import HomepageBlog from "../components/homepage/homepage-blog" +import HomepageNewsletter from "../components/homepage/homepage-newsletter" import { setupScrollersObserver, unobserveScrollers, @@ -226,6 +227,8 @@ class IndexRoute extends React.Component { + +
From f46d9d686c70987151490c49cfb8942978e989da Mon Sep 17 00:00:00 2001 From: greglobinski Date: Fri, 16 Nov 2018 17:22:00 +0100 Subject: [PATCH 08/23] refactor(www): email-cature-form --- www/src/components/email-capture-form.js | 22 +++++++++---------- .../homepage/homepage-newsletter.js | 7 ++++-- 2 files changed, 15 insertions(+), 14 deletions(-) diff --git a/www/src/components/email-capture-form.js b/www/src/components/email-capture-form.js index 8faed25604a63..0693cb9546b55 100644 --- a/www/src/components/email-capture-form.js +++ b/www/src/components/email-capture-form.js @@ -11,7 +11,7 @@ import { buttonStyles } from "../utils/styles" const Label = styled(`label`)` :after { - content: ${props => (props.isRequired ? `'*'` : "")}; + content: ${props => (props.isRequired ? `'*'` : ``)}; color: ${colors.warning}; } ` @@ -20,15 +20,14 @@ const SingleLineInput = styled(`input`)` ${formInput}; width: 100%; - ${props => { - if (props.newStyle) { - return ` + ${props => + props.newStyle + ? ` font-family: ${options.systemFontFamily.join(`,`)}; font-size: 1rem; padding: .6rem; ` - } - }}; + : ``}; :focus { border-color: ${colors.gatsby}; @@ -46,9 +45,9 @@ const ErrorMessage = styled(`div`)` const Submit = styled(`button`)` ${buttonStyles.default}; - ${props => { - if (props.newStyle) { - return ` + ${props => + props.newStyle + ? ` font-size: 1.25rem; width: 100%; @@ -58,8 +57,7 @@ const Submit = styled(`button`)` justify-content: space-between; } ` - } - }}; + : ``}; ` class Form extends React.Component { @@ -163,7 +161,7 @@ class Form extends React.Component { innerRef={input => { this.email = input }} - placeholder={newStyle ? "your.email@example.com" : ""} + placeholder={newStyle ? `your.email@example.com` : ``} newStyle={newStyle} /> {this.state.fieldErrors.email && ( diff --git a/www/src/components/homepage/homepage-newsletter.js b/www/src/components/homepage/homepage-newsletter.js index fdcc3a70b477f..a8fffe926783f 100644 --- a/www/src/components/homepage/homepage-newsletter.js +++ b/www/src/components/homepage/homepage-newsletter.js @@ -3,7 +3,7 @@ import styled from "react-emotion" import EmailCaptureForm from "../../components/email-capture-form" -import presets, { colors } from "../../utils/presets" +import presets from "../../utils/presets" import { rhythm } from "../../utils/typography" const HomepageNewsletterRoot = styled(`section`)` @@ -15,7 +15,10 @@ const HomepageNewsletterRoot = styled(`section`)` const HomepageNewsletter = ({ posts }) => ( - + ) From 6cb7fa74eb720749c0761c05f55abce48bfe04dd Mon Sep 17 00:00:00 2001 From: greglobinski Date: Sun, 18 Nov 2018 22:02:16 +0100 Subject: [PATCH 09/23] feat(www): add ornaments to assets --- www/src/assets/newsletter-form-ornament.svg | 14 ++++++++++++++ www/src/assets/ornaments.js | 3 +++ 2 files changed, 17 insertions(+) create mode 100644 www/src/assets/newsletter-form-ornament.svg create mode 100644 www/src/assets/ornaments.js diff --git a/www/src/assets/newsletter-form-ornament.svg b/www/src/assets/newsletter-form-ornament.svg new file mode 100644 index 0000000000000..321fd2a746e68 --- /dev/null +++ b/www/src/assets/newsletter-form-ornament.svg @@ -0,0 +1,14 @@ + + + + + diff --git a/www/src/assets/ornaments.js b/www/src/assets/ornaments.js new file mode 100644 index 0000000000000..134a580bd5987 --- /dev/null +++ b/www/src/assets/ornaments.js @@ -0,0 +1,3 @@ +import NewsletterFormOrnament from "!raw-loader!./newsletter-form-ornament.svg" + +export { NewsletterFormOrnament } From 051d78cf056ce4eeaf8bc5a858abf55eba358219 Mon Sep 17 00:00:00 2001 From: greglobinski Date: Sun, 18 Nov 2018 22:02:41 +0100 Subject: [PATCH 10/23] feat(www): update colors palette --- www/src/utils/colors.js | 1 + 1 file changed, 1 insertion(+) diff --git a/www/src/utils/colors.js b/www/src/utils/colors.js index e5c1063b96c1b..6e78f906e8c3f 100644 --- a/www/src/utils/colors.js +++ b/www/src/utils/colors.js @@ -7,6 +7,7 @@ const colors = { gatsbyDark: `#442266`, gatsbyDarker: `#221133`, lemon: `#ffdf37`, + mint: `#73fff7`, lilac: `#8c65b3`, lavender: `#b190d5`, wisteria: `#ccb2e5`, From 5eb1af176334fdfa3d1e530743f07e1e199e6367 Mon Sep 17 00:00:00 2001 From: greglobinski Date: Sun, 18 Nov 2018 22:03:39 +0100 Subject: [PATCH 11/23] feat(www): add Homepage variant style to newsletter form --- www/src/components/email-capture-form.js | 135 ++++++++++++----------- 1 file changed, 72 insertions(+), 63 deletions(-) diff --git a/www/src/components/email-capture-form.js b/www/src/components/email-capture-form.js index 0693cb9546b55..1fedd3f718749 100644 --- a/www/src/components/email-capture-form.js +++ b/www/src/components/email-capture-form.js @@ -1,5 +1,5 @@ import React from "react" -import styled from "react-emotion" +import styled, { css } from "react-emotion" import SendIcon from "react-icons/lib/md/send" @@ -9,6 +9,10 @@ import hex2rgba from "hex2rgba" import { formInput } from "../utils/form-styles" import { buttonStyles } from "../utils/styles" +const StyledForm = styled(`form`)` + margin: 0; +` + const Label = styled(`label`)` :after { content: ${props => (props.isRequired ? `'*'` : ``)}; @@ -20,15 +24,6 @@ const SingleLineInput = styled(`input`)` ${formInput}; width: 100%; - ${props => - props.newStyle - ? ` - font-family: ${options.systemFontFamily.join(`,`)}; - font-size: 1rem; - padding: .6rem; - ` - : ``}; - :focus { border-color: ${colors.gatsby}; outline: 0; @@ -36,28 +31,35 @@ const SingleLineInput = styled(`input`)` } ` +const SingleLineInputOnHomepage = styled(SingleLineInput)` + font-family: ${options.systemFontFamily.join(`,`)}; + font-size: 1rem; + padding: 0.6rem; +` + const ErrorMessage = styled(`div`)` - margin-bottom: calc(1.05rem / 2); color: ${colors.warning}; - fontsize: ${rhythm(1 / 2)}; + font-family: ${options.systemFontFamily.join(`,`)}; + font-size: 0.875rem; + margin: calc(1.05rem / 2) 0; ` -const Submit = styled(`button`)` +const Submit = styled(`input`)` ${buttonStyles.default}; + margin-top: 20px; +` - ${props => - props.newStyle - ? ` - font-size: 1.25rem; - width: 100%; +const SubmitOnHomepage = styled(`button`)` + ${buttonStyles.default}; + font-size: 1.125rem; + width: 100%; + margin-top: 10px; - span { - display: flex; - width: 100%; - justify-content: space-between; - } - ` - : ``}; + span { + display: flex; + width: 100%; + justify-content: space-between; + } ` class Form extends React.Component { @@ -142,43 +144,49 @@ class Form extends React.Component { } render() { - const { newStyle = false } = this.props + const { isHomepage } = this.props - return ( - -
- {!this.props.newStyle && ( - - )} - { - this.email = input - }} - placeholder={newStyle ? `your.email@example.com` : ``} - newStyle={newStyle} - /> - {this.state.fieldErrors.email && ( - {this.state.fieldErrors.email} - )} -
+ const SingleLineInputComponent = isHomepage + ? SingleLineInputOnHomepage + : SingleLineInput + return ( + + {!isHomepage && ( + + )} + { + this.email = input + }} + aria-label={isHomepage ? `Email` : ``} + placeholder={isHomepage ? `your.email@example.com` : ``} + /> + {this.state.fieldErrors.email && ( + {this.state.fieldErrors.email} + )} {this.state.errorMessage && ( {this.state.errorMessage} )} - - - Subscribe - - - - + + {isHomepage ? ( + + + Subscribe + + + + ) : ( + + )} + ) } } @@ -198,12 +206,12 @@ class EmailCaptureForm extends React.Component { } render() { - const { signupMessage, overrideCSS, newStyle } = this.props + const { signupMessage, overrideCSS, isHomepage, className } = this.props return ( - {newStyle ? ( -
+ {isHomepage ? ( + {this.state.successMessage ? (
)} -
+
) : (
Date: Sun, 18 Nov 2018 22:04:30 +0100 Subject: [PATCH 12/23] feat(www): add Homepage variant style to newsletter form --- www/src/components/email-capture-form.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/www/src/components/email-capture-form.js b/www/src/components/email-capture-form.js index 1fedd3f718749..ab38a28ecb78d 100644 --- a/www/src/components/email-capture-form.js +++ b/www/src/components/email-capture-form.js @@ -1,5 +1,5 @@ import React from "react" -import styled, { css } from "react-emotion" +import styled from "react-emotion" import SendIcon from "react-icons/lib/md/send" @@ -206,7 +206,7 @@ class EmailCaptureForm extends React.Component { } render() { - const { signupMessage, overrideCSS, isHomepage, className } = this.props + const { signupMessage, overrideCSS, isHomepage } = this.props return ( @@ -277,7 +277,7 @@ EmailCaptureForm.defaultProps = { confirmMessage: `Thank you! Youʼll receive your first email shortly.`, overrideCSS: {}, isHomepage: false, - className: "", + className: ``, } export default EmailCaptureForm From 5ee473bb8844fb218c5233376d3daf222edb954e Mon Sep 17 00:00:00 2001 From: greglobinski Date: Sun, 18 Nov 2018 22:05:18 +0100 Subject: [PATCH 13/23] feat(www): mobile style for Homepage Newsletter section --- .../homepage/homepage-newsletter.js | 82 ++++++++++++++++--- .../components/homepage/homepage-section.js | 61 +++++++------- 2 files changed, 104 insertions(+), 39 deletions(-) diff --git a/www/src/components/homepage/homepage-newsletter.js b/www/src/components/homepage/homepage-newsletter.js index a8fffe926783f..a75f72324965a 100644 --- a/www/src/components/homepage/homepage-newsletter.js +++ b/www/src/components/homepage/homepage-newsletter.js @@ -1,22 +1,84 @@ import React from "react" import styled from "react-emotion" +import HomepageSection, { Name, Title } from "./homepage-section" import EmailCaptureForm from "../../components/email-capture-form" -import presets from "../../utils/presets" -import { rhythm } from "../../utils/typography" +import { NewsletterFormOrnament } from "../../assets/ornaments" -const HomepageNewsletterRoot = styled(`section`)` - background: #fff; - margin: 0 -${rhythm(presets.gutters.default / 2)}; - padding: ${rhythm(presets.gutters.default / 2)}; - width: calc(100% + ${rhythm(presets.gutters.default)}); +import { rhythm, options } from "../../utils/typography" +import presets, { colors } from "../../utils/presets" + +const HomepageNewsletterRoot = styled(HomepageSection)` + padding: calc(${rhythm(presets.gutters.default)} * 2); + padding-bottom: calc(${rhythm(presets.gutters.default)} * 3); + position: relative; + z-index: 0; + + ${Name} { + font-fa1mily: ${options.headerFontFamily.join(`,`)}; + font-size: 0.875rem; + margin-left: 0; + margin-bottom: 0.2rem; + text-transform: uppercase; + } + + ${Title} { + font-size: 1.25rem; + line-height: 1.3; + margin-bottom: 1.25rem; + } + + :before { + border: 1px solid ${colors.ui.light}; + border-radius: ${presets.radiusLg}px; + bottom: ${rhythm(presets.gutters.default * 1.5)}; + content: ""; + left: ${rhythm(presets.gutters.default / 2)}; + position: absolute; + right: ${rhythm(presets.gutters.default / 2)}; + top: ${rhythm(presets.gutters.default / 2)}; + z-index: -1; + } + + :after { + border-radius: 0 0 ${presets.radiusLg}px ${presets.radiusLg}px; + background: ${colors.ui.whisper} + repeating-linear-gradient( + 135deg, + ${colors.lemon}, + ${colors.lemon} 20px, + transparent 20px, + transparent 40px, + ${colors.mint} 40px, + ${colors.mint} 60px, + transparent 60px, + transparent 80px + ); + bottom: ${rhythm(presets.gutters.default * 1.5)}; + content: ""; + height: 8px; + left: ${rhythm(presets.gutters.default / 2)}; + right: ${rhythm(presets.gutters.default / 2)}; + position: absolute; + z-index: -2; + } +` + +const Ornament = styled(`span`)` + left: calc(${rhythm(presets.gutters.default / 2)} - 4px); + position: absolute; + top: calc(${rhythm(presets.gutters.default / 2)} - 8px); ` -const HomepageNewsletter = ({ posts }) => ( - +const HomepageNewsletter = () => ( + + diff --git a/www/src/components/homepage/homepage-section.js b/www/src/components/homepage/homepage-section.js index 714a00c6a2b3e..ad791c007344f 100644 --- a/www/src/components/homepage/homepage-section.js +++ b/www/src/components/homepage/homepage-section.js @@ -14,7 +14,7 @@ const HomepageSectionRoot = styled(`section`)` background: ${props => (props.inverse ? colors.gatsby : `#fff`)}; color: ${props => (props.inverse ? colors.ui.light : colors.gatsbyDark)}; margin: 0 -${rhythm(presets.gutters.default / 2)}; - padding: ${rhythm(2)} ${rhythm(presets.gutters.default / 2)}; + padding: ${rhythm(1)} ${rhythm(presets.gutters.default / 2)}; width: calc(100% + ${rhythm(presets.gutters.default)}); ${presets.Hd} { @@ -37,7 +37,7 @@ const Header = styled(`header`)` } ` -const Name = styled(`h3`)` +export const Name = styled(`h3`)` align-items: center; color: ${props => (props.inverse ? colors.ui.light : colors.lilac)}; display: flex; @@ -67,7 +67,7 @@ const Icon = styled(`span`)` } ` -const Title = styled(`h1`)` +export const Title = styled(`h1`)` color: ${props => (props.inverse ? colors.lemon : colors.gatsby)}; font-size: 1.75rem; margin: 0; @@ -103,10 +103,11 @@ const HomepageSection = ({ introduction, inverseStyle, links, + className, }) => ( - -
- {sectionName && ( + + {sectionName && ( +
{sectionIcon && ( - )} - {title && {title}} - {introduction && ( - {introduction} - )} - - {links.map((item, idx) => { - const { to, label, icon: Icon, secondary } = item - - return ( - - ) - })} - -
+ {title && {title}} + {introduction && ( + {introduction} + )} + {links && ( + + {links.map((item, idx) => { + const { to, label, icon: Icon, secondary } = item + + return ( + + ) + })} + + )} +
+ )} {children}
) From cb3ed45c4c292440f7fe9521a6f448e1d5dd8fcf Mon Sep 17 00:00:00 2001 From: greglobinski Date: Mon, 19 Nov 2018 01:29:12 +0100 Subject: [PATCH 14/23] refactor(www): refactor homepage-section --- www/src/components/email-capture-form.js | 21 +++- .../homepage/homepage-blog-posts.js | 10 +- .../components/homepage/homepage-ecosystem.js | 10 -- .../homepage/homepage-newsletter.js | 114 ++++++++++-------- .../components/homepage/homepage-section.js | 8 +- 5 files changed, 88 insertions(+), 75 deletions(-) diff --git a/www/src/components/email-capture-form.js b/www/src/components/email-capture-form.js index ab38a28ecb78d..649a1a63fe7d1 100644 --- a/www/src/components/email-capture-form.js +++ b/www/src/components/email-capture-form.js @@ -11,6 +11,10 @@ import { buttonStyles } from "../utils/styles" const StyledForm = styled(`form`)` margin: 0; + + ${presets.Desktop} { + display: flex; + } ` const Label = styled(`label`)` @@ -56,10 +60,17 @@ const SubmitOnHomepage = styled(`button`)` margin-top: 10px; span { + align-items: center; display: flex; width: 100%; justify-content: space-between; } + + ${presets.Desktop} { + width: auto; + margin-top: 0; + margin-left: 0.5rem; + } ` class Form extends React.Component { @@ -206,17 +217,15 @@ class EmailCaptureForm extends React.Component { } render() { - const { signupMessage, overrideCSS, isHomepage } = this.props + const { signupMessage, overrideCSS, isHomepage, className } = this.props return ( {isHomepage ? ( - +
{this.state.successMessage ? (
) : (
)} - +
) : (
( diff --git a/www/src/components/homepage/homepage-ecosystem.js b/www/src/components/homepage/homepage-ecosystem.js index 5e5656e434a15..de6a912b3f0f3 100644 --- a/www/src/components/homepage/homepage-ecosystem.js +++ b/www/src/components/homepage/homepage-ecosystem.js @@ -30,10 +30,6 @@ const Sections = styled(`div`)` flex-direction: row; margin: 0 -8px; } - - ${presets.Desktop} { - margin: 0 1.5rem 0 2.5rem; - } ` const Section = styled(EcosystemSection)` @@ -71,14 +67,8 @@ const FeaturedItems = styled(EcosystemFeaturedItemsRootBase)` ${presets.Desktop} { margin: 0; - margin-left: calc(3rem - (${rhythm(options.blockMarginBottom)})); - margin-right: 1rem; overflow-x: auto; } - - ${presets.Hd} { - margin-right: 3rem; - } ` const FeaturedItemsList = styled(EcosystemFeaturedItemsListBase)` diff --git a/www/src/components/homepage/homepage-newsletter.js b/www/src/components/homepage/homepage-newsletter.js index a75f72324965a..06c8ae27f756c 100644 --- a/www/src/components/homepage/homepage-newsletter.js +++ b/www/src/components/homepage/homepage-newsletter.js @@ -1,7 +1,7 @@ import React from "react" import styled from "react-emotion" -import HomepageSection, { Name, Title } from "./homepage-section" +import HomepageSection from "./homepage-section" import EmailCaptureForm from "../../components/email-capture-form" import { NewsletterFormOrnament } from "../../assets/ornaments" @@ -9,37 +9,19 @@ import { NewsletterFormOrnament } from "../../assets/ornaments" import { rhythm, options } from "../../utils/typography" import presets, { colors } from "../../utils/presets" -const HomepageNewsletterRoot = styled(HomepageSection)` - padding: calc(${rhythm(presets.gutters.default)} * 2); - padding-bottom: calc(${rhythm(presets.gutters.default)} * 3); - position: relative; - z-index: 0; - - ${Name} { - font-fa1mily: ${options.headerFontFamily.join(`,`)}; - font-size: 0.875rem; - margin-left: 0; - margin-bottom: 0.2rem; - text-transform: uppercase; - } - - ${Title} { - font-size: 1.25rem; - line-height: 1.3; - margin-bottom: 1.25rem; - } +const stripedBorderHeight = `8px` - :before { - border: 1px solid ${colors.ui.light}; - border-radius: ${presets.radiusLg}px; - bottom: ${rhythm(presets.gutters.default * 1.5)}; - content: ""; - left: ${rhythm(presets.gutters.default / 2)}; - position: absolute; - right: ${rhythm(presets.gutters.default / 2)}; - top: ${rhythm(presets.gutters.default / 2)}; - z-index: -1; - } +const Container = styled(`div`)` + border: 1px solid ${colors.ui.light}; + border-radius: ${presets.radiusLg}px; + display: flex; + flex-direction: column; + margin-bottom: ${rhythm(presets.gutters.default)}; + padding: ${rhythm(presets.gutters.default * 1.2)}; + padding-bottom: calc( + ${rhythm(presets.gutters.default * 1.2)} + ${stripedBorderHeight} + ); + position: relative; :after { border-radius: 0 0 ${presets.radiusLg}px ${presets.radiusLg}px; @@ -55,33 +37,69 @@ const HomepageNewsletterRoot = styled(HomepageSection)` transparent 60px, transparent 80px ); - bottom: ${rhythm(presets.gutters.default * 1.5)}; + bottom: 0; content: ""; - height: 8px; - left: ${rhythm(presets.gutters.default / 2)}; - right: ${rhythm(presets.gutters.default / 2)}; + height: ${stripedBorderHeight}; + left: 0; + right: 0; position: absolute; - z-index: -2; + } + + ${presets.Desktop} { + flex-direction: row; + justify-content: space-between; + + > * { + flex-basis: 50%; + } } ` const Ornament = styled(`span`)` - left: calc(${rhythm(presets.gutters.default / 2)} - 4px); + left: -4px; position: absolute; - top: calc(${rhythm(presets.gutters.default / 2)} - 8px); + top: -8px; +` + +const Name = styled(`h3`)` + color: ${colors.lilac}; + font-fa1mily: ${options.headerFontFamily.join(`,`)}; + font-size: 0.875rem; + font-weight: normal; + margin: 0; + text-transform: uppercase; +` + +const Title = styled(`h1`)` + color: ${colors.gatsby}; + font-size: 1.25rem; + line-height: 1.3; + margin: 0; + margin-top: 0.2rem; +` + +const Form = styled(EmailCaptureForm)` + margin-top: 1.25rem; + + ${presets.Desktop} { + margin-top: 0; + } ` const HomepageNewsletter = () => ( - - - - + + + +
+ The Gatsby Newsletter + Keep up with the latest things Gatsby! +
+ +
+
) export default HomepageNewsletter diff --git a/www/src/components/homepage/homepage-section.js b/www/src/components/homepage/homepage-section.js index ad791c007344f..0f271fe4ae066 100644 --- a/www/src/components/homepage/homepage-section.js +++ b/www/src/components/homepage/homepage-section.js @@ -19,21 +19,21 @@ const HomepageSectionRoot = styled(`section`)` ${presets.Hd} { margin: 0 -${vP}; + padding: ${rhythm(1)} ${rhythm(presets.gutters.default)}; width: calc(100% + (${vP} * 2)); } ${presets.VHd} { - padding: ${rhythm(2)} 5%; + padding: ${rhythm(1.5)} 5%; } ` -const Header = styled(`header`)` +export const Header = styled(`header`)` ${presets.Tablet} { - margin-left: 3rem; max-width: 30rem; } ${presets.Desktop} { - margin-left: 6rem; + margin-left: 3rem; } ` From 08e3295c12a36e909992f20c25ef91f617c1f108 Mon Sep 17 00:00:00 2001 From: greglobinski Date: Mon, 19 Nov 2018 08:12:07 +0100 Subject: [PATCH 15/23] fix(www): fix homepage section padding --- www/src/components/homepage/homepage-section.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/www/src/components/homepage/homepage-section.js b/www/src/components/homepage/homepage-section.js index 0f271fe4ae066..cf368f7f00f22 100644 --- a/www/src/components/homepage/homepage-section.js +++ b/www/src/components/homepage/homepage-section.js @@ -19,12 +19,12 @@ const HomepageSectionRoot = styled(`section`)` ${presets.Hd} { margin: 0 -${vP}; - padding: ${rhythm(1)} ${rhythm(presets.gutters.default)}; + padding: ${rhythm(1)} 5%; width: calc(100% + (${vP} * 2)); } ${presets.VHd} { - padding: ${rhythm(1.5)} 5%; + padding: ${rhythm(1.5)} 8%; } ` export const Header = styled(`header`)` From 346c4b371e15f0dc2aaa6207c3bf724e92e08189 Mon Sep 17 00:00:00 2001 From: greglobinski Date: Mon, 19 Nov 2018 09:31:27 +0100 Subject: [PATCH 16/23] refactor(www): refactor ecosystem scroollers --- .../ecosystem/ecosystem-featured-item.js | 12 +++---- .../ecosystem/ecosystem-featured-items.js | 16 +++++---- .../components/homepage/homepage-blog-post.js | 4 ++- .../homepage/homepage-blog-posts.js | 8 +++-- .../components/homepage/homepage-ecosystem.js | 35 +++++++++---------- .../components/homepage/homepage-section.js | 3 +- .../components/shared/horizontal-scroller.js | 7 ++-- 7 files changed, 47 insertions(+), 38 deletions(-) diff --git a/www/src/components/ecosystem/ecosystem-featured-item.js b/www/src/components/ecosystem/ecosystem-featured-item.js index 535837e77b2fb..b08b8ebd6c8f2 100644 --- a/www/src/components/ecosystem/ecosystem-featured-item.js +++ b/www/src/components/ecosystem/ecosystem-featured-item.js @@ -4,6 +4,8 @@ import styled from "react-emotion" import { Link } from "gatsby" import Img from "gatsby-image" +import { HorizontalScrollerItem } from "../shared/horizontal-scroller" + import StarIcon from "react-icons/lib/md/star" import ArrowDownwardIcon from "react-icons/lib/md/arrow-downward" @@ -12,14 +14,8 @@ import presets, { colors } from "../../utils/presets" const MAX_DESCRIPTION_LENGTH = 100 -const EcosystemFeaturedItemRoot = styled(`li`)` - width: 85vw; - margin: 0 2px 0 0; - padding: 5px; - - :last-child { - margin-right: 0; - } +const EcosystemFeaturedItemRoot = styled(HorizontalScrollerItem)` + margin-right: ${rhythm(options.blockMarginBottom)}; ${presets.Tablet} { border-bottom: 1px solid ${colors.gray.superLight}; diff --git a/www/src/components/ecosystem/ecosystem-featured-items.js b/www/src/components/ecosystem/ecosystem-featured-items.js index aa8c822090737..46502614d339d 100644 --- a/www/src/components/ecosystem/ecosystem-featured-items.js +++ b/www/src/components/ecosystem/ecosystem-featured-items.js @@ -2,18 +2,19 @@ import React from "react" import PropTypes from "prop-types" import styled from "react-emotion" +import { + HorizontalScroller, + HorizontalScrollerContent, +} from "../shared/horizontal-scroller" + import presets, { colors } from "../../utils/presets" import { rhythm, options } from "../../utils/typography" import { scrollbarStyles } from "../../utils/styles" import { SCROLLER_CLASSNAME } from "../../utils/scrollers-observer" -export const EcosystemFeaturedItemsRootBase = styled(`div`)` - overflow-x: scroll; +const EcosystemFeaturedItemsRoot = styled(HorizontalScroller)` margin: ${rhythm(0.1)} -${rhythm(options.blockMarginBottom)}; - -webkit-overflow-scrolling: touch; -` -const EcosystemFeaturedItemsRoot = styled(EcosystemFeaturedItemsRootBase)` ${presets.Tablet} { border-top: 1px solid ${colors.gray.superLight}; margin-top: ${rhythm(0.4)}; @@ -31,7 +32,10 @@ export const ListBase = styled(`ul`)` padding: 0 calc(${rhythm(options.blockMarginBottom)} - 5px) 4px; ` -const List = styled(ListBase)` +const List = styled(HorizontalScrollerContent)` + padding-left: ${rhythm(options.blockMarginBottom)}; + padding-right: ${rhythm(options.blockMarginBottom)}; + ${presets.Tablet} { flex-direction: column; padding: 0; diff --git a/www/src/components/homepage/homepage-blog-post.js b/www/src/components/homepage/homepage-blog-post.js index 422a5b9cc56a7..5ff9331e06508 100644 --- a/www/src/components/homepage/homepage-blog-post.js +++ b/www/src/components/homepage/homepage-blog-post.js @@ -11,7 +11,9 @@ import { HorizontalScrollerItem } from "../shared/horizontal-scroller" import presets, { colors } from "../../utils/presets" import { rhythm, options } from "../../utils/typography" -const HomepageBlogPostRoot = styled(HorizontalScrollerItem)` +const HomepageBlogPostRoot = styled( + HorizontalScrollerItem.withComponent(`article`) +)` display: flex; flex-direction: column; font-family: ${options.systemFontFamily.join(`,`)}; diff --git a/www/src/components/homepage/homepage-blog-posts.js b/www/src/components/homepage/homepage-blog-posts.js index d83fc102fbeee..e0e4286a6bf09 100644 --- a/www/src/components/homepage/homepage-blog-posts.js +++ b/www/src/components/homepage/homepage-blog-posts.js @@ -20,6 +20,10 @@ const HomepageBlogPostsRootMobile = styled(HorizontalScroller)` margin: -6px -${rhythm(presets.gutters.default / 2)}; ` +const HorizontalScrollerContentAsDiv = HorizontalScrollerContent.withComponent( + `div` +) + const HomepageBlogPostsRootDesktop = styled(`div`)` display: flex; ` @@ -192,7 +196,7 @@ class HomepageBlogPosts extends Component { ) : ( - + {posts.map((post, idx) => { const { fields: { slug }, @@ -200,7 +204,7 @@ class HomepageBlogPosts extends Component { return })} - + )} diff --git a/www/src/components/homepage/homepage-ecosystem.js b/www/src/components/homepage/homepage-ecosystem.js index de6a912b3f0f3..651b88c2edca9 100644 --- a/www/src/components/homepage/homepage-ecosystem.js +++ b/www/src/components/homepage/homepage-ecosystem.js @@ -6,14 +6,15 @@ import ArrowForwardIcon from "react-icons/lib/md/arrow-forward" import HomepageSection from "./homepage-section" import EcosystemSection from "../ecosystem/ecosystem-section" -import { - EcosystemFeaturedItemsRootBase, - ListBase as EcosystemFeaturedItemsListBase, -} from "../ecosystem/ecosystem-featured-items" import EcosystemFeaturedItem, { BlockLink as FeaturedItemBlockLink, } from "../ecosystem/ecosystem-featured-item" +import { + HorizontalScroller, + HorizontalScrollerContent, +} from "../shared/horizontal-scroller" + import { EcosystemIcon } from "../../assets/mobile-nav-icons" import { PluginsIcon, StartersIcon } from "../../assets/ecosystem-icons" @@ -51,48 +52,46 @@ const Section = styled(EcosystemSection)` const SubTitle = styled(`h3`)` color: ${colors.lemon}; font-size: 1.2rem; + margin-bottom: 0.25rem; margin-top: 2rem; - ${presets.Tablet} { - margin-left: 3rem; - } - ${presets.Desktop} { - margin-left: 6rem; + margin-left: 3rem; + margin-bottom: 1rem; } ` -const FeaturedItems = styled(EcosystemFeaturedItemsRootBase)` +const FeaturedItems = styled(HorizontalScroller)` margin: 0 -${rhythm(presets.gutters.default / 2)}; ${presets.Desktop} { margin: 0; - overflow-x: auto; + overflow-x: visible; } ` -const FeaturedItemsList = styled(EcosystemFeaturedItemsListBase)` - padding: 0 calc(${rhythm(options.blockMarginBottom)} - 7px) 0; - +const FeaturedItemsList = styled(HorizontalScrollerContent)` ${presets.Desktop} { flex-wrap: wrap; margin: 0; + padding: 0; width: 100%; } ` const FeaturedItem = styled(EcosystemFeaturedItem)` - margin: 0 6px 6px 0; + margin-right: ${rhythm(presets.gutters.default / 2)}; ${presets.Tablet} { border-bottom: none; - margin: 0 6px 6px 0; - padding: 5px; + margin: ${rhythm(presets.gutters.default / 2)}; + margin-top: 0; + margin-left: 0; width: 320px; } ${presets.Desktop} { - flex-basis: 30%; + flex-basis: 28%; :nth-child(4) { margin-left: 8%; diff --git a/www/src/components/homepage/homepage-section.js b/www/src/components/homepage/homepage-section.js index cf368f7f00f22..0d6fac03a646e 100644 --- a/www/src/components/homepage/homepage-section.js +++ b/www/src/components/homepage/homepage-section.js @@ -18,7 +18,7 @@ const HomepageSectionRoot = styled(`section`)` width: calc(100% + ${rhythm(presets.gutters.default)}); ${presets.Hd} { - margin: 0 -${vP}; + margin: -1px -${vP}; padding: ${rhythm(1)} 5%; width: calc(100% + (${vP} * 2)); } @@ -154,6 +154,7 @@ HomepageSection.propTypes = { introduction: PropTypes.string, links: PropTypes.array, inverseStyle: PropTypes.bool, + className: PropTypes.string, } export default HomepageSection diff --git a/www/src/components/shared/horizontal-scroller.js b/www/src/components/shared/horizontal-scroller.js index 39dc9feadaa7e..746f12ed7598b 100644 --- a/www/src/components/shared/horizontal-scroller.js +++ b/www/src/components/shared/horizontal-scroller.js @@ -10,16 +10,19 @@ export const HorizontalScroller = styled(`div`)` -webkit-overflow-scrolling: touch; ` -export const HorizontalScrollerContent = styled(`div`)` +export const HorizontalScrollerContent = styled(`ul`)` display: inline-flex; + list-style: none; padding: ${BOX_SHADOW_BLUR} ${rhythm(presets.gutters.default / 2)} calc(${BOX_SHADOW_BLUR} * 1.5); + margin: 0; ` -export const HorizontalScrollerItem = styled(`article`)` +export const HorizontalScrollerItem = styled(`li`)` background: #fff; border-radius: ${presets.radiusLg}px; box-shadow: 0 0 ${BOX_SHADOW_BLUR} rgba(0, 0, 0, 0.2); + margin: 0; margin-right: ${rhythm(presets.gutters.default / 2)}; width: 77vw; From e27d0d62e2186c4e9eb2ddd4ece27c9dc514c953 Mon Sep 17 00:00:00 2001 From: greglobinski Date: Mon, 19 Nov 2018 13:15:19 +0100 Subject: [PATCH 17/23] fix(www): fix some styles --- .../ecosystem/ecosystem-featured-item.js | 1 + www/src/components/email-capture-form.js | 31 ++++++++++--------- 2 files changed, 18 insertions(+), 14 deletions(-) diff --git a/www/src/components/ecosystem/ecosystem-featured-item.js b/www/src/components/ecosystem/ecosystem-featured-item.js index b08b8ebd6c8f2..2a55fd7c49e6d 100644 --- a/www/src/components/ecosystem/ecosystem-featured-item.js +++ b/www/src/components/ecosystem/ecosystem-featured-item.js @@ -19,6 +19,7 @@ const EcosystemFeaturedItemRoot = styled(HorizontalScrollerItem)` ${presets.Tablet} { border-bottom: 1px solid ${colors.gray.superLight}; + box-shadow: none; margin: 0; padding: 0; width: auto; diff --git a/www/src/components/email-capture-form.js b/www/src/components/email-capture-form.js index 649a1a63fe7d1..b8797074999a2 100644 --- a/www/src/components/email-capture-form.js +++ b/www/src/components/email-capture-form.js @@ -48,6 +48,10 @@ const ErrorMessage = styled(`div`)` margin: calc(1.05rem / 2) 0; ` +const SuccesMessage = styled(`div`)` + font-family: ${options.systemFontFamily.join(`,`)}; +` + const Submit = styled(`input`)` ${buttonStyles.default}; margin-top: 20px; @@ -219,22 +223,26 @@ class EmailCaptureForm extends React.Component { render() { const { signupMessage, overrideCSS, isHomepage, className } = this.props + const FormComponent = props => ( + + ) + return ( {isHomepage ? (
{this.state.successMessage ? ( -
) : ( - + )}
) : ( @@ -265,12 +273,7 @@ class EmailCaptureForm extends React.Component { }} /> ) : ( - + )}
From 47cc6c3f09085c168a1ba9017cb304396651b6d9 Mon Sep 17 00:00:00 2001 From: greglobinski Date: Mon, 19 Nov 2018 13:30:07 +0100 Subject: [PATCH 18/23] fix(www): add cover image to one post --- docs/blog/2018-11-05-deploying-gatsby-to-azure/index.md | 1 - docs/blog/2018-11-07-gatsby-for-apps/index.md | 1 + 2 files changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/blog/2018-11-05-deploying-gatsby-to-azure/index.md b/docs/blog/2018-11-05-deploying-gatsby-to-azure/index.md index 477285d938087..0bd3478f8db25 100644 --- a/docs/blog/2018-11-05-deploying-gatsby-to-azure/index.md +++ b/docs/blog/2018-11-05-deploying-gatsby-to-azure/index.md @@ -5,7 +5,6 @@ date: 2018-11-05 image: images/rocket.jpg showImageInArticle: false tags: ["deployment", "azure"] -cover: successfullysignedin.png --- In this post we will walk through the process of deploying a Gatsby blog to Microsoft Azure Storage using VS Code. diff --git a/docs/blog/2018-11-07-gatsby-for-apps/index.md b/docs/blog/2018-11-07-gatsby-for-apps/index.md index 8c12eb78195cb..8f62eda6ad9f2 100644 --- a/docs/blog/2018-11-07-gatsby-for-apps/index.md +++ b/docs/blog/2018-11-07-gatsby-for-apps/index.md @@ -8,6 +8,7 @@ tags: - applications - beyond static excerpt: Gatsby is great for not only static sites but also traditional web applications. Using Gatsby enables the benefits of both static and web applications so you don't have to sacrifice the advantages of one approach to reap the benefits of the other. +cover: images/what-if-i-told-you.jpg --- Gatsby is great for static sites. You probably know this! It’s equally great for web applications. You may not know this. Gatsby is great for building web experiences that leverage the benefits of both so called static sites and web applications -- simultaneously. You don't have to sacrifice the advantages of one approach to reap the benefits of the other. From fc0ee9469b5b05b284e79273c8d223cbe8e443b3 Mon Sep 17 00:00:00 2001 From: greglobinski Date: Mon, 19 Nov 2018 13:50:36 +0100 Subject: [PATCH 19/23] fix(www): add border-radius to cover image --- www/src/components/homepage/homepage-blog-post.js | 1 + 1 file changed, 1 insertion(+) diff --git a/www/src/components/homepage/homepage-blog-post.js b/www/src/components/homepage/homepage-blog-post.js index 5ff9331e06508..2c923b96170c4 100644 --- a/www/src/components/homepage/homepage-blog-post.js +++ b/www/src/components/homepage/homepage-blog-post.js @@ -48,6 +48,7 @@ const HomepageBlogPostRoot = styled( ` const Cover = styled(Img)` + border-radius: ${presets.radiusLg}px ${presets.radiusLg}px 0 0; display: block; margin-bottom: -${rhythm(0.5)}; ` From 6c353d3bcdb6ee1ced4e8b573ee838cdd6767912 Mon Sep 17 00:00:00 2001 From: greglobinski Date: Mon, 19 Nov 2018 14:03:07 +0100 Subject: [PATCH 20/23] fix(www): add automaticExcerpt if the handwritten one does not exists --- www/src/components/homepage/homepage-blog-post.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/www/src/components/homepage/homepage-blog-post.js b/www/src/components/homepage/homepage-blog-post.js index 2c923b96170c4..87dc2ced50491 100644 --- a/www/src/components/homepage/homepage-blog-post.js +++ b/www/src/components/homepage/homepage-blog-post.js @@ -182,9 +182,10 @@ const HomepageBlogPost = ({ desktopViewport = false, }) => { const { + excerpt: automaticExcerpt, fields: { slug }, frontmatter: { - excerpt, + excerpt: handwrittenExcerpt, author: { id: authorName, avatar: { @@ -198,6 +199,8 @@ const HomepageBlogPost = ({ }, } = post + const excerpt = handwrittenExcerpt ? handwrittenExcerpt : automaticExcerpt + return ( {desktopViewport && From b10ccebacd89933dc1f4fad24c2da385cc9eada9 Mon Sep 17 00:00:00 2001 From: greglobinski Date: Mon, 19 Nov 2018 15:07:43 +0100 Subject: [PATCH 21/23] feat(www): add conditional formating to post dates --- .../components/homepage/homepage-blog-post.js | 16 ++++++++++++++-- .../components/homepage/homepage-blog-posts.js | 9 ++++++--- 2 files changed, 20 insertions(+), 5 deletions(-) diff --git a/www/src/components/homepage/homepage-blog-post.js b/www/src/components/homepage/homepage-blog-post.js index 87dc2ced50491..1ff7560c226b1 100644 --- a/www/src/components/homepage/homepage-blog-post.js +++ b/www/src/components/homepage/homepage-blog-post.js @@ -175,6 +175,18 @@ const ReadMore = styled(Link)` } ` +const formatDate = (dateString, desktopViewport = false) => { + const date = new Date(dateString) + + var options = { + month: `long`, + day: `numeric`, + year: `numeric`, + } + + return date.toLocaleDateString(`en-EN`, desktopViewport ? options : {}) +} + const HomepageBlogPost = ({ post, first = false, @@ -218,7 +230,7 @@ const HomepageBlogPost = ({ {authorName}  on  - {date} + {formatDate(date, desktopViewport)} {first && {excerpt}} @@ -245,7 +257,7 @@ export const homepageBlogPostFragment = graphql` frontmatter { excerpt title - date(formatString: "MM/DD/YY") + date author { id fields { diff --git a/www/src/components/homepage/homepage-blog-posts.js b/www/src/components/homepage/homepage-blog-posts.js index e0e4286a6bf09..e3da4041f034c 100644 --- a/www/src/components/homepage/homepage-blog-posts.js +++ b/www/src/components/homepage/homepage-blog-posts.js @@ -166,15 +166,18 @@ class HomepageBlogPosts extends Component { fields: { slug }, } = post - if (colIdx & postIdx) { + const firstPost = !colIdx && !postIdx + const lastPost = colIdx & postIdx + + if (lastPost) { { /* add 'View all posts' link as a sibling of the last post card */ } return ( @@ -184,7 +187,7 @@ class HomepageBlogPosts extends Component { return ( Date: Mon, 19 Nov 2018 15:31:27 +0100 Subject: [PATCH 22/23] fix(www): fix hover effect on Blog cards --- www/src/components/homepage/homepage-blog-post.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/www/src/components/homepage/homepage-blog-post.js b/www/src/components/homepage/homepage-blog-post.js index 1ff7560c226b1..f5a3a8a04011c 100644 --- a/www/src/components/homepage/homepage-blog-post.js +++ b/www/src/components/homepage/homepage-blog-post.js @@ -20,7 +20,7 @@ const HomepageBlogPostRoot = styled( padding-bottom: ${rhythm(2.5)}; position: relative; - a { + .main-body & a { border: none; box-shadow: none; font-family: inherit; From 63d30f73c37c5d54b59c2ed499be18094451b710 Mon Sep 17 00:00:00 2001 From: greglobinski Date: Mon, 26 Nov 2018 19:55:39 +0100 Subject: [PATCH 23/23] fix(www): remove 'Submit an article button' --- www/src/components/homepage/homepage-blog.js | 5 ----- 1 file changed, 5 deletions(-) diff --git a/www/src/components/homepage/homepage-blog.js b/www/src/components/homepage/homepage-blog.js index 822d2f3e47c01..607a50da28ff3 100644 --- a/www/src/components/homepage/homepage-blog.js +++ b/www/src/components/homepage/homepage-blog.js @@ -16,11 +16,6 @@ const HomepageBlog = ({ posts }) => ( label: `View all posts`, to: `/blog/`, }, - { - label: `Submit an article`, - to: `/blog/`, - secondary: true, - }, ]} >