From 0f4302549ca11481ef2d19c46d176a7c46332090 Mon Sep 17 00:00:00 2001 From: Mark Dumay <61946753+markdumay@users.noreply.github.com> Date: Tue, 14 Jul 2026 11:39:16 +0200 Subject: [PATCH 1/3] docs(components): enable resizable previews on eligible examples Adds a resize grip to one representative example per page, where narrowing the container produces real reflow: navs-and-tabs, breadcrumb, table, image, carousel, and card. Navbar is deliberately excluded despite being Bootstrap's own showcase for the feature. On Bootstrap 5, navbar-expand-* is a viewport media query, so the grip would squeeze the navbar without ever collapsing it into the toggler. Requires the resize argument added in Hinode v3.1.0. --- content/components/breadcrumb.md | 2 +- content/components/card.md | 2 +- content/components/carousel.md | 2 +- content/components/image.md | 2 +- content/components/navs-and-tabs.md | 2 +- content/components/table.md | 2 +- 6 files changed, 6 insertions(+), 6 deletions(-) diff --git a/content/components/breadcrumb.md b/content/components/breadcrumb.md index 4c18310..fc3a6f8 100644 --- a/content/components/breadcrumb.md +++ b/content/components/breadcrumb.md @@ -17,7 +17,7 @@ Use the `breadcrumb` shortcode to display the current page’s location within t The following shortcode displays a breadcrumb for the current page. -{{< example lang="hugo" >}} +{{< example lang="hugo" resize="true" >}} {{}} {{< /example >}} diff --git a/content/components/card.md b/content/components/card.md index ab77d73..c71c1a0 100644 --- a/content/components/card.md +++ b/content/components/card.md @@ -21,7 +21,7 @@ Use the `card` shortcode to display a card that links to a content page. When us Use `title`, `thumbnail`, `icon`, and inner content to define the card's content inline. You can add `padding` and `class` attributes to further refine the card's layout. -{{< example lang="hugo" >}} +{{< example lang="hugo" resize="true" >}} {{}} This is the `body` of the card. It supports Markdown. diff --git a/content/components/carousel.md b/content/components/carousel.md index f16659e..e9cc477 100644 --- a/content/components/carousel.md +++ b/content/components/carousel.md @@ -19,7 +19,7 @@ Use the `carousel` shortcode to display a carousel of several images, with simil Set the `ratio` to `1x1` for a square aspect ratio. -{{< example lang="hugo" >}} +{{< example lang="hugo" resize="true" >}} {{}} {{}} {{}} diff --git a/content/components/image.md b/content/components/image.md index 93a44aa..ea45e03 100644 --- a/content/components/image.md +++ b/content/components/image.md @@ -21,7 +21,7 @@ As an example, the following shortcodes display a centered image with various as Set the `ratio` to `1x1` for a square aspect ratio. -{{< example lang="hugo" >}} +{{< example lang="hugo" resize="true" >}} {{}} {{< /example >}} diff --git a/content/components/navs-and-tabs.md b/content/components/navs-and-tabs.md index f4aefbd..f6b5242 100644 --- a/content/components/navs-and-tabs.md +++ b/content/components/navs-and-tabs.md @@ -21,7 +21,7 @@ By default, navs are left-aligned, but you can easily change them to center or r Centered with `.justify-content-center`: -{{< example lang="hugo" >}} +{{< example lang="hugo" resize="true" >}} {{}} {{}} {{}} diff --git a/content/components/table.md b/content/components/table.md index 0193911..f0710cd 100644 --- a/content/components/table.md +++ b/content/components/table.md @@ -21,7 +21,7 @@ weight: 330 Use the table shortcode to make your markdown table responsive. Responsive tables scroll horizontally to improve the layout on smaller screens. The following example illustrates how this works. -{{< example lang="markdown" >}} +{{< example lang="markdown" resize="true" >}} {{}} | # | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading | |----|---------|---------|---------|---------|---------|---------|---------|---------|---------| From 23e4f8017c715f406f4b9d38401ce8edb786306c Mon Sep 17 00:00:00 2001 From: Mark Dumay <61946753+markdumay@users.noreply.github.com> Date: Tue, 14 Jul 2026 12:40:54 +0200 Subject: [PATCH 2/3] docs(components): document the resize argument on the example page Add a Resizable preview section to content/components/example.md, in the same Preview/Input style as the show-markup and show-preview sections. Clarifies that the grip demonstrates fluid reflow only and does not trigger Bootstrap's viewport-based responsive breakpoints. Co-Authored-By: Claude Opus 4.8 (1M context) --- content/components/example.md | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/content/components/example.md b/content/components/example.md index 6179188..a2b52af 100644 --- a/content/components/example.md +++ b/content/components/example.md @@ -78,6 +78,29 @@ This is a lead paragraph. It stands out from regular paragraphs. {{}} ``` +### Resizable preview + +Set `resize` to `true` to add a grip to the lower-right corner of the preview. Drag it to narrow the preview and observe how the component reflows. + +> [!IMPORTANT] +> The grip demonstrates *fluid* reflow — content wrapping, text truncation, tables gaining a scrollbar, images scaling. It does **not** trigger responsive breakpoints. Bootstrap 5's responsive classes (`navbar-expand-*`, `col-md-*`, and similar) are viewport media queries, so they respond to the size of the browser window, not the size of the preview. To preview breakpoint behavior, resize the browser window instead. + +#### Preview + +{{< example lang="hugo" resize="true" >}} +This is a lead paragraph. It stands out from regular paragraphs. +{.lead} +{{< /example >}} + +#### Input + +```go-html-template +{{}} +This is a lead paragraph. It stands out from regular paragraphs. +{.lead} +{{}} +``` + ## Arguments The shortcode supports the following arguments: From 34f10ab46a3101a9465065eec835b0751053e7bf Mon Sep 17 00:00:00 2001 From: Mark Dumay <61946753+markdumay@users.noreply.github.com> Date: Tue, 14 Jul 2026 14:04:31 +0200 Subject: [PATCH 3/3] docs(components): badge the resizable preview with its release version Marks the section with v3.2.0, the release that actually shipped the resize argument. Matches the per-section release badges used elsewhere (e.g. breadcrumb frontmatter). --- content/components/example.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/content/components/example.md b/content/components/example.md index a2b52af..87d96fa 100644 --- a/content/components/example.md +++ b/content/components/example.md @@ -80,6 +80,8 @@ This is a lead paragraph. It stands out from regular paragraphs. ### Resizable preview +{{< release version="v3.2.0" >}} + Set `resize` to `true` to add a grip to the lower-right corner of the preview. Drag it to narrow the preview and observe how the component reflows. > [!IMPORTANT]