Skip to content

Commit e2af6fe

Browse files
lamATnginxlamATnginx
committed
Card: Modify cards code to support new landing page archetype
1 parent 379bb08 commit e2af6fe

File tree

6 files changed

+109
-74
lines changed

6 files changed

+109
-74
lines changed

‎assets/css/v2/style.css‎

Lines changed: 64 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1193,31 +1193,88 @@ h6:has(a):hover {
11931193
}
11941194

11951195
/* Landing page cards */
1196-
11971196
.text-content .card-layout {
1198-
grid-column: 1 / -1;
1197+
grid-column: 1;
11991198

12001199
.card-section {
1201-
margin-bottom: 1rem;
1200+
display: flex;
1201+
flex-direction: column;
1202+
gap: 1rem;
12021203

12031204
strong {
12041205
font-weight: 500;
12051206
}
1207+
1208+
/* Hide all the cards past 3 if it is a featured card section */
1209+
&.featured-section {
1210+
.card-section-content.card-grid > *:nth-child(n + 4) {
1211+
display: none;
1212+
}
1213+
}
12061214
}
12071215
}
12081216

12091217
/* Optional grid layout */
12101218
.card-grid {
12111219
display: grid;
1212-
grid-template-columns: repeat(auto-fit, minmax(120px, 500px));
1220+
grid-template-columns: repeat(auto-fit, minmax(33%, 1fr));
12131221
gap: 1.5rem;
1214-
margin-top: 1rem;
12151222

12161223
.card-container {
12171224
border: 1px solid oklch(var(--color-codeblock-border));
12181225
box-shadow: 3px 3px 0px oklch(var(--color-shadow));
1219-
padding: 1rem 2rem 2rem 2rem;
1220-
margin-bottom: 1.5rem;
1226+
padding: 1rem;
1227+
1228+
&.featured-card {
1229+
/* If there is a featured card, only the featured card should be full length */
1230+
grid-column: 1 / -1;
1231+
1232+
/* If there is a featured card AND two cards, the last one should be full length */
1233+
~ .card-container:nth-child(2n):last-child {
1234+
grid-column: 1 / -1;
1235+
}
1236+
}
1237+
}
1238+
1239+
/* If there is no featured card, last card that is the 3rd one should be full width */
1240+
&:not(:has(.featured-card)) .card-container:nth-child(3n):last-child {
1241+
grid-column: 1 / -1;
1242+
}
1243+
}
1244+
1245+
.card-container {
1246+
display: flex;
1247+
flex-direction: column;
1248+
gap: 0.5rem;
1249+
margin-bottom: 1rem;
1250+
1251+
.card-header {
1252+
display: flex;
1253+
flex-direction: row;
1254+
gap: 0.5rem;
1255+
1256+
.card-brand-icon {
1257+
height: 20px;
1258+
width: auto;
1259+
}
1260+
1261+
h2 {
1262+
padding: 0;
1263+
margin: 0;
1264+
font-size: 1rem;
1265+
}
1266+
}
1267+
}
1268+
1269+
.list-header-container {
1270+
display: flex;
1271+
gap: 1.5rem;
1272+
align-items: center;
1273+
justify-content: start;
1274+
1275+
img {
1276+
width: auto;
1277+
height: 3.5rem;
12211278
}
12221279
}
12231280

‎layouts/_default/list.html‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -28,17 +28,22 @@
2828
{{ end }}
2929
{{ end }}
3030
</section>
31-
<h1>{{ .Title }}</h1>
31+
<div class="list-header-container">
32+
<img src="/images/icons/{{ .Params.logo | default "NGINX-product-icon.svg" }}">
33+
<div class="list-header-title">
34+
<h1>{{ .Title }}</h1>
35+
{{ if .Description }}
36+
<p>{{ .Description | markdownify }}</p>
37+
{{ end }}
38+
</div>
39+
</div>
3240

3341
{{ partial "banner" . }}
3442

3543
{{ $hasCustomContent := .Params.hasCustomContent | default false }}
3644
{{ if $hasCustomContent }}
37-
{{ .Page.Scratch.Set "custom-landing-page-file-name" "custom-landing-page.html" }}
38-
{{ .Page.Scratch.Set "custom-landing-page-context" . }}
3945
{{ .Content }}
4046
{{ else }}
41-
{{ .Content }}
4247
{{ range .Pages.ByWeight }}
4348
<h2>
4449
<a href="{{ if .Params.url}}{{ .Params.url}}{{else}}{{ .Permalink }}{{end}}">{{ .Title }}</a>

‎layouts/partials/custom-landing-page.html‎

Lines changed: 0 additions & 48 deletions
This file was deleted.

‎layouts/shortcodes/card-layout.html‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,2 @@
11
<!-- Render the main content first with modifications, then render the custom content -->
2-
{{ $customLandingPageFileName := .Page.Scratch.Get "custom-landing-page-file-name" }}
3-
{{ $customLandingPageContext := .Page.Scratch.Get "custom-landing-page-context" }}
4-
{{ partial $customLandingPageFileName $customLandingPageContext }}
5-
<div class="card-layout">{{- .Inner | markdownify -}}</div>
2+
<div class="card-layout">{{ .Inner | markdownify }}</div>

