feat(approach): add numbered split layout variant - #181
Merged
Conversation
Add two opt-in, backward-compatible arguments to the approach component, ported from a proven site-local "steps" component: - numbered: auto-number each element with a Flaticon digit glyph (fi-br 1..9) in a tinted circle, ignoring any per-element icon or image. Independent of layout; the card grid reuses the existing card-icon-primary circle treatment for the digit glyph. - layout: "split" renders the heading in a left column and the elements as a vertically stacked list in a right column (50-50 on md+, stacked on mobile), instead of the card grid. Both default to the current behavior. A diff of the default-path rendered HTML (grid layout, unnumbered) confirms it is byte- identical to before this change. Declares "numbered" as a bool argument via the approach.yml sidecar, since mod-utils v6's schema compiler has no global definition for it and would otherwise fail schema compilation for every existing approach block, not just ones that set it. Split-layout markup/classes are namespaced under approach (approach-steps/approach-step/approach-number) since "steps" is not this component's name. Unlike the reference, per-element content is still passed through page.RenderString (matching approach's existing card-grid behavior) and the split heading still honors the justify argument (matching approach's other common-arg handling). Verified with a temporary exampleSite demo (mod-flaticon module + scratch content covering all four layout/numbered combinations), reverted before committing. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Pass the numbered-glyph icon as a bare digit ("1".."9") instead of
hardcoding the Flaticon "fi-br" family. assets/icon.html treats a
single-token icon as family-less and resolves it through
site.Params.modules.fontawesome.defaultFamily, which mod-fontawesome
itself defaults to "fas" (Font Awesome Solid) — verified the FA6/7
solid set ships digit glyphs 0-9 and that the resolved SVG symbols
render in the exampleSite build, not just that the template compiles.
Flaticon was an infusal-theme choice bleeding into hinode core's
default; a theme that wants a different family now gets it for free
by overriding defaultFamily, with no new argument needed here. Size
classes ("fa-lg") move to the icon partial's separate "class" key,
since embedding them in the icon string would make it a two-token
value and skip the default-family resolution.
Re-ran the byte-identical default-path diff and the four-combination
render check (grid/split x numbered/plain) against real output HTML;
all four resolve real FA SVG symbols. No new exampleSite dependency
needed this time, since Font Awesome is already hinode's default.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Contributor
Author
|
🎉 This PR is included in version 2.3.0 🎉 The release is available on GitHub release Your semantic-release bot 📦🚀 |
This was referenced Jul 28, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Extends the
approachcomponent with two opt-in, backward-compatible arguments, ported from a proven site-local component:numbered: true— elements are auto-numbered with digit glyphs (1–9) in a tinted circle; per-elementicon/imageare ignored. Works in both layouts. The glyph is passed toassets/icon.htmlas a bare, family-less name, so it resolves throughsite.Params.modules.fontawesome.defaultFamilylike any other bare icon reference — mod-fontawesome defaults that tofas(Font Awesome Solid), so digits render as FA out of the box; a theme that prefers a different family gets it automatically by overridingdefaultFamily, no extra argument needed.layout: "split"— renders the heading in a left column with the elements as a vertically stacked list on the right (50-50 onmd+, stacked on mobile), as an alternative to the card grid.Defaults preserve current behavior: the default-path rendered HTML (grid, unnumbered) is byte-identical before/after this change.
Notes for review
numberedis declared as a bool in theapproach.ymlsidecar — mod-utils v6 has no global definition for it, and omitting the declaration fails schema compilation for every existingapproachblock.approach-steps/approach-step/approach-number), including a dark-mode variant for the number circle.spacing: false— the icon partial's trailing otherwise becomes a second grid item inside the circle and skews centering.numberedreuses the existingcard-icon-primarycircle treatment; the.approach-numberstyle applies in split layout. Unify if you prefer one treatment.0–9only (whatever familydefaultFamilyresolves to); 10+ numbered elements would needskipMissing.Verification
pnpm install+pnpm build(exampleSite) clean at every stage; Husky pre-commit and commitlint hooks pass.<use href="#fas-1"/>etc.), not just that the template compiles.🤖 Generated with Claude Code