Merge pull request #18619 from dvdksn/alternate-card-layout

ux: add "image" layout for cards

content/reference.md

@@ -80,16 +80,16 @@ various APIs, CLIs, drivers and specifications, and file formats.
 
 ## File formats
 
-{{< grid grid_files >}}
+{{< grid items="grid_files" >}}
 
 ## Command-line interfaces (CLIs)
 
-{{< grid grid_clis >}}
+{{< grid items="grid_clis" >}}
 
 ## Application programming interfaces (APIs)
 
-{{< grid grid_apis >}}
+{{< grid items="grid_apis" >}}
 
 ## Drivers and specifications
 
-{{< grid grid_specs >}}
+{{< grid items="grid_specs" >}}

content/security/_index.md

@@ -90,14 +90,14 @@ For both administrators and developers, Docker provides security-specific produc
 
 Explore the security features Docker offers to satisfy your company's security policies.
 
-{{< grid grid_admins >}} 
+{{< grid items="grid_admins" >}} 
 
 ## For developers
 
 See how you can protect your local environments, infrastructure, and networks without impeding productivity.
 
-{{< grid grid_developers >}}  
+{{< grid items="grid_developers" >}}
 
 ## Further resources
 
-{{< grid grid_resources >}}
+{{< grid items="grid_resources" >}}

content/trusted-content/_index.md

@@ -5,15 +5,15 @@ keywords: doi, dvp, dsos, open source, security, base images
 grid:
 - title: Docker Official Images
   description: A curated set of Docker repositories hosted on Docker Hub.
-  image: /trusted-content/images/doi-icon.svg
+  icon: /trusted-content/images/doi-icon.svg
   link: /trusted-content/official-images/
 - title: Docker Verified Publisher
   description: High-quality images from verified vendors.
-  image: /trusted-content/images/dvp-icon.svg
+  icon: /trusted-content/images/dvp-icon.svg
   link: /trusted-content/dvp-program/
 - title: Docker-Sponsored Open Source
   description: High-quality images from non-commercial open source projects.
-  image: /trusted-content/images/dsos-icon.svg
+  icon: /trusted-content/images/dsos-icon.svg
   link: /trusted-content/dsos-program/
 ---
 

layouts/partials/components/card.html

@@ -1,31 +1,54 @@
+{{ if (and .image .icon) }}
+  {{ errorf "card: don't use both image and icon: %s" . }}
+{{ end }}
 <div class="not-prose overflow-x-hidden">
   {{ if .link }}
-    <a class="h-full" href="{{ .link }}">
+  <a class="h-full" href="{{ .link }}">
-  {{ end }}
+    {{ end }}
-    <div
+    <div class="h-full bg-white rounded-sm
-      class="h-full bg-white flex flex-col gap-2 rounded-sm p-4
              border border-gray-light-100 drop-shadow-sm dark:bg-gray-dark-200 dark:border-gray-dark-400
              {{ if .link }}hover:drop-shadow-lg hover:border-gray-light-200 hover:dark:border-gray-dark{{ end }}">
-      <div class="flex gap-4 items-center">
+      {{ if .image }}
-        {{ if .image }}
+      {{/* use the "tall image" layout */}}
-          <img class="w-[32px]" src="{{ .image }}" alt="">
+      <div class="flex gap-2 items-stretch">
-        {{ else if .icon }}
+        <div class="basis-1/3">
-          <span
+          <img class="h-full w-full object-cover" src="{{ .image }}" alt="">
-            class="material-symbols-rounded text-[32px]"
+        </div>
-            >{{ .icon }}</span
+        <div class="basis-2/3 flex flex-col gap-2 p-4">
-          >
+          <div class="text-xl text-gray-light-800 leading-snug dark:text-white flex gap-2">
-        {{ end }}
-        <div>
-          <div class="text-xl text-gray-light-800 leading-snug dark:text-white flex items-center gap-2">
             {{ markdownify .title }}
           </div>
+          <div class="text-gray-light-500 leading-snug dark:text-gray-dark-700">
+            {{ .description | markdownify }}
+          </div>
         </div>
       </div>
-      <div class="text-gray-light-500 leading-snug dark:text-gray-dark-700">
+      {{ else }}
-        {{ .description | markdownify }}
+      {{/* use the default layout */}}
+      <div class="flex flex-col gap-2 p-4">
+        <div class="flex gap-4 items-center">
+          {{ with .icon }}
+            {{ if strings.ContainsAny . "/." }}
+            {{/* image file */}}
+            <img class="w-[32px]" src="{{ . }}" alt="">
+            {{ else }}
+            {{/* icon ligature */}}
+            <span class="material-symbols-rounded text-[32px]">{{ . }}</span>
+            {{ end }}
+          {{ end }}
+          <div>
+            <div class="text-xl text-gray-light-800 leading-snug dark:text-white flex items-center gap-2">
+              {{ markdownify .title }}
+            </div>
+          </div>
+        </div>
+        <div class="text-gray-light-500 leading-snug dark:text-gray-dark-700">
+          {{ .description | markdownify }}
+        </div>
       </div>
+      {{ end }}
     </div>
-  {{ if .link }}
+    {{ if .link }}
-    </a>
+  </a>
   {{ end }}
 </div>

layouts/shortcodes/grid.html

@@ -1,5 +1,6 @@
-<div class="not-prose grid grid-cols-3 xl:grid-cols-2 gap-4 sm:flex sm:flex-col">
+{{ $cols := .Get "cols" | default 3 }}
-  {{ $items := index .Page.Params (.Get 0 | default "grid") }}
+<div class="not-prose grid grid-cols-{{ $cols }} xl:grid-cols-{{ sub $cols 1 }} gap-4 sm:flex sm:flex-col">
+  {{ $items := index .Page.Params (.Get "items" | default "grid") }}
   {{ range $items }}
     {{ $opts := dict "title" .title "link" .link "description" .description "icon" .icon "image" .image }}
     {{ partial "components/card.html" $opts }}