Skip to content

feat(shortcodes): add caption argument to table shortcode#2030

Draft
LeonarddeR wants to merge 2 commits into
gethinode:mainfrom
LeonarddeR:tableShortCode
Draft

feat(shortcodes): add caption argument to table shortcode#2030
LeonarddeR wants to merge 2 commits into
gethinode:mainfrom
LeonarddeR:tableShortCode

Conversation

@LeonarddeR

Copy link
Copy Markdown

Adds a caption argument to the table shortcode that renders an HTML <caption> element, plus an opt-in caption-top boolean. Closes #1690.

Behavior

{{< table caption="Overview of records" >}}
| Name  | Type   |
|-------|--------|
| alpha | widget |
{{< /table >}}

The <caption> is injected as the table's last child, just before </table> — the same position simple-datatables re-appends it to, so a plain table and a data table share identical DOM. caption inherits the existing global string argument definition (comment overridden for the table context).

Position

caption-top defaults to false. Bottom is the native default of both Bootstrap and simple-datatables, so it's the least-surprising default; caption-top="true" adds Bootstrap's .caption-top class, moving the caption above the table via CSS caption-side — independent of DOM order.

PurgeCSS safelist

caption-top is emitted only under the opt-in, so on a site that never renders it the .caption-top{caption-side:top} rule would be purged from the compiled CSS, leaving the option silently inert. It's added to the standard safelist in both config/postcss.config.js and exampleSite/config/postcss.config.js — the same class of issue as the already-safelisted table-wrap / d-*-table-cell.

Verification

Built the example site and drove it in a browser. With no caption-top, the caption renders below the table (caption-side: bottom, last child); with caption-top="true" it flips to top (caption-side: top). Confirmed the .caption-top rule survives PurgeCSS after safelisting (it was purged, and the opt-in had no effect, before). Verified simple-datatables preserves the server-rendered <caption> on data tables (it captures CAPTION nodes on init and re-appends them on render). A caption fixture is added to the table-demo page. Existing table fixtures are unaffected; pnpm lint passes.

🤖 Generated with Claude Code

Add a `caption` argument to the table shortcode that renders an HTML
`<caption>` element, plus an opt-in `caption-top` boolean (default false).

The caption is injected as the table's last child, before `</table>`, the
same position simple-datatables re-appends it to, so a plain and a data
table share identical DOM. Bottom is the native default of both Bootstrap
and simple-datatables; `caption-top=true` adds Bootstrap's `.caption-top`
class to move it above via CSS `caption-side`, independent of DOM order.

Safelist `caption-top` in both PostCSS configs: it is emitted only under
the opt-in, so a site that never renders it would otherwise have the
`.caption-top` rule purged, leaving the option inert.

Closes gethinode#1690

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@netlify

netlify Bot commented Jul 15, 2026

Copy link
Copy Markdown

👷 Deploy request for gethinode-demo pending review.

Visit the deploys page to approve it

Name Link
🔨 Latest commit 8a2c32a

Cut rationale/history from PurgeCSS safelist, table partial, and argument
comments; keep only how-focused notes.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add caption to the table shortcode

1 participant