From 093f54c82d025a59aff4f27563b2b397853f728b Mon Sep 17 00:00:00 2001 From: Jack Hickey <133868041+nginx-jack@users.noreply.github.com> Date: Wed, 25 Jun 2025 11:02:09 +0100 Subject: [PATCH] Revert "Modify cards code to support new landing page archetype (#278)" This reverts commit 88f2a474d68f08eb2190ec9aad15c323c93694be. --- assets/css/v2/style.css | 71 +++------------------- exampleSite/content/test-product/_index.md | 51 +++++----------- layouts/_default/list.html | 16 ++--- layouts/partials/custom-landing-page.html | 48 +++++++++++++++ layouts/partials/list-main.html | 4 +- layouts/shortcodes/card-layout.html | 5 +- layouts/shortcodes/card-section.html | 12 +--- layouts/shortcodes/card.html | 34 +++-------- 8 files changed, 94 insertions(+), 147 deletions(-) create mode 100644 layouts/partials/custom-landing-page.html diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css index 7d3875c..e6a051c 100644 --- a/assets/css/v2/style.css +++ b/assets/css/v2/style.css @@ -1200,88 +1200,31 @@ h6:has(a):hover { } /* Landing page cards */ + .text-content .card-layout { - grid-column: 1; + grid-column: 1 / -1; .card-section { - display: flex; - flex-direction: column; - gap: 1rem; + margin-bottom: 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(33%, 1fr)); + grid-template-columns: repeat(auto-fit, minmax(120px, 500px)); 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; - - &.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; + padding: 1rem 2rem 2rem 2rem; + margin-bottom: 1.5rem; } } diff --git a/exampleSite/content/test-product/_index.md b/exampleSite/content/test-product/_index.md index c3372c2..96b971a 100644 --- a/exampleSite/content/test-product/_index.md +++ b/exampleSite/content/test-product/_index.md @@ -4,45 +4,24 @@ 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 >}} + - {{}} - {{}} - All shortcodes in one page. - {{}} - {{}} - + {{< card-section >}} + {{< card title="Call Out usages" >}} + Examples for call-out shortcode - {{}} - {{}} + {{}} + {{< card title="Code Block usages" >}} Examples for codeblock shortcode - {{}} - {{}} -{{}} - -## Other Content + {{}} + {{}} -[//]: # "Provide any sort of additional supporting content you may want customers to see as well (e.g. more cards, diagrams, changelogs, etc.)" -{{}} - {{}} - {{}} + # Other Products on ExampleSite + {{< card-section title="NGINX" showAsCards="true" >}} + {{< card title="NGINX Plus" titleUrl="/nginx/" >}} Installing NGINX - {{}} - {{}} -{{}} \ No newline at end of file + {{}} + {{}} +{{}} \ No newline at end of file diff --git a/layouts/_default/list.html b/layouts/_default/list.html index 3130840..ca57cec 100644 --- a/layouts/_default/list.html +++ b/layouts/_default/list.html @@ -28,21 +28,17 @@ {{ end }} {{ end }} -
- -
-

{{ .Title }}

- {{ if index .Params "nd-subtitle" }} -

{{ index .Params "nd-subtitle" | markdownify }}

- {{ end }} -
-
+

{{ .Title }}

{{ partial "banner" . }} - {{ $hasCustomContent := index .Params "nd-landing-page" | default false }} + + {{ $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 }}

{{ .Title }} diff --git a/layouts/partials/custom-landing-page.html b/layouts/partials/custom-landing-page.html new file mode 100644 index 0000000..fb9d553 --- /dev/null +++ b/layouts/partials/custom-landing-page.html @@ -0,0 +1,48 @@ +{{ $cards := .Page.Scratch.Get "cards" }} +{{ $showAsCards := index ( .Page.Scratch.Get "showAsCards") "main" }} +{{ $class := "card-grid wide"}} + +
+ +
+
+
+ {{ range .Pages.GroupBy "Section" }} + {{ range .Pages.ByWeight }} + {{ $title := .Title }} +
+
+

+ + {{ .Title }} +

+ {{ range $cards }} + {{ if eq .title $title }} +

{{ .content }}

+ {{ end }} + {{ end }} +
+
+ {{ end }} + {{ end }} +
+
+
+ + +
+ {{ range .Pages.ByWeight }} + {{ $title := .Title }} +
+

+ {{ $title }} +

+ {{ range $cards }} + {{ if eq .title $title }} +

{{- .content -}}

+ {{ end }} + {{ end }} +
+ {{ end }} +
+
\ No newline at end of file diff --git a/layouts/partials/list-main.html b/layouts/partials/list-main.html index 48a1a28..26cc2ba 100644 --- a/layouts/partials/list-main.html +++ b/layouts/partials/list-main.html @@ -11,8 +11,10 @@

{{ end}} {{ partial "banner" .}} - {{ $hasCustomContent := index .Params "nd-landing-page" | default false }} + {{ $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 }}
diff --git a/layouts/shortcodes/card-layout.html b/layouts/shortcodes/card-layout.html index 77f8f58..564b334 100644 --- a/layouts/shortcodes/card-layout.html +++ b/layouts/shortcodes/card-layout.html @@ -1,2 +1,5 @@ -
{{ .Inner | markdownify }}
\ No newline at end of file +{{ $customLandingPageFileName := .Page.Scratch.Get "custom-landing-page-file-name" }} +{{ $customLandingPageContext := .Page.Scratch.Get "custom-landing-page-context" }} +{{ partial $customLandingPageFileName $customLandingPageContext }} +
{{- .Inner | markdownify -}}
\ No newline at end of file diff --git a/layouts/shortcodes/card-section.html b/layouts/shortcodes/card-section.html index c2df99b..11339a5 100644 --- a/layouts/shortcodes/card-section.html +++ b/layouts/shortcodes/card-section.html @@ -1,5 +1,4 @@ {{ $title := .Get "title" }} -{{ $isFeaturedSectionParam := .Get "isFeaturedSection" | default "false" }} {{ $showAsCardsParam := .Get "showAsCards" | default "false"}} {{- /* Validate the parameter strictly */ -}} {{- if not (in (slice "true" "false") $showAsCardsParam) -}} @@ -9,20 +8,13 @@ {{- $current := .Page.Scratch.Get "showAsCards" | default (dict) -}} {{- $newShowAsCards := dict ($title | default "main") ($showAsCards) -}} {{- .Page.Scratch.Set "showAsCards" (merge $current ($newShowAsCards)) -}} -{{- /* Limit the cards if it is a featured section */ -}} -{{- if not (in (slice "true" "false") $isFeaturedSectionParam) -}} - {{- warnf "The '' 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" -}} +{{- $class := "card-grid wide" -}} {{- /* Validate that the parent is card-layout */ -}} {{ if eq .Parent.Name "card-layout"}} -
+
diff --git a/layouts/shortcodes/card.html b/layouts/shortcodes/card.html index 8f62cf2..f48bd6d 100644 --- a/layouts/shortcodes/card.html +++ b/layouts/shortcodes/card.html @@ -1,34 +1,18 @@ {{- $title := .Get "title" -}} {{- $titleUrl := .Get "titleUrl" | default "/" -}} -{{- $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 '' 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" -}} +{{- $icon := .Get "icon" | default "NGINX-product-icon" -}} {{- $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 and under 3 cards */ -}} -{{- if (eq .Parent.Name "card-section") -}} -
+{{- /* Validate that the parent is card-section */ -}} +{{- if eq .Parent.Name "card-section" -}} +