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/exampleSite/content/test-product/_index.md b/exampleSite/content/test-product/_index.md index 96b971a..c3372c2 100644 --- a/exampleSite/content/test-product/_index.md +++ b/exampleSite/content/test-product/_index.md @@ -4,24 +4,45 @@ 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 >}} - +{{}} + - {{< card-section >}} - {{< card title="Call Out usages" >}} - + {{}} + {{}} + All shortcodes in one page. + {{}} + {{}} + Examples for call-out shortcode - {{}} - {{< card title="Code Block usages" >}} + {{}} + {{}} Examples for codeblock shortcode - {{}} - {{}} + {{}} + {{}} +{{}} + +## Other Content - # Other Products on ExampleSite - {{< card-section title="NGINX" showAsCards="true" >}} - {{< card title="NGINX Plus" titleUrl="/nginx/" >}} +[//]: # "Provide any sort of additional supporting content you may want customers to see as well (e.g. more cards, diagrams, changelogs, etc.)" +{{}} + {{}} + {{}} 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 ca57cec..3130840 100644 --- a/layouts/_default/list.html +++ b/layouts/_default/list.html @@ -28,17 +28,21 @@ {{ end }} {{ end }} -

{{ .Title }}

+
+ +
+

{{ .Title }}

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

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

+ {{ end }} +
+
{{ partial "banner" . }} - - {{ $hasCustomContent := .Params.hasCustomContent | default false }} + {{ $hasCustomContent := index .Params "nd-landing-page" | 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/partials/list-main.html b/layouts/partials/list-main.html index 26cc2ba..48a1a28 100644 --- a/layouts/partials/list-main.html +++ b/layouts/partials/list-main.html @@ -11,10 +11,8 @@

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