Skip to content

sbx-cli: render experimental indicators for commands and flags #25279

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
dvdksn wants to merge 4 commits into
base: main
Choose a base branch
from
+46 −8
Open

sbx-cli: render experimental indicators for commands and flags #25279

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d2e54ab
sbx-cli: render experimental indicators for commands and flags
dvdksn Jun 5, 2026
615fd67
sbx-cli: use violet badge color and fix badge/text spacing
dvdksn Jun 5, 2026
171a0be
sbx-cli: add experimental badge next to page title
dvdksn Jun 5, 2026
40e3e0a
sbx-cli: move experimental badge inside h1 for inline alignment
dvdksn Jun 5, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
54 changes: 46 additions & 8 deletions layouts/sbx-cli.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,12 @@
<article class="prose min-w-0 max-w-4xl dark:prose-invert">
{{ partial "breadcrumbs.html" . }}
<div class="flex items-start justify-between gap-4">
<h1>{{ .Title }}</h1>
<h1 class="inline-flex items-baseline gap-3">
{{ .Title }}
{{ if $data.experimental }}
{{ partialCached "components/badge.html" (dict "color" "violet" "content" "experimental") "sbx-exp" }}
{{ end }}
</h1>
</div>

{{- /* Summary table */ -}}
Expand All @@ -28,6 +33,22 @@ <h1>{{ .Title }}</h1>
</table>
</div>

{{- /* Experimental callout (command-level) */ -}}
{{ if $data.experimental }}
<div class="px-4 border-l-2 border-l-magenta-light dark:border-l-magenta-dark">
<p class="not-prose flex gap-2 items-center text-magenta-light dark:text-magenta-dark">
<span class="icon-svg pb-1">{{ partialCached "icon" "beaker" "beaker" }}</span>
<strong>{{ i18n "experimental" }}</strong>
</p>
<p><strong>This command is experimental.</strong></p>
<p>
Experimental features are intended for testing and feedback as their
functionality or design may change between releases without warning or
can be removed entirely in a future release.
</p>
</div>
{{ end }}

{{- /* Description */ -}}
{{ with $data.description }}
{{ $heading := dict "level" 2 "text" "Description" }}
Expand All @@ -54,7 +75,14 @@ <h1>{{ .Title }}</h1>
{{ $child := index hugo.Data.sbx_cli .Params.datafile }}
<tr>
<td class="text-left"><a class="link" href="{{ .Permalink }}"><code>{{ .Title }}</code></a></td>
<td class="text-left">{{ $child.synopsis }}</td>
<td class="text-left">
<span class="inline-flex items-center gap-2">
{{ if $child.experimental }}
{{ partialCached "components/badge.html" (dict "color" "violet" "content" "experimental") "sbx-exp" }}
{{ end }}
{{ $child.synopsis }}
</span>
</td>
</tr>
{{ end }}
{{ end }}
Expand Down Expand Up @@ -91,9 +119,14 @@ <h1>{{ .Title }}</h1>
{{ end }}
</td>
<td>
{{ with .usage }}
{{ strings.TrimSpace . }}
{{ end }}
<span class="inline-flex items-center gap-2">
{{ with .experimental }}
{{ partialCached "components/badge.html" (dict "color" "violet" "content" "experimental") "sbx-exp" }}
{{ end }}
{{ with .usage }}
{{ strings.TrimSpace . }}
{{ end }}
</span>
</td>
</tr>
{{ end }}
Expand Down Expand Up @@ -132,9 +165,14 @@ <h1>{{ .Title }}</h1>
{{ end }}
</td>
<td>
{{ with .usage }}
{{ strings.TrimSpace . }}
{{ end }}
<span class="inline-flex items-center gap-2">
{{ with .experimental }}
{{ partialCached "components/badge.html" (dict "color" "violet" "content" "experimental") "sbx-exp" }}
{{ end }}
{{ with .usage }}
{{ strings.TrimSpace . }}
{{ end }}
</span>
</td>
</tr>
{{ end }}
Expand Down