tiles.html

{{if and (.Pages) (.Site.Params.article.childArticles.display)}}
{{$titleTrunc := .Site.Params.article.childArticles.titleTrunc }}
{{$descTrunc := .Site.Params.article.childArticles.descTrunc }}
{{$count := .Site.Params.article.childArticles.count }}

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
    {{ range .Pages }}
        {{ if  .Params.hidden }}
            {{/* Do not show the hidden child page or its descendants */}}
        {{else}}
        <div class="rounded-lg shadow-md p-4 tile transition duration-300 space-y-2">
            <a href="{{ with .Params.externalRedirect}}{{.}}{{else}}{{.RelPermalink}}{{end}}" class="space-y-2">
                {{with .Params.icon}}<img src="/icons/light/{{.}}" alt="" class="w-5 h-5 icon">{{end}}
                <div class="text-xl text-black font-brand font-semibold">{{if .Params.linkTitle}} {{.Params.linkTitle}} {{else}}{{ .Title | truncate $titleTrunc}}{{end}}</div>
                {{ with .Description | truncate $descTrunc}}
                <p class="text-zinc-900 text-sm font-brand font-thin">{{ . }}</p>
                {{ end }}
            </a>
            {{if eq .BundleType "branch"}}

            <ul class="flex flex-wrap list-none p-0">
                {{ range first $count .Pages }}
                    {{ if  .Params.hidden }}
                        {{/* Do not show the hidden child page or its descendants */}}
                    {{else}}
                            <li class="my-2 mr-2">
                                <a href="{{ with .Params.externalRedirect}}{{.}}{{else}}{{.RelPermalink}}{{end}}" class="text-xs p-2 text-black font-brand font-thin hover:text-white bg-white hover:bg-brand hover:transition hover:duration-300 rounded">
                                    {{if eq .Parent.Title "Run Commands"}}{{ with replace .Title "pachctl " "" }}{{ . }}{{ end }}{{else}}{{if .Params.linkTitle}}{{.Params.linkTitle}}{{else}}{{ .Title | truncate 22 }}{{end}}{{end}}
                                </a>
                            </li>
                    {{end}}
                {{ end }}
            </ul>
            {{end}}
        </div>
        {{end}}
    {{ end }}
</div>

{{end}}