Files
docker-docs/layouts/_partials/guides-stepper.html
David Karlsson 90e2cb52fa chore: migrate to Hugo v0.146.0 new template lookup system
- layouts/partials/ → layouts/_partials/
- layouts/shortcodes/ → layouts/_shortcodes/
- layouts/_default/_markup/ → layouts/_markup/
- layouts/_default/*.html → layouts/*.html (flatten _default/)
- layouts/index.html → layouts/home.html
- layouts/index.*.json/txt → layouts/home.*.json/txt
- layouts/_default/index.llms.txt → layouts/home.llms.txt
- layouts/tag/ → layouts/tags/ (match /tags/ URL path)
2026-02-19 16:09:15 +01:00

59 lines
1.9 KiB
HTML

{{/* - Multi-page guide: render a progress bar - */}}
<div class="my-4 flex flex-col items-start text-sm">
{{ $totalPages := len .CurrentSection.Pages }}
{{/* - initialize the page store
$stepper_seen controls the color of the item in the stepper
green: "completed" - index is lower than current page
blue: current page
gray: next in section
for the section page, they're all gray
default to true if kind = section
(make all entries gray)
-
*/}}
{{ page.Store.Set "stepper_seen" .IsSection }}
{{/* - Loop over the pages in this guide - */}}
{{ range $i, $e := .CurrentSection.Pages }}
{{ $isLast := eq (add $i 1) $totalPages }}
<div class="flex">
<div class="flex flex-col items-center">
{{/* - Render the page's index digit (1,2,3,4 etc) - */}}
<a
href="{{ .Permalink }}"
class="{{ if (page.Store.Get "stepper_seen") }}
bg-gray-400 dark:bg-gray-500
{{ else if (eq . page) }}
{{ .Store.Set "stepper_seen" true }} bg-blue-400 dark:bg-blue-800
{{ else }}
bg-green-400 dark:bg-green-dark-400
{{ end }} flex h-8 w-8 items-center justify-center rounded-full text-white no-underline"
>
{{ add $i 1 }}
</a>
{{/* - Render the vertical border - */}}
{{ if not $isLast }}
<div
class="{{ if (page.Store.Get "stepper_seen") }}
border-gray-400 dark:border-gray-400
{{ else if (eq . page) }}
border-blue-400 dark:border-blue-400
{{ else }}
border-green-400 dark:border-green-400
{{ end }} h-6 border-l-2"
></div>
{{ end }}
</div>
{{/* - Render the page's title - */}}
<div class="ml-2 flex h-8 items-center self-start">
<a href="{{ .Permalink }}">
{{ .LinkTitle }}
</a>
</div>
</div>
{{ end }}
</div>