very basic article inline card

[joelhooks]

I hacked on this a bit.

The main problem currently is that prose is totally ruining the card.

Using the rfc tag so this won't commit until we figure that out. Probably several approaches that could work, none of them seem great to me. Ideas welcome!

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployments, click below or on the icon next to each commit.

egghead-io-nextjs – ./

🔍 Inspect: https://vercel.com/eggheadio/egghead-io-nextjs/DQPYp87h9Ex8Q6WQVQk8cxG5Rpzr
✅ Preview: https://egghead-io-nextjs-git-jh-article-card-eggheadio1.vercel.app

egghead-next-storybook – ./

🔍 Inspect: https://vercel.com/eggheadio/egghead-next-storybook/AhGr7QGpNP9A2HHXzYTeeEFKiB29
✅ Preview: https://egghead-next-storybook-git-jh-article-card-eggheadio1.vercel.app

[MaggieAppleton]

I can't help much with the component composition / card architecture but I have a fairly tight mockup for inline article cards in the Figma "Design patterns" file:

Feels like using our current <Card /> component is trying to fit a round peg into a square hole.
If we're going to rebuild the Card components anyway, this feels like a chance to either a) build the new architecture and then use it here, or b) build a temporary article card component that doesn't use the existing <Card />, with the assurance it'll be replaced later.

[vojtaholik]

I went through several discussions regarding prose here and here and nothing really worked. tough one.

[ltclmbdev]

As one of the possible solutions we can set up some noProse prop to the <Card /> and conditionally apply prose classes.
And then we can do <Card className={className} noProse> inside <CardHorizontal /> that is used inside <ArticleCourseCard />. Not so elegant also though.

[joelhooks]

I haven’t explored a <NoProse> element that could wrap components in mdx, or if that is even possible. Elsewhere we are defining <ProseSection> to do the opposite in the DefaultTemplate for mdx but then you have to define all the prose sections explicitly. Would be better to define where prose isn’t active, if possible.

…

--- original message --- On May 4, 2021, 04:46 PDT ***@***.*** wrote: As one of the possible solutions we can set up some noProse prop to the <Card /> and conditionally apply prose class. And then we can do <Card className={className} noProse> inside <CardHorizontal />. Not so elegant also though. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or unsubscribe. --- end of original message ---

[joelhooks]

Feels like using our current component is trying to fit a round peg into a square hole.
If we're going to rebuild the Card components anyway, this feels like a chance to either a) build the new architecture and then use it here, or b) build a temporary article card component that doesn't use the existing , with the assurance it'll be replaced later.

I'm not addressing card architecture here at all. I'm promoting our paid product with relevant links that stand out visually with minimal effort.

Definitely not interested in dropping in YATCCC (yet another temporary content card component) implementation and would prefer reuse. The only thing holding this card back is prose. It would look great if that wasn't the case.

It's a square peg and square hole situation.

Excited to see cards get an upgrade globally though!

[joelhooks]

As a temp solution I'm going to use the social share image to get these inline and close this PR.

I don't think it matters which card we use in this scenario until we figure out how to get them styled without it being a nightmare.

@Creeland can you see if there are other spots where linking to a course inline makes sense in the context of an article?

I suspect we could use the image approach pretty effectively though 🤔

[![Create an eCommerce Store with Next.js and Stripe Checkout](https://res.cloudinary.com/dg3gyk0gu/image/upload/v1613387847/next.egghead.io/resources/create-an-ecommerce-store-with-next-js-and-stripe-checkout/card_2x.png)](https://egghead.io/courses/create-an-ecommerce-store-with-next-js-and-stripe-checkout-562c)