mirror of
https://github.com/docker/docs.git
synced 2026-10-23 18:09:02 +03:00
103 lines
3.3 KiB
HTML
103 lines
3.3 KiB
HTML
{{- $src := .Get "src" -}}
|
|
{{- if not $src -}}
|
|
{{- errorf "interactive-diagram shortcode: missing src: %s" .Position -}}
|
|
{{- end -}}
|
|
{{- $filePath := path.Join .Page.File.Dir $src -}}
|
|
{{- if not (fileExists $filePath) -}}
|
|
{{- errorf "interactive-diagram shortcode: file %q not found: %s" $filePath .Position -}}
|
|
{{- end -}}
|
|
{{- $diagram := readFile $filePath | transform.Unmarshal -}}
|
|
{{- $type := $diagram.type | default "sequence" -}}
|
|
{{- $id := printf "interactive-diagram-%s-%d" .Page.File.UniqueID .Ordinal -}}
|
|
{{- .Page.Store.Set "interactive-diagram" true -}}
|
|
<figure
|
|
id="{{ $id }}"
|
|
class="interactive-diagram interactive-diagram--{{ $type }} not-prose my-6"
|
|
data-interactive-diagram
|
|
data-diagram-type="{{ $type }}"
|
|
aria-labelledby="{{ $id }}-title"
|
|
>
|
|
<figcaption class="interactive-diagram__header">
|
|
<div class="interactive-diagram__header-copy">
|
|
<p id="{{ $id }}-title" class="interactive-diagram__title">
|
|
{{ $diagram.title }}
|
|
</p>
|
|
<p class="interactive-diagram__description">{{ $diagram.description }}</p>
|
|
</div>
|
|
</figcaption>
|
|
<div class="interactive-diagram__stage" data-diagram-stage></div>
|
|
{{- if eq $type "topology" }}
|
|
<div
|
|
class="interactive-diagram__topology-detail"
|
|
data-topology-detail
|
|
aria-live="polite"
|
|
aria-atomic="true"
|
|
>
|
|
<p class="interactive-diagram__topology-category" data-topology-category>
|
|
{{ $diagram.overview.category }}
|
|
</p>
|
|
<div class="interactive-diagram__topology-detail-copy">
|
|
<p class="interactive-diagram__topology-title" data-topology-title>
|
|
{{ $diagram.overview.label }}
|
|
</p>
|
|
<p class="interactive-diagram__topology-body" data-topology-body>
|
|
{{ $diagram.overview.body }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
{{- else }}
|
|
<div
|
|
class="interactive-diagram__status"
|
|
aria-live="polite"
|
|
aria-atomic="true"
|
|
>
|
|
<div class="interactive-diagram__step-copy">
|
|
<span class="interactive-diagram__step-number" data-step-number></span>
|
|
<div>
|
|
<p class="interactive-diagram__step-title" data-step-title></p>
|
|
<p class="interactive-diagram__step-body" data-step-body></p>
|
|
</div>
|
|
</div>
|
|
<p class="interactive-diagram__state" data-step-state></p>
|
|
</div>
|
|
<div class="interactive-diagram__controls" data-diagram-controls>
|
|
<button
|
|
type="button"
|
|
class="interactive-diagram__button"
|
|
data-step-previous
|
|
>
|
|
Previous
|
|
</button>
|
|
<div
|
|
class="interactive-diagram__progress"
|
|
data-step-progress
|
|
aria-label="Diagram steps"
|
|
></div>
|
|
<button type="button" class="interactive-diagram__button" data-step-next>
|
|
Next
|
|
</button>
|
|
</div>
|
|
{{- end }}
|
|
<div class="interactive-diagram__fallback">
|
|
{{- if eq $type "topology" }}
|
|
<ul>
|
|
{{- range $diagram.nodes }}
|
|
<li>{{ .label }}: {{ .details }}</li>
|
|
{{- end }}
|
|
{{- range $diagram.edges }}
|
|
<li>{{ .label }}: {{ .details }}</li>
|
|
{{- end }}
|
|
</ul>
|
|
{{- else }}
|
|
<ol>
|
|
{{- range $diagram.steps }}
|
|
<li>{{ .label }}: {{ .body }}</li>
|
|
{{- end }}
|
|
</ol>
|
|
{{- end }}
|
|
</div>
|
|
<script type="application/json" data-interactive-diagram-config>
|
|
{{- $diagram | jsonify | safeJS -}}
|
|
</script>
|
|
</figure>
|