[themejam] Design showcase launch and winner announcement state for Theme Jam website

[prestonso]

Once we are close to or reach 12 contest entries, we need to design the showcase launch state for the Theme Jam website so that improvement of the Gatsby theme can proceed.

Specification

From @jlengstorf:

Showcase launch scope

Once we hit 12 entries (this is a good number because grids flow well at 6/4/3/2 wide) we’ll want to launch the showcase to show contest momentum and boost the visibility of community members who are submitting.

• Showcase page — probably sorted by most recent entries first in a simple grid.
  • Screenshot of the theme
  • Link to demo
  • GitHub avatar of the creator
  • Name of the creator
  • Link to the repo
  • Let’s avoid detail screens if we can. These entries will eventually live on .org’s showcase — this showcase should be intentionally simple.
• FAQ page
  • As we get questions from contestants, we should build out an FAQ page with answers to those questions. This page should be set up with a table of contents, then individually linkable headings for each FAQ.

Winner announcement scope

At the end of July, we’ll choose 1–3 winners — at that point we need to update the site to both announce the winners and end the contest.

• Update showcase to pin winners to the top
  • Design should highlight that these are the winners
  • Link to winner showcases
  • More prominent feature of creator avatars/names in the design
• Update the home page to show that the contest has ended.
  • We can update the copy later in July, but it will most likely be something like, “Theme Jam was…” and a link to view the entries/winners.
• Take down the submission form

[missmatsuko]

Would be nice if non-roman characters in screenshots could be fixed for this showcase, and the main one: https://github.com/gatsbyjs/gatsby/issues/5929

[fk]

Here's the first shots at Showcase and FAQ page designs:

Figma prototype / Source

• Showcase screenshot placeholders follow the aspect ratio of what gatsby-transformer-screenshot delivers for .org's showcase and starters (1,333…)
• Showcase entries follow the spec defined above…
  • but currently do add a theme title — however, the design should equally work w/o that
  • the winner entry doesn't currently feature the creator name more prominently (while it does so for the creator avatar)

Link to winner showcases

I couldn't figure that one out — plis help @jlengstorf! 🙏

[jlengstorf]

Lookin great so far! A few notes:

1. I'm pretty sure all the themes are going to be named gatsby-theme-*, so gatsby-theme-blog-purple or gatsby-theme-marvelous — we'll need to figure that out.
2. How does this work for pagination? I'm not sure we'll have a large enough number of components for a long list to affect performance (I mean, good problems if we get there), but will ~50 entries be too hard to navigate on one page?
3. Can we see this with real screenshots? I'm a little worried about how the speech bubble triangle will look with actual screenshots.
4. What are we planning to do for mobile nav? Do we have a standard approach in the Gatsby design system for this?

I'm excited about the FAQ section — we can use CSS :nth-child() to alternate callout styles, which will be doooooope. 🎉

[missmatsuko]

Just noticed the submission form actually asks for a 900x600 screenshot (so 1.5 ratio, and maybe don't need gatsby-transformer-screenshot): https://airtable.com/shrqRYknYY50YCzeq

[KyleAMathews]

Now I want to make a theme called Smithsonian — obviously using the Cooper Hewitt font from https://www.cooperhewitt.org/ :-P 🤔

[jlengstorf]

@missmatsuko good catch! Yes, I actually wanted to avoid the screenshot plugin and let theme authors do a bit of art direction if they wanted. 😄 @fk I should have called that out specifically, sorry.

[fk]

I should have called that out specifically, sorry.

No need to be sorry—I could have noticed that myself! I'll adjust the designs now regarding the screenshot aspect ratio, and add pagination, real screenshots, and a take at the mobile nav (which the design system doesn't have, but will be something hamburger-ish).

[fk]

Updated:

• added pagination, based on what we have on gatsbyjs.org/blog
• adjusted thumbnail aspect ratio
• added "real" thumbnails (thanks for making calling that out Jason!)
• also moved the WINNER badge outside of the thumbnail—makes even more sense given the 1.5 aspect ratio of the image
• slightly tweaked the original Showcase item design to make things work for thumbnails with a predominantly white background

• added an alternative, (really ;-)) simple Showcase item design

• added a simple mobile menu mock, based on prior work for gatsbyjs.com

Figma prototype / Source

[fk]

Almost forgot: Updated the item titles to something relatively plausible, chopping the gatsby-theme-* bit away… 🤷‍♂ 😿

[jlengstorf]

This is great, @fk! For the sake of simplicity/maximizing exposure for the theme screenshot, I think the simplified version makes sense.

@gillkyle @amberleyromo any feedback here? If not, I think we're ready to start turning this into code. Kyle, are you able to take the lead on building out the UI? I'll handle the data sourcing for it, so don't worry about that part.

[fk]

Closing for now, lmk if you need anything!

[fk]

Ah hold on, this has "winner announcement state" in the issue title … reopening.

[gatsbot[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contributefor more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[fk]

@jlengstorf With https://www.gatsbyjs.org/blog/2019-08-07-theme-jam/ out I think this might be good to close? Or do we need a dedicated page for https://themejam.gatsbyjs.org announcing the winners?

[fk]

Oh just noticed that the "WINNER" label (see designs) seems missing (latest Chrome)—was that intentional?

[gillkyle]

Oh woops, the Winner label was a little hacky with a pseudo-selector I think, maybe it just got missed somewhere.