From d21ab8268d0dc96a8d29c43175e3095397388fd2 Mon Sep 17 00:00:00 2001 From: greglobinski Date: Fri, 26 Oct 2018 11:48:35 +0200 Subject: [PATCH 01/25] feat(www): prepare featured items forEcosystem --- www/gatsby-node.js | 23 ++++++++++++++++++++++ www/package.json | 1 + www/src/data/ecosystem/featured-items.yaml | 12 +++++++++++ 3 files changed, 36 insertions(+) create mode 100644 www/src/data/ecosystem/featured-items.yaml diff --git a/www/gatsby-node.js b/www/gatsby-node.js index c08c8800b4faa..5fb34d8bf3f76 100644 --- a/www/gatsby-node.js +++ b/www/gatsby-node.js @@ -9,6 +9,11 @@ const url = require(`url`) const getpkgjson = require(`get-package-json-from-github`) const parseGHUrl = require(`parse-github-url`) const { GraphQLClient } = require(`graphql-request`) +const yaml = require("js-yaml") + +const ecosystemFeaturedItems = yaml.safeLoad( + fs.readFileSync("./src/data/ecosystem/featured-items.yaml", "utf8") +) require(`dotenv`).config({ path: `.env.${process.env.NODE_ENV}`, @@ -580,6 +585,24 @@ exports.onCreateNode = ({ node, actions, getNode, reporter }) => { // end Community/Creators Pages } +exports.onCreatePage = ({ page, actions }) => { + // add lists of featured items to Ecosystem page + if (page.path === "/ecosystem/") { + const { createPage, deletePage } = actions + return new Promise(resolve => { + const oldPage = Object.assign({}, page) + + page.context.featuredStarters = ecosystemFeaturedItems.starters + page.context.featuredPlugins = ecosystemFeaturedItems.plugins + + deletePage(oldPage) + createPage(page) + + resolve() + }) + } +} + exports.onPostBuild = () => { fs.copySync( `../docs/blog/2017-02-21-1-0-progress-update-where-came-from-where-going/gatsbygram.mp4`, diff --git a/www/package.json b/www/package.json index eba7e71274d58..399de386b40dd 100644 --- a/www/package.json +++ b/www/package.json @@ -101,6 +101,7 @@ "get-package-json-from-github": "^1.2.1", "github-api": "^3.0.0", "husky": "^1.0.0-rc.14", + "js-yaml": "^3.12.0", "prettier": "^1.14.2", "pretty-quick": "^1.6.0", "stylelint": "^9.6.0", diff --git a/www/src/data/ecosystem/featured-items.yaml b/www/src/data/ecosystem/featured-items.yaml new file mode 100644 index 0000000000000..c4db69664ae87 --- /dev/null +++ b/www/src/data/ecosystem/featured-items.yaml @@ -0,0 +1,12 @@ +starters: + - gatsby-starter-blog + - gatsby-starter-netlify-cms + - gatsby-advanced-blog + - gatsby-advanced-starter + - gatsby-starter-lumen +plugins: + - gatsby-plugin-react-helmet + - gatsby-plugin-page-creator + - gatsby-source-filesystem + - gatsby-plugin-sharp + - gatsby-transformer-remark From 0d6efa80b85e5453bf022d32aad8ce5062e64572 Mon Sep 17 00:00:00 2001 From: greglobinski Date: Fri, 26 Oct 2018 11:49:55 +0200 Subject: [PATCH 02/25] feat(www): add new icons for Ecosystem --- www/src/assets/ecosystem-icons.js | 4 +++ www/src/assets/plugins-ecosystem.svg | 38 ++++++++++++++++++++++++++++ www/src/assets/starters.svg | 21 +++++++++++++++ 3 files changed, 63 insertions(+) create mode 100644 www/src/assets/ecosystem-icons.js create mode 100644 www/src/assets/plugins-ecosystem.svg create mode 100644 www/src/assets/starters.svg diff --git a/www/src/assets/ecosystem-icons.js b/www/src/assets/ecosystem-icons.js new file mode 100644 index 0000000000000..1f827731edfe7 --- /dev/null +++ b/www/src/assets/ecosystem-icons.js @@ -0,0 +1,4 @@ +import PluginsIcon from "!raw-loader!./plugins-ecosystem.svg" +import StartersIcon from "!raw-loader!./starters.svg" + +export { PluginsIcon, StartersIcon } diff --git a/www/src/assets/plugins-ecosystem.svg b/www/src/assets/plugins-ecosystem.svg new file mode 100644 index 0000000000000..4afafb228acc9 --- /dev/null +++ b/www/src/assets/plugins-ecosystem.svg @@ -0,0 +1,38 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/www/src/assets/starters.svg b/www/src/assets/starters.svg new file mode 100644 index 0000000000000..5a1653daf0851 --- /dev/null +++ b/www/src/assets/starters.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + From ff39f869758b2f27b883d8c1d6be6c206cc77d4c Mon Sep 17 00:00:00 2001 From: greglobinski Date: Fri, 26 Oct 2018 11:50:15 +0200 Subject: [PATCH 03/25] feat(www): Ecosystem content --- .../components/ecosystem/ecosystem-board.js | 71 +++++++++ .../ecosystem/ecosystem-featured-item.js | 79 ++++++++++ .../ecosystem/ecosystem-featured-items.js | 47 ++++++ .../components/ecosystem/ecosystem-section.js | 140 ++++++++++++++++++ www/src/pages/ecosystem.js | 102 ++++++++++++- www/src/utils/colors.js | 2 + 6 files changed, 439 insertions(+), 2 deletions(-) create mode 100644 www/src/components/ecosystem/ecosystem-board.js create mode 100644 www/src/components/ecosystem/ecosystem-featured-item.js create mode 100644 www/src/components/ecosystem/ecosystem-featured-items.js create mode 100644 www/src/components/ecosystem/ecosystem-section.js diff --git a/www/src/components/ecosystem/ecosystem-board.js b/www/src/components/ecosystem/ecosystem-board.js new file mode 100644 index 0000000000000..e1c97b6e97e97 --- /dev/null +++ b/www/src/components/ecosystem/ecosystem-board.js @@ -0,0 +1,71 @@ +import React from "react" +import PropTypes from "prop-types" +import styled from "react-emotion" + +import EcosystemSection from "./ecosystem-section" + +import presets, { colors } from "../../utils/presets" + +const EcosystemBoardContainer = styled("div")` + display: flex; + flex-direction: column; + + ${presets.Tablet} { + flex-direction: row; + height: 100%; + padding: 10px; + } +` + +const SectionHeader = styled("header")({}) + +const EcosystemBoard = ({ + icons: { plugins: PluginsIcon, starters: StartersIcon }, + starters, + plugins, +}) => { + return ( + + + + + + ) +} + +EcosystemBoard.propTypes = { + icons: PropTypes.object, + starters: PropTypes.array, + plugins: PropTypes.array, +} + +export default EcosystemBoard diff --git a/www/src/components/ecosystem/ecosystem-featured-item.js b/www/src/components/ecosystem/ecosystem-featured-item.js new file mode 100644 index 0000000000000..b5c0de97797df --- /dev/null +++ b/www/src/components/ecosystem/ecosystem-featured-item.js @@ -0,0 +1,79 @@ +import React from "react" +import PropTypes from "prop-types" +import styled from "react-emotion" +import { Link } from "gatsby" + +import { rhythm, options } from "../../utils/typography" +import presets, { colors } from "../../utils/presets" + +console.log(presets) + +const EcosystemFeaturedItemContainer = styled("li")` + flex-basis: ${props => `calc(100% / ${props.numberOfItems})`}; + float: left; + margin: 0 2px 0 0; + padding: 5px; +` + +const BlockLink = styled(Link)` + border-radius: ${presets.radiusLg}px; + box-shadow: 0 1px 8px rgba(0, 0, 0, 0.2); + display: block; + padding: ${rhythm(3 / 4)}; + height: 100%; +` + +const Thumbnail = styled("img")` + width: 64px; + height: 64px; +` +const Header = styled("header")` + h3 { + color: ${colors.gatsbyDark}; + font-size: 1rem; + margin: 0; + } +` + +const Description = styled("p")` + font-family: ${options.systemFontFamily.join(`,`)}; + font-size: 0.8125rem; + margin-top: 12px; + color: ${colors.gray.lightCopy}; +` + +const Abstract = styled("div")`` + +const EcosystemFeaturedItem = ({ item, numberOfItems }) => { + const { + slug, + name, + description, + lastUpdated, + starts, + gatsbyMajorVersion, + downloadsLast30Days, + image, + } = item + + return ( + + + {image && } + +
+

{name}

+
+ {description} + + + + ) +} + +EcosystemFeaturedItem.propTypes = { + item: PropTypes.object.isRequired, + numberOfItems: PropTypes.number.isRequired, +} + +export default EcosystemFeaturedItem diff --git a/www/src/components/ecosystem/ecosystem-featured-items.js b/www/src/components/ecosystem/ecosystem-featured-items.js new file mode 100644 index 0000000000000..39e56e28830ea --- /dev/null +++ b/www/src/components/ecosystem/ecosystem-featured-items.js @@ -0,0 +1,47 @@ +import React from "react" +import PropTypes from "prop-types" +import styled from "react-emotion" +import { Link } from "gatsby" + +import EcosystemFeaturedItem from "./ecosystem-featured-item" + +import presets, { colors } from "../../utils/presets" +import { rhythm, options } from "../../utils/typography" + +const EcosystemFeaturedItemsContainer = styled("div")` + overflow-x: scroll; + margin: 0 -${rhythm(options.blockMarginBottom)}; +` + +const List = styled("ul")` + display: flex; + list-style: none; + margin: 0; + padding: 0 calc(${rhythm(options.blockMarginBottom)} - 5px) 4px; + width: ${props => `calc(280px * ${props.numberOfItems})`}; +` + +const EcosystemFeaturedItems = ({ items }) => { + return ( + + + {items.map(item => { + const { slug } = item + return ( + + ) + })} + + + ) +} + +EcosystemFeaturedItems.propTypes = { + items: PropTypes.array, +} + +export default EcosystemFeaturedItems diff --git a/www/src/components/ecosystem/ecosystem-section.js b/www/src/components/ecosystem/ecosystem-section.js new file mode 100644 index 0000000000000..0b750f57502be --- /dev/null +++ b/www/src/components/ecosystem/ecosystem-section.js @@ -0,0 +1,140 @@ +import React from "react" +import PropTypes from "prop-types" +import styled from "react-emotion" +import { Link } from "gatsby" + +import Button from "../button" +import EcosystemFeaturedItems from "./ecosystem-featured-items" + +import { rhythm, options } from "../../utils/typography" +import presets, { colors } from "../../utils/presets" + +const EcosysteSectionContainer = styled("section")` + background: #fff; + flex-basis: 33.33%; + margin-bottom: ${rhythm(1)}; + padding: 0 ${rhythm(options.blockMarginBottom)}; + + ${presets.Tablet}: { + border-radius: ${presets.radiusLg}; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); + flex-basis: 33.33%; + margin: 12px; + + :last-child: { + align-self: flex-start; + } + }; + + a { + text-decoration: none; + } +` +const Header = styled("header")` + ${presets.Tablet}: { + padding: ${rhythm(1)}; + }; +` + +const Title = styled("h1")` + color: ${colors.gatsby}; + display: flex; + font-size: 1.25rem; + margin: 0; + padding-bottom: ${rhythm(0.5)}; + + span { + margin: 0 0.3rem 0 -0.1rem; + } +` + +const Icon = styled("span")` + display: block; + width: 32px; + height: 32px; +` +const SubTitle = styled("h2")` + color: ${colors.lilac}; + font-size: 0.875rem; + font-weight: 300; + letter-spacing: 0.05em; + margin: 0; + text-transform: uppercase; +` + +const Description = styled("p")` + font-family: ${options.systemFontFamily.join(`,`)}; + font-size: 0.8125rem; + color: ${colors.gray.lightCopy}; +` + +const Actions = styled("div")` + display: flex; + flex-wrap: wrap; + margin: -4px 0 ${rhythm(1)}; + + > a { + margin: 4px 8px 4px 0; + } +` + +const EcosysteSection = ({ + title, + description, + subTitle, + icon, + links, + link, + featuredItems, +}) => ( + +
+ {links ? ( + + + {icon && <Icon dangerouslySetInnerHTML={{ __html: icon }} />} + {title} + + {description} + + {links.map((item, idx) => { + const { to, label, secondary } = item + + return ( + + ) + })} + + + ) : ( + + + {icon && <Icon dangerouslySetInnerHTML={{ __html: icon }} />} + {title} + + {description} + + )} + {subTitle && {subTitle}} +
+ + {featuredItems && + featuredItems.length > 0 && ( + + )} + +) + +EcosysteSection.propTypes = { + title: PropTypes.string.isRequired, + description: PropTypes.string.isRequired, + subTitle: PropTypes.string, + icon: PropTypes.string, + links: PropTypes.array, + link: PropTypes.string, + featuredItems: PropTypes.array, +} + +export default EcosysteSection diff --git a/www/src/pages/ecosystem.js b/www/src/pages/ecosystem.js index b8d0c00fbb9a8..420095e974127 100644 --- a/www/src/pages/ecosystem.js +++ b/www/src/pages/ecosystem.js @@ -1,17 +1,64 @@ import React, { Component } from "react" import Helmet from "react-helmet" +import { graphql } from "gatsby" + import { rhythm } from "../utils/typography" import { colors } from "../utils/presets" import Layout from "../components/layout/layout-with-heading" import PageHeading from "../components/layout/page-heading" +import EcosystemBoard from "../components/ecosystem/ecosystem-board" import { EcosystemIcon } from "../assets/mobile-nav-icons" +import { PluginsIcon, StartersIcon } from "../assets/ecosystem-icons" class EcosystemPage extends Component { render() { - const { location } = this.props + const { + location, + data: { + allStartersYaml: { edges: startersData }, + allNpmPackage: { edges: pluginsData }, + }, + } = this.props + + const starters = startersData.map(item => { + const { + node: { + fields: { + starterShowcase: { + slug, + name, + description, + lastUpdated, + starts, + gatsbyMajorVersion, + }, + }, + childScreenshot, + }, + } = item + + return { + slug: `/starters${slug}`, + name, + description, + lastUpdated, + starts, + gatsbyMajorVersion, + } + }) + + const plugins = pluginsData.map(item => { + const { + node: { slug, name, description, downloadsLast30Days }, + } = item + + return { slug, name, description, downloadsLast30Days } + }) + const pageTitle = "Ecosystem" + const boardIcons = { plugins: PluginsIcon, starters: StartersIcon } return ( - This is content of Ecosystem + ) } } export default EcosystemPage + +export const ecosystemQuery = graphql` + query EcosystemQuery( + $featuredStarters: [String]! + $featuredPlugins: [String]! + ) { + allStartersYaml( + filter: { + fields: { starterShowcase: { name: { in: $featuredStarters } } } + } + ) { + edges { + node { + fields { + starterShowcase { + slug + description + stars + lastUpdated + name + gatsbyMajorVersion + } + } + childScreenshot { + screenshotFile { + childImageSharp { + fluid(maxWidth: 64) { + ...GatsbyImageSharpFluid_noBase64 + } + } + } + } + } + } + } + allNpmPackage(filter: { name: { in: $featuredPlugins } }) { + edges { + node { + slug + name + description + downloadsLast30Days + } + } + } + } +` diff --git a/www/src/utils/colors.js b/www/src/utils/colors.js index 649a594cc1fe6..8cc8c1ddbd915 100644 --- a/www/src/utils/colors.js +++ b/www/src/utils/colors.js @@ -4,6 +4,7 @@ const colors = { // original palette by @SachaG // @see https://www.figma.com/file/J6IYJEtdRmwJQOrcZ2DfvxDD/Gatsby gatsby: `#663399`, // was #744c9e + gatsbyDark: `#442266`, lilac: `#8c65b3`, lavender: `#b190d5`, wisteria: `#ccb2e5`, @@ -21,6 +22,7 @@ const colors = { gray: { dark: gray(8, 270), copy: gray(12, 270), + lightCopy: gray(35, 270), calm: gray(46, 270), bright: gray(64, 270), light: gray(80, 270), From e57066bb6eab4a29ab5e209c3ca83e7931d3acff Mon Sep 17 00:00:00 2001 From: greglobinski Date: Fri, 26 Oct 2018 15:03:17 +0200 Subject: [PATCH 04/25] feat(www): create Ecosystem mobile styles --- .../components/ecosystem/ecosystem-board.js | 7 +- .../ecosystem/ecosystem-featured-item.js | 88 ++++++++++++++++--- .../ecosystem/ecosystem-featured-items.js | 15 ++-- .../components/ecosystem/ecosystem-section.js | 8 +- www/src/pages/ecosystem.js | 17 ++-- www/src/utils/colors.js | 1 + 6 files changed, 108 insertions(+), 28 deletions(-) diff --git a/www/src/components/ecosystem/ecosystem-board.js b/www/src/components/ecosystem/ecosystem-board.js index e1c97b6e97e97..1d3b5a863c693 100644 --- a/www/src/components/ecosystem/ecosystem-board.js +++ b/www/src/components/ecosystem/ecosystem-board.js @@ -6,7 +6,8 @@ import EcosystemSection from "./ecosystem-section" import presets, { colors } from "../../utils/presets" -const EcosystemBoardContainer = styled("div")` +const EcosystemBoardRoot = styled("div")` + background: red; display: flex; flex-direction: column; @@ -25,7 +26,7 @@ const EcosystemBoard = ({ plugins, }) => { return ( - + - + ) } diff --git a/www/src/components/ecosystem/ecosystem-featured-item.js b/www/src/components/ecosystem/ecosystem-featured-item.js index b5c0de97797df..db7e20f295d77 100644 --- a/www/src/components/ecosystem/ecosystem-featured-item.js +++ b/www/src/components/ecosystem/ecosystem-featured-item.js @@ -3,12 +3,15 @@ import PropTypes from "prop-types" import styled from "react-emotion" import { Link } from "gatsby" +import StarIcon from "react-icons/lib/md/star" +import ArrowDownIcon from "react-icons/lib/md/arrow-downward" + import { rhythm, options } from "../../utils/typography" import presets, { colors } from "../../utils/presets" console.log(presets) -const EcosystemFeaturedItemContainer = styled("li")` +const EcosystemFeaturedItemRoot = styled("li")` flex-basis: ${props => `calc(100% / ${props.numberOfItems})`}; float: left; margin: 0 2px 0 0; @@ -19,30 +22,74 @@ const BlockLink = styled(Link)` border-radius: ${presets.radiusLg}px; box-shadow: 0 1px 8px rgba(0, 0, 0, 0.2); display: block; + height: 100%; padding: ${rhythm(3 / 4)}; +` +const Abstract = styled("div")` + display: flex; + flex-direction: column; + justify-content: space-between; height: 100%; + font-family: ${options.systemFontFamily.join(`,`)}; ` const Thumbnail = styled("img")` - width: 64px; height: 64px; + width: 64px; ` const Header = styled("header")` + display: flex; + flex-grow: 0; + justify-content: space-between; h3 { color: ${colors.gatsbyDark}; font-size: 1rem; margin: 0; } + + span { + color: ${colors.lilac}; + display: flex; + align-items: center; + font-size: 0.8125rem; + font-family: ${options.systemFontFamily.join(`,`)}; + + svg { + fill: ${colors.gray.light}; + height: 1.2em; + margin-left: 2px; + width: 1.2em; + } + } ` const Description = styled("p")` - font-family: ${options.systemFontFamily.join(`,`)}; - font-size: 0.8125rem; - margin-top: 12px; + flex-grow: 1; + font-size: 0.85rem; + margin: 0; color: ${colors.gray.lightCopy}; + padding: ${rhythm(0.5)} 0 0; ` -const Abstract = styled("div")`` +const Details = styled("p")` + color: ${colors.gray.bright}; + display: flex; + flex-grow: 0; + font-size: 0.8rem; + justify-content: space-between; + padding: ${rhythm(0.1)} 0 0; + + span:first-child { + background: ${colors.gray.superLight}; + border-radius: ${rhythm(1)}; + color: ${colors.gray.bright}; + padding: 0 5px; + + ::first-letter { + text-transform: uppercase; + } + } +` const EcosystemFeaturedItem = ({ item, numberOfItems }) => { const { @@ -50,24 +97,45 @@ const EcosystemFeaturedItem = ({ item, numberOfItems }) => { name, description, lastUpdated, - starts, + stars, gatsbyMajorVersion, - downloadsLast30Days, + humanDownloadsLast30Days, image, } = item return ( - + {image && }

{name}

+ {humanDownloadsLast30Days && ( + + {humanDownloadsLast30Days} + + )} + {stars && ( + + {stars} + + + )}
{description} + {(gatsbyMajorVersion || lastUpdated) && ( +
+ {gatsbyMajorVersion && ( + {`${gatsbyMajorVersion[0][0]} v${ + gatsbyMajorVersion[0][1] + } `} + )} + {lastUpdated && {lastUpdated}} +
+ )} - + ) } diff --git a/www/src/components/ecosystem/ecosystem-featured-items.js b/www/src/components/ecosystem/ecosystem-featured-items.js index 39e56e28830ea..c536af3b5ca53 100644 --- a/www/src/components/ecosystem/ecosystem-featured-items.js +++ b/www/src/components/ecosystem/ecosystem-featured-items.js @@ -8,9 +8,9 @@ import EcosystemFeaturedItem from "./ecosystem-featured-item" import presets, { colors } from "../../utils/presets" import { rhythm, options } from "../../utils/typography" -const EcosystemFeaturedItemsContainer = styled("div")` +const EcosystemFeaturedItemsRoot = styled("div")` overflow-x: scroll; - margin: 0 -${rhythm(options.blockMarginBottom)}; + margin: ${rhythm(0.1)} -${rhythm(options.blockMarginBottom)}; ` const List = styled("ul")` @@ -18,12 +18,17 @@ const List = styled("ul")` list-style: none; margin: 0; padding: 0 calc(${rhythm(options.blockMarginBottom)} - 5px) 4px; - width: ${props => `calc(280px * ${props.numberOfItems})`}; + width: ${props => `calc(85vw * ${props.numberOfItems})`}; + + ${presets.Tablet} { + width: 100%; + flex-direction: column; + } ` const EcosystemFeaturedItems = ({ items }) => { return ( - + {items.map(item => { const { slug } = item @@ -36,7 +41,7 @@ const EcosystemFeaturedItems = ({ items }) => { ) })} - + ) } diff --git a/www/src/components/ecosystem/ecosystem-section.js b/www/src/components/ecosystem/ecosystem-section.js index 0b750f57502be..b04d89774ef07 100644 --- a/www/src/components/ecosystem/ecosystem-section.js +++ b/www/src/components/ecosystem/ecosystem-section.js @@ -9,10 +9,10 @@ import EcosystemFeaturedItems from "./ecosystem-featured-items" import { rhythm, options } from "../../utils/typography" import presets, { colors } from "../../utils/presets" -const EcosysteSectionContainer = styled("section")` +const EcosysteSectionRoot = styled("section")` background: #fff; flex-basis: 33.33%; - margin-bottom: ${rhythm(1)}; + margin-bottom: ${rhythm(0.5)}; padding: 0 ${rhythm(options.blockMarginBottom)}; ${presets.Tablet}: { @@ -87,7 +87,7 @@ const EcosysteSection = ({ link, featuredItems, }) => ( - +
{links ? ( @@ -124,7 +124,7 @@ const EcosysteSection = ({ featuredItems.length > 0 && ( )} - + ) EcosysteSection.propTypes = { diff --git a/www/src/pages/ecosystem.js b/www/src/pages/ecosystem.js index 420095e974127..e8c521c3efdc7 100644 --- a/www/src/pages/ecosystem.js +++ b/www/src/pages/ecosystem.js @@ -31,7 +31,7 @@ class EcosystemPage extends Component { name, description, lastUpdated, - starts, + stars, gatsbyMajorVersion, }, }, @@ -44,17 +44,22 @@ class EcosystemPage extends Component { name, description, lastUpdated, - starts, + stars, gatsbyMajorVersion, } }) const plugins = pluginsData.map(item => { const { - node: { slug, name, description, downloadsLast30Days }, + node: { slug, name, description, humanDownloadsLast30Days }, } = item - return { slug, name, description, downloadsLast30Days } + return { + slug, + name, + description, + humanDownloadsLast30Days, + } }) const pageTitle = "Ecosystem" @@ -95,7 +100,7 @@ export const ecosystemQuery = graphql` slug description stars - lastUpdated + lastUpdated(formatString: "MM/DD/YYYY") name gatsbyMajorVersion } @@ -118,7 +123,7 @@ export const ecosystemQuery = graphql` slug name description - downloadsLast30Days + humanDownloadsLast30Days } } } diff --git a/www/src/utils/colors.js b/www/src/utils/colors.js index 8cc8c1ddbd915..a017c93397289 100644 --- a/www/src/utils/colors.js +++ b/www/src/utils/colors.js @@ -26,6 +26,7 @@ const colors = { calm: gray(46, 270), bright: gray(64, 270), light: gray(80, 270), + superLight: gray(96, 270), }, code: { bg: `#fdfaf6`, // colors.a[0] #fcf6f0 From 90f236bbe1b23b63a2bed946f4e31afa1ea61990 Mon Sep 17 00:00:00 2001 From: greglobinski Date: Fri, 26 Oct 2018 17:33:37 +0200 Subject: [PATCH 05/25] feat(www): add new variant of Button --- www/src/components/button.js | 4 ++++ www/src/utils/styles.js | 29 ++++++++++++++++------------- 2 files changed, 20 insertions(+), 13 deletions(-) diff --git a/www/src/components/button.js b/www/src/components/button.js index a5123cd8dfd23..5d0648724fc25 100644 --- a/www/src/components/button.js +++ b/www/src/components/button.js @@ -2,6 +2,8 @@ import React from "react" import { Link } from "gatsby" import { buttonStyles } from "../utils/styles" +console.log(buttonStyles.tiny) + const components = { link: Link, href: ({ children, ...rest }) => {children}, @@ -16,6 +18,7 @@ const Button = ({ tag, large, small, + tiny, secondary, ...rest }) => { @@ -34,6 +37,7 @@ const Button = ({ ...(secondary && { ...buttonStyles.secondary }), ...(large && { ...buttonStyles.large }), ...(small && { ...buttonStyles.small }), + ...(tiny && { ...buttonStyles.tiny }), }, } diff --git a/www/src/utils/styles.js b/www/src/utils/styles.js index f401c644c110d..6464761c265b0 100644 --- a/www/src/utils/styles.js +++ b/www/src/utils/styles.js @@ -60,20 +60,13 @@ export const buttonStyles = { outline: 0, boxShadow: `0 0 0 0.2rem ${hex2rgba(colors.lilac, 0.25)}`, }, - ":after": { - content: `''`, - display: `block`, - }, - "& svg": { - marginLeft: `.2em`, - }, + ":after": { content: `''`, display: `block` }, + "& svg": { marginLeft: `.2em` }, [presets.Tablet]: { ...scale(1 / 5), padding: `${rhythm(2 / 6)} ${rhythm(3 / 5)}`, }, - [presets.VHd]: { - padding: `${rhythm(1 / 2)} ${rhythm(1)}`, - }, + [presets.VHd]: { padding: `${rhythm(1 / 2)} ${rhythm(1)}` }, }, secondary: { backgroundColor: `transparent`, @@ -88,9 +81,7 @@ export const buttonStyles = { fontSize: scale(2 / 5).fontSize, padding: `${rhythm(2 / 4)} ${rhythm(3 / 5)}`, }, - [presets.VHd]: { - padding: `${rhythm(1 / 2)} ${rhythm(1)}`, - }, + [presets.VHd]: { padding: `${rhythm(1 / 2)} ${rhythm(1)}` }, }, small: { fontSize: scale(-1 / 3).fontSize, @@ -104,6 +95,18 @@ export const buttonStyles = { padding: `${rhythm(2 / 5)} ${rhythm(1 / 2)}`, }, }, + tiny: { + fontSize: scale(-1 / 3).fontSize, + padding: `${rhythm(1 / 5)} ${rhythm(1 / 3)}`, + [presets.Tablet]: { + fontSize: scale(-1 / 4).fontSize, + padding: `${rhythm(1 / 5)} ${rhythm(1 / 3)}`, + }, + [presets.VHd]: { + fontSize: scale(-1 / 5).fontSize, + padding: `${rhythm(1 / 5)} ${rhythm(1 / 3)}`, + }, + }, } export const svgStyles = { From bcc7cbe75c3bd111d2605a42176e39a2dfaae987 Mon Sep 17 00:00:00 2001 From: greglobinski Date: Fri, 26 Oct 2018 17:35:43 +0200 Subject: [PATCH 06/25] feat(www): Ecosystem desktop styles --- .../components/ecosystem/ecosystem-board.js | 9 +++---- .../ecosystem/ecosystem-featured-item.js | 23 ++++++++++++---- .../ecosystem/ecosystem-featured-items.js | 13 ++++++++- .../components/ecosystem/ecosystem-section.js | 27 +++++++++++-------- .../components/layout/layout-with-heading.js | 8 +++++- 5 files changed, 57 insertions(+), 23 deletions(-) diff --git a/www/src/components/ecosystem/ecosystem-board.js b/www/src/components/ecosystem/ecosystem-board.js index 1d3b5a863c693..4f98b72846e27 100644 --- a/www/src/components/ecosystem/ecosystem-board.js +++ b/www/src/components/ecosystem/ecosystem-board.js @@ -7,19 +7,18 @@ import EcosystemSection from "./ecosystem-section" import presets, { colors } from "../../utils/presets" const EcosystemBoardRoot = styled("div")` - background: red; display: flex; flex-direction: column; ${presets.Tablet} { flex-direction: row; - height: 100%; - padding: 10px; + height: calc( + 100vh - (${presets.bannerHeight} + ${presets.headerHeight} + 1px) + ); + padding: 2rem 1rem; } ` -const SectionHeader = styled("header")({}) - const EcosystemBoard = ({ icons: { plugins: PluginsIcon, starters: StartersIcon }, starters, diff --git a/www/src/components/ecosystem/ecosystem-featured-item.js b/www/src/components/ecosystem/ecosystem-featured-item.js index db7e20f295d77..79ef354249b6b 100644 --- a/www/src/components/ecosystem/ecosystem-featured-item.js +++ b/www/src/components/ecosystem/ecosystem-featured-item.js @@ -9,13 +9,16 @@ import ArrowDownIcon from "react-icons/lib/md/arrow-downward" import { rhythm, options } from "../../utils/typography" import presets, { colors } from "../../utils/presets" -console.log(presets) - const EcosystemFeaturedItemRoot = styled("li")` flex-basis: ${props => `calc(100% / ${props.numberOfItems})`}; float: left; margin: 0 2px 0 0; padding: 5px; + + ${presets.Tablet} { + padding: 0; + border-bottom: 1px solid ${colors.gray.superLight}; + } ` const BlockLink = styled(Link)` @@ -24,6 +27,17 @@ const BlockLink = styled(Link)` display: block; height: 100%; padding: ${rhythm(3 / 4)}; + + ${presets.Tablet} { + border-radius: 0; + box-shadow: none; + transition: all ${presets.animation.speedDefault} + ${presets.animation.curveDefault}; + + :hover { + background: ${colors.ui.whisper}; + } + } ` const Abstract = styled("div")` display: flex; @@ -112,13 +126,12 @@ const EcosystemFeaturedItem = ({ item, numberOfItems }) => {

{name}

{humanDownloadsLast30Days && ( - {humanDownloadsLast30Days} + {humanDownloadsLast30Days} )} {stars && ( - {stars} - + {stars} )}
diff --git a/www/src/components/ecosystem/ecosystem-featured-items.js b/www/src/components/ecosystem/ecosystem-featured-items.js index c536af3b5ca53..c7ba96822d159 100644 --- a/www/src/components/ecosystem/ecosystem-featured-items.js +++ b/www/src/components/ecosystem/ecosystem-featured-items.js @@ -7,10 +7,20 @@ import EcosystemFeaturedItem from "./ecosystem-featured-item" import presets, { colors } from "../../utils/presets" import { rhythm, options } from "../../utils/typography" +import { scrollbarStyles } from "../../utils/styles" const EcosystemFeaturedItemsRoot = styled("div")` overflow-x: scroll; margin: ${rhythm(0.1)} -${rhythm(options.blockMarginBottom)}; + + ${presets.Tablet} { + border-top: 1px solid ${colors.gray.superLight}; + margin-top: ${rhythm(0.4)}; + margin-bottom: 0; + overflow-y: scroll; + overflow-x: hidden; + ${scrollbarStyles}; + } ` const List = styled("ul")` @@ -21,8 +31,9 @@ const List = styled("ul")` width: ${props => `calc(85vw * ${props.numberOfItems})`}; ${presets.Tablet} { - width: 100%; flex-direction: column; + padding: 0; + width: 100%; } ` diff --git a/www/src/components/ecosystem/ecosystem-section.js b/www/src/components/ecosystem/ecosystem-section.js index b04d89774ef07..dcf8b58b406be 100644 --- a/www/src/components/ecosystem/ecosystem-section.js +++ b/www/src/components/ecosystem/ecosystem-section.js @@ -10,21 +10,24 @@ import { rhythm, options } from "../../utils/typography" import presets, { colors } from "../../utils/presets" const EcosysteSectionRoot = styled("section")` - background: #fff; - flex-basis: 33.33%; margin-bottom: ${rhythm(0.5)}; padding: 0 ${rhythm(options.blockMarginBottom)}; - ${presets.Tablet}: { - border-radius: ${presets.radiusLg}; - box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); - flex-basis: 33.33%; - margin: 12px; - - :last-child: { + ${presets.Tablet} { + box-shadow: 0 1px 8px rgba(0, 0, 0, 0.2); + border-radius: ${presets.radiusLg}px; + display: flex; + flex-direction: column; + flex-grow: 0; + margin: 0 10px; + padding: ${rhythm(options.blockMarginBottom)}; + padding-bottom: 0; + width: 33.33%; + + :last-child { align-self: flex-start; } - }; + } a { text-decoration: none; @@ -33,6 +36,8 @@ const EcosysteSectionRoot = styled("section")` const Header = styled("header")` ${presets.Tablet}: { padding: ${rhythm(1)}; + padding: 10px; + background: yellow; }; ` @@ -101,7 +106,7 @@ const EcosysteSection = ({ const { to, label, secondary } = item return ( - ) diff --git a/www/src/components/layout/layout-with-heading.js b/www/src/components/layout/layout-with-heading.js index b11ce8530f425..a33349df67abf 100644 --- a/www/src/components/layout/layout-with-heading.js +++ b/www/src/components/layout/layout-with-heading.js @@ -21,7 +21,13 @@ import "typeface-spectral" const Content = styled("div")` padding-top: ${presets.bannerHeight}; - height: 200vh; + padding-bottom: 3.5rem; + + ${presets.Tablet} { + margin-left: ${presets.pageHeadingDesktopWidth}; + padding-top: calc(${presets.bannerHeight} + ${presets.headerHeight}); + padding-bottom: 0; + }, ` const StyledSkipNavLink = styled(SkipNavLink)` From 5be87860d26c9c8fa66fe0e508c28d3b9fd0b2a5 Mon Sep 17 00:00:00 2001 From: greglobinski Date: Fri, 26 Oct 2018 18:50:20 +0200 Subject: [PATCH 07/25] feat(www): add thumbnail to featured starters --- www/src/components/button.js | 2 -- .../ecosystem/ecosystem-featured-item.js | 32 ++++++++++++------- .../ecosystem/ecosystem-featured-items.js | 2 +- .../components/ecosystem/ecosystem-section.js | 11 +++++-- www/src/pages/ecosystem.js | 11 +++++-- 5 files changed, 39 insertions(+), 19 deletions(-) diff --git a/www/src/components/button.js b/www/src/components/button.js index 5d0648724fc25..efc61a92c337f 100644 --- a/www/src/components/button.js +++ b/www/src/components/button.js @@ -2,8 +2,6 @@ import React from "react" import { Link } from "gatsby" import { buttonStyles } from "../utils/styles" -console.log(buttonStyles.tiny) - const components = { link: Link, href: ({ children, ...rest }) => {children}, diff --git a/www/src/components/ecosystem/ecosystem-featured-item.js b/www/src/components/ecosystem/ecosystem-featured-item.js index 79ef354249b6b..b612256d3d801 100644 --- a/www/src/components/ecosystem/ecosystem-featured-item.js +++ b/www/src/components/ecosystem/ecosystem-featured-item.js @@ -2,9 +2,10 @@ import React from "react" import PropTypes from "prop-types" import styled from "react-emotion" import { Link } from "gatsby" +import Img from "gatsby-image" import StarIcon from "react-icons/lib/md/star" -import ArrowDownIcon from "react-icons/lib/md/arrow-downward" +import ArrowDownwardIcon from "react-icons/lib/md/arrow-downward" import { rhythm, options } from "../../utils/typography" import presets, { colors } from "../../utils/presets" @@ -24,7 +25,7 @@ const EcosystemFeaturedItemRoot = styled("li")` const BlockLink = styled(Link)` border-radius: ${presets.radiusLg}px; box-shadow: 0 1px 8px rgba(0, 0, 0, 0.2); - display: block; + display: flex; height: 100%; padding: ${rhythm(3 / 4)}; @@ -42,18 +43,23 @@ const BlockLink = styled(Link)` const Abstract = styled("div")` display: flex; flex-direction: column; + flex-grow: 1; justify-content: space-between; height: 100%; font-family: ${options.systemFontFamily.join(`,`)}; ` -const Thumbnail = styled("img")` - height: 64px; - width: 64px; +const Thumbnail = styled("div")` + padding-right: ${rhythm(2 / 3)}; + padding-top: ${rhythm(1 / 12)}; + + img { + height: 64px; + width: 64px; + } ` const Header = styled("header")` display: flex; - flex-grow: 0; justify-content: space-between; h3 { color: ${colors.gatsbyDark}; @@ -91,7 +97,7 @@ const Details = styled("p")` flex-grow: 0; font-size: 0.8rem; justify-content: space-between; - padding: ${rhythm(0.1)} 0 0; + padding: ${rhythm(0.3)} 0 0; span:first-child { background: ${colors.gray.superLight}; @@ -114,19 +120,23 @@ const EcosystemFeaturedItem = ({ item, numberOfItems }) => { stars, gatsbyMajorVersion, humanDownloadsLast30Days, - image, + thumbnail, } = item return ( - {image && } + {thumbnail && ( + + + + )}

{name}

{humanDownloadsLast30Days && ( - {humanDownloadsLast30Days} + {humanDownloadsLast30Days} )} {stars && ( @@ -143,7 +153,7 @@ const EcosystemFeaturedItem = ({ item, numberOfItems }) => { gatsbyMajorVersion[0][1] } `} )} - {lastUpdated && {lastUpdated}} + {lastUpdated && Updated {lastUpdated}} )} diff --git a/www/src/components/ecosystem/ecosystem-featured-items.js b/www/src/components/ecosystem/ecosystem-featured-items.js index c7ba96822d159..17ad717f577e6 100644 --- a/www/src/components/ecosystem/ecosystem-featured-items.js +++ b/www/src/components/ecosystem/ecosystem-featured-items.js @@ -28,7 +28,7 @@ const List = styled("ul")` list-style: none; margin: 0; padding: 0 calc(${rhythm(options.blockMarginBottom)} - 5px) 4px; - width: ${props => `calc(85vw * ${props.numberOfItems})`}; + width: ${props => `calc(90vw * ${props.numberOfItems})`}; ${presets.Tablet} { flex-direction: column; diff --git a/www/src/components/ecosystem/ecosystem-section.js b/www/src/components/ecosystem/ecosystem-section.js index dcf8b58b406be..67cb750885d7a 100644 --- a/www/src/components/ecosystem/ecosystem-section.js +++ b/www/src/components/ecosystem/ecosystem-section.js @@ -3,6 +3,8 @@ import PropTypes from "prop-types" import styled from "react-emotion" import { Link } from "gatsby" +import ArrowForwardIcon from "react-icons/lib/md/arrow-forward" + import Button from "../button" import EcosystemFeaturedItems from "./ecosystem-featured-items" @@ -42,14 +44,19 @@ const Header = styled("header")` ` const Title = styled("h1")` + align-items: center; color: ${colors.gatsby}; display: flex; font-size: 1.25rem; + justify-content: space-between; margin: 0; padding-bottom: ${rhythm(0.5)}; span { margin: 0 0.3rem 0 -0.1rem; + :last-child { + flex-grow: 1; + } } ` @@ -98,7 +105,7 @@ const EcosysteSection = ({ {icon && <Icon dangerouslySetInnerHTML={{ __html: icon }} />} - {title} + <span>{title}</span> {description} @@ -117,7 +124,7 @@ const EcosysteSection = ({ {icon && <Icon dangerouslySetInnerHTML={{ __html: icon }} />} - {title} + {title} <ArrowForwardIcon /> {description} diff --git a/www/src/pages/ecosystem.js b/www/src/pages/ecosystem.js index e8c521c3efdc7..35cf7ca0ba770 100644 --- a/www/src/pages/ecosystem.js +++ b/www/src/pages/ecosystem.js @@ -35,7 +35,11 @@ class EcosystemPage extends Component { gatsbyMajorVersion, }, }, - childScreenshot, + childScreenshot: { + screenshotFile: { + childImageSharp: { fixed: thumbnail }, + }, + }, }, } = item @@ -46,6 +50,7 @@ class EcosystemPage extends Component { lastUpdated, stars, gatsbyMajorVersion, + thumbnail, } }) @@ -108,8 +113,8 @@ export const ecosystemQuery = graphql` childScreenshot { screenshotFile { childImageSharp { - fluid(maxWidth: 64) { - ...GatsbyImageSharpFluid_noBase64 + fixed(width: 64, height: 64) { + ...GatsbyImageSharpFixed_noBase64 } } } From c74e8d61c236371c553b1d634ecbca8d371544cb Mon Sep 17 00:00:00 2001 From: greglobinski Date: Fri, 26 Oct 2018 18:57:55 +0200 Subject: [PATCH 08/25] fix(www): fix button label --- www/src/components/ecosystem/ecosystem-board.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/www/src/components/ecosystem/ecosystem-board.js b/www/src/components/ecosystem/ecosystem-board.js index 4f98b72846e27..9b7b8134f542a 100644 --- a/www/src/components/ecosystem/ecosystem-board.js +++ b/www/src/components/ecosystem/ecosystem-board.js @@ -49,7 +49,7 @@ const EcosystemBoard = ({ icon={StartersIcon} links={[ { label: "Browse Starters", to: "/starters/" }, - { label: "Plugin Docs", to: "/docs/starters/", secondary: true }, + { label: "Starter Docs", to: "/docs/starters/", secondary: true }, ]} featuredItems={starters} /> From 4c8585a9b00f028b2bdc0682a1b2f6ef759aa852 Mon Sep 17 00:00:00 2001 From: greglobinski Date: Mon, 29 Oct 2018 10:39:53 +0100 Subject: [PATCH 09/25] fix(www): fix typo --- www/src/components/ecosystem/ecosystem-board.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/www/src/components/ecosystem/ecosystem-board.js b/www/src/components/ecosystem/ecosystem-board.js index 9b7b8134f542a..bc3f6167efade 100644 --- a/www/src/components/ecosystem/ecosystem-board.js +++ b/www/src/components/ecosystem/ecosystem-board.js @@ -29,7 +29,7 @@ const EcosystemBoard = ({ Date: Mon, 29 Oct 2018 10:47:09 +0100 Subject: [PATCH 10/25] refactor(www): prettify svg code --- www/src/assets/plugins-ecosystem.svg | 72 ++++++++++++++-------------- www/src/assets/starters.svg | 36 +++++++------- 2 files changed, 52 insertions(+), 56 deletions(-) diff --git a/www/src/assets/plugins-ecosystem.svg b/www/src/assets/plugins-ecosystem.svg index 4afafb228acc9..0e4675851c8ee 100644 --- a/www/src/assets/plugins-ecosystem.svg +++ b/www/src/assets/plugins-ecosystem.svg @@ -1,38 +1,36 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/www/src/assets/starters.svg b/www/src/assets/starters.svg index 5a1653daf0851..0ecb6a27d3535 100644 --- a/www/src/assets/starters.svg +++ b/www/src/assets/starters.svg @@ -1,21 +1,19 @@ - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + From cfb01ce72ef45f76f5120140a5a89f4ab86b019d Mon Sep 17 00:00:00 2001 From: greglobinski Date: Mon, 29 Oct 2018 10:54:38 +0100 Subject: [PATCH 11/25] refactor(www): remove unnecessary destructuring --- www/src/pages/ecosystem.js | 13 +------------ 1 file changed, 1 insertion(+), 12 deletions(-) diff --git a/www/src/pages/ecosystem.js b/www/src/pages/ecosystem.js index 35cf7ca0ba770..0491fe4d9f3e1 100644 --- a/www/src/pages/ecosystem.js +++ b/www/src/pages/ecosystem.js @@ -54,18 +54,7 @@ class EcosystemPage extends Component { } }) - const plugins = pluginsData.map(item => { - const { - node: { slug, name, description, humanDownloadsLast30Days }, - } = item - - return { - slug, - name, - description, - humanDownloadsLast30Days, - } - }) + const plugins = pluginsData.map(item => item.node) const pageTitle = "Ecosystem" const boardIcons = { plugins: PluginsIcon, starters: StartersIcon } From 1519fe34b031057a57a822c86b3c3f44bbe7da3d Mon Sep 17 00:00:00 2001 From: greglobinski Date: Mon, 29 Oct 2018 12:06:13 +0100 Subject: [PATCH 12/25] fix(www): use slug to pick up featured starters --- www/src/data/ecosystem/featured-items.yaml | 12 +++++++----- www/src/pages/ecosystem.js | 2 +- 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/www/src/data/ecosystem/featured-items.yaml b/www/src/data/ecosystem/featured-items.yaml index c4db69664ae87..77bdd0084b273 100644 --- a/www/src/data/ecosystem/featured-items.yaml +++ b/www/src/data/ecosystem/featured-items.yaml @@ -1,9 +1,11 @@ +# use slug to pick a starter starters: - - gatsby-starter-blog - - gatsby-starter-netlify-cms - - gatsby-advanced-blog - - gatsby-advanced-starter - - gatsby-starter-lumen + - "/gatsby-starter-blog/" + - "/gatsby-starter-netlify-cms/" + - "/gatsby-advanced-blog/" + - "/gatsby-advanced-starter/" + - "/gatsby-starter-lumen/" +# use name to pick a plugin plugins: - gatsby-plugin-react-helmet - gatsby-plugin-page-creator diff --git a/www/src/pages/ecosystem.js b/www/src/pages/ecosystem.js index 0491fe4d9f3e1..3b00990fd5cf3 100644 --- a/www/src/pages/ecosystem.js +++ b/www/src/pages/ecosystem.js @@ -84,7 +84,7 @@ export const ecosystemQuery = graphql` ) { allStartersYaml( filter: { - fields: { starterShowcase: { name: { in: $featuredStarters } } } + fields: { starterShowcase: { slug: { in: $featuredStarters } } } } ) { edges { From bd034d6da355aaa0cf9fe587f34e32a00f6e0970 Mon Sep 17 00:00:00 2001 From: greglobinski Date: Mon, 29 Oct 2018 12:08:23 +0100 Subject: [PATCH 13/25] refactor(www): remove unnecessary spreading to a new object --- www/src/components/button.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/www/src/components/button.js b/www/src/components/button.js index efc61a92c337f..9103259c7c8b9 100644 --- a/www/src/components/button.js +++ b/www/src/components/button.js @@ -35,7 +35,7 @@ const Button = ({ ...(secondary && { ...buttonStyles.secondary }), ...(large && { ...buttonStyles.large }), ...(small && { ...buttonStyles.small }), - ...(tiny && { ...buttonStyles.tiny }), + ...(tiny && buttonStyles.tiny), }, } From 444eff7bc0e3c0e9fdc2e2395b670d9a7caf9a7d Mon Sep 17 00:00:00 2001 From: greglobinski Date: Mon, 29 Oct 2018 12:38:27 +0100 Subject: [PATCH 14/25] fix(www): fix stylelint errors --- www/src/components/ecosystem/ecosystem-section.js | 2 +- www/src/components/layout/layout-with-heading.js | 2 +- www/stylelint.config.js | 1 + 3 files changed, 3 insertions(+), 2 deletions(-) diff --git a/www/src/components/ecosystem/ecosystem-section.js b/www/src/components/ecosystem/ecosystem-section.js index 67cb750885d7a..3759d0cbfc52f 100644 --- a/www/src/components/ecosystem/ecosystem-section.js +++ b/www/src/components/ecosystem/ecosystem-section.js @@ -54,12 +54,12 @@ const Title = styled("h1")` span { margin: 0 0.3rem 0 -0.1rem; + :last-child { flex-grow: 1; } } ` - const Icon = styled("span")` display: block; width: 32px; diff --git a/www/src/components/layout/layout-with-heading.js b/www/src/components/layout/layout-with-heading.js index a33349df67abf..e0b0ee1016ef6 100644 --- a/www/src/components/layout/layout-with-heading.js +++ b/www/src/components/layout/layout-with-heading.js @@ -27,7 +27,7 @@ const Content = styled("div")` margin-left: ${presets.pageHeadingDesktopWidth}; padding-top: calc(${presets.bannerHeight} + ${presets.headerHeight}); padding-bottom: 0; - }, + } ` const StyledSkipNavLink = styled(SkipNavLink)` diff --git a/www/stylelint.config.js b/www/stylelint.config.js index 7d6c9e09da582..be82551130a48 100644 --- a/www/stylelint.config.js +++ b/www/stylelint.config.js @@ -5,6 +5,7 @@ module.exports = { "stylelint-config-styled-components", ], rules: { + "no-descending-specificity": null, "property-no-unknown": [ true, { From 3665e477629fd9a323f19d8253cae5c903ef341a Mon Sep 17 00:00:00 2001 From: greglobinski Date: Mon, 29 Oct 2018 20:07:16 +0100 Subject: [PATCH 15/25] fix(www): use gatsby-transformer-yaml to pull featured Ecosystem items --- www/gatsby-config.js | 7 ++ www/gatsby-node.js | 152 ++++++++++++++++++++++--------------------- www/package.json | 1 - 3 files changed, 84 insertions(+), 76 deletions(-) diff --git a/www/gatsby-config.js b/www/gatsby-config.js index 34fb1e2b62bee..7fc5ff95e792c 100644 --- a/www/gatsby-config.js +++ b/www/gatsby-config.js @@ -28,6 +28,13 @@ module.exports = { path: `${__dirname}/../packages/`, }, }, + { + resolve: `gatsby-source-filesystem`, + options: { + name: `ecosystem`, + path: `${__dirname}/src/data/ecosystem/`, + }, + }, { resolve: `gatsby-plugin-typography`, options: { diff --git a/www/gatsby-node.js b/www/gatsby-node.js index 5fb34d8bf3f76..5528a5d33bf57 100644 --- a/www/gatsby-node.js +++ b/www/gatsby-node.js @@ -9,11 +9,8 @@ const url = require(`url`) const getpkgjson = require(`get-package-json-from-github`) const parseGHUrl = require(`parse-github-url`) const { GraphQLClient } = require(`graphql-request`) -const yaml = require("js-yaml") -const ecosystemFeaturedItems = yaml.safeLoad( - fs.readFileSync("./src/data/ecosystem/featured-items.yaml", "utf8") -) +let ecosystemFeaturedItems require(`dotenv`).config({ path: `.env.${process.env.NODE_ENV}`, @@ -135,91 +132,97 @@ exports.createPages = ({ graphql, actions }) => { ) // Query for markdown nodes to use in creating pages. - graphql( - ` - query { - allMarkdownRemark( - sort: { order: DESC, fields: [frontmatter___date] } - limit: 10000 - filter: { fileAbsolutePath: { ne: null } } - ) { - edges { - node { - fields { - slug - package - } - frontmatter { - title - draft - canonicalLink - publishedAt - tags - } + graphql(` + query { + allMarkdownRemark( + sort: { order: DESC, fields: [frontmatter___date] } + limit: 10000 + filter: { fileAbsolutePath: { ne: null } } + ) { + edges { + node { + fields { + slug + package + } + frontmatter { + title + draft + canonicalLink + publishedAt + tags } } } - allAuthorYaml { - edges { - node { - fields { - slug - } + } + allAuthorYaml { + edges { + node { + fields { + slug } } } - allCreatorsYaml { - edges { - node { - fields { - slug - } + } + allCreatorsYaml { + edges { + node { + fields { + slug } } } - allSitesYaml(filter: { main_url: { ne: null } }) { - edges { - node { - fields { - slug - } + } + allSitesYaml(filter: { main_url: { ne: null } }) { + edges { + node { + fields { + slug } } } - allStartersYaml { - edges { - node { - id - fields { - starterShowcase { - slug - stub - } + } + allStartersYaml { + edges { + node { + id + fields { + starterShowcase { + slug + stub } - url - repo } + url + repo } } - allNpmPackage { - edges { - node { + } + allNpmPackage { + edges { + node { + id + title + slug + readme { id - title - slug - readme { + childMarkdownRemark { id - childMarkdownRemark { - id - html - } + html } } } } } - ` - ).then(result => { + allEcosystemYaml { + edges { + node { + starters + plugins + } + } + } + } + `).then(result => { if (result.errors) { return reject(result.errors) } @@ -386,6 +389,9 @@ exports.createPages = ({ graphql, actions }) => { } }) + // Read featured starters and plugins for Ecosystem + ecosystemFeaturedItems = result.data.allEcosystemYaml.edges[0].node + return resolve() }) }) @@ -589,17 +595,13 @@ exports.onCreatePage = ({ page, actions }) => { // add lists of featured items to Ecosystem page if (page.path === "/ecosystem/") { const { createPage, deletePage } = actions - return new Promise(resolve => { - const oldPage = Object.assign({}, page) - - page.context.featuredStarters = ecosystemFeaturedItems.starters - page.context.featuredPlugins = ecosystemFeaturedItems.plugins + const oldPage = Object.assign({}, page) - deletePage(oldPage) - createPage(page) + page.context.featuredStarters = ecosystemFeaturedItems.starters + page.context.featuredPlugins = ecosystemFeaturedItems.plugins - resolve() - }) + deletePage(oldPage) + createPage(page) } } diff --git a/www/package.json b/www/package.json index 399de386b40dd..eba7e71274d58 100644 --- a/www/package.json +++ b/www/package.json @@ -101,7 +101,6 @@ "get-package-json-from-github": "^1.2.1", "github-api": "^3.0.0", "husky": "^1.0.0-rc.14", - "js-yaml": "^3.12.0", "prettier": "^1.14.2", "pretty-quick": "^1.6.0", "stylelint": "^9.6.0", From 384e9ce095b7ca5f92bb6b287b7fc024cbba302c Mon Sep 17 00:00:00 2001 From: greglobinski Date: Mon, 29 Oct 2018 21:28:08 +0100 Subject: [PATCH 16/25] feat(www): add backkground icons to test it --- www/src/assets/ecosystem-background.svg | 519 ++++++++++++++++++ .../components/ecosystem/ecosystem-board.js | 10 +- .../components/ecosystem/ecosystem-section.js | 49 +- www/src/pages/ecosystem.js | 2 + 4 files changed, 548 insertions(+), 32 deletions(-) create mode 100644 www/src/assets/ecosystem-background.svg diff --git a/www/src/assets/ecosystem-background.svg b/www/src/assets/ecosystem-background.svg new file mode 100644 index 0000000000000..340fb164f3db0 --- /dev/null +++ b/www/src/assets/ecosystem-background.svg @@ -0,0 +1,519 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/www/src/components/ecosystem/ecosystem-board.js b/www/src/components/ecosystem/ecosystem-board.js index bc3f6167efade..168822bdca858 100644 --- a/www/src/components/ecosystem/ecosystem-board.js +++ b/www/src/components/ecosystem/ecosystem-board.js @@ -11,6 +11,10 @@ const EcosystemBoardRoot = styled("div")` flex-direction: column; ${presets.Tablet} { + background-image: url(${props => props.background}); + background-position: 1.5rem 2rem; + background-size: cover; + background-repeat: no-repeat; flex-direction: row; height: calc( 100vh - (${presets.bannerHeight} + ${presets.headerHeight} + 1px) @@ -23,9 +27,10 @@ const EcosystemBoard = ({ icons: { plugins: PluginsIcon, starters: StartersIcon }, starters, plugins, + background, }) => { return ( - + ) @@ -66,6 +71,7 @@ EcosystemBoard.propTypes = { icons: PropTypes.object, starters: PropTypes.array, plugins: PropTypes.array, + background: PropTypes.string, } export default EcosystemBoard diff --git a/www/src/components/ecosystem/ecosystem-section.js b/www/src/components/ecosystem/ecosystem-section.js index 3759d0cbfc52f..5c4e4a414036e 100644 --- a/www/src/components/ecosystem/ecosystem-section.js +++ b/www/src/components/ecosystem/ecosystem-section.js @@ -12,6 +12,7 @@ import { rhythm, options } from "../../utils/typography" import presets, { colors } from "../../utils/presets" const EcosysteSectionRoot = styled("section")` + background: #fff; margin-bottom: ${rhythm(0.5)}; padding: 0 ${rhythm(options.blockMarginBottom)}; @@ -96,39 +97,28 @@ const EcosysteSection = ({ subTitle, icon, links, - link, featuredItems, }) => (
- {links ? ( - - - {icon && } - {title} - - {description} - - {links.map((item, idx) => { - const { to, label, secondary } = item - - return ( - - ) - })} - - - ) : ( - - - {icon && <Icon dangerouslySetInnerHTML={{ __html: icon }} />} - {title} <ArrowForwardIcon /> - - {description} - - )} + + + {icon && <Icon dangerouslySetInnerHTML={{ __html: icon }} />} + <span>{title}</span> + + {description} + + {links.map((item, idx) => { + const { to, label, secondary } = item + + return ( + + ) + })} + + {subTitle && {subTitle}} @@ -145,7 +135,6 @@ EcosysteSection.propTypes = { subTitle: PropTypes.string, icon: PropTypes.string, links: PropTypes.array, - link: PropTypes.string, featuredItems: PropTypes.array, } diff --git a/www/src/pages/ecosystem.js b/www/src/pages/ecosystem.js index 3b00990fd5cf3..a7d5c0f37648a 100644 --- a/www/src/pages/ecosystem.js +++ b/www/src/pages/ecosystem.js @@ -11,6 +11,7 @@ import EcosystemBoard from "../components/ecosystem/ecosystem-board" import { EcosystemIcon } from "../assets/mobile-nav-icons" import { PluginsIcon, StartersIcon } from "../assets/ecosystem-icons" +import background from "../assets/ecosystem-background.svg" class EcosystemPage extends Component { render() { @@ -69,6 +70,7 @@ class EcosystemPage extends Component { icons={boardIcons} starters={starters} plugins={plugins} + background={background} /> ) From 5dea1e226394220f458e09adae08ddc6fd57c278 Mon Sep 17 00:00:00 2001 From: greglobinski Date: Mon, 29 Oct 2018 21:32:49 +0100 Subject: [PATCH 17/25] refactor(www): remove unnecessary destructuring in Button --- www/src/components/button.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/www/src/components/button.js b/www/src/components/button.js index 9103259c7c8b9..2779adf82a25c 100644 --- a/www/src/components/button.js +++ b/www/src/components/button.js @@ -32,9 +32,9 @@ const Button = ({ "&&": { ...buttonStyles.default, ...overrideCSS, - ...(secondary && { ...buttonStyles.secondary }), - ...(large && { ...buttonStyles.large }), - ...(small && { ...buttonStyles.small }), + ...(secondary && buttonStyles.secondary), + ...(large && buttonStyles.large), + ...(small && buttonStyles.small), ...(tiny && buttonStyles.tiny), }, } From d7682a5f3aa1e579b4713d6c0b0fabef0deabae8 Mon Sep 17 00:00:00 2001 From: greglobinski Date: Tue, 30 Oct 2018 13:52:21 +0100 Subject: [PATCH 18/25] fix(www): remove unnecessary infos --- .../ecosystem/ecosystem-featured-item.js | 105 ++++++------------ .../components/ecosystem/ecosystem-section.js | 5 - www/src/pages/ecosystem.js | 13 +-- 3 files changed, 38 insertions(+), 85 deletions(-) diff --git a/www/src/components/ecosystem/ecosystem-featured-item.js b/www/src/components/ecosystem/ecosystem-featured-item.js index b612256d3d801..ff6527e90ca21 100644 --- a/www/src/components/ecosystem/ecosystem-featured-item.js +++ b/www/src/components/ecosystem/ecosystem-featured-item.js @@ -26,6 +26,7 @@ const BlockLink = styled(Link)` border-radius: ${presets.radiusLg}px; box-shadow: 0 1px 8px rgba(0, 0, 0, 0.2); display: flex; + flex-direction: column; height: 100%; padding: ${rhythm(3 / 4)}; @@ -40,24 +41,7 @@ const BlockLink = styled(Link)` } } ` -const Abstract = styled("div")` - display: flex; - flex-direction: column; - flex-grow: 1; - justify-content: space-between; - height: 100%; - font-family: ${options.systemFontFamily.join(`,`)}; -` - -const Thumbnail = styled("div")` - padding-right: ${rhythm(2 / 3)}; - padding-top: ${rhythm(1 / 12)}; - img { - height: 64px; - width: 64px; - } -` const Header = styled("header")` display: flex; justify-content: space-between; @@ -83,32 +67,26 @@ const Header = styled("header")` } ` -const Description = styled("p")` +const Digest = styled("div")` + display: flex; flex-grow: 1; - font-size: 0.85rem; - margin: 0; - color: ${colors.gray.lightCopy}; + justify-content: space-between; + height: 100%; + font-family: ${options.systemFontFamily.join(`,`)}; padding: ${rhythm(0.5)} 0 0; ` -const Details = styled("p")` - color: ${colors.gray.bright}; - display: flex; - flex-grow: 0; - font-size: 0.8rem; - justify-content: space-between; - padding: ${rhythm(0.3)} 0 0; - - span:first-child { - background: ${colors.gray.superLight}; - border-radius: ${rhythm(1)}; - color: ${colors.gray.bright}; - padding: 0 5px; +const Thumbnail = styled("div")` + padding-right: ${rhythm(2 / 3)}; + margin-top: ${rhythm(1 / 12)}; + height: 64px; +` - ::first-letter { - text-transform: uppercase; - } - } +const Description = styled("p")` + color: ${colors.gray.lightCopy}; + flex-grow: 1; + font-size: 0.85rem; + margin: 0; ` const EcosystemFeaturedItem = ({ item, numberOfItems }) => { @@ -126,37 +104,28 @@ const EcosystemFeaturedItem = ({ item, numberOfItems }) => { return ( - {thumbnail && ( - - - - )} - -
-

{name}

- {humanDownloadsLast30Days && ( - - {humanDownloadsLast30Days} - - )} - {stars && ( - - {stars} - - )} -
- {description} - {(gatsbyMajorVersion || lastUpdated) && ( -
- {gatsbyMajorVersion && ( - {`${gatsbyMajorVersion[0][0]} v${ - gatsbyMajorVersion[0][1] - } `} - )} - {lastUpdated && Updated {lastUpdated}} -
+
+

{name}

+ {humanDownloadsLast30Days && ( + + {humanDownloadsLast30Days} + )} - + {stars && ( + + {stars} + + )} +
+ + + {thumbnail && ( + + + + )} + {description} + ) diff --git a/www/src/components/ecosystem/ecosystem-section.js b/www/src/components/ecosystem/ecosystem-section.js index 5c4e4a414036e..b701d62936c8a 100644 --- a/www/src/components/ecosystem/ecosystem-section.js +++ b/www/src/components/ecosystem/ecosystem-section.js @@ -49,16 +49,11 @@ const Title = styled("h1")` color: ${colors.gatsby}; display: flex; font-size: 1.25rem; - justify-content: space-between; margin: 0; padding-bottom: ${rhythm(0.5)}; span { margin: 0 0.3rem 0 -0.1rem; - - :last-child { - flex-grow: 1; - } } ` const Icon = styled("span")` diff --git a/www/src/pages/ecosystem.js b/www/src/pages/ecosystem.js index a7d5c0f37648a..281f29ff698d5 100644 --- a/www/src/pages/ecosystem.js +++ b/www/src/pages/ecosystem.js @@ -27,14 +27,7 @@ class EcosystemPage extends Component { const { node: { fields: { - starterShowcase: { - slug, - name, - description, - lastUpdated, - stars, - gatsbyMajorVersion, - }, + starterShowcase: { slug, name, description, stars }, }, childScreenshot: { screenshotFile: { @@ -48,9 +41,7 @@ class EcosystemPage extends Component { slug: `/starters${slug}`, name, description, - lastUpdated, stars, - gatsbyMajorVersion, thumbnail, } }) @@ -96,9 +87,7 @@ export const ecosystemQuery = graphql` slug description stars - lastUpdated(formatString: "MM/DD/YYYY") name - gatsbyMajorVersion } } childScreenshot { From 717e0845df55f01cca9ce04e79816b669705a184 Mon Sep 17 00:00:00 2001 From: greglobinski Date: Tue, 30 Oct 2018 13:55:36 +0100 Subject: [PATCH 19/25] fix(www): remove background --- www/src/assets/ecosystem-background.svg | 519 ------------------ .../components/ecosystem/ecosystem-board.js | 7 +- www/src/pages/ecosystem.js | 2 - 3 files changed, 1 insertion(+), 527 deletions(-) delete mode 100644 www/src/assets/ecosystem-background.svg diff --git a/www/src/assets/ecosystem-background.svg b/www/src/assets/ecosystem-background.svg deleted file mode 100644 index 340fb164f3db0..0000000000000 --- a/www/src/assets/ecosystem-background.svg +++ /dev/null @@ -1,519 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/www/src/components/ecosystem/ecosystem-board.js b/www/src/components/ecosystem/ecosystem-board.js index 168822bdca858..a2902b1d28bd8 100644 --- a/www/src/components/ecosystem/ecosystem-board.js +++ b/www/src/components/ecosystem/ecosystem-board.js @@ -11,10 +11,6 @@ const EcosystemBoardRoot = styled("div")` flex-direction: column; ${presets.Tablet} { - background-image: url(${props => props.background}); - background-position: 1.5rem 2rem; - background-size: cover; - background-repeat: no-repeat; flex-direction: row; height: calc( 100vh - (${presets.bannerHeight} + ${presets.headerHeight} + 1px) @@ -30,7 +26,7 @@ const EcosystemBoard = ({ background, }) => { return ( - + ) From a27b2fcfe7369337b657b37e9165761f1f38f78f Mon Sep 17 00:00:00 2001 From: greglobinski Date: Tue, 30 Oct 2018 14:05:48 +0100 Subject: [PATCH 20/25] feat(www): add function preventing too long description of featured items --- .../ecosystem/ecosystem-featured-item.js | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/www/src/components/ecosystem/ecosystem-featured-item.js b/www/src/components/ecosystem/ecosystem-featured-item.js index ff6527e90ca21..4f65472e0cf43 100644 --- a/www/src/components/ecosystem/ecosystem-featured-item.js +++ b/www/src/components/ecosystem/ecosystem-featured-item.js @@ -10,6 +10,8 @@ import ArrowDownwardIcon from "react-icons/lib/md/arrow-downward" import { rhythm, options } from "../../utils/typography" import presets, { colors } from "../../utils/presets" +const MAX_DESCRIPTION_LENGTH = 100 + const EcosystemFeaturedItemRoot = styled("li")` flex-basis: ${props => `calc(100% / ${props.numberOfItems})`}; float: left; @@ -94,13 +96,19 @@ const EcosystemFeaturedItem = ({ item, numberOfItems }) => { slug, name, description, - lastUpdated, stars, - gatsbyMajorVersion, humanDownloadsLast30Days, thumbnail, } = item + const cutTooLongDescription = str => { + if (str.length > MAX_DESCRIPTION_LENGTH) { + return `${str.substring(0, MAX_DESCRIPTION_LENGTH)}...` + } + + return str + } + return ( @@ -124,7 +132,7 @@ const EcosystemFeaturedItem = ({ item, numberOfItems }) => { )} - {description} + {cutTooLongDescription(description)} From 05b3a6d36de04537574150d39678923dd9443a20 Mon Sep 17 00:00:00 2001 From: greglobinski Date: Tue, 30 Oct 2018 14:58:05 +0100 Subject: [PATCH 21/25] fix(www): add border to starter thumbnails --- www/src/components/ecosystem/ecosystem-featured-item.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/www/src/components/ecosystem/ecosystem-featured-item.js b/www/src/components/ecosystem/ecosystem-featured-item.js index 4f65472e0cf43..77b179343c451 100644 --- a/www/src/components/ecosystem/ecosystem-featured-item.js +++ b/www/src/components/ecosystem/ecosystem-featured-item.js @@ -82,6 +82,10 @@ const Thumbnail = styled("div")` padding-right: ${rhythm(2 / 3)}; margin-top: ${rhythm(1 / 12)}; height: 64px; + + img { + border: 1px solid ${colors.gray.superLight}; + } ` const Description = styled("p")` From 50a68203a09c8e48522da89540b9ee22db171ac3 Mon Sep 17 00:00:00 2001 From: greglobinski Date: Tue, 30 Oct 2018 15:43:28 +0100 Subject: [PATCH 22/25] fix(www): refine Tablet styles --- .../components/ecosystem/ecosystem-board.js | 3 ++- .../ecosystem/ecosystem-featured-items.js | 2 +- .../components/ecosystem/ecosystem-section.js | 19 +++++++++++++++---- 3 files changed, 18 insertions(+), 6 deletions(-) diff --git a/www/src/components/ecosystem/ecosystem-board.js b/www/src/components/ecosystem/ecosystem-board.js index a2902b1d28bd8..fe80c2a6ae47a 100644 --- a/www/src/components/ecosystem/ecosystem-board.js +++ b/www/src/components/ecosystem/ecosystem-board.js @@ -12,10 +12,11 @@ const EcosystemBoardRoot = styled("div")` ${presets.Tablet} { flex-direction: row; + flex-wrap: wrap; height: calc( 100vh - (${presets.bannerHeight} + ${presets.headerHeight} + 1px) ); - padding: 2rem 1rem; + padding: 2rem 1rem 1rem; } ` diff --git a/www/src/components/ecosystem/ecosystem-featured-items.js b/www/src/components/ecosystem/ecosystem-featured-items.js index 17ad717f577e6..392f7bcc95cc1 100644 --- a/www/src/components/ecosystem/ecosystem-featured-items.js +++ b/www/src/components/ecosystem/ecosystem-featured-items.js @@ -28,7 +28,7 @@ const List = styled("ul")` list-style: none; margin: 0; padding: 0 calc(${rhythm(options.blockMarginBottom)} - 5px) 4px; - width: ${props => `calc(90vw * ${props.numberOfItems})`}; + width: ${props => `calc(80vw * ${props.numberOfItems})`}; ${presets.Tablet} { flex-direction: column; diff --git a/www/src/components/ecosystem/ecosystem-section.js b/www/src/components/ecosystem/ecosystem-section.js index b701d62936c8a..7ad60c9fa1089 100644 --- a/www/src/components/ecosystem/ecosystem-section.js +++ b/www/src/components/ecosystem/ecosystem-section.js @@ -13,8 +13,8 @@ import presets, { colors } from "../../utils/presets" const EcosysteSectionRoot = styled("section")` background: #fff; - margin-bottom: ${rhythm(0.5)}; padding: 0 ${rhythm(options.blockMarginBottom)}; + margin-bottom: ${rhythm(1 / 2)}; ${presets.Tablet} { box-shadow: 0 1px 8px rgba(0, 0, 0, 0.2); @@ -22,10 +22,20 @@ const EcosysteSectionRoot = styled("section")` display: flex; flex-direction: column; flex-grow: 0; - margin: 0 10px; + margin: 0 10px 20px; padding: ${rhythm(options.blockMarginBottom)}; padding-bottom: 0; - width: 33.33%; + flex-basis: calc(50% - 20px); + max-height: 60vh; + + :last-child { + flex-grow: 1; + } + } + + ${presets.Desktop} { + flex-basis: calc(33.33% - 20px); + max-height: none; :last-child { align-self: flex-start; @@ -37,6 +47,8 @@ const EcosysteSectionRoot = styled("section")` } ` const Header = styled("header")` + align-items: flex-start; + ${presets.Tablet}: { padding: ${rhythm(1)}; padding: 10px; @@ -45,7 +57,6 @@ const Header = styled("header")` ` const Title = styled("h1")` - align-items: center; color: ${colors.gatsby}; display: flex; font-size: 1.25rem; From d67ee3fdeba6c9b501d285eea76c13b3800d3a85 Mon Sep 17 00:00:00 2001 From: greglobinski Date: Tue, 30 Oct 2018 16:18:48 +0100 Subject: [PATCH 23/25] fix(www): fix desktop section height on FF --- www/src/components/ecosystem/ecosystem-section.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/www/src/components/ecosystem/ecosystem-section.js b/www/src/components/ecosystem/ecosystem-section.js index 7ad60c9fa1089..612ad15ed90cd 100644 --- a/www/src/components/ecosystem/ecosystem-section.js +++ b/www/src/components/ecosystem/ecosystem-section.js @@ -35,7 +35,7 @@ const EcosysteSectionRoot = styled("section")` ${presets.Desktop} { flex-basis: calc(33.33% - 20px); - max-height: none; + max-height: 100%; :last-child { align-self: flex-start; From 1ecdc990562f230f147a74a68a3cfd6498fd9693 Mon Sep 17 00:00:00 2001 From: greglobinski Date: Tue, 30 Oct 2018 17:12:07 +0100 Subject: [PATCH 24/25] fix(www): change Ecosystem sections headers --- www/src/components/ecosystem/ecosystem-board.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/www/src/components/ecosystem/ecosystem-board.js b/www/src/components/ecosystem/ecosystem-board.js index fe80c2a6ae47a..c322bfcb01b22 100644 --- a/www/src/components/ecosystem/ecosystem-board.js +++ b/www/src/components/ecosystem/ecosystem-board.js @@ -29,12 +29,12 @@ const EcosystemBoard = ({ return ( Date: Tue, 30 Oct 2018 22:09:21 +0100 Subject: [PATCH 25/25] fix(www): remove unused imports --- www/src/components/ecosystem/ecosystem-featured-items.js | 1 - www/src/components/ecosystem/ecosystem-section.js | 9 +++------ www/src/pages/ecosystem.js | 5 ----- 3 files changed, 3 insertions(+), 12 deletions(-) diff --git a/www/src/components/ecosystem/ecosystem-featured-items.js b/www/src/components/ecosystem/ecosystem-featured-items.js index 392f7bcc95cc1..9079664fe060a 100644 --- a/www/src/components/ecosystem/ecosystem-featured-items.js +++ b/www/src/components/ecosystem/ecosystem-featured-items.js @@ -1,7 +1,6 @@ import React from "react" import PropTypes from "prop-types" import styled from "react-emotion" -import { Link } from "gatsby" import EcosystemFeaturedItem from "./ecosystem-featured-item" diff --git a/www/src/components/ecosystem/ecosystem-section.js b/www/src/components/ecosystem/ecosystem-section.js index 612ad15ed90cd..fd123ad24bdea 100644 --- a/www/src/components/ecosystem/ecosystem-section.js +++ b/www/src/components/ecosystem/ecosystem-section.js @@ -1,9 +1,6 @@ import React 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 Button from "../button" import EcosystemFeaturedItems from "./ecosystem-featured-items" @@ -11,7 +8,7 @@ import EcosystemFeaturedItems from "./ecosystem-featured-items" import { rhythm, options } from "../../utils/typography" import presets, { colors } from "../../utils/presets" -const EcosysteSectionRoot = styled("section")` +const EcosystemSectionRoot = styled("section")` background: #fff; padding: 0 ${rhythm(options.blockMarginBottom)}; margin-bottom: ${rhythm(1 / 2)}; @@ -105,7 +102,7 @@ const EcosysteSection = ({ links, featuredItems, }) => ( - +
@@ -132,7 +129,7 @@ const EcosysteSection = ({ featuredItems.length > 0 && ( <EcosystemFeaturedItems items={featuredItems} /> )} - </EcosysteSectionRoot> + </EcosystemSectionRoot> ) EcosysteSection.propTypes = { diff --git a/www/src/pages/ecosystem.js b/www/src/pages/ecosystem.js index 2f12615daeb73..2d62c2cd14f05 100644 --- a/www/src/pages/ecosystem.js +++ b/www/src/pages/ecosystem.js @@ -1,12 +1,7 @@ import React, { Component } from "react" -import Helmet from "react-helmet" import { graphql } from "gatsby" -import { rhythm } from "../utils/typography" -import { colors } from "../utils/presets" - import Layout from "../components/layout/layout-with-heading" -import PageHeading from "../components/layout/page-heading" import EcosystemBoard from "../components/ecosystem/ecosystem-board" import { EcosystemIcon } from "../assets/mobile-nav-icons"