hextra icon indicating copy to clipboard operation
hextra copied to clipboard

feat: new extended cards

Open ldez opened this issue 4 months ago • 4 comments

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

ldez avatar Aug 30 '25 14:08 ldez

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...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

netlify[bot] avatar Aug 30 '25 14:08 netlify[bot]

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!

imfing avatar Aug 31 '25 10:08 imfing

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?

ldez avatar Oct 12 '25 22:10 ldez

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?🤔

imfing avatar Oct 13 '25 18:10 imfing