feat(www): tagline on plugin library landing page #12530

calcsam · 2019-03-12T22:43:24Z

This is an idea for a tagline for the plugin page to illustrate how versatile the Gatsby plugin ecosystem is.

What do y'all think? @KyleAMathews @fk @marcysutton @amberleyromo?

If we want to ship this we should:

turn it off (set to "anything") if there's anything in the search bar to avoid it being distracting
see if we want to pretty up the design at all (tweak the line spacing on 3rd line, hover on the links)

calcsam · 2019-03-12T22:58:51Z

Alternate design, a bit more lightweight (second commit). Instead of < and > we probably want slightly larger, clickable chevron icons that overlap both lines. But you get the idea.

wardpeet

This looks great! It looks a bit janky to me so I'm thinking of making the widths of the dynamic parts fixed so you get some extra spacing if it's smaller but it won't jump around. Another option which takes a bit more time is to use translates to move the text in front. I can do that in a followup.

The second one is more subtle as it has only 1 moving part but unsure if it's clear enough. I'll let the pros decide 😄

I love the design, it makes it more interactive!

wardpeet · 2019-03-13T07:12:41Z

www/src/components/rotater.js

+    })
+  }
+  componentDidMount() {
+    const intervalId = setInterval(() => this.incrementItem(), 5000);


I'm wondering if we should work with onAnimationEnd event instead of an interval? If we keep an interval I would suggest to use setTimeout instead as setInterval might not be 5s over time and setTimeout always will be.

marcysutton · 2019-03-13T07:23:47Z

One thing I'm wondering is if there's a way to introduce a stop button so the rotating text doesn't distract people. We could use prefers-reduced-motion in CSS or JS to respect user preferences in supported browsers...but an additional icon button would help, too.

calcsam · 2019-03-13T21:33:02Z

these seem like good ideas! right now clicking the arrows will stop the rotation.

@fk offered to take this over to prettify this and get it merged in!

fk · 2019-03-13T21:57:01Z

@wardpeet

This looks great! It looks a bit janky to me so I'm thinking of making the widths of the dynamic parts fixed so you get some extra spacing if it's smaller but it won't jump around. Another option which takes a bit more time is to use translates to move the text in front. I can do that in a followup.

💯, https://github.com/braposo/react-text-loop/tree/master/ -like behavior would be great.
To avoid the extra spacing, maybe we could tweak the copy to something that allows us to put an equivalent to the current "Need" on its own line … e.g.

Looking for
responsive images?

or something?

💯 to everything that @marcysutton said, too — maybe if we don't want to invest in play/pause just hide the whole thing if the user prefers-reduced-motion?

wardpeet · 2019-03-15T08:14:26Z

We could go for react-text-loop to get this one going. I'm not the biggest fan as it's quite big https://bundlephobia.com/result?p=react-text-loop@2.0.1
20kb is pretty big in js world

marcysutton · 2019-03-15T21:02:36Z

Whatever we do end up using, I'd love to review it for accessibility prior to shipping as rotating things usually need a little help.

fk · 2019-03-19T21:57:22Z

First measures to get an initial version ready to ship:

added icons and screenreader text ("Previous", "Next") to the control buttons, turned them into actual <button>s (so they are focusable), and updated their position:

Instead of < and > we probably want slightly larger, clickable chevron icons that overlap both lines
added animation of the alternating text's width

fk · 2019-03-19T22:16:25Z

Simpler:

# Conflicts: # www/src/pages/plugins.js

DSchau

@fk awesome job on this. Left some nit-picky React comments (which I'm happy to make the changes!) but otherwise this looks so nice.

www/src/components/rotater.js

fk · 2019-03-20T17:02:51Z

Wooah thanks @DSchau for the review! Right in time for @wardpeet and me pairing to push this over the finish line. Btw. what's your favorite — minimal or "welled"?

DSchau · 2019-03-20T17:03:39Z

@fk I like the minimal--presuming that's the one without a background and a slight grey border?

But they both look great 💜

fk · 2019-03-20T17:32:06Z

"minimal" is this one:

~~And you are in favor of that one~~ Edit: No you are not, I just can't read anymore 😅 — this is "welled":

This reverts commit c73b55f.

DSchau · 2019-03-20T18:18:52Z

Just to be 100% clear I like this one better :) But I defer to you--both are great!

fk · 2019-03-20T20:31:33Z

www/src/components/rotator.js

-                <Slider
-                  items={[text]}
-                  color={`#000`}
-                  getSize={size => this.setState({ size })}


Argh! Thanks for catching that @wardpeet! 🙏

fk · 2019-03-20T20:39:22Z

@wardpeet and myself (with the help of @DSchau 🙏) settled on the "minimal" variant, and think it's good to ship as a first version:

Summing up, we modified @calcsam's first shot to

animate the alternating text's width to make the transition less "jumpy"
play nice on smaller screens (in context of the current slider content)
update control buttons UI and position according to @calcsam's comment

Instead of < and > we probably want slightly larger, clickable chevron icons that overlap both lines
hopefully be accessible enough to ship — @marcysutton could you please take a look and let us know if we missed anything?
- turn control buttons into actual <button>s (so they are focusable), add icons, screenreader text ("Previous", "Next"), and aria-controls attributes
- honor prefers-reduced-motion — if set, we completely disable fade and width animations
- aria-live set to either off or polite, depending on prefers-reduced-motion

We didn't look into disabling the slider if there's anything in the search bar because we didn't find it too distracting.

/cc @calcsam

calcsam · 2019-03-20T21:28:54Z

Holy smokes, this looks beautiful @fk!

DSchau

This does indeed look beautiful.

Nicely done everyone! Pulling it down and taking a look; will merge in a bit!

sidharthachatterjee · 2019-03-21T15:29:25Z

Just leaving this to mention that this looks so beautiful! Love it. Great work Flo!

DSchau · 2019-03-21T15:48:13Z

Heads up - this broke SSR because we weren't guarding window with a window.matchMedia call (easy to miss!). Will PR a quick fix in a sec!

## Description Fixes a tiny regression re: SSR rendering introduced in #12530 Validated this by: 1. Ensuring rotater animates (by default!) in built version 1. Ensuring rotater _does not_ animate when reduced motion is enabled in System Preferences - Accessibility 1. Ensuring site can build with `gatsby build` & `gatsby serve`

fk · 2019-03-21T16:30:53Z

🙏 @DSchau! (and @sid, and @calcsam, and @marcysutton, and @wardpeet!)

wardpeet · 2019-03-21T17:19:29Z

Ugh my bad sorry 🙏

tagline on plugins page

ab80b4d

calcsam requested a review from a team as a code owner March 12, 2019 22:43

slightly more lightweight design

b79520a

wardpeet reviewed Mar 13, 2019

View reviewed changes

fk added 5 commits March 19, 2019 17:26

Format, fix cursor: pointer

705137a

Format moar

38bf8c7

Replace </> with icons

7b6f61d

Basic a11y for control buttons, consolidate styles

c856b8a

Animate width of alternating text

b502cc5

Simpler UI, tidy margins

d710c49

fk added 3 commits March 20, 2019 15:56

Merge branch 'master' into tagline-on-plugins-page

387dd49

# Conflicts: # www/src/pages/plugins.js

Adjust to latest changes from master

bbbb411

Adjust border color

079e9e0

DSchau approved these changes Mar 20, 2019

View reviewed changes

fk added 5 commits March 20, 2019 18:33

Fix issues on smaller screens

c320e25

Bring back the „well“

c73b55f

Revert "Bring back the „well“"

49c3773

This reverts commit c73b55f.

Make „control button“ hover more visible, add :active styles

1abfbc3

Rename Rotater -> Rotator

d41c169

wardpeet added 2 commits March 20, 2019 19:56

Fix review - cleanup some code

395f794

update accessbility

f1eb9b9

fk reviewed Mar 20, 2019

View reviewed changes

DSchau approved these changes Mar 21, 2019

View reviewed changes

DSchau changed the title ~~feat(docs): tagline on plugin library landing page~~ feat(www): tagline on plugin library landing page Mar 21, 2019

DSchau merged commit d9c11ca into master Mar 21, 2019

DSchau deleted the tagline-on-plugins-page branch March 21, 2019 15:37

DSchau mentioned this pull request Mar 21, 2019

fix(www): ensure rotator is ssr-friendly #12726

Merged

marcysutton mentioned this pull request Mar 21, 2019

[gatsby-site] Accessibility issues in rotating plugin feature #12739

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(www): tagline on plugin library landing page #12530

feat(www): tagline on plugin library landing page #12530

calcsam commented Mar 12, 2019 •

edited by fk

Loading

calcsam commented Mar 12, 2019

wardpeet left a comment •

edited

Loading

wardpeet Mar 13, 2019

marcysutton commented Mar 13, 2019

calcsam commented Mar 13, 2019

fk commented Mar 13, 2019

wardpeet commented Mar 15, 2019

marcysutton commented Mar 15, 2019

fk commented Mar 19, 2019

fk commented Mar 19, 2019

DSchau left a comment

fk commented Mar 20, 2019

DSchau commented Mar 20, 2019

fk commented Mar 20, 2019 •

edited

Loading

DSchau commented Mar 20, 2019

fk Mar 20, 2019

fk commented Mar 20, 2019

calcsam commented Mar 20, 2019

DSchau left a comment

sidharthachatterjee commented Mar 21, 2019 •

edited

Loading

DSchau commented Mar 21, 2019 •

edited

Loading

fk commented Mar 21, 2019

wardpeet commented Mar 21, 2019

feat(www): tagline on plugin library landing page #12530

feat(www): tagline on plugin library landing page #12530

Conversation

calcsam commented Mar 12, 2019 • edited by fk Loading

calcsam commented Mar 12, 2019

wardpeet left a comment • edited Loading

Choose a reason for hiding this comment

wardpeet Mar 13, 2019

Choose a reason for hiding this comment

marcysutton commented Mar 13, 2019

calcsam commented Mar 13, 2019

fk commented Mar 13, 2019

wardpeet commented Mar 15, 2019

marcysutton commented Mar 15, 2019

fk commented Mar 19, 2019

fk commented Mar 19, 2019

DSchau left a comment

Choose a reason for hiding this comment

fk commented Mar 20, 2019

DSchau commented Mar 20, 2019

fk commented Mar 20, 2019 • edited Loading

DSchau commented Mar 20, 2019

fk Mar 20, 2019

Choose a reason for hiding this comment

fk commented Mar 20, 2019

calcsam commented Mar 20, 2019

DSchau left a comment

Choose a reason for hiding this comment

sidharthachatterjee commented Mar 21, 2019 • edited Loading

DSchau commented Mar 21, 2019 • edited Loading

fk commented Mar 21, 2019

wardpeet commented Mar 21, 2019

calcsam commented Mar 12, 2019 •

edited by fk

Loading

wardpeet left a comment •

edited

Loading

fk commented Mar 20, 2019 •

edited

Loading

sidharthachatterjee commented Mar 21, 2019 •

edited

Loading

DSchau commented Mar 21, 2019 •

edited

Loading