Publish showcase

[GabrielaReyna]

Showcase for project demos

This PR adds several files for the demo showcase, which includes:

• Showcase-specific components and layouts
• Showcase content collection schema
• Showcase content (md files and images)

What to test

• Go to the product showcase by clicking "Demos" on the product docs navigation bar (this will change in the next iteration)
• Go to the Labs central showcase with /showcase
• Check if content is correct
• Check URLs work
• Check responsiveness in different windows sizes
• Suggest any potential optimisations

Next iterations (after this is approved, separate PR):

• Filters for the showcase by product
• Product-specific showcase pages (and also blog pages) will be removed. Labs will contain the central blog and showcase content
• Given the above we won't need to duplicate files
• Automatic product filter if we open the showcase (or blog) from a product page. For example, if we click on the "demos" button on CheerpX, it will take us to the labs showcase where the "CheerpX" filter is already applied.
• There is a big room tom improve the Demos banners
• Showcase card set in labs landing page

[cloudflare-workers-and-pages]

Deploying labs-browserpod-previews with    Cloudflare Pages

Latest commit:	5e85802
Status:	✅  Deploy successful!
Preview URL:	https://c138d902.labs-browserpod-previews.pages.dev
Branch Preview URL:	https://publish-showcase.labs-browserpod-previews.pages.dev

View logs

[codingfrog27]

Nice work! ^^ I've all demo links and URL's seem in order, I have a fair amount of design feedback but they're all just my thoughts. Great job on getting this set up! Let me know if you'd like help with implementing anything, I should have some bandwidth the coming weeks. Excited to have a whole extra page for all our demos!

(potential) errors

• CheerpJ wouldn’t build cause it was missing a japanese translation for the demos. I commented out the check at i18n.ts line 60 to be able to build and test
• Clicking the demos from CJ and BP domains would give 404’s. But I think this might just be due to how they’re deployed? They link to the live labs domain. If I simply paste the demo name at the end of the url it still works

design

You already mentioned there was room for improvement for the banners. I think the same would count for the general layout. Not sure how much of this is not already planned but still in scope, but here are my suggestions:

overview page

• if demos are accessed through a certain product make the background hue colour match said product
• See if we can widen the margins of the demos. Right now it looks good on vertical monitors, but on horizontal ones there’s a lot of dead space on the sides
• With the extra canvas I’d space the cards out a bit more. I think in contrast to the blog posts it’s more about making an impact rather than fitting as many as we can. Maybe add a glow effect around them as well and some extended descriptions.
• Maybe we can fluff up the page banner too? I like the lights image but Maybe we can move the title text behind part of the lights and increase the font size (and maybe a different font too?)
• I wonder how much work it would be to give each demo an internal relevancy score, that we can sort by. I’d say we can hardcode this ourselves despite the maintenance risk. Since integrating analytics like a lot of added complication. And I think internally we have a relatively good idea of which demos we’d like to give the most attention

Demo pages

• Similar layout suggestion, here I’d seuggest pulling the title sidebar a lot more to the left (see image)
• If possible allowing the demo pages to have multiple scrolling images would be a nice addition
• I think not having the leading What is demo and immediately having the description might be stronger. (not 100 on this one though)
• I like the tags! Could we colour their outline? At least the product demo tags
• Should our core products be in the list of demos? Maybe instead we can put them on top (or even bottom) of the page, to distinguish them as “the tools that made all the cool demos possible”

nitpicks

• maybe browsercraft description can be extended a bit, to emphasize the achievement of running jars in the browser. (since its such a big demo)
• maybe Same with javafiddle how it is a free online java Ide