From 9f0eb8247c2b79040a9a697dc0646eba78ac5062 Mon Sep 17 00:00:00 2001 From: Lam Nguyen Date: Thu, 12 Jun 2025 01:43:47 -0700 Subject: [PATCH 1/2] Card: Modify cards code to support new landing page archetype --- assets/css/v2/style.css | 71 ++++++++++++++++++++--- layouts/_default/list.html | 13 +++-- layouts/partials/custom-landing-page.html | 48 --------------- layouts/shortcodes/card-layout.html | 5 +- layouts/shortcodes/card-section.html | 12 +++- layouts/shortcodes/card.html | 34 ++++++++--- 6 files changed, 109 insertions(+), 74 deletions(-) delete mode 100644 layouts/partials/custom-landing-page.html diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css index 7fafcfe..5faf968 100644 --- a/assets/css/v2/style.css +++ b/assets/css/v2/style.css @@ -1193,31 +1193,88 @@ h6:has(a):hover { } /* Landing page cards */ - .text-content .card-layout { - grid-column: 1 / -1; + grid-column: 1; .card-section { - margin-bottom: 1rem; + display: flex; + flex-direction: column; + gap: 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(120px, 500px)); + grid-template-columns: repeat(auto-fit, minmax(33%, 1fr)); 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 2rem 2rem 2rem; - margin-bottom: 1.5rem; + 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; } } diff --git a/layouts/_default/list.html b/layouts/_default/list.html index ca57cec..6001ffb 100644 --- a/layouts/_default/list.html +++ b/layouts/_default/list.html @@ -28,17 +28,22 @@ {{ end }} {{ end }} -

{{ .Title }}

+
+ +
+

{{ .Title }}

+ {{ if .Description }} +

{{ .Description | markdownify }}

+ {{ end }} +
+
{{ partial "banner" . }} {{ $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 deleted file mode 100644 index fb9d553..0000000 --- a/layouts/partials/custom-landing-page.html +++ /dev/null @@ -1,48 +0,0 @@ -{{ $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/shortcodes/card-layout.html b/layouts/shortcodes/card-layout.html index 564b334..77f8f58 100644 --- a/layouts/shortcodes/card-layout.html +++ b/layouts/shortcodes/card-layout.html @@ -1,5 +1,2 @@ -{{ $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 +
{{ .Inner | markdownify }}
\ No newline at end of file diff --git a/layouts/shortcodes/card-section.html b/layouts/shortcodes/card-section.html index 11339a5..c2df99b 100644 --- a/layouts/shortcodes/card-section.html +++ b/layouts/shortcodes/card-section.html @@ -1,4 +1,5 @@ {{ $title := .Get "title" }} +{{ $isFeaturedSectionParam := .Get "isFeaturedSection" | default "false" }} {{ $showAsCardsParam := .Get "showAsCards" | default "false"}} {{- /* Validate the parameter strictly */ -}} {{- if not (in (slice "true" "false") $showAsCardsParam) -}} @@ -8,13 +9,20 @@ {{- $current := .Page.Scratch.Get "showAsCards" | default (dict) -}} {{- $newShowAsCards := dict ($title | default "main") ($showAsCards) -}} {{- .Page.Scratch.Set "showAsCards" (merge $current ($newShowAsCards)) -}} -{{- $class := "card-grid wide" -}} +{{- /* 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" -}} {{- /* Validate that the parent is card-layout */ -}} {{ if eq .Parent.Name "card-layout"}} -