Gatsby: [EPIC] Site Showcase MVP cleanup

[shannonbux]

MVP

Here's what we already finished in Issue #4392:

MVP (minimum viable product)
Users should be able to:

• [x] See screenshots (Landing page)
• [x] See source code (Site detail page)
• [x] Share sites by copying the URL
• [x] Filter by category
• [x] Search
• [x] Submit their own site to the showcase through yaml file (Shannon writes the instructions)
• [x] See featured sites
• [x] Decide where the Site Showcase will live
• [x] Ship it - deploy
• [x] Share link to Site Showcase on Twitter
• [x] Publish blogpost

Bugs

• [x] screenshots don't swap out immediately when clicking to next site (https://github.com/gatsbyjs/gatsby/pull/5524#issuecomment-397727214)
• [x] facets should be "cumulative" e.g. if you click on two facets you should see all the sites for both of them. OR we need to update the counts on the facets to only show sites that have both categories.
  
  
  
  • when a filter is selected any category that is not related to any sites left by the filter should be hidden, as selecting them would have no effect on the state of the page
  
  
• [x] Page renderer (https://gatsbyjs.slack.com/archives/CA5LQE70T/p1529066790000590)
• [x] Current build time is too long (super big images on permalink pages could be adding to build time)
• [x] Details page has weird commas in the title, seems funky: https://github.com/gatsbyjs/gatsby/issues/6714
• [ ] Share links currently link to the person's page, with no mention of Gatsby: #6715
• [x] Broken links:
  
  
  
  • http://localhost:8000/showcase/formidable-com (seems to work now: https://next.gatsbyjs.org/showcase/formidable.com/)
  
  
  • http://localhost:8000/showcase/thefmg-com (seems to work now: https://next.gatsbyjs.org/showcase/thefmg.com/)
  
  
• [ ] Make site detail modal responsive: #6723
• [ ] Make category filter "accordion" responsive: #6724
• [ ] Screenshots are not rendering non-roman characters: #5929
• [ ] Site showcase jumps to top of page when closing a site modal: #6552
• [ ] Fix showcase header position: #6748

Next iterations

Feel free to grab any part of this project and contribute or discuss new possibilities!

Phase 2
Users ought to be able to:

• [x] URL reflects filtered state (@sw-yx already implemented this in starter showcase)
• [ ] filter on mobile: @ThatOtherPerson's repo has a PR adding the non-functional UI parts: https://github.com/ThatOtherPerson/gatsby/pull/6
• [ ] filter by whether a site is open source or not
• [ ] Sort by date added (won't matter until ppl start submitting sites)
• [x] click on a category name from the modal to filter by that category
• [ ] Share sites with a social media / URL copy button in a modal
• [ ] visit a personal page for creators of sites (see all sites they have submitted)

Phase 3
It'd be awesome if users could:

• [ ] For non-developers, have a CTA where they can hire someone to build them a Gatsby site / ask for demo, etc. (could be on upper menu, in which case it would not belong to site showcase)
• [ ] See case studies related to sites
• [ ] See a list of the site's dependencies
• [ ] Sort by date updated for sites with open src code
• [ ] See the performance of each site in action (GIFs, performance metrics, data on traffic improvement after the site switched to Gatsby,etc.)
• [ ] See a list of all sites that use a particular plugin (this would be a change to the plugin library, probably)
• [ ] Sign up to get notifications or updates when new sites are added (or just sign up for the newsletter?)
• [ ] Be guided to the tutorials if they want to build sites like the ones they are seeing

[KyleAMathews]

Want to add a bugs section? Current bugs I saw clicking around briefly were a) screenshots don't swap out immediately when clicking to next site and b) facets should be "cumulative" e.g. if you click on two facets you should see all the sites for both of them. OR we need to update the counts on the facets to only show sites that have both categories.

[shannonbux]

@KyleAMathews added bugs section thanks!

[kkemple]

• [x] refactor site showcase code
• [x] make filters deep-linkable
• [x] make filtering cumulative
• [x] make categories on details links to filtered states

are handled in PR #6095

[fk]

Just updated the issue description, changing the following:

• Ticked off the MVP's
  
  
  
  • "Share link to Site Showcase on Twitter"
  
  
  • "Publish blogpost"
  
  
• and the following _Bugs_:
  
  
  
  • "facets should be "cumulative" e.g. […]"
  
  
  • "Broken links:" and added the working URLs for the two listed sites.
  
  
• Added an issue tracking "Details page has weird commas in the title, seems funky": https://github.com/gatsbyjs/gatsby/issues/6714.
• Added an issue providing a place to discuss "Share links currently link to the person's page, with no mention of Gatsby": https://github.com/gatsbyjs/gatsby/issues/6715.
• Moved stuff from "Phase 2" to bugs:
  
  
  
  • Updated "How to change modal layout so it is responds to smaller window size (modal is hard-coded at 750px right now and is not responsive)" to "Make site detail modal responsive", created and linked an issue for that: https://github.com/gatsbyjs/gatsby/issues/6723
  
  
  • Updated "The categories on the left-hand side (accordions) are hard-coded at 500px right now. To make them responsive to a smaller window size, could throw them in a container and add scrolling?" to "Make site detail modal responsive", created and linked an issue for that: https://github.com/gatsbyjs/gatsby/issues/6723
  
  
• Added issues to the list of _Bugs_:
  
  
  
  • Screenshots are not rendering non-roman characters: #5929
  
  
  • Site showcase jumps to top of page when closing a site modal: #6552
  
  

[shannonbux]

Closing in favor of #7488