Card: Fix issue with absolute url + icon path + reordered CSS

Author: lamATnginx

assets/css/v2/style.css

@@ -1448,98 +1448,119 @@ h6:has(a):hover {
 }
 
 /* Landing page cards */
-
-.homepage {
-  .card-grid {
-    grid-template-columns: 1fr;
-
-    @media (min-width: 70rem) {
-      grid-template-columns: repeat(12, 1fr);
-    }
-  }
-
-  .card-layout .card-grid .card {
-    padding: 1rem 2rem 2rem 2rem;
-
-    .lucide,
-    .card-brand-icon {
-      height: 40px;
-      width: auto;
-    }
-  }
-}
-
 .card-layout {
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
 
   .card-section {
-    strong {
-      font-weight: 500;
-      font-size: var(--font-step-2);
-      display: block;
-      margin-bottom: 1rem;
-    }
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
 
     &.featured-section {
       /* Hide all the cards past 3 if it is a featured card section */
       .card-section-content > *:nth-child(n + 4 of a.card) {
         display: none;
       }
     }
-  }
-
-  .card {
-    color: oklch(var(--color-foreground));
-    text-decoration: none;
-    order: 2;
 
-    &.featured-card {
-      order: 1;
+    .card-section-title {
+      font-weight: 500;
+      font-size: var(--font-step-2);
+      display: block;
     }
 
-    .card-container {
+    .card-section-content {
       display: flex;
       flex-direction: column;
-      gap: 0.5rem;
-    }
-
-    .card-header {
-      display: flex;
-      flex-direction: row;
       gap: 1rem;
-      align-items: center;
-      color: oklch(var(--color-brand));
 
-      .card-brand-icon {
-        height: 20px;
-        width: auto;
+      &.card-grid {
+        display: grid;
+        grid-template-columns: repeat(var(--grid-columns), 1fr);
+        gap: 1.5rem;
+
+        @media (max-width: 55rem) {
+          grid-template-columns: 1fr;
+        }
+
+        .card {
+          border: 1px solid oklch(var(--color-codeblock-border));
+          box-shadow: 3px 3px 0px oklch(var(--color-shadow));
+          padding: 1rem;
+          order: 2;
+
+          &.featured-card {
+            order: 1;
+          }
+        }
       }
 
-      h2 {
-        padding: 0;
-        margin: 0;
-        font-size: var(--font-step-1);
+      .card {
+        color: oklch(var(--color-foreground));
+        text-decoration: none;
+
+        .card-container {
+          display: flex;
+          flex-direction: column;
+          gap: 0.5rem;
+        }
+
+        .card-header {
+          display: flex;
+          flex-direction: row;
+          gap: 1rem;
+          align-items: center;
+          color: oklch(var(--color-brand));
+
+          img.card-brand-icon {
+            height: 1.5rem;
+            width: auto;
+          }
+
+          h2 {
+            padding: 0;
+            margin: 0;
+            font-size: var(--font-step-1);
+          }
+        }
       }
     }
   }
 }
 
-/* Optional grid layout */
-.card-grid {
-  display: grid;
-  grid-template-columns: repeat(var(--grid-columns), 1fr);
-  gap: 1.5rem;
+.homepage .card-layout {
+  margin-bottom: 3rem;
+  gap: 3rem;
 
-  @media (max-width: 55rem) {
-    grid-template-columns: 1fr;
-  }
+  .card-section {
+    .card-section-content.card-grid {
+      grid-template-columns: 1fr;
 
-  .card {
-    border: 1px solid oklch(var(--color-codeblock-border));
-    box-shadow: 3px 3px 0px oklch(var(--color-shadow));
-    padding: 1rem;
+      @media (min-width: 70rem) {
+        grid-template-columns: repeat(12, 1fr);
+        grid-auto-rows: 1fr;
+      }
+
+      .card {
+        padding: 1rem 2rem 2rem 2rem;
+
+        .card-container {
+          height: 7rem;
+          justify-content: space-around;
+
+          .card-header {
+            justify-content: flex-start;
+
+            .card-brand-icon {
+              height: 40px;
+              width: auto;
+            }
+          }
+        }
+      }
+    }
   }
 }
 

exampleSite/content/_index.md

@@ -10,7 +10,7 @@ Documentation for hugo theme
     {{<card title="Test Product" titleUrl="test-product/" icon="test-tubes"  isLanding="true">}}
       See explanations and usages of shortcodes
     {{</card >}}
-    {{<card title="NGINX Plus" titleUrl="nginx/" brandIcon="NGINX-Plus-product-icon-RGB"  isLanding="true">}}
+    {{<card title="NGINX Plus" titleUrl="nginx/" brandIcon="NGINX-Plus-product-icon-RGB.svg"  isLanding="true">}}
       See a live example of theme components
     {{</card >}}
   {{</card-section>}}

layouts/shortcodes/card-section.html

@@ -22,7 +22,7 @@
 
 {{- /* Validate that the parent is card-layout */ -}}
 {{ if eq .Parent.Name "card-layout"}}
-  <div class="card-section {{if eq $isFeaturedSection "true"}}featured-section{{ end }}" data-testid="{{if eq $isFeaturedSection "true"}}card-section__featured-section{{else}}card-section{{ end }}">
+  <div class="card-section{{if eq $isFeaturedSection "true"}} featured-section{{ end }}" data-testid="{{if eq $isFeaturedSection "true"}}card-section__featured-section{{else}}card-section{{ end }}">
     {{- if $title -}}
       <strong class="card-section-title">{{- $title -}}</strong>
       <div class="card-section-content{{ if eq $showAsCards "true" }} {{ $class }}{{ end }}" data-testid="{{ if eq $showAsCards "true" }}card-section-content__card-grid{{else}}card-section-content{{ end }}">{{ .Inner }}</div>    

layouts/shortcodes/card.html

@@ -33,11 +33,13 @@
 {{ end }}
 
 {{- /* Build the url */ -}}
+{{ $url := printf "%s%s" .Page.Permalink $titleUrl }}
 {{ if eq (substr $titleUrl 0 1) "/" }}
   {{ $suggestedUrlFix := substr $titleUrl 1 }} 
   {{ errorf "Please do not start the param 'titleUrl' with a forward slash. Got: '%s', use '%s' instead." $titleUrl $suggestedUrlFix }}
+{{ else if (strings.Contains $titleUrl "https") }}
+  {{ $url = $titleUrl }}
 {{ end }}
-{{ $url := printf "%s%s" .Page.Permalink $titleUrl }}
 
 {{- /* Validate that the parent is card-section and under 3 cards */ -}}
 {{- if (eq .Parent.Name "card-section") -}}
@@ -46,7 +48,7 @@
     {{- if $title -}}
       <div class="card-header">
         {{- if $brandIcon -}}
-          <img class="card-brand-icon" src="/images/icons/{{ $brandIcon }}.svg">
+          <img class="card-brand-icon" src="/images/icons/{{ $brandIcon }}">
         {{- else if $icon -}}
           {{ partial "lucide" (dict "context" . "icon" $icon) }}
         {{- end -}}