feat(www): Ecosystem page content - finished #9442

greglobinski · 2018-10-26T17:26:01Z

create www/src/data/ecosystem/featured-items.yaml file with manually selected plugins and starters featured on Ecosystem page
add featured items to Ecosystem page context using onCreatePage in gatsby-node.js
install js-yaml to load featured-items.yaml
add new svg files with icons and ecosystem-icons.js helper
add new tiny variant of Button component
create Ecosystem components: ecosystem-board.js, ecosystem-section.js, ecosystem-featured-items.js, ecosystem-featured-item.js
add GraphQL query and data preparation to pages/ecosystem.js
add a couple of colors to the palette

I'm not sure if the way I implemented 'manually' featured items of starters and plugins for the page is the right way to do it in the end, but for development it works. Please give me directions if it needs to be implemented in other way.

It's WIP, there are, first of all, responsiveness issues which needs to be resolved, I've already asked @flo for the meeting to talk about them.

amberleyromo

Couple notes and thoughts for consideration. It's looking beautiful!! 💜

amberleyromo · 2018-10-26T19:51:38Z

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")


Did you look at pulling this in using gatsby-transformer-yaml instead? This shouldn't be necessary.

#9442 (comment)

www/gatsby-node.js

amberleyromo · 2018-10-26T19:52:41Z

www/src/components/ecosystem/ecosystem-board.js

+      <EcosystemSection
+        title="Plugin Library"
+        description="With 429 plugins, lorem ipsum sunt we need some proper copy here pulling in data from your favorite source is only a few mouseclicks away."
+        subTitle="Fetured Plugins"


"Featured" (minor, just noting it while we see it!)

amberleyromo · 2018-10-26T19:52:49Z

www/src/components/ecosystem/ecosystem-board.js

+      <EcosystemSection
+        title="Starters"
+        description="Starters are boilerplate Gatsby sites maintained by the community which give you a headstart for your Gatsby project."
+        subTitle="Fetured Starters"


www/src/data/ecosystem/featured-items.yaml

DSchau · 2018-10-26T22:18:00Z

www/gatsby-node.js

