-
Notifications
You must be signed in to change notification settings - Fork 193
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
very basic article inline card #608
Conversation
This pull request is being automatically deployed with Vercel (learn more). egghead-io-nextjs – ./🔍 Inspect: https://vercel.com/eggheadio/egghead-io-nextjs/DQPYp87h9Ex8Q6WQVQk8cxG5Rpzr egghead-next-storybook – ./🔍 Inspect: https://vercel.com/eggheadio/egghead-next-storybook/AhGr7QGpNP9A2HHXzYTeeEFKiB29 |
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 |
As one of the possible solutions we can set up some |
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 ---
|
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 It's a square peg and square hole situation. Excited to see cards get an upgrade globally though! |
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) |
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!