Modify cards code to support new landing page archetype

assets/css/v2/style.css

@@ -1193,31 +1193,88 @@ h6:has(a):hover {
 }
 
 /* Landing page cards */
-
 .text-content .card-layout {
-  grid-column: 1 / -1;
+  grid-column: 1;
 
   .card-section {
-    margin-bottom: 1rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
 
     strong {
       font-weight: 500;
     }
+
+    /* Hide all the cards past 3 if it is a featured card section */
+    &.featured-section {
+      .card-section-content.card-grid > *:nth-child(n + 4) {
+        display: none;
+      }
+    }
   }
 }
 
 /* Optional grid layout */
 .card-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(120px, 500px));
+  grid-template-columns: repeat(auto-fit, minmax(33%, 1fr));
   gap: 1.5rem;
-  margin-top: 1rem;
 
   .card-container {
     border: 1px solid oklch(var(--color-codeblock-border));
     box-shadow: 3px 3px 0px oklch(var(--color-shadow));
-    padding: 1rem 2rem 2rem 2rem;
-    margin-bottom: 1.5rem;
+    padding: 1rem;
+
+    &.featured-card {
+      /* If there is a featured card, only the featured card should be full length */
+      grid-column: 1 / -1;
+
+      /* If there is a featured card AND two cards, the last one should be full length */
+      ~ .card-container:nth-child(2n):last-child {
+        grid-column: 1 / -1;
+      }
+    }
+  }
+
+  /* If there is no featured card, last card that is the 3rd one should be full width */
+  &:not(:has(.featured-card)) .card-container:nth-child(3n):last-child {
+    grid-column: 1 / -1;
+  }
+}
+
+.card-container {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+
+  .card-header {
+    display: flex;
+    flex-direction: row;
+    gap: 0.5rem;
+
+    .card-brand-icon {
+      height: 20px;
+      width: auto;
+    }
+
+    h2 {
+      padding: 0;
+      margin: 0;
+      font-size: 1rem;
+    }
+  }
+}
+
+.list-header-container {
+  display: flex;
+  gap: 1.5rem;
+  align-items: center;
+  justify-content: start;
+
+  img {
+    width: auto;
+    height: 3.5rem;
   }
 }
 

exampleSite/content/test-product/_index.md

@@ -4,24 +4,45 @@ title: Test pages
 weight: 100
 hasCustomContent: true
 ---
