Rough draft of showcase page

[augustkline]

No description provided.

[netlify]

✅ Deploy Preview for codingtrain ready!

Name	Link
🔨 Latest commit	b199c41
🔍 Latest deploy log	https://app.netlify.com/sites/codingtrain/deploys/63f5378e57e35c000870d623
😎 Deploy Preview	https://deploy-preview-638--codingtrain.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[fturmel]

@klinegareth @shiffman Alright - got the showcase page in a working state with a few improvements, we're back on track! It's nice to see the community contributions all in one place. You can keep iterating on the page. Let me know if you need anything or have any questions.

https://deploy-preview-638--codingtrain.netlify.app/showcase

We now have to build 12,054 pages compared to 6,686 in the last production build. It's still manageable, but I think we'll eventually have to explore some new ideas (SSR, client-side pagination and filtering) to make the build and dev server startup times more reasonable.

[fturmel]

I will also add that the language filter as currently implemented doesn't make too much sense. It refers to technologies used in the Coding Train video that inspired the contribution, and not the contribution itself.

[shiffman]

Yes, I think we can do away with the filters. If I were to have filters what would be useful is:

• filter by associated video title
• filter by submitter name

I love the idea of being to see all showcase projects by any given passenger.

I could also imagine wanting to sort in reverse chronological order but that is very low priority.

[fdoflorenzano]

Found two things that I think are worth watching out for.

[fturmel]

OK... that was a decent amount of work, but I extracted the filters from the large ItemsPage component to simplify things and allow us some flexibility. Had to also change the function signature of filteredPath to make it more flexible.

I implemented only filtering by authors in the showcase page after all. Mostly because 845 authors * 401 topics ~= 340k static pages to build 😂 Not going to happen unless we switch to SSR or client-side pagination/filtering.

@klinegareth I added the missing "purple" variant for the showcase filter component, but that's the only style-related change that happened over the last commits. You can pick things up from here and work on the card layout if you want. Let me know if you're stuck or need any help!

One thing to look out for are rows of 2 contributions in the 3 columns layout:

[shiffman]

Wow, amazing! Thank you @fturmel! I love the filtering by author so much. I think that's really the only filter we need since to see the showcase projects for any given video I can just click over to the video page.

We are so close to merging yay!

[shiffman]

With @klinegareth's latest commit I think this is ready to merge!!! Wowza!!!

https://deploy-preview-638--codingtrain.netlify.app/showcase

I'm updating this with main and marking ready for review! I may do a couple final language tweaks. Any last comments or thoughts before I merge from anyone following?

I think we can make some refinements going forward:

• handle video titles that are cut off
• add information / headers to each passenger filter page so it's a bit more like a "profile" page
• change author links to go to their filtered page (and there, you'd find a link to their website, etc.)?

We can open a new issue to track!

[fturmel]

@shiffman Looks good to me, and I agree with the refinement ideas.

I would add that we might want a "browse showcase" button on the homepage, just like tracks and challenges.

[fturmel]

Oh and we haven't resolved the homepage JSON with two CTA comment I left before. Would be nice to fix before we merge and just forget.

[shiffman]

@fturmel I think I cleaned this up in 07a2b8d, how does it look?

[fturmel]

@shiffman Perfect!

[shiffman]

Here we gooooooooooooooo!