feat: add blog detail page

[smeijer]

I've added some typography (prose) styles to tailwind.config.js so we control blog styles through prose. This felt better than providing custom components to the mdx parser. Prose for blogs, utility classes for everything else.

I've also fixed a small typo in the KCDMdxComponent.components prop, and I've removed the row-gap from the grid component. The column-gap works great, but the row-gap was only standing in the way.

I'm not done yet. I need to add a few more element types, and I'm chatting with the designer about some details. So

to be continued

TODO

• fix candy-dispenser /blog/usememo-and-usecallback
• what to do with the transparent png at /blog/unit-vs-integration-vs-e2e-tests ?

[netlify]

✔️ Deploy Preview for kcd-react ready!

🔨 Explore the source changes: 5a9fb30

🔍 Inspect the deploy log: https://app.netlify.com/sites/kcd-react/deploys/60dd9f34688ef00007b381b3

😎 Browse the preview: https://deploy-preview-19--kcd-react.netlify.app

[smeijer]

Regarding the candy dispenser, do a lot of posts have embedded jsx/html? We could adjust the prose classes to either do something with embedded html, or attempt to not target it entirely. But I feel like content like that should be positioned in an iframe, with its own styling.

Otherwise, we'll always have the chance of missing some (edge) cases.

The transparent png at /blog/unit-vs-integration-vs-e2e-tests can easily be fixed by adding a light background color to .prose img to simulate the effect of the current site (transparent on white), but not sure if that has your preference, because then you'll lose the benefit of transparent images.

Thoughts?

[smeijer]

Despite the open issues in this PR, I'm okay with getting it merged so that Gil look at some articles on staging. Ready when you are.

[kentcdodds]

Solid progress here 👍