Merge pull request #1169 from chainguard-dev/improve-images-listing

Improving images listing in reference docs

assets/scss/common/_custom.scss

@@ -1133,3 +1133,9 @@ code {
     max-width: 100%;
   }
 }
+
+// Beat <a> reset
+.docs-content.docs-content a:not(.tag),
+.card-link.card-link.card-link.card-link {
+  color: var(--article-link-color);
+}

content/chainguard/chainguard-images/reference/_index.md

@@ -2,6 +2,7 @@
 title: "Chainguard Images Reference"
 linktitle: "Reference"
 description: "Chainguard Images Reference Docs"
+layout: list-images
 type: "article"
 date: 2022-11-28T08:49:15+00:00
 lastmod: 2022-11-28T08:49:15+00:00

layouts/article/list-images.html

@@ -0,0 +1,62 @@
+{{ define "main" }}
+<div class="row flex-md-nowrap">
+    <div class="leftnav-container">
+        <div class="board-background leftnav">
+            <nav id="sidebar-default" aria-label="Main navigation">
+                {{ partial "sidebar/docs-menu.html" . }}
+            </nav>
+            {{ partial "sidebar/nav-bottom.html" }}
+        </div>
+    </div>
+    <div class="row justify-content-center topic-container flex-shrink-1">
+        <article>
+            <h1 class="text-center mb-5">{{ if eq .CurrentSection .FirstSection }}{{ .Section | humanize }}{{ else }}{{ .Title }}{{ end }}</h1>
+                {{ if eq .Params.type "article" }}
+                    <div class="container">
+                        <div class="row g-5 mb-5">
+                        {{ $currentSection := .CurrentSection }}
+                        {{ range and
+                            (where .Site.RegularPages.ByTitle "Section" .Section)
+                            (where .Pages ".Params.unlisted" "!=" "true")}}
+                            {{ if in (.RelPermalink | string) $currentSection.RelPermalink }}
+                                    <div class="col d-flex">
+                                        <div class="card flex-fill">
+                                            <div class="card-body d-flex flex-column">
+                                                <img src="https://storage.googleapis.com/chainguard-academy/logos/{{ .Params.linktitle }}/logo.svg">
+                                                <h5 class="card-title mt-0">
+                                                    <a href="{{ .RelPermalink }}">{{ .Params.linktitle }}</a>
+                                                </h5>
+                                                <p class="card-text">{{ .Params.description }}</p>
+                                                <div class="d-flex flex-fill align-items-end justify-content-between">
+                                                    <a href="{{ .RelPermalink }}image_specs/" class="card-link">Variants</a>
+                                                    <a href="{{ .RelPermalink }}tags_history/" class="card-link">Tags</a>
+                                                    <a href="{{ .RelPermalink }}tags_history/" class="card-link">Provenance</a>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                            {{ end }}
+                        {{ end }}
+                        </div>
+                    </div>
+                {{ else }}
+                    {{ range .Paginator.Pages }}
+                        <a class="docs-navigation-button docs-navigation-button-next" href="{{ .RelPermalink }}">
+                            <span class="next-title">{{ .Title }}</span>
+                            <div class="chevron-rotator">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="10" height="15" viewBox="0 0 10 6" fill="none">
+                                    <path d="M1.06199 5.729L0.291992 4.938L4.99999 0.229004L9.70799 4.938L8.93799 5.729L4.99999 1.792L1.06199 5.729Z" fill="currentColor"/>
+                                </svg>
+                            </div>
+                        </a>
+                        {{ if .Description }}
+                            <div class="button-description">{{ .Description }}</div>
+                        {{ end }}
+                    {{ end }}
+                    {{ template "_internal/pagination.html" . }}
+                {{ end }}
+            </div>
+        </article>
+    </div>
+</div>
+{{ end }}