Blog showcase filtering

[GabrielaReyna]

Changes

• Added a filter "by product" on showcase and blog
• Added filter "by category" on showcase and blog
• Added a search bar for showcase and blog
• Bunch of restyling on main showcase and blog pages, and used components
• Minor edits on BlogPost and Demo Layouts
• When visiting the showcase or blog from one of the product docs site the filter is applied
• Demo relevancy scoring added to the showcase schema
• Improved pages responsiveness

For testing

• Check main blog and showcase pages are responsive
• Pass on information is correct for Demos and Blogs
• Check nothing else is broken

Upcoming in a different branch/PR

• Rework of ugly banners
• Polishing of blog layout and sharing / AI usage options

[cloudflare-workers-and-pages]

Deploying labs-browserpod-previews with    Cloudflare Pages

Latest commit:	ffb4982
Status:	✅  Deploy successful!
Preview URL:	https://28ed0d6e.labs-browserpod-previews.pages.dev
Branch Preview URL:	https://blog-showcase-filtering.labs-browserpod-previews.pages.dev

View logs

[codingfrog27]

Nice work on adding the extra catagories! WIth the exception of one small bug everything seems to work properly! I’ve also laid out some UX things we could improve down the road.

The tiny escapee bug

some of the catagory buttons on related demo cards get mashed into 1 (see image).

I assume it’s cause Democard.astro line 54 the now array of project types still gets dropped into a single spam. Should be an easy one line fix, by just mapping it over like the index cards already do. After that this should be good to merge! :)

Future UX work suggestions

I know you already mentioned polishing the layout as future work but thought I’d flag these ideas anyways in case they’re not planned yet.

functional

• Might be nice to have fuzzy find enabled for mispelling
  • might also have catagories as searchable terms
• Have the catagories on the blog and demo pages (somewhere on the left sidebar for both would probably be a good place!) which links back to the general landing page with said filter toggled on. Think this would serve not only to give some cursory info on type of topic of the blog/demo but also a way to redirect people to more of them.
• relatedly having the catagory buttons in the demo cards be clickable

Design

• I would enlarge the catagories a bit, as well as having their width span either the entire page, or at least the same width as the 2 collumns of blog or demo cards
• Accenting a bit more on product colours, emphasizing the product catagory highlight colour a bit more on the catagory buttons, and maybe even adding a hue of said colour to the rest of the page
• Also giving the secondary catagories different colours instead of inheriting the product ones
• moving the demo page left sidebart more to the side to give the main content more space, as well as having it more centered.

PS: General blog UX note

This might be out of scope for the showcase but I think the blogs are also a bit of the victim of the recurring UX problem of the main content having pretty limited horizontal space. This results in more sentences being cut off as well as making articles seem more lengthy than they actually are.

PPS: potential stale demo?

Might not be as relavent with planned browsercode changes plus could be intention but didnt we migrate vite playground to the browserpod playground (both in name and domain). Browserpod playground might also read nicer then “Full-Stack Development Environment” haha.