Chore: Merge branch 'content-re-grid' into 'add-card-example'

Author: lamATnginx

assets/css/v2/style.css

@@ -0,0 +1,18 @@
+---
+title: Example Site for NGINX Hugo Theme
+description: 
+---
+
+## NGINX Hugo Theme Documentation 
+Documentation for hugo theme
+{{<card-layout>}}
+  {{<card-section showAsCards="true">}}
+    {{<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">}}
+      See a live example of theme components
+    {{</card >}}
+  {{</card-section>}}
+{{</card-layout>}}
+

exampleSite/content/_index.md

@@ -1,16 +1,3 @@
 {{ define "main" }}
-
-<h1>Homepage Example</h1>
-<p>
-    <ul>
-        <li>
-            <a href="{{ relref . "nginx" }}">NGINX and NGINX Plus</a>
-        </li>
-        <li>
-            <a href="{{ relref . "test-product" }}">Test Product</a>
-        </li>
-    </ul>
-</p>
-
-
+{{ partial "homepage.html" . }}
 {{end}}

exampleSite/layouts/index.html

@@ -2,7 +2,7 @@
 
 <main class="content " role="main">
     <div data-cms-edit="content" class="text-content list-page">
-        <div class="breadcrumb-layout wide">
+        <div class="breadcrumb-layout">
         {{ if not .IsHome }}
             {{ if not (in .Params.display_breadcrumb "false" ) }}
             {{ partial "breadcrumb" .}}

layouts/_default/list.html

@@ -3,7 +3,7 @@
     <!-- Replace icons -->
     {{ $content := partial "icon-replacement.html" (dict "content" .Content) }}
 
-    <div class="breadcrumb-layout wide">
+    <div class="breadcrumb-layout">
         {{ if not .IsHome }}
         {{ if not (in .Params.display_breadcrumb "false" ) }}
         {{ partial "breadcrumb" .}}

layouts/_default/single.html

@@ -0,0 +1,5 @@
+<div class="homepage">
+  <div class="homepage-section">
+    {{ .Content }}
+  </div>
+</div>

layouts/partials/homepage.html

@@ -25,7 +25,7 @@
   <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>    
+      <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>    
     {{ else }}
       <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>    
     {{ end }}

layouts/shortcodes/card-section.html

@@ -1,9 +1,10 @@
 {{- $title := .Get "title" -}}
-{{- $titleUrl := .Get "titleUrl" | default "/" -}} 
+{{- $titleUrl := .Get "titleUrl" | default "." -}} 
 {{- $icon := .Get "icon" | default "book-open" -}}
 {{- $brandIcon := .Get "brandIcon" -}}
-{{- $isFeaturedParam := .Get "isFeaturedCard" | default "false" }}
+{{- $isFeaturedParam := .Get "isFeatured" | default "false" }}
 {{- $isFullSizeParam := .Get "isFullSize" | default "false" -}}
+{{- $isLandingParam := .Get "isLanding" | default "false" }}
 
 {{- /* Validate the parameter strictly */ -}}
 {{- if not (in (slice "true" "false") $isFeaturedParam) -}}
@@ -16,37 +17,40 @@
 {{- end -}}
 {{- $isFullSize := cond (eq $isFullSizeParam "true") "true" "false" -}}
 
+{{- if not (in (slice "true" "false") $isLandingParam) -}}
+  {{- warnf "The '<card>' Shortcode parameter 'isLanding' must be 'true' or 'false', but got: '%s'. This will now default to 'false'" $isLandingParam -}}
+{{- end -}}
+{{- $isLanding := cond (eq $isLandingParam "true") "true" "false" -}}
+
 {{- /* Set up the positioning */ -}}
 {{ $dataGrid := "" }}
 {{ if or (eq $isFullSize "true") (eq $isFeatured "true") }}
   {{ $dataGrid = "wide"}}
+{{ else if (eq $isLanding "true") }}
+  {{ $dataGrid = "third"}}
 {{ else }}
   {{ $dataGrid = "half"}}
 {{ end }}
 
 {{- /* Validate that the parent is card-section and under 3 cards */ -}}
 {{- if (eq .Parent.Name "card-section") -}}
-  <div class="card{{ if eq $isFeatured "true" }} featured-card{{ end }}" data-grid="{{ $dataGrid }}" data-testid="{{ if eq $isFeatured "true" }}card__featured-card{{else}}card{{ end }}">
+<a href="{{- $titleUrl -}}" alt="{{- $title -}}" class="card{{ if eq $isFeatured "true" }} featured-card{{ end }}" data-grid="{{ $dataGrid }}" data-testid="{{ if eq $isFeatured "true" }}card__featured-card{{else}}card{{ end }}">
+  <div class="card-container">
     {{- if $title -}}
       <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>
+        {{- else if $icon -}}
+          {{ partial "lucide" (dict "context" . "icon" $icon) }}
         {{- end -}}
+        <h2 class="card-title">{{- $title -}}</h2>
       </div>
     {{- else -}}
       {{ errorf "Mainframe: Missing param 'title'" }}
     {{- end -}}
-    {{ .Inner }}
+    <div class="card-content">{{ .Inner }}</div>
   </div>
+</a>
 {{- else -}}
   {{ errorf "The '<card>' must be nested directly inside the shortcode '<card-section>'. Please see the exampleSite for an example of usage." }}
 {{- end -}}