From a6349a2ccf0941316606eb7cfa5216521dc5959f Mon Sep 17 00:00:00 2001 From: Jack Hickey <133868041+nginx-jack@users.noreply.github.com> Date: Mon, 7 Jul 2025 14:05:49 +0100 Subject: [PATCH 01/14] Content: Replace with data attribute grid system Add .content class to handle overall content reflow Use scaling fonts Refactor call outs to use grid utilities TODO: Standard mobile sizes horz scroll on some pages TODO: Homepage update to use grid utility TODO: List card layout update to use grid utility --- assets/css/v2/style.css | 177 ++++++++++-------- .../test-product/call-out/all-callouts.md | 6 +- layouts/_default/list.html | 9 +- layouts/_default/single.html | 27 ++- layouts/partials/callout.html | 10 +- 5 files changed, 119 insertions(+), 110 deletions(-) diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css index f0817aaf..718a2adc 100644 --- a/assets/css/v2/style.css +++ b/assets/css/v2/style.css @@ -206,17 +206,26 @@ textarea:not([rows]) { --flow-gap: 1rem; - /* @link https://utopia.fyi/type/calculator?c=320,16,1.2,1240,18,1.25,5,3,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */ + /* @link https://utopia.fyi/type/calculator?c=320,14,1.2,1240,16,1.25,5,3,&s=0.75,1.5|2|3|4|6,s-l&g=s,l,xl,12 */ /* ALWAYS use for fonts */ - --font-step--3: clamp(0.576rem, 0.5796rem + -0.0047vw, 0.5787rem); - --font-step--2: clamp(0.6944rem, 0.6856rem + 0.0444vw, 0.72rem); - --font-step--1: clamp(0.8333rem, 0.8101rem + 0.1159vw, 0.9rem); - --font-step-0: clamp(1rem, 0.9565rem + 0.2174vw, 1.125rem); - --font-step-1: clamp(1.2rem, 1.1283rem + 0.3587vw, 1.4063rem); - --font-step-2: clamp(1.44rem, 1.3295rem + 0.5527vw, 1.7578rem); - --font-step-3: clamp(1.728rem, 1.5648rem + 0.8161vw, 2.1973rem); - --font-step-4: clamp(2.0736rem, 1.8395rem + 1.1704vw, 2.7466rem); - --font-step-5: clamp(2.4883rem, 2.1597rem + 1.6433vw, 3.4332rem); + /* Step -3: 8.1019px → 8.192px */ + --font-step--3: clamp(0.5064rem, 0.5044rem + 0.0098vw, 0.512rem); + /* Step -2: 9.7222px → 10.24px */ + --font-step--2: clamp(0.6076rem, 0.5964rem + 0.0563vw, 0.64rem); + /* Step -1: 11.6667px → 12.8px */ + --font-step--1: clamp(0.7292rem, 0.7045rem + 0.1232vw, 0.8rem); + /* Step 0: 14px → 16px */ + --font-step-0: clamp(0.875rem, 0.8315rem + 0.2174vw, 1rem); + /* Step 1: 16.8px → 20px */ + --font-step-1: clamp(1.05rem, 0.9804rem + 0.3478vw, 1.25rem); + /* Step 2: 20.16px → 25px */ + --font-step-2: clamp(1.26rem, 1.1548rem + 0.5261vw, 1.5625rem); + /* Step 3: 24.192px → 31.25px */ + --font-step-3: clamp(1.512rem, 1.3586rem + 0.7672vw, 1.9531rem); + /* Step 4: 29.0304px → 39.0625px */ + --font-step-4: clamp(1.8144rem, 1.5963rem + 1.0904vw, 2.4414rem); + /* Step 5: 34.8365px → 48.8281px */ + --font-step-5: clamp(2.1773rem, 1.8731rem + 1.5208vw, 3.0518rem); /* @link https://utopia.fyi/space/calculator?c=320,16,1.2,1240,18,1.25,5,3,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */ /* ALWAYS use for horizontal spacing */ @@ -515,19 +524,6 @@ ol li:last-child { } } -.content { - grid-area: content; - justify-self: center; - padding: 0 var(--space-l) 2rem var(--space-l); - max-width: var(--content-max-width); - - /* Allow redocly to fill the entire container */ - &.content__redocly { - justify-self: unset; - max-width: unset; - } -} - .footer { grid-area: footer; padding: var(--space-l); @@ -848,11 +844,75 @@ nav { /* MARK: Main content */ -.content-layout { - display: grid; - grid-template-columns: 1fr 1fr; - grid-template-rows: 1fr; - z-index: 1; +.content { + grid-area: content; + justify-self: center; + padding: 0 var(--space-l) 2rem var(--space-l); + max-width: var(--content-max-width); + + & > *, + & > ul, + & > ol { + display: grid; + grid-template-columns: 1fr; + /* These gaps determine the spacing between all content. Be careful!! */ + gap: var(--space-m) var(--space-m); + + /* Handles some strangeness where single-line codeblocks caused + horizon */ + ol:has(.highlight-v2), + ul:has(.highlight-v2) { + min-width: 0; + max-width: 100%; + } + + > *:not([data-grid]), + > li:not([data-grid]) { + grid-column: 1; + } + + [data-grid="wide"] { + grid-column: 1; + } + [data-grid="first-third"] { + grid-column: 1; + } + [data-grid="last-third"] { + grid-column: 1; + } + + @media (min-width: 55rem) { + max-width: var(--content-max-width); + grid-template-columns: repeat(var(--grid-columns), 1fr); + + > *:not([data-grid]), + > li:not([data-grid]) { + grid-column: 1 / 8; + } + + [data-grid="wide"] { + grid-column: 1 / -1; + } + + [data-grid="first-third"] { + grid-column: 1 / 4; + } + + [data-grid="first-two-thirds"] { + grid-column: 1 / 8; + } + + [data-grid="last-third"] { + grid-column: 8 / -1; + } + } + } + + /* Allow redocly to fill the entire container */ + &.content__redocly { + justify-self: unset; + max-width: unset; + } } #searchbox { @@ -862,30 +922,7 @@ nav { } .breadcrumb-layout { - grid-column: 1 / -1; -} - -.text-content { - grid-column: 1 / -1; - display: grid; - grid-template-columns: var(--grid-content-mobile); - column-gap: var(--grid-column-gutter); - margin-top: 2rem; - grid-auto-rows: max-content; - row-gap: var(--flow-gap); - justify-content: center; -} - -.text-content > :not(.wide) { - grid-column: 1 / -1; -} - -.text-content .wide { - grid-column: 1 / -1; -} - -.text-content table { - width: 100%; + padding-top: 1rem; } main { @@ -897,29 +934,6 @@ main { display: unset; } - .text-content { - grid-template-columns: var(--grid-content) var(--grid-side-callout); - grid-template-rows: 3rem max-content; - column-gap: var(--grid-column-gutter); - } - - .text-content > :not(.wide) { - grid-column: 1; - } - - .content-layout { - display: grid; - grid-template-columns: 1fr minmax( - auto, - calc( - var(--grid-content) + - var(--grid-side-callout) + - var(--grid-column-gutter) - ) - ) 1fr; - column-gap: var(--grid-column-gutter); - } - .navbar atomic-search-interface { margin: 0; display: block; @@ -1353,14 +1367,18 @@ a:hover { text-decoration-color: oklch(var(--color-brand) / 0.8); } +/* MARK: Typography */ + h1 { - font-size: 2rem; - margin: 0 0 1rem 0; + font-size: var(--font-step-3); } h2 { - font-size: 1.5rem; - margin: 1rem 0 0.75rem 0; + font-size: var(--font-step-2); +} + +p { + font-size: var(--font-step-0); } h2:target, @@ -1637,7 +1655,6 @@ blockquote p:last-child { /* Maintain the split column for as long as possible */ @media (min-width: 67rem) { blockquote.side-callout { - grid-column: 2 !important; align-self: start; } } diff --git a/exampleSite/content/test-product/call-out/all-callouts.md b/exampleSite/content/test-product/call-out/all-callouts.md index d09f70c2..7e9868d4 100644 --- a/exampleSite/content/test-product/call-out/all-callouts.md +++ b/exampleSite/content/test-product/call-out/all-callouts.md @@ -25,7 +25,7 @@ This is a plain callout with a default title for its type. It has a [link](#plai Naturally, callouts should contain less text within them than the text it lives next to. We do this for several reasons. Firstly, it looks weird to have a big empty space in the primary content area. Secondly, if you have more text in the callout, then it stops being a callout. I have asked an LLM to lengthen this passage. -{{}} +{{}} This is a plain side callout with no title. It has a [link](#plain-callouts) to a heading on this page. Its shortcode is `` with the `.side-callout` class. {{}} @@ -33,7 +33,7 @@ When designing effective web layouts, it's important to maintain proper balance Additionally, concise callouts tend to be more effective at capturing user attention. When a callout becomes too verbose, users are less likely to read it entirely, defeating its purpose. The visual weight of callouts should align with their informational importance - brief, impactful statements create better engagement than lengthy explanations. Remember that white space itself is a powerful design element, creating visual breathing room that enhances readability and focus. Ultimately, the most successful callouts follow the principle of "less is more," delivering maximum impact through minimal interruption to the user's reading experience. -{{}} +{{}} This is a plain side callout with a custom title. It has a [link](#plain-callouts) to a heading on this page. Its shortcode is `` with the `.side-callout` class, and a custom title. {{}} @@ -84,4 +84,4 @@ This is ``. {{}} This is ``. -{{}} \ No newline at end of file +{{}} diff --git a/layouts/_default/list.html b/layouts/_default/list.html index 6b7db671..f49bea0c 100644 --- a/layouts/_default/list.html +++ b/layouts/_default/list.html @@ -1,16 +1,14 @@ {{ define "main" }}
-
-
-
+
{{ if not .IsHome }} {{ if not (in .Params.display_breadcrumb "false" ) }} {{ partial "breadcrumb" .}} {{ end }} {{ end }} -
+
@@ -42,8 +40,7 @@

{{ end }}

-
-
+
diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 9c5837b4..9a699f10 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -1,28 +1,25 @@ {{ define "main" }} -
{{ $content := partial "icon-replacement.html" (dict "content" .Content) }} - -
-
-
-
- {{ if not .IsHome }} - {{ if not (in .Params.display_breadcrumb "false" ) }} - {{ partial "breadcrumb" .}} - {{ end }} - {{ end }} -
+
+ {{ if not .IsHome }} + {{ if not (in .Params.display_breadcrumb "false" ) }} + {{ partial "breadcrumb" .}} + {{ end }} + {{ end }} +
+
{{ partial "banner" .}} +

{{ .Title }}

+ {{ $content | safeHTML }} + {{ if eq .Page.Draft true }}{{ partial "draft-badge.html" . }}{{ end }} {{ if in .Params.doctypes "beta" }}{{ partial "beta-badge" . }}{{ end }} -
- {{ if .Page.Lastmod }}
{{ partial "page-meta-links" . }} @@ -46,6 +43,4 @@

{{ .Title }}

- - {{ end }} diff --git a/layouts/partials/callout.html b/layouts/partials/callout.html index 314137ac..52bac5ee 100644 --- a/layouts/partials/callout.html +++ b/layouts/partials/callout.html @@ -13,10 +13,10 @@ {{ $sideOption := "side-callout" }} {{ $inlineOption := "inline-callout" }} +{{/* Default to inline callout */}} +{{ $dataGrid := "first-two-thirds" }} {{ if $sideline }} - {{ $class = printf "%s %s" $class $sideOption }} -{{ else }} - {{ $class = printf "%s %s" $class $inlineOption }} + {{ $dataGrid = "last-third" }} {{ end }} {{/* Render a different block, if "loud" callouts are used */}} @@ -33,7 +33,7 @@ {{ $isSpecialTitle := in $specialTitles $type }} {{ if $isSpecialTitle }} {{/* Loud callouts */}} -
+
{{ partial "feather" (dict "context" . "icon" $icon) .}} @@ -51,7 +51,7 @@ {{ $cleanTitle := strings.TrimSuffix ":" $title}} -
+
{{- with $icon -}} From 07f5ebb17d1792fac2884fd782bcb9f1563bad76 Mon Sep 17 00:00:00 2001 From: Lam Nguyen Date: Mon, 7 Jul 2025 16:21:07 -0700 Subject: [PATCH 02/14] Cards: Replace with data-grid --- assets/css/v2/style.css | 83 +++++++++++++++++------------------- layouts/shortcodes/card.html | 21 +++++++-- 2 files changed, 56 insertions(+), 48 deletions(-) diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css index 718a2adc..57c8f658 100644 --- a/assets/css/v2/style.css +++ b/assets/css/v2/style.css @@ -880,6 +880,9 @@ nav { [data-grid="last-third"] { grid-column: 1; } + [data-grid="halve"] { + grid-column: 1; + } @media (min-width: 55rem) { max-width: var(--content-max-width); @@ -905,6 +908,10 @@ nav { [data-grid="last-third"] { grid-column: 8 / -1; } + + [data-grid="halve"] { + grid-column: span 6; + } } } @@ -1451,7 +1458,7 @@ h6:has(a):hover { } /* Landing page cards */ -.text-content .card-layout { +.card-layout { grid-column: 1; .card-section { @@ -1463,65 +1470,53 @@ h6:has(a):hover { 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 of div.card-container) { + /* Hide all the cards past 3 if it is a featured card section */ + .card-section-content > *:nth-child(n + 4 of div.card) { display: none; } } } -} -/* Optional grid layout */ -.card-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(33%, 1fr)); - gap: 1.5rem; + .card { + display: flex; + flex-direction: column; + gap: 0.5rem; + margin-bottom: 1rem; - .card-container { - border: 1px solid oklch(var(--color-codeblock-border)); - box-shadow: 3px 3px 0px oklch(var(--color-shadow)); - padding: 1rem; + .card-header { + display: flex; + flex-direction: row; + gap: 0.5rem; - &.featured-card { - /* If there is a need for a featured card, only the featured card should be full length */ - grid-column: 1 / -1; + .card-brand-icon { + height: 20px; + width: auto; + } - /* 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; + h2 { + padding: 0; + margin: 0; + font-size: 1rem; } } } - - /* If there is no featured card, last card that is the 3rd one should be full width */ - &:not(:has(.featured-card)) *:nth-child(n + 3 of div.card-container) { - 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; +/* Optional grid layout */ +.card-grid { + display: grid; + grid-template-columns: repeat(var(--grid-columns), 1fr); + gap: 1.5rem; - .card-brand-icon { - height: 20px; - width: auto; - } + @media (max-width: 55rem) { + grid-template-columns: 1fr; + } - h2 { - padding: 0; - margin: 0; - font-size: 1rem; - } + .card { + border: 1px solid oklch(var(--color-codeblock-border)); + box-shadow: 3px 3px 0px oklch(var(--color-shadow)); + padding: 1rem; } } diff --git a/layouts/shortcodes/card.html b/layouts/shortcodes/card.html index b4d55878..5b5b2dd5 100644 --- a/layouts/shortcodes/card.html +++ b/layouts/shortcodes/card.html @@ -3,17 +3,30 @@ {{- $icon := .Get "icon" | default "book-open" -}} {{- $brandIcon := .Get "brandIcon" -}} {{- $isFeaturedParam := .Get "isFeatured" | default "false" }} +{{- $isFullSizeParam := .Get "isFullSize" | 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" -}} -{{- $current := .Page.Scratch.Get "cards" | default (slice) -}} -{{- $newCard := dict "title" ($title) "content" (.Inner) -}} -{{- .Page.Scratch.Set "cards" ($current | append $newCard) -}} + +{{- if not (in (slice "true" "false") $isFullSizeParam) -}} + {{- warnf "The '' Shortcode parameter 'isFullSize' must be 'true' or 'false', but got: '%s'. This will now default to 'false'" $isFullSizeParam -}} +{{- end -}} +{{- $isFullSize := cond (eq $isFullSizeParam "true") "true" "false" -}} + +{{- /* Set up the positioning */ -}} +{{ $dataGrid := "" }} +{{ if or (eq $isFullSize "true") (eq $isFeatured "true") }} + {{ $dataGrid = "wide"}} +{{ else }} + {{ $dataGrid = "halve"}} +{{ end }} + {{- /* Validate that the parent is card-section and under 3 cards */ -}} {{- if (eq .Parent.Name "card-section") -}} -
+
{{- if $title -}}
{{- if $brandIcon -}} From 9c23ffbe68eabd7b8b6f97761ff509669b5600a4 Mon Sep 17 00:00:00 2001 From: Lam Nguyen Date: Tue, 8 Jul 2025 08:26:49 -0700 Subject: [PATCH 03/14] Cards: Small tweaks --- assets/css/v2/style.css | 6 +++--- layouts/shortcodes/card.html | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css index 57c8f658..dd47380c 100644 --- a/assets/css/v2/style.css +++ b/assets/css/v2/style.css @@ -880,7 +880,7 @@ nav { [data-grid="last-third"] { grid-column: 1; } - [data-grid="halve"] { + [data-grid="half"] { grid-column: 1; } @@ -909,7 +909,7 @@ nav { grid-column: 8 / -1; } - [data-grid="halve"] { + [data-grid="half"] { grid-column: span 6; } } @@ -1497,7 +1497,7 @@ h6:has(a):hover { h2 { padding: 0; margin: 0; - font-size: 1rem; + font-size: var(--font-step-1); } } } diff --git a/layouts/shortcodes/card.html b/layouts/shortcodes/card.html index 5b5b2dd5..5f863afd 100644 --- a/layouts/shortcodes/card.html +++ b/layouts/shortcodes/card.html @@ -21,7 +21,7 @@ {{ if or (eq $isFullSize "true") (eq $isFeatured "true") }} {{ $dataGrid = "wide"}} {{ else }} - {{ $dataGrid = "halve"}} + {{ $dataGrid = "half"}} {{ end }} {{- /* Validate that the parent is card-section and under 3 cards */ -}} From c763f0033e39b3d8086c6da9322c1e9417018bde Mon Sep 17 00:00:00 2001 From: Lam Nguyen Date: Tue, 8 Jul 2025 11:15:45 -0700 Subject: [PATCH 04/14] Codeblock: Make highlighted lines stretch to end + fix border --- assets/css/v2/style.css | 23 ++++++++++++++--------- 1 file changed, 14 insertions(+), 9 deletions(-) diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css index dd47380c..39fc91a4 100644 --- a/assets/css/v2/style.css +++ b/assets/css/v2/style.css @@ -156,7 +156,6 @@ textarea:not([rows]) { --color-inline_codeblock-border: 0.85 0 0; --color-inline_codeblock-background: 0.98 0 0; --color-codeblock-border: 0.63 0 0; - --color-codeblock-shadow: 0.92 0 0; --color-codeblock-background: 1 0 0; --color-codeblock-highlight: 0.99 0.0479 105.97; --color-footer: 0.23 0 0; @@ -199,6 +198,7 @@ textarea:not([rows]) { --codeblock-comment-space-between: 10px; --codeblock-horizontal-line-length: 2rem; --codeblock-horizontal-line-overflow: 0.25rem; + --codeblock-horizontal-padding: 1rem; --codeblock-border-thickness: 1px; --codeblock-code-section-padding-left: 1rem; --codeblock-line-box-side-length: 4px; @@ -1839,12 +1839,21 @@ a:has(code:not(pre code)) { /* Regular Codeblock */ .highlight { - padding: 0 1rem 0 1rem; + padding: 0 var(--codeblock-horizontal-padding) 0 + var(--codeblock-horizontal-padding); position: relative; flex: 1; - code .cl { - position: relative; + code { + font-size: var(--font-step--1); + + .cl { + position: relative; + } + } + + table { + width: calc(100% + var(--codeblock-horizontal-padding)); } } @@ -1875,10 +1884,6 @@ a:has(code:not(pre code)) { /* margin: 1.5rem 0 0.25rem 0; */ } -.highlight code { - font-size: 0.875rem; -} - .highlight-v2.single-line { display: flex; align-items: center; @@ -1902,7 +1907,7 @@ a:has(code:not(pre code)) { } .code-container { - box-shadow: 2px 2px 0px oklch(var(--color-codeblock-shadow)); + box-shadow: 3px 3px 0px oklch(var(--color-shadow)); } ol .code-block, From 20b3727587aa4f37b167cbdfe1dd663b1429b73f Mon Sep 17 00:00:00 2001 From: Lam Nguyen Date: Tue, 8 Jul 2025 15:12:00 -0700 Subject: [PATCH 05/14] Homepage: Replace with data-grid and cards shortcode --- assets/css/v2/style.css | 183 ++++++++++++++------------- exampleSite/content/_index.md | 18 +++ exampleSite/layouts/index.html | 15 +-- layouts/partials/homepage.html | 5 + layouts/shortcodes/card-section.html | 6 +- layouts/shortcodes/card.html | 8 ++ 6 files changed, 128 insertions(+), 107 deletions(-) create mode 100644 exampleSite/content/_index.md create mode 100644 layouts/partials/homepage.html diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css index dd47380c..9b05b4fe 100644 --- a/assets/css/v2/style.css +++ b/assets/css/v2/style.css @@ -758,12 +758,12 @@ nav { .homepage { --content-max-width: 120rem; + margin: 0 2rem; + line-height: 1.5rem; - .homepage-heading { - grid-column: 1 / -1; - font-size: 1.5rem; - font-weight: 500; - margin: 2rem 0rem; + * { + margin-left: 0; + padding-left: 0; } .homepage-section { @@ -772,77 +772,91 @@ nav { gap: 1.5rem; justify-content: center; - max-width: 98rem; + max-width: 100rem; margin: 0 auto; - padding-bottom: 2rem; + padding: 1rem; a { color: oklch(var(--color-foreground)); text-decoration-color: oklch(var(--color-background)); + } + + .headerlink { + cursor: default; + pointer-events: none; - &:hover { - text-decoration-color: oklch(var(--color-background)); + &::before { + display: none; } } - .homepage-heading { + > * { + grid-row: 1; grid-column: 1 / -1; - margin: 1rem 0rem; } - } - /* Styling for items */ - .homepage-item { - background: oklch(var(--color-background)); - border: 1px solid oklch(var(--color-codeblock-border)); - box-shadow: 3px 3px 0px oklch(var(--color-shadow)); - min-height: 11rem; - padding: 1rem 2rem 2rem 2rem; - display: flex; - flex-direction: column; - justify-content: space-between; - cursor: pointer; + p { + grid-row: 2; + } - &:hover { - box-shadow: 3px 3px 0px oklch(var(--color-brand) / 0.4); - text-decoration-color: oklch(var(--color-background)); - border: 1px solid oklch(var(--color-brand) / 0.8); + .card-layout { + grid-row: 3; + grid-column: 1 / -1; } } +} - .homepage-item-heading { - display: flex; - align-items: center; - justify-content: flex-start; +/* MARK: Main content +*/ + +[data-grid="wide"] { + grid-column: 1; +} +[data-grid="first-third"] { + grid-column: 1; +} +[data-grid="last-third"] { + grid-column: 1; +} +[data-grid="quarter"] { + grid-column: 1; +} +[data-grid="third"] { + grid-column: 1; +} +[data-grid="half"] { + grid-column: 1; +} + +@media (min-width: 55rem) { + [data-grid="wide"] { + grid-column: 1 / -1; } - .homepage-item-logo { - margin-right: 0.5rem; + [data-grid="first-third"] { + grid-column: 1 / 4; } - .homepage-item-logo img { - height: 40px; - width: auto; - display: block; + [data-grid="first-two-thirds"] { + grid-column: 1 / 8; } - .homepage-item-text { - font-size: 1.1rem; - font-weight: 600; - line-height: 1.2; - margin: 0; - padding: 0; - /* Hack to make text line-up with logos */ - transform: translateY(-6px); + [data-grid="last-third"] { + grid-column: 8 / -1; } - .homepage-item-content { - line-height: 1.5rem; + [data-grid="quarter"] { + grid-column: span 3; } -} -/* MARK: Main content -*/ + [data-grid="third"] { + grid-column: span 4; + } + + [data-grid="half"] { + grid-column: span 6; + } +} .content { grid-area: content; @@ -871,19 +885,6 @@ nav { grid-column: 1; } - [data-grid="wide"] { - grid-column: 1; - } - [data-grid="first-third"] { - grid-column: 1; - } - [data-grid="last-third"] { - grid-column: 1; - } - [data-grid="half"] { - grid-column: 1; - } - @media (min-width: 55rem) { max-width: var(--content-max-width); grid-template-columns: repeat(var(--grid-columns), 1fr); @@ -892,26 +893,6 @@ nav { > li:not([data-grid]) { grid-column: 1 / 8; } - - [data-grid="wide"] { - grid-column: 1 / -1; - } - - [data-grid="first-third"] { - grid-column: 1 / 4; - } - - [data-grid="first-two-thirds"] { - grid-column: 1 / 8; - } - - [data-grid="last-third"] { - grid-column: 8 / -1; - } - - [data-grid="half"] { - grid-column: span 6; - } } } @@ -1458,16 +1439,38 @@ h6:has(a):hover { } /* Landing page cards */ + +.homepage { + .card-grid { + grid-template-columns: 1fr; + + @media (min-width: 70rem) { + grid-template-columns: repeat(12, 1fr); + } + } + + .card-layout .card-grid .card { + padding: 1rem 2rem 2rem 2rem; + + .lucide, + .card-brand-icon { + height: 40px; + width: auto; + } + } +} + .card-layout { - grid-column: 1; + display: flex; + flex-direction: column; + gap: 1.5rem; .card-section { - display: flex; - flex-direction: column; - gap: 1rem; - strong { font-weight: 500; + font-size: var(--font-step-2); + display: block; + margin-bottom: 1rem; } &.featured-section { @@ -1482,12 +1485,12 @@ h6:has(a):hover { display: flex; flex-direction: column; gap: 0.5rem; - margin-bottom: 1rem; .card-header { display: flex; flex-direction: row; - gap: 0.5rem; + gap: 1rem; + align-items: center; .card-brand-icon { height: 20px; diff --git a/exampleSite/content/_index.md b/exampleSite/content/_index.md new file mode 100644 index 00000000..996fa364 --- /dev/null +++ b/exampleSite/content/_index.md @@ -0,0 +1,18 @@ +--- +title: Example Site for NGINX Hugo Theme +description: +--- + +## NGINX Hugo Theme Documentation +Documentation for hugo theme +{{}} + {{}} + {{}} + See explanations and usages of shortcodes + {{}} + {{}} + See a live example of theme components + {{}} + {{}} +{{}} + diff --git a/exampleSite/layouts/index.html b/exampleSite/layouts/index.html index 2c0398f5..2d7eb44a 100644 --- a/exampleSite/layouts/index.html +++ b/exampleSite/layouts/index.html @@ -1,16 +1,3 @@ {{ define "main" }} - -

Homepage Example

-

-

-

- - +{{ partial "homepage.html" . }} {{end}} \ No newline at end of file diff --git a/layouts/partials/homepage.html b/layouts/partials/homepage.html new file mode 100644 index 00000000..52bd5acf --- /dev/null +++ b/layouts/partials/homepage.html @@ -0,0 +1,5 @@ +
+
+ {{ .Content }} +
+
\ No newline at end of file diff --git a/layouts/shortcodes/card-section.html b/layouts/shortcodes/card-section.html index c05caa9b..971a7b28 100644 --- a/layouts/shortcodes/card-section.html +++ b/layouts/shortcodes/card-section.html @@ -17,12 +17,12 @@ {{- $class := "card-grid" -}} {{- /* Validate that the parent is card-layout */ -}} {{ if eq .Parent.Name "card-layout"}} -
+
{{- if $title -}} {{- $title -}} -
{{- .Inner -}}
+
{{- .Inner -}}
{{ else }} -
{{ .Inner }}
+
{{ .Inner }}
{{ end }}
{{ else }} diff --git a/layouts/shortcodes/card.html b/layouts/shortcodes/card.html index 5f863afd..0bfe34f5 100644 --- a/layouts/shortcodes/card.html +++ b/layouts/shortcodes/card.html @@ -4,6 +4,7 @@ {{- $brandIcon := .Get "brandIcon" -}} {{- $isFeaturedParam := .Get "isFeatured" | default "false" }} {{- $isFullSizeParam := .Get "isFullSize" | default "false" -}} +{{- $isLandingParam := .Get "isLanding" | default "false" }} {{- /* Validate the parameter strictly */ -}} {{- if not (in (slice "true" "false") $isFeaturedParam) -}} @@ -16,10 +17,17 @@ {{- end -}} {{- $isFullSize := cond (eq $isFullSizeParam "true") "true" "false" -}} +{{- if not (in (slice "true" "false") $isLandingParam) -}} + {{- warnf "The '' Shortcode parameter 'isLanding' must be 'true' or 'false', but got: '%s'. This will now default to 'false'" $isLandingParam -}} +{{- end -}} +{{- $isLanding := cond (eq $isLandingParam "true") "true" "false" -}} + {{- /* Set up the positioning */ -}} {{ $dataGrid := "" }} {{ if or (eq $isFullSize "true") (eq $isFeatured "true") }} {{ $dataGrid = "wide"}} +{{ else if (eq $isLanding "true") }} + {{ $dataGrid = "third"}} {{ else }} {{ $dataGrid = "half"}} {{ end }} From fb65f5e4cc95f7854de3886c810d10c5aab92e8f Mon Sep 17 00:00:00 2001 From: Lam Nguyen Date: Tue, 8 Jul 2025 16:12:33 -0700 Subject: [PATCH 06/14] Scroll: Fixed issue with pages overflowing on mobile --- assets/css/v2/style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css index 9b05b4fe..9ca949fc 100644 --- a/assets/css/v2/style.css +++ b/assets/css/v2/style.css @@ -868,7 +868,7 @@ nav { & > ul, & > ol { display: grid; - grid-template-columns: 1fr; + grid-template-columns: minmax(0, 1fr); /* These gaps determine the spacing between all content. Be careful!! */ gap: var(--space-m) var(--space-m); From 84ced429ec5a5e326eb27283991d74825ef88921 Mon Sep 17 00:00:00 2001 From: Lam Nguyen Date: Tue, 8 Jul 2025 16:14:15 -0700 Subject: [PATCH 07/14] Breadcrumb: Cleaned up unused code with wide --- layouts/_default/list.html | 2 +- layouts/_default/single.html | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/layouts/_default/list.html b/layouts/_default/list.html index f49bea0c..fa5369a4 100644 --- a/layouts/_default/list.html +++ b/layouts/_default/list.html @@ -2,7 +2,7 @@
-
+
{{ if not .IsHome }} {{ if not (in .Params.display_breadcrumb "false" ) }} {{ partial "breadcrumb" .}} diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 9a699f10..4284f4e2 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -3,7 +3,7 @@ {{ $content := partial "icon-replacement.html" (dict "content" .Content) }} -
+
{{ if not .IsHome }} {{ if not (in .Params.display_breadcrumb "false" ) }} {{ partial "breadcrumb" .}} From 24391937a027a8d460bd28f84bc4a1639238086d Mon Sep 17 00:00:00 2001 From: Lam <150060045+lamATnginx@users.noreply.github.com> Date: Tue, 8 Jul 2025 16:24:53 -0700 Subject: [PATCH 08/14] Fixed redocly responsive on new grid (#307) * Redoc: Fixed responsive on new grid * Redoc: Fix issue with redocly not going under header --- assets/css/v2/style.css | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css index 9ca949fc..7609a92d 100644 --- a/assets/css/v2/style.css +++ b/assets/css/v2/style.css @@ -899,7 +899,14 @@ nav { /* Allow redocly to fill the entire container */ &.content__redocly { justify-self: unset; - max-width: unset; + max-width: 100%; + + #api-component { + z-index: 0; + position: relative; + display: block; + max-width: 100%; + } } } From 41638594930de971a1af866116feea2c60a7c7e3 Mon Sep 17 00:00:00 2001 From: Lam Nguyen Date: Tue, 8 Jul 2025 17:08:09 -0700 Subject: [PATCH 09/14] Codeblock: Extend highlight to left side --- assets/css/v2/style.css | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css index 39fc91a4..7a32e170 100644 --- a/assets/css/v2/style.css +++ b/assets/css/v2/style.css @@ -1855,6 +1855,22 @@ a:has(code:not(pre code)) { table { width: calc(100% + var(--codeblock-horizontal-padding)); } + + .lntd:first-child pre code { + span { + margin-left: -1rem; + padding-left: 1rem; + width: calc(100% + 1rem); + } + } + + pre code .line { + display: inline; + } + + pre code .line.hl { + display: block; + } } .code-block { @@ -1955,6 +1971,7 @@ ul .code-block { .highlight code .hl { width: fit-content; min-width: 100%; + display: block; background-color: oklch(var(--color-codeblock-highlight)); } From 54712a32df56976b08caaafc6add02c2dd235313 Mon Sep 17 00:00:00 2001 From: Lam Nguyen Date: Wed, 9 Jul 2025 10:31:52 -0700 Subject: [PATCH 10/14] Cards: Make cards fully clickable + small bug fix with grid ordering --- assets/css/v2/style.css | 24 +++++++++++++----------- layouts/shortcodes/card-section.html | 2 +- layouts/shortcodes/card.html | 20 ++++++++------------ 3 files changed, 22 insertions(+), 24 deletions(-) diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css index 19f4ac17..b63251c2 100644 --- a/assets/css/v2/style.css +++ b/assets/css/v2/style.css @@ -779,6 +779,12 @@ nav { a { color: oklch(var(--color-foreground)); text-decoration-color: oklch(var(--color-background)); + + &:hover { + box-shadow: 3px 3px 0px oklch(var(--color-brand) / 0.4); + text-decoration-color: oklch(var(--color-background)); + border: 1px solid oklch(var(--color-brand) / 0.8); + } } .headerlink { @@ -791,17 +797,11 @@ nav { } > * { - grid-row: 1; grid-column: 1 / -1; } - p { - grid-row: 2; - } - - .card-layout { - grid-row: 3; - grid-column: 1 / -1; + > p { + grid-column: 1; } } } @@ -1489,9 +1489,11 @@ h6:has(a):hover { } .card { - display: flex; - flex-direction: column; - gap: 0.5rem; + .card-container { + display: flex; + flex-direction: column; + gap: 0.5rem; + } .card-header { display: flex; diff --git a/layouts/shortcodes/card-section.html b/layouts/shortcodes/card-section.html index 971a7b28..77633f00 100644 --- a/layouts/shortcodes/card-section.html +++ b/layouts/shortcodes/card-section.html @@ -20,7 +20,7 @@
{{- if $title -}} {{- $title -}} -
{{- .Inner -}}
+
{{ .Inner }}
{{ else }}
{{ .Inner }}
{{ end }} diff --git a/layouts/shortcodes/card.html b/layouts/shortcodes/card.html index 0bfe34f5..af4dfe49 100644 --- a/layouts/shortcodes/card.html +++ b/layouts/shortcodes/card.html @@ -1,5 +1,5 @@ {{- $title := .Get "title" -}} -{{- $titleUrl := .Get "titleUrl" | default "/" -}} +{{- $titleUrl := .Get "titleUrl" | default "." -}} {{- $icon := .Get "icon" | default "book-open" -}} {{- $brandIcon := .Get "brandIcon" -}} {{- $isFeaturedParam := .Get "isFeatured" | default "false" }} @@ -34,27 +34,23 @@ {{- /* Validate that the parent is card-section and under 3 cards */ -}} {{- if (eq .Parent.Name "card-section") -}} -
+ +
{{- if $title -}}
{{- if $brandIcon -}} - {{- else -}} - {{- if $icon -}} - {{ partial "lucide" (dict "context" . "icon" $icon) }} - {{- end -}} - {{- end -}} - {{- if $titleUrl -}} -

{{- $title -}}

- {{- else -}} -

{{- $title -}}

+ {{- else if $icon -}} + {{ partial "lucide" (dict "context" . "icon" $icon) }} {{- end -}} +

{{- $title -}}

{{- else -}} {{ errorf "Mainframe: Missing param 'title'" }} {{- end -}} - {{ .Inner }} +
{{ .Inner }}
+ {{- else -}} {{ errorf "The '' must be nested directly inside the shortcode ''. Please see the exampleSite for an example of usage." }} {{- end -}} \ No newline at end of file From 1e7d0fa22695de4f491842a8e4a5862ba0dbf9f1 Mon Sep 17 00:00:00 2001 From: Lam <150060045+lamATnginx@users.noreply.github.com> Date: Wed, 9 Jul 2025 11:40:05 -0700 Subject: [PATCH 11/14] Add new 'card' page to example site + new tests for cards (#305) * Cards: Replace with data-grid * Cards: Add new page to example site * Cards: Add tests * Cards: Small tweaks * Cards: Updated card params in example site * Cards: Fix bugs with the card due to merge --- assets/css/v2/style.css | 11 +- .../content/test-product/cards/_index.md | 5 + .../content/test-product/cards/permitted.md | 120 ++++++++++++++++++ layouts/shortcodes/card-layout.html | 2 +- layouts/shortcodes/card-section.html | 11 +- layouts/shortcodes/card.html | 6 +- tests/src/cards.spec.js | 71 +++++++++++ 7 files changed, 218 insertions(+), 8 deletions(-) create mode 100644 exampleSite/content/test-product/cards/_index.md create mode 100644 exampleSite/content/test-product/cards/permitted.md create mode 100644 tests/src/cards.spec.js diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css index b63251c2..727c7f34 100644 --- a/assets/css/v2/style.css +++ b/assets/css/v2/style.css @@ -1482,13 +1482,21 @@ h6:has(a):hover { &.featured-section { /* Hide all the cards past 3 if it is a featured card section */ - .card-section-content > *:nth-child(n + 4 of div.card) { + .card-section-content > *:nth-child(n + 4 of a.card) { display: none; } } } .card { + color: oklch(var(--color-foreground)); + text-decoration: none; + order: 2; + + &.featured-card { + order: 1; + } + .card-container { display: flex; flex-direction: column; @@ -1500,6 +1508,7 @@ h6:has(a):hover { flex-direction: row; gap: 1rem; align-items: center; + color: oklch(var(--color-brand)); .card-brand-icon { height: 20px; diff --git a/exampleSite/content/test-product/cards/_index.md b/exampleSite/content/test-product/cards/_index.md new file mode 100644 index 00000000..7346afc8 --- /dev/null +++ b/exampleSite/content/test-product/cards/_index.md @@ -0,0 +1,5 @@ +--- +description: Card usage +title: Cards +weight: 300 +--- \ No newline at end of file diff --git a/exampleSite/content/test-product/cards/permitted.md b/exampleSite/content/test-product/cards/permitted.md new file mode 100644 index 00000000..933ea962 --- /dev/null +++ b/exampleSite/content/test-product/cards/permitted.md @@ -0,0 +1,120 @@ +--- +description: Card usage +title: Usage +weight: 100 +--- +## General usage +The structure of a card looks like the following: +```plaintext + + + SOME CONTENT icon="SOME_LUCIDE_ICON"><\card> + ... + SOME CONTENT<\card> + + +``` + +and will render as the following: +
+ {{}} + {{}} + {{}} + SOME CONTENT + {{}} + {{}} + {{}} +
+ +### Params +To support customization, there are also some params you can add to the shortcode `` such as `title`, `titleUrl`, `icon`, `brandIcon`, `isFeaturedCard`, `isFullSize`. + +* `title` (required) - Title of the card. +
+* `titleUrl` (optional) - URL for the card. +
+* `icon` (optional) - Custom icon using lucide icons. +
+* `brandIcon` (optional) - Custom icon using image from `nginx-hugo-theme/static/images/icons`. + * Usage: `` +
+* `isFeaturedCard` (optional) - Boolean indicating whether or not the card should be the first one and full size. By default, false. + * Usage: `` +
+* `isFullSize` (optional) - Boolean indicating whether or not the card should be full size. By default, cards are half sized. + * Usage: `` + +For the ``, there are some params you can add such as `title`, `isFeaturedSection`, and `showAsCards`. +* `title` - Title of the section. +
+* `isFeaturedSection` (optional) - Boolean indicating whether or not the section is a featured one - will discuss later down the page. By default, false. +
+* `showAsCards` (optional) - Boolean indicating whether or not the cards in the section should appear with borders. By default, false. + +### Additional Information +While it may come immediate, you can't use a `` shortcode on its own in your markdown or else the build will fail. This is because if you call a card, there is no way to structure it in a writer-friendly customizable way. + +## Show as cards +As you can see from the above example in 'General usage', it renders as a plain box that does not resemble a card. To change the appearance and render as a card, use the param `showAsCards` in the shortcode ``. The usage as seen below: +```plaintext + + + SOME CONTENT icon="SOME_LUCIDE_ICON"><\card> + ... + SOME CONTENT<\card> + + +``` +and will render as the following: +
+ {{}} + {{}} + {{}} + SOME CONTENT + {{}} + {{}} + {{}} +
+ +## Featured Section +Denoted by the param `isFeaturedSection` in the shortcode ``, this block of cards can contain only up to three cards. + +
+ {{}} + {{}} + {{}} + All shortcodes in one page. + {{}} + {{}} + Examples for call-out shortcode + {{}} + {{}} + Examples for codeblock shortcode + {{}} + {{}} + Examples for codeblock shortcode + {{}} + {{}} + {{}} +
+ +## Featured Card +Denoted by the param `isFeaturedCard` in the shortcode ``, this will push the card up to very top of the section and make it full length. +
+ {{}} + {{}} + {{}} + All shortcodes in one page. + {{}} + {{}} + Examples for call-out shortcode + {{}} + {{}} + Examples for codeblock shortcode + {{}} + {{}} + Examples for codeblock shortcode + {{}} + {{}} + {{}} +
\ No newline at end of file diff --git a/layouts/shortcodes/card-layout.html b/layouts/shortcodes/card-layout.html index e5337167..57d83472 100644 --- a/layouts/shortcodes/card-layout.html +++ b/layouts/shortcodes/card-layout.html @@ -1,2 +1,2 @@ -
{{- .Inner | markdownify -}}
+
{{- .Inner | markdownify -}}
diff --git a/layouts/shortcodes/card-section.html b/layouts/shortcodes/card-section.html index 77633f00..26478172 100644 --- a/layouts/shortcodes/card-section.html +++ b/layouts/shortcodes/card-section.html @@ -1,6 +1,7 @@ {{ $title := .Get "title" }} {{ $isFeaturedSectionParam := .Get "isFeaturedSection" | default "false" }} {{ $showAsCardsParam := .Get "showAsCards" | default "false"}} + {{- /* Validate the parameter strictly */ -}} {{- if not (in (slice "true" "false") $showAsCardsParam) -}} {{- warnf "The '' Shortcode parameter 'showAsCards' must be 'true' or 'false', but got: '%s'. This will now default to 'false'" $showAsCardsParam -}} @@ -15,14 +16,18 @@ {{- end -}} {{- $isFeaturedSection := cond (eq $isFeaturedSectionParam "true") "true" "false" -}} {{- $class := "card-grid" -}} + +{{- /* Get number of cards */ -}} +{{ $cardCount := len (findRE "" .Inner) }} + {{- /* Validate that the parent is card-layout */ -}} {{ if eq .Parent.Name "card-layout"}} -
+
{{- if $title -}} {{- $title -}} -
{{ .Inner }}
+
{{ .Inner }}
{{ else }} -
{{ .Inner }}
+
{{ .Inner }}
{{ end }}
{{ else }} diff --git a/layouts/shortcodes/card.html b/layouts/shortcodes/card.html index af4dfe49..490be379 100644 --- a/layouts/shortcodes/card.html +++ b/layouts/shortcodes/card.html @@ -2,13 +2,13 @@ {{- $titleUrl := .Get "titleUrl" | default "." -}} {{- $icon := .Get "icon" | default "book-open" -}} {{- $brandIcon := .Get "brandIcon" -}} -{{- $isFeaturedParam := .Get "isFeatured" | default "false" }} +{{- $isFeaturedParam := .Get "isFeaturedCard" | default "false" }} {{- $isFullSizeParam := .Get "isFullSize" | default "false" -}} {{- $isLandingParam := .Get "isLanding" | 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 -}} + {{- warnf "The '' Shortcode parameter 'isFeaturedCard' must be 'true' or 'false', but got: '%s'. This will now default to 'false'" $isFeaturedParam -}} {{- end -}} {{- $isFeatured := cond (eq $isFeaturedParam "true") "true" "false" -}} @@ -34,7 +34,7 @@ {{- /* Validate that the parent is card-section and under 3 cards */ -}} {{- if (eq .Parent.Name "card-section") -}} - +
{{- if $title -}}
diff --git a/tests/src/cards.spec.js b/tests/src/cards.spec.js new file mode 100644 index 00000000..3f40eb38 --- /dev/null +++ b/tests/src/cards.spec.js @@ -0,0 +1,71 @@ +import { expect, test } from '@playwright/test'; + +test.describe('Testing for cards shortcode', () => { + test.beforeEach(async ({ page }) => { + const cardsUrl = 'test-product/cards/permitted'; + await page.goto(`/${cardsUrl}`); + }); + + test('should test basic section', async ({ page }) => { + const section = await page.locator('data-testid=cards-test__basic'); + const basicCode = await section.locator('data-testid=card-section-content'); + const showAsCardCode = await section.locator( + 'data-testid=card-section-content__card-grid' + ); + + expect(await basicCode.count()).toBeTruthy(); + expect(await showAsCardCode.count()).toBe(0); + }); + + test('should test showAsCard section', async ({ page }) => { + const section = await page.locator('data-testid=cards-test__showAsCards'); + const showAsCardCode = await section.locator( + 'data-testid=card-section-content__card-grid' + ); + + expect(await showAsCardCode.count()).toBeTruthy(); + }); + + test('should test featured section', async ({ page }) => { + const section = await page.locator( + 'data-testid=cards-test__featuredSection' + ); + const featuredSection = await section.locator( + 'data-testid=card-section__featured-section' + ); + const cards = await ( + await featuredSection.locator('data-testid=card') + ).all(); + + // Test featured section exists AND there are less than or equal to 3 cards. + expect(await featuredSection.count()).toBeTruthy(); + const visibleCards = []; + for (const card of cards) { + if (await card.isVisible()) { + visibleCards.push(card); + } + } + expect(visibleCards.length).toBeLessThanOrEqual(3); + }); + + test('should test featured card', async ({ page }) => { + const section = await page.locator('data-testid=cards-test__featuredCard'); + const featuredCard = await section.locator( + 'data-testid=card__featured-card' + ); + const cards = await (await section.locator('data-testid=card')).all(); + const featuredCardOrder = await featuredCard.evaluate((el) => { + return window.getComputedStyle(el).getPropertyValue('order'); + }); + + // Test featured card exist AND is the first one in the order + expect(await featuredCard.count()).toBeTruthy(); + expect(featuredCardOrder).toBe('1'); + for (const card of cards) { + const order = await card.evaluate((el) => { + return window.getComputedStyle(el).getPropertyValue('order'); + }); + expect(order).toBe('2'); + } + }); +}); From 3a3fe739af695337763b8777ec665b10699a4f51 Mon Sep 17 00:00:00 2001 From: Lam Nguyen Date: Thu, 10 Jul 2025 08:51:37 -0700 Subject: [PATCH 12/14] Grid: Resolved issue with grid on mobile --- assets/css/v2/style.css | 7 ++++--- layouts/redoc/single.html | 1 + 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css index 727c7f34..bdf250b6 100644 --- a/assets/css/v2/style.css +++ b/assets/css/v2/style.css @@ -360,9 +360,9 @@ ol li:last-child { @media (max-width: 68rem) { grid-template-columns: 1fr; grid-template-areas: - "sidebar header" - "sidebar content" - "sidebar footer"; + "header" + "content" + "footer"; .text-content { margin-top: 1rem; @@ -906,6 +906,7 @@ nav { position: relative; display: block; max-width: 100%; + margin-top: 1rem; } } } diff --git a/layouts/redoc/single.html b/layouts/redoc/single.html index 2451793d..81248520 100644 --- a/layouts/redoc/single.html +++ b/layouts/redoc/single.html @@ -1,6 +1,7 @@ {{ define "main" }}
+
{{ partial "breadcrumb" . }}
{{ .Content}}
From deb5574462f2f6b788719c1a6507761162bd78e1 Mon Sep 17 00:00:00 2001 From: Lam Nguyen Date: Thu, 10 Jul 2025 09:01:17 -0700 Subject: [PATCH 13/14] Banner: Add spacing --- assets/css/v2/style.css | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css index bdf250b6..5305b94c 100644 --- a/assets/css/v2/style.css +++ b/assets/css/v2/style.css @@ -1363,7 +1363,8 @@ a:hover { text-decoration-color: oklch(var(--color-brand) / 0.8); } -/* MARK: Typography */ +/* MARK: Typography +*/ h1 { font-size: var(--font-step-3); @@ -2005,6 +2006,13 @@ ul .code-block { } } +/* MARK: Banner +*/ + +.banner { + margin-top: 1rem; +} + /* MARK: Images */ figure { From 05245d4ebb911924bca11ab85ecf289fbc93e05c Mon Sep 17 00:00:00 2001 From: Lam Nguyen Date: Thu, 10 Jul 2025 09:24:55 -0700 Subject: [PATCH 14/14] Card: Fixed relative pathing --- exampleSite/content/_index.md | 4 ++-- exampleSite/content/test-product/_index.md | 2 +- layouts/shortcodes/card.html | 9 ++++++++- 3 files changed, 11 insertions(+), 4 deletions(-) diff --git a/exampleSite/content/_index.md b/exampleSite/content/_index.md index 996fa364..d0722a47 100644 --- a/exampleSite/content/_index.md +++ b/exampleSite/content/_index.md @@ -7,10 +7,10 @@ description: Documentation for hugo theme {{}} {{}} - {{}} + {{}} See explanations and usages of shortcodes {{}} - {{}} + {{}} See a live example of theme components {{}} {{}} diff --git a/exampleSite/content/test-product/_index.md b/exampleSite/content/test-product/_index.md index fdec377b..500c5ec2 100644 --- a/exampleSite/content/test-product/_index.md +++ b/exampleSite/content/test-product/_index.md @@ -54,7 +54,7 @@ This is a compilation of all our shortcodes to show how they look, function, res {{}} {{}} - {{}} + {{}} Installing NGINX {{}} {{}} diff --git a/layouts/shortcodes/card.html b/layouts/shortcodes/card.html index 490be379..7fdb157c 100644 --- a/layouts/shortcodes/card.html +++ b/layouts/shortcodes/card.html @@ -32,9 +32,16 @@ {{ $dataGrid = "half"}} {{ end }} +{{- /* Build the url */ -}} +{{ if eq (substr $titleUrl 0 1) "/" }} + {{ $suggestedUrlFix := substr $titleUrl 1 }} + {{ errorf "Please do not start the param 'titleUrl' with a forward slash. Got: '%s', use '%s' instead." $titleUrl $suggestedUrlFix }} +{{ end }} +{{ $url := printf "%s%s" .Page.Permalink $titleUrl }} + {{- /* Validate that the parent is card-section and under 3 cards */ -}} {{- if (eq .Parent.Name "card-section") -}} - +
{{- if $title -}}