Migrate Fugu Showcase from iframe to proper inline

[devnook]

Migrate the Fugu Showcase to be a proper page.

[netlify[bot]]

✅ Deploy Preview for developer-chrome-com ready!

Name	Link
🔨 Latest commit	51ab9a4dd29dc3abf50a919a25c87d29dc2982e3
🔍 Latest deploy log	https://app.netlify.com/sites/developer-chrome-com/deploys/630f5e01fd1bbe0008e905bf
😎 Deploy Preview	https://deploy-preview-2887--developer-chrome-com.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.

[tomayac]

@devnook This starts to take shape, here's the deploy preview (there are some issues since the deploy doesn't run npm i, so for example the IDs are missing). It looks fine on localhost. Also the images aren't appearing i the deploy preview.

I'd appreciate some help with the cards. If I manually force the following CSS, it works so that there are two side-by-side.

@media (min-width: 592px)
.blog-grid {
  gap: 2rem;
  /* 18.625rem is the magic number */
  grid-template-columns: repeat(auto-fit, 18.625rem);
}

[tomayac]

@devnook We have talked about uploading the image files to the CDN. I'm no longer sure this is the best solution. The reason is that upon each rerun the images will have changed slightly, so we end up with a lot of out-of-use images. It may be better to have them checked in directly and overwrite them.

[tomayac]

Alright, by using .project-grid I get a nice 2-column layout now:

[tomayac]

@devnook and @matthiasrohmer: If we were to host the app screenshots on GoogleChromeLabs/fugu-showcase/tree/main/data (so they don't pollute the GoogleChrome/developer.chrome.com repo) and then reference the images from the showcase article at developer.chrome.com/fugu-showcase/, would this be a viable solution to unlock this PR?

<img src="https://raw.githubusercontent.com/GoogleChromeLabs/fugu-showcase/main/data/1tuner.com-dark.webp">

(CC: @rachelandrew)

[tomayac]

Closed as completed via #4362