+
+## About
+
+[//]: # "Give a short 1-2 sentence summary of what the product does and its value to a customer."
+This is a compilation of all our shortcodes to show how they look, function, respond, and coded.
+
+## Featured Content
+
+[//]: # "Maximum of three cards available to display."
+[//]: # "Each card should be less than 10 words for a description."
+[//]: # "If more than three cards are placed here, they are not displayed."
+[//]: # "If there is one card, it will take full width and be the only card in the row."
+[//]: # "If there is two cards, one card will take half width and there will be two cards in a row."
+[//]: # "If there is three cards, there will be two rows, where first row has two equal-sized cards, and second row will have a full width card. Can we inversed in order to feature content."
 <!-- <card-layout> - Available params: title (required: string)-->
-{{< card-layout >}}
-  <!-- <card-section> - Available params: title (required: string), showAsCards (optional: boolean, default false) -->
+{{<card-layout >}}
+  <!-- <card-section> - Available params: title (required: string), showAsCards (optional: boolean, default "false"), isFeaturedSection (optional: boolean, default "false") -->
   <!-- If there is no "title" for <card-section>, it is implied it is the main content section and not a new content section -->
-  {{< card-section >}}
-    {{< card title="Call Out usages" >}}
-      <!-- <card> - Available params: title (required: string), titleUrl (optional: string, relative path or absolute URL (e.g. https://google.com)) -->
+  {{<card-section showAsCards="true" isFeaturedSection="true">}}
+    {{<card title="Everything" titleUrl="everything" icon="circle-dot-dashed">}}
+      All shortcodes in one page.
+    {{</card >}}
+    {{<card title="Call Out usages" titleUrl="call-out/all-callouts/" icon="message-square">}}
+      <!-- <card> - Available params: title (required: string), titleUrl (optional: string, relative path or absolute URL (e.g. https://google.com)), icon (optional: string, pulled from lucide), brandIcon (optional: string, takes priority over icon if provided) -->
       Examples for call-out shortcode
-    {{</ card >}}
-    {{< card title="Code Block usages" >}}
+    {{</card >}}
+    {{<card title="Code Block usages" titleUrl="code-blocks/code-blocks-highlighting/" icon="code">}}
       Examples for codeblock shortcode
-    {{</ card >}}
-  {{</ card-section >}}
+    {{</card >}}
+  {{</card-section>}}
+{{</card-layout >}}
+
+## Other Content 
 
-  # Other Products on ExampleSite
-  {{< card-section title="NGINX" showAsCards="true" >}}
-    {{< card title="NGINX Plus" titleUrl="/nginx/" >}}
+[//]: # "Provide any sort of additional supporting content you may want customers to see as well (e.g. more cards, diagrams, changelogs, etc.)"
+{{<card-layout >}}
+  {{<card-section title="NGINX" showAsCards="true" >}}
+    {{<card title="NGINX Plus" titleUrl="/nginx/" brandIcon="NGINX-Plus-product-icon-RGB" >}}
       Installing NGINX
-    {{</ card >}}
-  {{</ card-section >}}
-{{</ card-layout >}}
+    {{</card >}}
+  {{</card-section >}}
+{{</card-layout >}}

layouts/_default/list.html

@@ -28,17 +28,22 @@
           {{ end }}
         {{ end }}
       </section>
-      <h1>{{ .Title }}</h1>
+      <div class="list-header-container">
+        <img src="/images/icons/{{ .Params.logo | default "NGINX-product-icon.svg" }}">
+        <div class="list-header-title">
+          <h1>{{ .Title }}</h1>
+          {{ if .Description }}
+            <p>{{ .Description | markdownify }}</p>
+          {{ end }}
+        </div>
+      </div>
 
       {{ partial "banner" . }}
 
       {{ $hasCustomContent := .Params.hasCustomContent | default false }}
       {{ if $hasCustomContent }} 
-        {{ .Page.Scratch.Set "custom-landing-page-file-name" "custom-landing-page.html" }}
-        {{ .Page.Scratch.Set "custom-landing-page-context" . }}
         {{ .Content }}
       {{ else }}
-        {{ .Content }}
         {{ range .Pages.ByWeight }}
         <h2>
             <a href="{{ if .Params.url}}{{ .Params.url}}{{else}}{{ .Permalink }}{{end}}">{{ .Title }}</a>

layouts/shortcodes/card-layout.html

@@ -1,5 +1,2 @@
 <!-- Render the main content first with modifications, then render the custom content -->
-{{ $customLandingPageFileName := .Page.Scratch.Get "custom-landing-page-file-name" }}
-{{ $customLandingPageContext := .Page.Scratch.Get "custom-landing-page-context" }}
-{{ partial $customLandingPageFileName $customLandingPageContext }}
-<div class="card-layout">{{- .Inner | markdownify -}}</div>
+<div class="card-layout">{{ .Inner | markdownify }}</div>

layouts/shortcodes/card-section.html

@@ -1,4 +1,5 @@
 {{ $title := .Get "title" }}
+{{ $isFeaturedSectionParam := .Get "isFeaturedSection" | default "false" }}
 {{ $showAsCardsParam := .Get "showAsCards" | default "false"}}
 {{- /* Validate the parameter strictly */ -}}
 {{- if not (in (slice "true" "false") $showAsCardsParam) -}}
@@ -8,13 +9,20 @@
 {{- $current := .Page.Scratch.Get "showAsCards" | default (dict) -}}
 {{- $newShowAsCards := dict ($title | default "main") ($showAsCards) -}}
 {{- .Page.Scratch.Set "showAsCards" (merge $current ($newShowAsCards)) -}}
-{{- $class := "card-grid wide" -}}
+{{- /* Limit the cards if it is a featured section */ -}}
+{{- if not (in (slice "true" "false") $isFeaturedSectionParam) -}}
+  {{- warnf "The '<card-section>' Shortcode parameter 'isFeaturedSection' must be 'true' or 'false', but got: '%s'. This will now default to 'false'" $isFeaturedSectionParam -}}
+{{- end -}}
+{{- $isFeaturedSection := cond (eq $isFeaturedSectionParam "true") "true" "false" -}}
+{{- $class := "card-grid" -}}
 {{- /* Validate that the parent is card-layout */ -}}
 {{ if eq .Parent.Name "card-layout"}}
-  <div class="card-section" data-mf="true" style="display: none;">
+  <div class="card-section {{if eq $isFeaturedSection "true"}}featured-section{{ end }}">
     {{- if $title -}}
       <strong class="card-section-title">{{- $title -}}</strong>
       <div class="card-section-content{{ if eq $showAsCards "true" }} {{ $class }} {{ end }}">{{- .Inner -}}</div>    
+    {{ else }}
+      <div class="card-section-content{{ if eq $showAsCards "true" }} {{ $class }} {{ end }}">{{ .Inner }}</div>    
     {{ end }}
   </div>
   <div class="row" data-mf="false">

layouts/shortcodes/card.html

@@ -1,18 +1,34 @@
 {{- $title := .Get "title" -}}
 {{- $titleUrl := .Get "titleUrl" | default "/" -}} 
-{{- $icon := .Get "icon" | default "NGINX-product-icon" -}}
+{{- $icon := .Get "icon" | default "book-open" -}}
+{{- $brandIcon := .Get "brandIcon" -}}
+{{- $isFeaturedParam := .Get "isFeatured" | default "false" }}
+{{- /* Validate the parameter strictly */ -}}
+{{- if not (in (slice "true" "false") $isFeaturedParam) -}}
+  {{- warnf "The '<card>' Shortcode parameter 'isFeatured' must be 'true' or 'false', but got: '%s'. This will now default to 'false'" $isFeaturedParam -}}
+{{- end -}}
+{{- $isFeatured := cond (eq $isFeaturedParam "true") "true" "false" -}}
 {{- $current := .Page.Scratch.Get "cards" | default (slice) -}}
 {{- $newCard := dict "title" ($title) "content" (.Inner) -}}
 {{- .Page.Scratch.Set "cards" ($current | append $newCard) -}}
-{{- /* Validate that the parent is card-section */ -}}
-{{- if eq .Parent.Name "card-section" -}}
-  <div class="card-container" style="display: none;" data-mf="true">
+{{- /* Validate that the parent is card-section and under 3 cards */ -}}
+{{- if (eq .Parent.Name "card-section") -}}
+  <div class="card-container {{ if eq $isFeatured "true" }}featured-card{{ end }}">
     {{- if $title -}}
-      {{- if $titleUrl -}}
-        <h2 class="card-title"><a href="{{- $titleUrl -}}">{{- $title -}}</a></h2>
-      {{- else -}}
-        <h2 class="card-title">{{- $title -}}</h2>
-      {{- end -}}
+      <div class="card-header">
+        {{- if $brandIcon -}}
+          <img class="card-brand-icon" src="/images/icons/{{ $brandIcon }}.svg">
+        {{- else -}}
+          {{- if $icon -}}
+            {{ partial "lucide" (dict "context" . "icon" $icon) }}
+          {{- end -}}
+        {{- end -}}
+        {{- if $titleUrl -}}
+          <h2 class="card-title"><a href="{{- $titleUrl -}}">{{- $title -}}</a></h2>
+        {{- else -}}
+          <h2 class="card-title">{{- $title -}}</h2>
+        {{- end -}}
+      </div>
     {{- else -}}
       {{ errorf "Mainframe: Missing param 'title'" }}
     {{- end -}}