Landing: Polished code + added error handling

Author: lamATnginx

assets/css/v2/style.css

@@ -674,7 +674,6 @@ nav {
 
   h2 {
     font-size: 1.5rem;
-    margin: 1rem 0 0rem 0;
   }
 
   hr {
@@ -1188,6 +1187,35 @@ h6:has(a):hover {
   color: oklch(var(--color-brand));
 }
 
+/* Landing page cards */
+
+.text-content .card-layout {
+  grid-column: 1 / -1;
+
+  .card-section {
+    margin-bottom: 1rem;
+
+    strong {
+      font-weight: 500;
+    }
+  }
+}
+
+/* Optional grid layout */
+.card-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(120px, 500px));
+  gap: 1.5rem;
+  margin-top: 1rem;
+
+  .card {
+    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;
+  }
+}
+
 /* MARK: Tables
 */
 table {

exampleSite/content/test-product/_index.md

@@ -2,4 +2,15 @@
 description: Test pages for nginx-hugo-theme
 title: Test pages
 weight: 100
+hasCustomContent: true
 ---
+{{< card-layout >}}
+  {{< card-section >}}
+    {{< card title="Call Out usages" >}}
+      Examples for <call-out> shortcode
+    {{</ card >}}
+    {{< card title="Code Block usages" >}}
+      Examples for codeblock shortcode
+    {{</ card >}}
+  {{</ card-section >}}
+{{</ card-layout >}}

layouts/_default/list.html

@@ -32,16 +32,17 @@ <h1>{{ .Title }}</h1>
 
       {{ partial "banner" . }}
 
-      {{ if  (lt .WordCount 1)  }}
-      {{ .Content }}
-      {{ range .Pages.ByWeight }}
-      <h2>
-          <a href="{{ if .Params.url}}{{ .Params.url}}{{else}}{{ .Permalink }}{{end}}">{{ .Title }}</a>
-      </h2>
-      {{ end }}
+      {{ $hasCustomContent := .Params.hasCustomContent | default false }}
+      {{ if $hasCustomContent }} 
+        {{ partial "custom-landing-page" . }}
       {{ else }}
-      {{ partial "custom-landing-page" . }}
-      {{end}}
+        {{ .Content }}
+        {{ range .Pages.ByWeight }}
+        <h2>
+            <a href="{{ if .Params.url}}{{ .Params.url}}{{else}}{{ .Permalink }}{{end}}">{{ .Title }}</a>
+        </h2>
+        {{ end }}
+      {{ end }}
 
       <hr>
       {{ if .Page.Lastmod }}

layouts/partials/custom-landing-page.html

@@ -1,13 +1,18 @@
 {{ $cards := .Scratch.Get "cards" }}
-{{ range .Pages.ByWeight }}
-{{ $title := .Title }}
-  <h2>
-    <a href="{{ if .Params.url}}{{ .Params.url}}{{else}}{{ .Permalink }}{{end}}">{{ $title }}</a>
-  </h2>
-  {{ range $cards }}
-    {{ if eq .title $title }}
-        <p style="margin-left: 1rem;">{{ .content }}</p>
-    {{ end }}
+{{ $class := "card-grid wide"}}
+<div>
+  {{ range .Pages.ByWeight }}
+  {{ $title := .Title }}
+    <div class="card">
+      <h2>
+        <a href="{{ if .Params.url}}{{ .Params.url}}{{else}}{{ .Permalink }}{{end}}">{{ $title }}</a>
+      </h2>
+      {{ range $cards }}
+        {{ if eq .title $title }}
+            <p>{{ .content }}</p>
+        {{ end }}
+      {{ end }}
+    </div>
   {{ end }}
-{{ end }}
+</div>
 {{ .Content }}

layouts/shortcodes/card-layout.html

@@ -1 +1 @@
-<div data-mf="true" style="display: none">{{- .Inner | markdownify -}}</div>
+<div class="card-layout" data-mf="true" style="display: none">{{- .Inner | markdownify -}}</div>

layouts/shortcodes/card-section.html

@@ -1,7 +1,18 @@
-<div class="card-section">
-  {{- if .Get "title" -}}
-    <strong>{{- .Get "title" -}}</strong>
-    <div style="padding-left: 1rem;">{{- .Inner -}}</div>    
-  {{ end }}
-</div>
-<br><br>
+{{- /* Handle different versions of booleans */ -}}
+{{ $showAsCards := .Get 0 | default (.Get "showAsCards") | default "false"}}
+{{- /* Validate the parameter strictly */ -}}
+{{ if not (in (slice "true" "false") $showAsCards) }}
+  {{ warnf "The '<card-section>' Shortcode parameter 'showAsCards' must be 'true' or 'false', but got: '%s'. This will now default to 'false'" $showAsCards}}
+{{ end }}
+{{ $class := "card-grid wide"}}
+{{- /* Validate that the parent is card-layout */ -}}
+{{ if eq .Parent.Name "card-layout"}}
+  <div class="card-section">
+    {{- if .Get "title" -}}
+      <strong class="card-section-title">{{- .Get "title" -}}</strong>
+      <div class="card-section-content{{ if eq $showAsCards "true" }} {{ $class }} {{ end }}">{{- .Inner -}}</div>    
+    {{ end }}
+  </div>
+{{ else }}
+  {{ errorf "The '<card-section>' must be nested directly inside the shortcode '<card-layout>'. Please see the exampleSite for an example of usage." }}
+{{ end }}

layouts/shortcodes/card.html

@@ -2,11 +2,18 @@
 {{- $newCard := dict "title" (.Get "title") "content" (.Inner) -}}
 {{- .Page.Scratch.Set "cards" ($current | append $newCard) -}}
 
-{{- if .Get "title" -}}
-  {{- if .Get "titleUrl" -}}
-   <h2 style="padding: 0;"><a href="{{- .Get "titleUrl" -}}">{{- .Get "title" -}}</a></h2>
-  {{- else -}}
-    <h2 style="padding: 0;">{{- .Get "title" -}}</h2>
-  {{- end -}}
-{{ end }}
-<p>{{- .Inner -}}</p>
+{{- /* Validate that the parent is card-section */ -}}
+{{ if eq .Parent.Name "card-section"}}
+  <div class="card">
+    {{- if .Get "title" -}}
+      {{- if .Get "titleUrl" -}}
+        <h2 class="card-title"><a href="{{- .Get "titleUrl" -}}">{{- .Get "title" -}}</a></h2>
+      {{- else -}}
+        <h2 class="card-title">{{- .Get "title" -}}</h2>
+      {{- end -}}
+    {{ end }}
+    <p>{{- .Inner -}}</p>
+  </div>
+{{ else }}
+  {{ errorf "The '<card>' must be nested directly inside the shortcode '<card-section>'. Please see the exampleSite for an example of usage." }}
+{{ end }}