‎layouts/shortcodes/card-section.html‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
{{ $title := .Get "title" }}
2+
{{ $isFeaturedSectionParam := .Get "isFeaturedSection" | default "false" }}
23
{{ $showAsCardsParam := .Get "showAsCards" | default "false"}}
34
{{- /* Validate the parameter strictly */ -}}
45
{{- if not (in (slice "true" "false") $showAsCardsParam) -}}
@@ -8,13 +9,20 @@
89
{{- $current := .Page.Scratch.Get "showAsCards" | default (dict) -}}
910
{{- $newShowAsCards := dict ($title | default "main") ($showAsCards) -}}
1011
{{- .Page.Scratch.Set "showAsCards" (merge $current ($newShowAsCards)) -}}
11-
{{- $class := "card-grid wide" -}}
12+
{{- /* Limit the cards if it is a featured section */ -}}
13+
{{- if not (in (slice "true" "false") $isFeaturedSectionParam) -}}
14+
{{- warnf "The '<card-section>' Shortcode parameter 'isFeaturedSection' must be 'true' or 'false', but got: '%s'. This will now default to 'false'" $isFeaturedSectionParam -}}
15+
{{- end -}}
16+
{{- $isFeaturedSection := cond (eq $isFeaturedSectionParam "true") "true" "false" -}}
17+
{{- $class := "card-grid" -}}
1218
{{- /* Validate that the parent is card-layout */ -}}
1319
{{ if eq .Parent.Name "card-layout"}}
14-
<div class="card-section" data-mf="true" style="display: none;">
20+
<div class="card-section {{if eq $isFeaturedSection "true"}}featured-section{{ end }}">
1521
{{- if $title -}}
1622
<strong class="card-section-title">{{- $title -}}</strong>
1723
<div class="card-section-content{{ if eq $showAsCards "true" }} {{ $class }} {{ end }}">{{- .Inner -}}</div>
24+
{{ else }}
25+
<div class="card-section-content{{ if eq $showAsCards "true" }} {{ $class }} {{ end }}">{{ .Inner }}</div>
1826
{{ end }}
1927
</div>
2028
<div class="row" data-mf="false">

‎layouts/shortcodes/card.html‎

Lines changed: 25 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,34 @@
11
{{- $title := .Get "title" -}}
22
{{- $titleUrl := .Get "titleUrl" | default "/" -}}
3-
{{- $icon := .Get "icon" | default "NGINX-product-icon" -}}
3+
{{- $icon := .Get "icon" | default "book-open" -}}
4+
{{- $brandIcon := .Get "brandIcon" -}}
5+
{{- $isFeaturedParam := .Get "isFeatured" | default "false" }}
6+
{{- /* Validate the parameter strictly */ -}}
7+
{{- if not (in (slice "true" "false") $isFeaturedParam) -}}
8+
{{- warnf "The '<card>' Shortcode parameter 'isFeatured' must be 'true' or 'false', but got: '%s'. This will now default to 'false'" $isFeaturedParam -}}
9+
{{- end -}}
10+
{{- $isFeatured := cond (eq $isFeaturedParam "true") "true" "false" -}}
411
{{- $current := .Page.Scratch.Get "cards" | default (slice) -}}
512
{{- $newCard := dict "title" ($title) "content" (.Inner) -}}
613
{{- .Page.Scratch.Set "cards" ($current | append $newCard) -}}
7-
{{- /* Validate that the parent is card-section */ -}}
8-
{{- if eq .Parent.Name "card-section" -}}
9-
<div class="card-container" style="display: none;" data-mf="true">
14+
{{- /* Validate that the parent is card-section and under 3 cards */ -}}
15+
{{- if (eq .Parent.Name "card-section") -}}
16+
<div class="card-container {{ if eq $isFeatured "true" }}featured-card{{ end }}">
1017
{{- if $title -}}
11-
{{- if $titleUrl -}}
12-
<h2 class="card-title"><a href="{{- $titleUrl -}}">{{- $title -}}</a></h2>
13-
{{- else -}}
14-
<h2 class="card-title">{{- $title -}}</h2>
15-
{{- end -}}
18+
<div class="card-header">
19+
{{- if $brandIcon -}}
20+
<img class="card-brand-icon" src="/images/icons/{{ $brandIcon }}.svg">
21+
{{- else -}}
22+
{{- if $icon -}}
23+
{{ partial "lucide" (dict "context" . "icon" $icon) }}
24+
{{- end -}}
25+
{{- end -}}
26+
{{- if $titleUrl -}}
27+
<h2 class="card-title"><a href="{{- $titleUrl -}}">{{- $title -}}</a></h2>
28+
{{- else -}}
29+
<h2 class="card-title">{{- $title -}}</h2>
30+
{{- end -}}
31+
</div>
1632
{{- else -}}
1733
{{ errorf "Mainframe: Missing param 'title'" }}
1834
{{- end -}}

0 commit comments

Comments
 (0)