+  // add lists of featured items to Ecosystem page
+  if (page.path === "/ecosystem/") {
+    const { createPage, deletePage } = actions
+    return new Promise(resolve => {


Not sure a Promise is needed here!

I don't believe this section will be necessary -> https://github.com/gatsbyjs/gatsby/pull/9442/files/c74e8d61c236371c553b1d634ecbca8d371544cb#diff-fb043578f52339bcb2a2d2b4df1203c8

Edit: I'm wrong

@DSchau
When I remove the Promise like that

exports.onCreatePage = ({ page, actions }) => { // add lists of featured items to Ecosystem page if (page.path === "/ecosystem/") { const { createPage, deletePage } = actions const oldPage = Object.assign({}, page) page.context.featuredStarters = ecosystemFeaturedItems.starters page.context.featuredPlugins = ecosystemFeaturedItems.plugins deletePage(oldPage) createPage(page) } }

it works, but could you give me a hint why there is a promise in the docs
https://www.gatsbyjs.org/docs/creating-and-modifying-pages/#modifying-pages-created-by-core-or-plugins? For me it seems like a similar case.

CC: @amberleyromo

@greglobinski that's a great point. To me, that example should be re-written, there's nothing async required there as far as I can tell.

DSchau · 2018-10-26T22:18:44Z

www/src/assets/plugins-ecosystem.svg

@@ -0,0 +1,38 @@
+<svg  viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">


nit: but we can/should optimize/prettify these. I've always liked https://jakearchibald.github.io/svgomg/

DSchau · 2018-10-26T22:19:32Z

www/src/components/button.js

@@ -34,6 +35,7 @@ const Button = ({
      ...(secondary && { ...buttonStyles.secondary }),
      ...(large && { ...buttonStyles.large }),
      ...(small && { ...buttonStyles.small }),
+      ...(tiny && { ...buttonStyles.tiny }),


Not new here, but I'm not sure I see the value of spreading to a new object here?

...(tiny && buttonStyles.tiny)

should do the same thing, correct?

😬 👋 🙆‍♂️

@fk tbh i have no idea what that means

@amberleyromo I think he's referring to the fact that he originally wrote it!

@fk correct if I'm wrong, haha!

@fk I also :)

y'all are more emoji-native than I am!

Yep, that was me saying "argh, hello, i did this, OK, i get it now". And putting myself in Amberley's shoes, probably wouldn't have figured it out myself. 😅

DSchau · 2018-10-26T22:22:39Z

www/src/pages/ecosystem.js

+        node: { slug, name, description, humanDownloadsLast30Days },
+      } = item
+
+      return {


Maybe just return the node, since you're grabbing every field anyways?

i.e.

const plugins = pluginsData.map(({ node }) => node)

www/src/components/button.js

…tems

amberleyromo

This is such clean work, @greglobinski. Thanks so much! I just have a couple of tiny requests, while we have this in PR.

amberleyromo · 2018-10-30T19:55:07Z

www/src/components/ecosystem/ecosystem-section.js

+import { rhythm, options } from "../../utils/typography"
+import presets, { colors } from "../../utils/presets"
+
+const EcosysteSectionRoot = styled("section")`


Small cleanup task -- make this EcosystemSectionRoot? (tiny misspelling)

amberleyromo · 2018-10-30T20:03:18Z

www/src/components/ecosystem/ecosystem-section.js

+import styled from "react-emotion"
+import { Link } from "gatsby"
+
+import ArrowForwardIcon from "react-icons/lib/md/arrow-forward"


we should provide some linting step or something to catch these early!

(tangential to this PR!)

we should provide some linting step or something to catch these early!

That would be great 👍

amberleyromo · 2018-10-30T20:03:24Z

www/src/components/ecosystem/ecosystem-section.js

+import React from "react"
+import PropTypes from "prop-types"
+import styled from "react-emotion"
+import { Link } from "gatsby"


amberleyromo · 2018-10-30T20:03:43Z

www/src/components/ecosystem/ecosystem-featured-items.js

+import React from "react"
+import PropTypes from "prop-types"
+import styled from "react-emotion"
+import { Link } from "gatsby"


www/src/data/ecosystem/featured-items.yaml

amberleyromo · 2018-10-30T20:09:31Z

www/src/pages/ecosystem.js

@@ -1,28 +1,114 @@
 import React, { Component } from "react"
 import Helmet from "react-helmet"
+import { graphql } from "gatsby"


Looks like a couple of unused imports in this file, too.

"react-helmet"

"../utils/typography"

"../utils/presets"

"../components/layout/page-heading"

amberleyromo · 2018-10-30T20:10:57Z

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`,


were these color additions discussed with @fk? just making sure.

@amberleyromo No, sorry I forgot, I got it from Figma

And did not want to add it as a hard coded inline value inside the component, but definitely @fk sould take a loot at this.

👍 All fine (as expected ;-))—also not explicitly discussing those before IMO as the design defines them.
Actually I saw them a couple days already and was happy to find out I managed to cook up a design that doesn't add 10 greys ;-) …

That said, I absolutely will appreciate a heads up if I go overboard on new colors (or too light ones, I do that way too often), or any critique or suggestion on how to keep color additions down to a minimum. More generally speaking—in any case, if there's a better way to archive a similar goal, or you have any concerns about what I'm suggesting, or better ideas: Please don't hesitate to bring it up!

amberleyromo · 2018-10-30T20:16:21Z

Also I'm even more sold on this styling technique. I found it very clean to read. @DSchau @jlengstorf

DSchau · 2018-10-30T20:18:28Z

@amberleyromo 🎉 glad to hear it! I still do think it's worth doing styled.div instead of styled("div") but that's mostly just because it's a few less keystrokes, which isn't the best reason.

@greglobinski do you have any preference here?

My preference is a small one, totally fine writing it either way!

amberleyromo · 2018-10-30T20:23:09Z

@greglobinski I'm also going to write some copy for the three sections, so we can get rid of the placeholder text 😅

greglobinski · 2018-10-30T20:23:58Z

@DSchau It's not a preference but I made a comment here about the shortcut syntax
#9377 (comment)

amberleyromo · 2018-10-30T20:28:59Z

~~@DSchau I can't explain my preference for styled("div") but it's there. Why don't we do a poll in Slack and just go with whatever it is? We just need to decide and run with it.~~

Edit: Compelling: #9377 (comment). Thanks @greglobinski.

greglobinski · 2018-10-30T20:30:28Z

@amberleyromo please take a look at my comment here #9377 (comment) first

fk · 2018-10-31T12:56:51Z

🎉 💜 🤗 🙏 😅

* feat(www): prepare featured items forEcosystem * feat(www): add new icons for Ecosystem * feat(www): Ecosystem content * feat(www): create Ecosystem mobile styles * feat(www): add new variant of Button * feat(www): Ecosystem desktop styles * feat(www): add thumbnail to featured starters * fix(www): fix button label * fix(www): fix typo * refactor(www): prettify svg code * refactor(www): remove unnecessary destructuring * fix(www): use slug to pick up featured starters * refactor(www): remove unnecessary spreading to a new object * fix(www): fix stylelint errors * fix(www): use gatsby-transformer-yaml to pull featured Ecosystem items * feat(www): add backkground icons to test it * refactor(www): remove unnecessary destructuring in Button * fix(www): remove unnecessary infos * fix(www): remove background * feat(www): add function preventing too long description of featured items * fix(www): add border to starter thumbnails * fix(www): refine Tablet styles * fix(www): fix desktop section height on FF * fix(www): change Ecosystem sections headers * fix(www): remove unused imports

greglobinski added 8 commits October 26, 2018 11:48

feat(www): prepare featured items forEcosystem

d21ab82

feat(www): add new icons for Ecosystem

0d6efa8

feat(www): Ecosystem content

ff39f86

feat(www): create Ecosystem mobile styles

e57066b

feat(www): add new variant of Button

90f236b

feat(www): Ecosystem desktop styles

bcc7cbe

feat(www): add thumbnail to featured starters

5be8786

fix(www): fix button label

c74e8d6

greglobinski requested a review from a team as a code owner October 26, 2018 17:26

greglobinski requested review from fk, jlengstorf and amberleyromo October 26, 2018 17:26

amberleyromo suggested changes Oct 26, 2018

View reviewed changes

DSchau reviewed Oct 26, 2018

View reviewed changes

greglobinski added 7 commits October 29, 2018 10:39

fix(www): fix typo

4c8585a

refactor(www): prettify svg code

38ed5b9

refactor(www): remove unnecessary destructuring

cfb01ce

fix(www): use slug to pick up featured starters

1519fe3

refactor(www): remove unnecessary spreading to a new object

bd034d6

fix(www): fix stylelint errors

444eff7

fix(www): use gatsby-transformer-yaml to pull featured Ecosystem items

3665e47

fk reviewed Oct 29, 2018

View reviewed changes

www/src/components/button.js Show resolved Hide resolved

greglobinski added 5 commits October 29, 2018 21:28

feat(www): add backkground icons to test it

384e9ce

refactor(www): remove unnecessary destructuring in Button

5dea1e2

fix(www): remove unnecessary infos

d7682a5

fix(www): remove background

717e084

feat(www): add function preventing too long description of featured i…

a27b2fc

…tems

greglobinski added 4 commits October 30, 2018 14:58

fix(www): add border to starter thumbnails

05b3a6d

fix(www): refine Tablet styles

50a6820

fix(www): fix desktop section height on FF

d67ee3f

fix(www): change Ecosystem sections headers

1ecdc99

greglobinski changed the title ~~feat(www): Ecosystem page content [WIP]~~ feat(www): Ecosystem page content - finished Oct 30, 2018

amberleyromo reviewed Oct 30, 2018

View reviewed changes

amberleyromo mentioned this pull request Oct 30, 2018

[ecosystem] change starter slugs #9578

Closed

fix(www): remove unused imports

9722f98

amberleyromo approved these changes Oct 30, 2018

View reviewed changes

amberleyromo merged commit 9b816cc into gatsbyjs:master Oct 30, 2018

greglobinski deleted the gl/ecosystem/content branch November 15, 2018 22:15

		@@ -0,0 +1,38 @@
		<svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">

feat(www): Ecosystem page content - finished #9442

feat(www): Ecosystem page content - finished #9442

Conversation

greglobinski commented Oct 26, 2018

amberleyromo left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

amberleyromo Oct 26, 2018 • edited Loading

Choose a reason for hiding this comment

greglobinski Oct 29, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

DSchau Oct 26, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

amberleyromo left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

amberleyromo commented Oct 30, 2018

DSchau commented Oct 30, 2018

amberleyromo commented Oct 30, 2018

greglobinski commented Oct 30, 2018

amberleyromo commented Oct 30, 2018 • edited Loading

greglobinski commented Oct 30, 2018

fk commented Oct 31, 2018

amberleyromo Oct 26, 2018 •

edited

Loading

greglobinski Oct 29, 2018 •

edited

Loading

DSchau Oct 26, 2018 •

edited

Loading

amberleyromo commented Oct 30, 2018 •

edited

Loading