feat: new extended cards
The PR creates new shortcodes to create extended cards. The extended cards are cards, but users can customize the placement of the title, the image, add buttons, etc. It allows users to create any shortcode they want to extend the cards.
Each commit is a small step, so you can follow the changes.
Technically, with my approach, the shortcodes are just "interfaces" for partials: they are just here to link the user configuration to the partials. This design is more flexible and closer to a component design.
The existing card shortcodes and partials are untouched and work as before.
The doc is missing because we need to agree together about the approach before writing it.
For now, I just created a draft page to showcase the new extended cards:
- http://localhost:1313/docs/guide/shortcodes/experimental/
- https://deploy-preview-809--hugo-hextra.netlify.app/docs/guide/shortcodes/experimental/
I used the prefix experimental/, but this must be changed.
I have some proposals for the prefix: extended/, custom/, advanced/, hx/.
Maybe the CSS is a bit messy, but the render is right (maybe some padding needs to be adjusted) Note: I mainly copied existing CSS classes from partials into the CSS file.
Fixes #797
Deploy Preview for hugo-hextra ready!
| Name | Link |
|---|---|
| Latest commit | 224942c57d118cf3a6fd681df49299e82e82dcde |
| Latest deploy log | https://app.netlify.com/projects/hugo-hextra/deploys/68ec313c0be3260008b33e3c |
| Deploy Preview | https://deploy-preview-809--hugo-hextra.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 project configuration.
Hi, thanks for this. On first glance it looks good! I’ll take a closer look at the implementation details later, and organize the CSS part.
Technically, with my approach, the shortcodes are just "interfaces" for partials: they are just here to link the user configuration to the partials.
I agree, this is the ideal approach. In fact, we can refactor the previous card to be composed with these partials.
This design is more flexible and closer to a component design.
Exactly. This feels like a solid example. Nicely done!
As explained inside the PR description:
The doc is missing because we need to agree together about the approach before writing it.
Also, could you provide feedback about the prefix?
As explained inside the PR description:
The doc is missing because we need to agree together about the approach before writing it.
Also, could you provide feedback about the prefix?
ah apologies missed that, I'm leaning towards extended, what do you think?🤔