docker
/
docs
mirror of https://github.com/docker/docs.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: add stepper graphic for article series 

Signed-off-by: David Karlsson <35727626+dvdksn@users.noreply.github.com>
This commit is contained in:
David Karlsson 2024-06-27 16:34:26 +02:00
parent 4e9c179e91
commit 9f8eca2276
2 changed files with 33 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
layouts/_default/single.html
View File

@ -8,6 +8,9 @@
{{ with .Title }}
<h1 data-pagefind-weight="10" class="scroll-mt-36">{{ . }}</h1>
{{ end }}
{{ if eq .CurrentSection.Layout "series" }}
{{ partial "guides-stepper.html" . }}
{{ end }}
<div class="block lg:hidden">
{{ partial "pagemeta.html" . }}
<hr>

30
layouts/partials/guides-stepper.html Normal file
View File

@ -0,0 +1,30 @@
{{ if or .NextInSection .PrevInSection }}
<a
class="no-underline my-8 flex justify-center text-xs text-white"
href="{{ .CurrentSection.Permalink }}">
<span class="rounded-l bg-blue-light-400 px-2 dark:bg-blue-dark-500">SERIES</span>
<span class="rounded-r bg-blue-light-500 px-2 dark:bg-blue-dark-400">{{ .CurrentSection.Title }}</span>
</a>
<div x-data class="mb-8 flex w-full items-center justify-center gap-1 px-8 text-center text-sm md:px-20">
{{ page.Store.Set "stepper_seen" false }}
{{ range $i, $e := .CurrentSection.Pages }}
{{ if $i }}
{{ if (page.Store.Get "stepper_seen") }}
<div class="flex-grow border-b-2 border-b-gray-light-400 dark:border-b-gray-dark-400"></div>
{{ else }}
<div class="flex-grow border-b-2 border-b-green-light-400 dark:border-b-green-dark-400"></div>
{{ end }}
{{ end }}
<a href="{{ .Permalink }}" class="no-underline text-white flex items-center justify-center w-8 h-8 rounded-full
{{ if (page.Store.Get "stepper_seen") }}
bg-gray-light-400 dark:bg-gray-dark-400
{{ else if (eq . page) }}
{{ .Store.Set "stepper_seen" true }}
bg-blue-light-400 dark:bg-blue-dark-400
{{ else }}
bg-green-light-400 dark:bg-green-dark-400
{{ end }}">
{{ add $i 1 }}</a>
{{ end }}
</div>
{{ end }}