1
0
mirror of https://github.com/docker/docs.git synced 2026-10-23 18:09:02 +03:00
Files
docs/layouts/sbx-cli.html
David Karlsson 59a9547a27 sbx-cli: render experimental indicators for commands and flags
The sbx-cli layout had no handling for the experimental: true field
present in many data/sbx_cli/*.yaml files. Add visual indicators
matching the Docker CLI layout:

- Command-level (experimental: true at YAML root): magenta callout
  block below the summary table
- Flag-level (experimental: true on an option): violet badge before
  the flag description in Options and Global options tables
- Subcommands table: violet badge alongside the synopsis for
  experimental child commands

The title heading stays plain, consistent with cli.html, which signals
experimental status only through the command-level callout.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-10 14:39:32 +02:00

213 lines
7.5 KiB
HTML

{{ define "article" }}
{{ $data := index hugo.Data.sbx_cli .Params.datafile }}
{{ .Store.Set "headings" slice }}
<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>
</div>
{{- /* Summary table */ -}}
<div class="overflow-x-auto">
<table>
<tbody>
{{ with $data.synopsis }}
<tr>
<th class="text-left w-32">Description</th>
<td>{{ . }}</td>
</tr>
{{ end }}
{{ with $data.usage }}
<tr>
<th class="text-left w-32">Usage</th>
<td><code>{{ . }}</code></td>
</tr>
{{ end }}
</tbody>
</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" }}
{{ partialCached "heading.html" $heading "sbx-cli-description" }}
{{ $.Store.Add "headings" $heading }}
{{ . | $.RenderString (dict "display" "block") }}
{{ end }}
{{- /* Subcommands (for section pages) */ -}}
{{ if eq .Kind "section" }}
{{ $heading := dict "level" 2 "text" "Commands" }}
{{ partialCached "heading.html" $heading "sbx-cli-commands" }}
{{ $.Store.Add "headings" $heading }}
<table>
<thead>
<tr>
<th class="text-left">Command</th>
<th class="text-left">Description</th>
</tr>
</thead>
<tbody>
{{ range .Pages }}
{{ if .Params.datafile }}
{{ $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">
<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 }}
</tbody>
</table>
{{ end }}
{{- /* Options */ -}}
{{ with $data.options }}
{{ $opts := where . "name" "ne" "help" }}
{{ with $opts }}
{{ $heading := dict "level" 2 "text" "Options" }}
{{ partialCached "heading.html" $heading "sbx-cli-options" }}
{{ $.Store.Add "headings" $heading }}
<div class="overflow-x-auto">
<table>
<thead class="bg-gray-100 dark:bg-gray-800">
<tr>
<th class="p-2">Option</th>
<th class="p-2">Default</th>
<th class="p-2">Description</th>
</tr>
</thead>
<tbody>
{{ range . }}
<tr>
<td>
<code>{{ with .shorthand }}-{{ . }}, {{ end }}--{{ .name }}</code>
</td>
{{ $skipDefault := `[],false,` }}
<td>
{{ with .default_value }}
{{ cond (in $skipDefault .) "" (printf "<code>%s</code>" . | safeHTML) }}
{{ end }}
</td>
<td>
<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 }}
</tbody>
</table>
</div>
{{ end }}
{{ end }}
{{- /* Inherited (global) options */ -}}
{{ with $data.inherited_options }}
{{ $opts := where . "name" "ne" "help" }}
{{ with $opts }}
{{ $heading := dict "level" 2 "text" "Global options" }}
{{ partialCached "heading.html" $heading "sbx-cli-global-options" }}
{{ $.Store.Add "headings" $heading }}
<div class="overflow-x-auto">
<table>
<thead class="bg-gray-100 dark:bg-gray-800">
<tr>
<th class="p-2">Option</th>
<th class="p-2">Default</th>
<th class="p-2">Description</th>
</tr>
</thead>
<tbody>
{{ range . }}
<tr>
<td>
<code>{{ with .shorthand }}-{{ . }}, {{ end }}--{{ .name }}</code>
</td>
{{ $skipDefault := `[],false,` }}
<td>
{{ with .default_value }}
{{ cond (in $skipDefault .) "" (printf "<code>%s</code>" . | safeHTML) }}
{{ end }}
</td>
<td>
<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 }}
</tbody>
</table>
</div>
{{ end }}
{{ end }}
{{- /* Examples */ -}}
{{ with $data.example }}
{{ $heading := dict "level" 2 "text" "Examples" }}
{{ partialCached "heading.html" $heading "sbx-cli-examples" }}
{{ $.Store.Add "headings" $heading }}
{{- /* Dedent: strip up to 6 leading spaces from each line */ -}}
{{ $dedented := replaceRE `(?m)^ {2,6}` "" . }}
{{ $code := printf "```console\n%s\n```" (strings.TrimSpace $dedented) }}
{{ $code | $.RenderString (dict "display" "block") }}
{{ end }}
</article>
{{ end }}
{{ define "right" }}
<div class="hidden min-w-52 flex-1 lg:block">
<aside class="sticky top-16 h-[calc(100vh-64px)] min-w-52 space-y-4 overflow-y-auto py-4 w-full">
<div id="TableOfContents">
<div class="text-lg pb-2">{{ T "tableOfContents" }}</div>
<nav class="toc">
<ul>
{{ range (.Store.Get "headings") }}
{{ $text := .text }}
<li{{ with .level }} class="pl-{{ . }}"{{ end }}>
<a href="#{{ $text | anchorize }}">{{ markdownify $text }}</a>
</li>
{{ end }}
</ul>
</nav>
</div>
</aside>
</div>
{{ end }}