Skip to content

Commit 093f54c

Browse files
nginx-jacknginx-jack
committed
Revert "Modify cards code to support new landing page archetype (#278)"
This reverts commit 88f2a47.
1 parent a783d99 commit 093f54c

File tree

8 files changed

+94
-147
lines changed

8 files changed

+94
-147
lines changed

‎assets/css/v2/style.css

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

12021202
/* Landing page cards */
1203+
12031204
.text-content .card-layout {
1204-
grid-column: 1;
1205+
grid-column: 1 / -1;
12051206

12061207
.card-section {
1207-
display: flex;
1208-
flex-direction: column;
1209-
gap: 1rem;
1208+
margin-bottom: 1rem;
12101209

12111210
strong {
12121211
font-weight: 500;
12131212
}
1214-
1215-
/* Hide all the cards past 3 if it is a featured card section */
1216-
&.featured-section {
1217-
.card-section-content.card-grid > *:nth-child(n + 4) {
1218-
display: none;
1219-
}
1220-
}
12211213
}
12221214
}
12231215

12241216
/* Optional grid layout */
12251217
.card-grid {
12261218
display: grid;
1227-
grid-template-columns: repeat(auto-fit, minmax(33%, 1fr));
1219+
grid-template-columns: repeat(auto-fit, minmax(120px, 500px));
12281220
gap: 1.5rem;
1221+
margin-top: 1rem;
12291222

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

‎exampleSite/content/test-product/_index.md

Lines changed: 15 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -4,45 +4,24 @@ title: Test pages
44
weight: 100
55
hasCustomContent: true
66
---
7-
8-
## About
9-
10-
[//]: # "Give a short 1-2 sentence summary of what the product does and its value to a customer."
11-
This is a compilation of all our shortcodes to show how they look, function, respond, and coded.
12-
13-
## Featured Content
14-
15-
[//]: # "Maximum of three cards available to display."
16-
[//]: # "Each card should be less than 10 words for a description."
17-
[//]: # "If more than three cards are placed here, they are not displayed."
18-
[//]: # "If there is one card, it will take full width and be the only card in the row."
19-
[//]: # "If there is two cards, one card will take half width and there will be two cards in a row."
20-
[//]: # "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."
217
<!-- <card-layout> - Available params: title (required: string)-->
22-
{{<card-layout >}}
23-
<!-- <card-section> - Available params: title (required: string), showAsCards (optional: boolean, default "false"), isFeaturedSection (optional: boolean, default "false") -->
8+
{{< card-layout >}}
9+
<!-- <card-section> - Available params: title (required: string), showAsCards (optional: boolean, default false) -->
2410
<!-- If there is no "title" for <card-section>, it is implied it is the main content section and not a new content section -->
25-
{{<card-section showAsCards="true" isFeaturedSection="true">}}
26-
{{<card title="Everything" titleUrl="everything" icon="circle-dot-dashed">}}
27-
All shortcodes in one page.
28-
{{</card >}}
29-
{{<card title="Call Out usages" titleUrl="call-out/all-callouts/" icon="message-square">}}
30-
<!-- <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) -->
11+
{{< card-section >}}
12+
{{< card title="Call Out usages" >}}
13+
<!-- <card> - Available params: title (required: string), titleUrl (optional: string, relative path or absolute URL (e.g. https://google.com)) -->
3114
Examples for call-out shortcode
32-
{{</card >}}
33-
{{<card title="Code Block usages" titleUrl="code-blocks/code-blocks-highlighting/" icon="code">}}
15+
{{</ card >}}
16+
{{< card title="Code Block usages" >}}
3417
Examples for codeblock shortcode
35-
{{</card >}}
36-
{{</card-section>}}
37-
{{</card-layout >}}
38-
39-
## Other Content
18+
{{</ card >}}
19+
{{</ card-section >}}
4020

41-
[//]: # "Provide any sort of additional supporting content you may want customers to see as well (e.g. more cards, diagrams, changelogs, etc.)"
42-
{{<card-layout >}}
43-
{{<card-section title="NGINX" showAsCards="true" >}}
44-
{{<card title="NGINX Plus" titleUrl="/nginx/" brandIcon="NGINX-Plus-product-icon-RGB" >}}
21+
# Other Products on ExampleSite
22+
{{< card-section title="NGINX" showAsCards="true" >}}
23+
{{< card title="NGINX Plus" titleUrl="/nginx/" >}}
4524
Installing NGINX
46-
{{</card >}}
47-
{{</card-section >}}
48-
{{</card-layout >}}
25+
{{</ card >}}
26+
{{</ card-section >}}
27+
{{</ card-layout >}}

‎layouts/_default/list.html

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -28,21 +28,17 @@
2828
{{ end }}
2929
{{ end }}
3030
</section>
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 index .Params "nd-subtitle" }}
36-
<p>{{ index .Params "nd-subtitle" | markdownify }}</p>
37-
{{ end }}
38-
</div>
39-
</div>
31+
<h1>{{ .Title }}</h1>
4032

4133
{{ partial "banner" . }}
42-
{{ $hasCustomContent := index .Params "nd-landing-page" | default false }}
34+
35+
{{ $hasCustomContent := .Params.hasCustomContent | default false }}
4336
{{ if $hasCustomContent }}
37+
{{ .Page.Scratch.Set "custom-landing-page-file-name" "custom-landing-page.html" }}
38+
{{ .Page.Scratch.Set "custom-landing-page-context" . }}
4439
{{ .Content }}
4540
{{ else }}
41+
{{ .Content }}
4642
{{ range .Pages.ByWeight }}
4743
<h2>
4844
<a href="{{ if .Params.url}}{{ .Params.url}}{{else}}{{ .Permalink }}{{end}}">{{ .Title }}</a>

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

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
{{ $cards := .Page.Scratch.Get "cards" }}
2+
{{ $showAsCards := index ( .Page.Scratch.Get "showAsCards") "main" }}
3+
{{ $class := "card-grid wide"}}
4+
5+
<div class="{{ if eq $showAsCards "true" }}{{ $class }}{{ end }}">
6+
<!-- Old frame -->
7+
<section data-mf="false">
8+
<div class="row">
9+
<div class="card-deck">
10+
{{ range .Pages.GroupBy "Section" }}
11+
{{ range .Pages.ByWeight }}
12+
{{ $title := .Title }}
13+
<div class="col-md-5 card">
14+
<div class="card-body">
15+
<h3 class="card-title" style="display: flex; align-items: center; gap: 5px;">
16+
<i class="fas fa-{{if eq .Kind "page"}}file-alt{{else}}book{{end}} fa-lg card-img-top"></i>
17+
<a href="{{ if .Params.url}}{{ .Params.url}}{{else}}{{ .Permalink }}{{end}}">{{ .Title }}</a>
18+
</h3>
19+
{{ range $cards }}
20+
{{ if eq .title $title }}
21+
<p>{{ .content }}</p>
22+
{{ end }}
23+
{{ end }}
24+
</div>
25+
</div>
26+
{{ end }}
27+
{{ end }}
28+
</div>
29+
</div>
30+
</section>
31+
32+
<!-- Mainframe -->
33+
<div data-mf="true" style="display: none;">
34+
{{ range .Pages.ByWeight }}
35+
{{ $title := .Title }}
36+
<div class="card-container">
37+
<h2>
38+
<a href="{{ if .Params.url}}{{ .Params.url}}{{else}}{{ .Permalink }}{{end}}">{{ $title }}</a>
39+
</h2>
40+
{{ range $cards }}
41+
{{ if eq .title $title }}
42+
<p>{{- .content -}}</p>
43+
{{ end }}
44+
{{ end }}
45+
</div>
46+
{{ end }}
47+
</div>
48+
</div>

‎layouts/partials/list-main.html

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,10 @@ <h1 class="bd-title">
1111
</p>
1212
{{ end}}
1313
{{ partial "banner" .}}
14-
{{ $hasCustomContent := index .Params "nd-landing-page" | default false }}
14+
{{ $hasCustomContent := .Params.hasCustomContent | default false }}
1515
{{ if $hasCustomContent }}
16+
{{ .Page.Scratch.Set "custom-landing-page-file-name" "custom-landing-page.html" }}
17+
{{ .Page.Scratch.Set "custom-landing-page-context" . }}
1618
{{ .Content }}
1719
{{ else }}
1820
<section data-mf="false">

‎layouts/shortcodes/card-layout.html

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,5 @@
11
<!-- Render the main content first with modifications, then render the custom content -->
2-
<div class="card-layout">{{ .Inner | markdownify }}</div>
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>

‎layouts/shortcodes/card-section.html

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
{{ $title := .Get "title" }}
2-
{{ $isFeaturedSectionParam := .Get "isFeaturedSection" | default "false" }}
32
{{ $showAsCardsParam := .Get "showAsCards" | default "false"}}
43
{{- /* Validate the parameter strictly */ -}}
54
{{- if not (in (slice "true" "false") $showAsCardsParam) -}}
@@ -9,20 +8,13 @@
98
{{- $current := .Page.Scratch.Get "showAsCards" | default (dict) -}}
109
{{- $newShowAsCards := dict ($title | default "main") ($showAsCards) -}}
1110
{{- .Page.Scratch.Set "showAsCards" (merge $current ($newShowAsCards)) -}}
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" -}}
11+
{{- $class := "card-grid wide" -}}
1812
{{- /* Validate that the parent is card-layout */ -}}
1913
{{ if eq .Parent.Name "card-layout"}}
20-
<div class="card-section {{if eq $isFeaturedSection "true"}}featured-section{{ end }}">
14+
<div class="card-section" data-mf="true" style="display: none;">
2115
{{- if $title -}}
2216
<strong class="card-section-title">{{- $title -}}</strong>
2317
<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>
2618
{{ end }}
2719
</div>
2820
<div class="row" data-mf="false">

‎layouts/shortcodes/card.html

Lines changed: 9 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,18 @@
11
{{- $title := .Get "title" -}}
22
{{- $titleUrl := .Get "titleUrl" | default "/" -}}
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" -}}
3+
{{- $icon := .Get "icon" | default "NGINX-product-icon" -}}
114
{{- $current := .Page.Scratch.Get "cards" | default (slice) -}}
125
{{- $newCard := dict "title" ($title) "content" (.Inner) -}}
136
{{- .Page.Scratch.Set "cards" ($current | append $newCard) -}}
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 }}">
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">
1710
{{- if $title -}}
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>
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 -}}
3216
{{- else -}}
3317
{{ errorf "Mainframe: Missing param 'title'" }}
3418
{{- end -}}

0 commit comments

Comments
 (0)