From 1a4e3516533bec1d1a03538b98934aed72a8d50d Mon Sep 17 00:00:00 2001 From: Jack Hickey <133868041+nginx-jack@users.noreply.github.com> Date: Mon, 9 Jun 2025 14:37:48 +0100 Subject: [PATCH 01/37] Mainframe: Remove old css --- layouts/_default/baseof.html | 161 ++++------------------------------- layouts/partials/styles.html | 80 ++--------------- 2 files changed, 26 insertions(+), 215 deletions(-) diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 54e5c04..e7022ea 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -1,185 +1,60 @@ - - - - - - - - + {{ block "head" . }} {{ partial "meta.html" . }} - + {{ partial "favicon.html" . }} - + {{ partial "styles.html" . }} - + {{ if in .Params.doctypes "devportal" }} {{ partial "devportal/style.html" . }} {{ end }} - + {{ if fileExists "/layouts/partials/head_custom.html" }} {{ partial "head_custom.html" . }} {{ end }} - + {{ if or ( not hugo.IsServer ) ( not ( in .Site.Params.buildtype "package" ) ) }} - + {{ partial "trustarc.html" . }} - + {{ partial "tealium-profile.html" . }} - + {{ end }} - + {{ end }} - + - + - + {{ if or ( not hugo.IsServer ) ( not ( in .Site.Params.buildtype "package" ) ) }} {{ partial "universal-tag.html" . }} {{ end }} - +
{{ block "header" . }}{{end}}
- +
- +
{{ block "main" . }}{{ end }}
@@ -196,7 +71,7 @@ {{ partial "footer-v2.html" . }} {{ end }} - {{ partial "scripts.html" . }} + {{ partial "scripts.html" . }} diff --git a/layouts/partials/styles.html b/layouts/partials/styles.html index 2c828d4..098d627 100644 --- a/layouts/partials/styles.html +++ b/layouts/partials/styles.html @@ -1,49 +1,14 @@ -{{ $css1 := resources.Get "css/docs-nginx-com/nginx-site-header.css" }} -{{ $css2 := resources.Get "css/docs-nginx-com/style.css" }} -{{ $css3 := resources.Get "css/bootstrap-docs.css" }} -{{ $css4 := resources.Get "css/f5-hugo.css" }} -{{ $css5 := resources.Get "css/highlight.css" }} -{{ $css6 := resources.Get "css/coveo.css" }} -{{ $css7 := resources.Get "css/v2/style.css" }} -{{ $css8 := resources.Get "css/inline-overrides.css" }} -{{ $css9 := resources.Get "css/v2/highlight.css" }} +{{ $style := resources.Get "css/v2/style.css" | minify | fingerprint "sha512" }} + - - +{{ $cssInter := resources.Get "css/inter/inter.css" | minify | fingerprint "sha512" }} + -{{ $cssInter := resources.Get "css/inter/inter.css" | fingerprint "sha512" }} - +{{ $cssHighlight := resources.Get "css/v2/highlight.css" | minify | fingerprint "sha512"}} + -{{ $cssHighlight := $css9 | minify | fingerprint "sha512"}} - - - - - -{{ $cssFA1 := resources.Get "fontawesome/css/all.min.css" | fingerprint "sha512" }} - - -{{ $cssFA2 := resources.Get "fontawesome/css/v4-font-face.min.css" | fingerprint "sha512" }} - - -{{ $cssFA3 := resources.Get "fontawesome/css/v5-font-face.min.css" | fingerprint "sha512" }} - - - -{{ $cssBootstrap := resources.Get "css/bootstrap.min.css" | fingerprint "sha512" }} - - -{{ if ( not ( in .Site.Params.buildtype "package" ) ) }} - -{{ end }} +{{ $cssOverrides := resources.Get "css/inline-overrides.css" | minify | fingerprint "sha512"}} + - -{{ $cssHeader := $css1 | minify | fingerprint "sha512"}} - - -{{ $cssNginxStyles := $css2 | minify | fingerprint "sha512"}} - - -{{ $bootstrapDocs := $css3 | minify | fingerprint "sha512"}} - - -{{ if ( not ( in .Site.Params.buildtype "package" ) ) }} -{{ $cssCoveo := $css6 | minify | fingerprint "sha512"}} - -{{ end }} - -{{ $cssF5Hugo := $css4 | minify | fingerprint "sha512"}} - - -{{ $cssOverrides := $css8 | minify | fingerprint "sha512"}} - - -{{ if fileExists "assets/css/custom.css" }} -{{ $customCSS := resources.Get "css/custom.css" | minify | fingerprint "sha512" }} - -{{ end }} - - -{{ $cssHighlight := $css5 | minify | fingerprint "sha512"}} - \ No newline at end of file From 2a7f080bc97057f73faa7eb490b0472aa20f3a3c Mon Sep 17 00:00:00 2001 From: Jack Hickey <133868041+nginx-jack@users.noreply.github.com> Date: Mon, 9 Jun 2025 14:41:10 +0100 Subject: [PATCH 02/37] Mainframe: Remove old js --- layouts/partials/scripts.html | 27 +-------------------------- 1 file changed, 1 insertion(+), 26 deletions(-) diff --git a/layouts/partials/scripts.html b/layouts/partials/scripts.html index 5fdf31c..d9e7af8 100644 --- a/layouts/partials/scripts.html +++ b/layouts/partials/scripts.html @@ -1,18 +1,3 @@ -{{ $jquery := resources.Get "/js/jquery-3-6-4.min.js" }} - - -{{ $kubejs := resources.Get "/js/kube.js" | minify | fingerprint "sha512" }} - - - -{{ $jsBootstrap := resources.Get "js/bootstrap.bundle.min.js" | fingerprint "sha512" }} - - - -{{ $codecopy := resources.Get "/js/code-copy.js" | fingerprint "sha512" }} - - {{ $codecopyv2 := resources.Get "/js/code-copy-v2.js" | fingerprint "sha512" }} @@ -64,20 +49,10 @@ {{ end }} - - - -{{ $jsSidebar := resources.Get "js/sidebar.js" | minify | fingerprint "sha512" }} - - - -{{ $jsSiteDropdown := resources.Get "js/site-dropdown.js" | minify | fingerprint "sha512" }} - - {{ $jsProductSelector := resources.Get "js/product-selector.js" | minify | fingerprint "sha512" }} {{ $jsSidebarV2 := resources.Get "js/sidebar-v2.js" | minify | fingerprint "sha512" }} - \ No newline at end of file + From 4be5ef680e916e71c7a80215a8b04364a0aa50e7 Mon Sep 17 00:00:00 2001 From: Lam Nguyen Date: Mon, 9 Jun 2025 07:40:03 -0700 Subject: [PATCH 03/37] Mainframe: Removed css data-mf tags --- exampleSite/content/test-product/_index.md | 1 - .../_default/_markup/render-codeblock.html | 9 +- layouts/_default/_markup/render-heading.html | 9 +- layouts/_default/baseof.html | 16 +- layouts/_default/docs.html | 10 +- layouts/_default/list.html | 21 +- layouts/partials/breadcrumb.html | 2 +- layouts/partials/callout.html | 18 +- layouts/partials/coveo-atomic-search.html | 5 +- layouts/partials/custom-landing-page.html | 28 +-- layouts/partials/header.html | 3 +- layouts/partials/list-main.html | 42 ---- layouts/partials/lucide.html | 2 +- layouts/partials/sidebar.html | 207 ------------------ layouts/redoc/single.html | 12 +- layouts/search/single.html | 11 +- layouts/shortcodes/bootstrap-table.html | 2 +- layouts/shortcodes/card-section.html | 8 +- layouts/shortcodes/card.html | 17 +- layouts/shortcodes/ghcode.html | 8 +- 20 files changed, 29 insertions(+), 402 deletions(-) delete mode 100644 layouts/partials/list-main.html delete mode 100644 layouts/partials/sidebar.html diff --git a/exampleSite/content/test-product/_index.md b/exampleSite/content/test-product/_index.md index 96b971a..c3f5d6e 100644 --- a/exampleSite/content/test-product/_index.md +++ b/exampleSite/content/test-product/_index.md @@ -17,7 +17,6 @@ hasCustomContent: true Examples for codeblock shortcode {{}} {{}} - # Other Products on ExampleSite {{< card-section title="NGINX" showAsCards="true" >}} {{< card title="NGINX Plus" titleUrl="/nginx/" >}} diff --git a/layouts/_default/_markup/render-codeblock.html b/layouts/_default/_markup/render-codeblock.html index f108880..23ebd90 100644 --- a/layouts/_default/_markup/render-codeblock.html +++ b/layouts/_default/_markup/render-codeblock.html @@ -4,7 +4,7 @@ {{ $isSingleLine := eq (len $lines) 1 }} {{- if $isSingleLine -}} -
+ + {{ end }} diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 0dd278c..c52749c 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -1,66 +1,53 @@ {{ define "main" }} -
- -
- {{ block "header" . }}{{end}} -
- - -
- - {{ $content := partial "icon-replacement.html" (dict "content" .Content) }} -
+
+ + {{ $content := partial "icon-replacement.html" (dict "content" .Content) }} +
+ +
+
+
+
+ {{ 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" . }} +
+ {{ 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 }} + {{ partial "version-list" . }} + {{ partial "qualtrics-feedback.html" }} -
+ {{ partial "previous-next-links-in-section-with-title.html" . }} - {{ if .Page.Lastmod }} -
- {{ partial "page-meta-links" . }} -
- {{ end }} +
+ + +
- {{ partial "version-list" . }} - {{ partial "qualtrics-feedback.html" }} - {{ partial "previous-next-links-in-section-with-title.html" . }} - -
- - -
-
- {{ block "footer-v2" . }} - {{ partial "footer-v2.html" . }} - {{ end }} -
+ +{{if .Params.script}} + {{ $script := (delimit (slice "scripts" .Params.script) "/")}} + {{ partial (string $script) .}} +{{end }} - - {{if .Params.script}} - {{ $script := (delimit (slice "scripts" .Params.script) "/")}} - {{ partial (string $script) .}} - {{end }} -
diff --git a/layouts/redoc/single.html b/layouts/redoc/single.html index 664f3df..2451793 100644 --- a/layouts/redoc/single.html +++ b/layouts/redoc/single.html @@ -1,32 +1,14 @@ {{ define "main" }} - -
- - -
- {{ block "header" . }}{{end}} -
- - -
- -
{{ .Content}}
-
- -
- {{ block "footer-v2" . }} - {{ partial "footer-v2.html" . }} - {{ end }} -
- - - {{if .Params.script}} - {{ $script := (delimit (slice "scripts" .Params.script) "/")}} - {{ partial (string $script) .}} - {{end }} +
+
{{ .Content}}
+
+ + +{{if .Params.script}} + {{ $script := (delimit (slice "scripts" .Params.script) "/")}} + {{ partial (string $script) .}} +{{end }}
{{ end }} From d53d624487fe230887a5a7704b31cc0b29b89d4a Mon Sep 17 00:00:00 2001 From: Jack Hickey <133868041+nginx-jack@users.noreply.github.com> Date: Mon, 23 Jun 2025 16:06:46 +0100 Subject: [PATCH 22/37] Header: Fix search and f5 sites --- assets/css/v2/style.css | 41 ++++++++++++++++++++++++++++---- layouts/_default/list.html | 3 +-- layouts/partials/header.html | 36 ++++++++++++++++++++++++++-- layouts/partials/sidebar-v2.html | 2 +- 4 files changed, 73 insertions(+), 9 deletions(-) diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css index 1c33960..033b8ca 100644 --- a/assets/css/v2/style.css +++ b/assets/css/v2/style.css @@ -333,7 +333,7 @@ ol li:last-child { .grid-container { display: grid; grid-template-columns: var(--sidebar-width) 1fr; - grid-template-rows: var(--space-xl) 1fr auto; + grid-template-rows: var(--space-3xl) 1fr auto; grid-template-areas: "sidebar header" "sidebar content" @@ -387,6 +387,41 @@ ol li:last-child { } } + .dropdown-content { + position: absolute; + background-color: oklch(var(--color-background)); + border: oklch(var(--color-foreground)) 1px solid; + box-shadow: 3px 3px 0px oklch(var(--color-shadow)); + z-index: 1; + right: 0; + display: none; + width: 400px; + max-width: 80vw; + margin-right: 2rem; + } + + .dropdown-content ul { + padding: 20px 10px; + } + + .nav-item-explore { + margin: 0; + } + + .navbar-button { + padding: 0.5rem 0.5rem; + border: none; + border-radius: 0.25rem; + text-align: center; + text-decoration: none; + cursor: pointer; + } + + .remove-bottom-radius { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + } + ul { list-style: none; } @@ -778,7 +813,7 @@ nav { @media (min-width: 88em) { .text-content { grid-template-columns: var(--grid-content) var(--grid-side-callout); - grid-template-rows: 70px max-content; + grid-template-rows: 3rem max-content; column-gap: var(--grid-column-gutter); } @@ -843,8 +878,6 @@ nav { atomic-search-interface { height: fit-content; - margin-bottom: 2rem; - margin-top: 2rem; } .header-search-box { diff --git a/layouts/_default/list.html b/layouts/_default/list.html index 1c5b0b8..494edfc 100644 --- a/layouts/_default/list.html +++ b/layouts/_default/list.html @@ -2,7 +2,6 @@
-
@@ -41,6 +40,6 @@

- + {{ end }} diff --git a/layouts/partials/header.html b/layouts/partials/header.html index afa145b..0882433 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -1,7 +1,39 @@ {{ define "header" }}
Product Selector
-
Search
-
F5 Sites
+ {{ if ( not ( in .Site.Params.buildtype "package" ) ) }} +
+ + {{ partial "coveo-atomic-search.html" }} +
+ {{ end }} + +
+ {{ $f5Sites := slice + (dict "title" "DevCentral" "url" "https://community.f5.com/" "description" "Connect & learn in our hosted community") + (dict "title" "MyF5" "url" "https://my.f5.com/" "description" "Your key to everything F5, including support, registration keys, and subscriptions") + (dict "title" "NGINX" "url" "https://nginx.org/" "description" "Learn more about NGINX Open Source and read the community blog") + }} + +
    +
  • + +
    +
      + {{ range $f5Sites }} +
    • + {{ .title }} +

      {{ .description }}

      +
      • + {{ end }} +
    +
    +
    • +
+ +
{{ end }} diff --git a/layouts/partials/sidebar-v2.html b/layouts/partials/sidebar-v2.html index 0c75ba1..fe77a47 100644 --- a/layouts/partials/sidebar-v2.html +++ b/layouts/partials/sidebar-v2.html @@ -1,4 +1,4 @@ -{{ $nginxProducts := slice +{{ $nginxProducts := slice (dict "title" "NGINX One Console" "url" "/nginx-one" "type" "nginx-one") (dict "title" "NGINX Plus" "url" "/nginx" "type" "nginx-one") (dict "title" "NGINX Instance Manager" "url" "/nginx-instance-manager" "type" "nginx-one") From e9b2699f401905dcceb518d1c9f695d9de56bc04 Mon Sep 17 00:00:00 2001 From: Jack Hickey <133868041+nginx-jack@users.noreply.github.com> Date: Tue, 24 Jun 2025 10:04:18 +0100 Subject: [PATCH 23/37] Search: Fix search page render on new grid --- assets/css/v2/style.css | 38 ++++++++++++++++++++++++++------------ layouts/search/single.html | 2 +- 2 files changed, 27 insertions(+), 13 deletions(-) diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css index 033b8ca..951572a 100644 --- a/assets/css/v2/style.css +++ b/assets/css/v2/style.css @@ -349,6 +349,32 @@ ol li:last-child { } } +/* Homepage specific layout */ +.grid-container:has(.homepage) { + grid-template-columns: 1fr; + grid-template-areas: + "header" + "content" + "footer"; + + .sidebar { + display: none; + } +} + +/* Search specific layout */ +.grid-container:has(.search) { + grid-template-columns: 1fr; + grid-template-areas: + "header" + "content" + "footer"; + + .sidebar { + display: none; + } +} + .header { grid-area: header; display: flex; @@ -577,18 +603,6 @@ nav { /* MARK: Homepage */ -.grid-container:has(.homepage) { - grid-template-columns: 1fr; - grid-template-areas: - "header" - "content" - "footer"; - - .sidebar { - display: none; - } -} - .homepage { --content-max-width: 120rem; diff --git a/layouts/search/single.html b/layouts/search/single.html index 9d2e1cd..cbab6a2 100644 --- a/layouts/search/single.html +++ b/layouts/search/single.html @@ -1,5 +1,5 @@ {{ define "main" }} -
+
{{ partial "coveo-atomic.html" .}}
{{ end }} From 23ec93bb540c51ac8e4c35664fa340fdff205b2e Mon Sep 17 00:00:00 2001 From: Jack Hickey <133868041+nginx-jack@users.noreply.github.com> Date: Tue, 24 Jun 2025 10:33:14 +0100 Subject: [PATCH 24/37] Headers: Handle show hide logo depending on page --- assets/css/v2/style.css | 35 ++++++++++++++++++++++++++++++++++- layouts/partials/header.html | 14 +++++++++++--- 2 files changed, 45 insertions(+), 4 deletions(-) diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css index 951572a..8282c4d 100644 --- a/assets/css/v2/style.css +++ b/assets/css/v2/style.css @@ -246,6 +246,10 @@ textarea:not([rows]) { --grid-gutter: var(--space-s-l, clamp(1rem, 0.4975rem + 2.5126vw, 2.25rem)); --grid-columns: 12; + /* TODO: This aligns the logo in the header perfectly with the one in the sidebar, but + this is not a safe way to do it, and likely to get out of sync */ + --header-height: 93px; + --sidebar-width: 22rem; --sidebar-item-padding: 0.25rem 0.75rem; --content-max-width: 88rem; @@ -333,7 +337,7 @@ ol li:last-child { .grid-container { display: grid; grid-template-columns: var(--sidebar-width) 1fr; - grid-template-rows: var(--space-3xl) 1fr auto; + grid-template-rows: var(--header-height) 1fr auto; grid-template-areas: "sidebar header" "sidebar content" @@ -347,6 +351,10 @@ ol li:last-child { "content" "footer"; } + + .header__logo { + display: none; + } } /* Homepage specific layout */ @@ -360,6 +368,14 @@ ol li:last-child { .sidebar { display: none; } + + .header__logo { + display: unset; + } + + .header__product-selector { + display: none; + } } /* Search specific layout */ @@ -373,6 +389,10 @@ ol li:last-child { .sidebar { display: none; } + + .header__logo { + display: unset; + } } .header { @@ -388,6 +408,19 @@ ol li:last-child { align-items: center; width: 100%; + .header__img { + height: 2rem; + padding-left: 12px; + } + + .header__search { + width: 14rem; + } + + .header__product-selector { + width: 10rem; + } + > ul { padding: 0; } diff --git a/layouts/partials/header.html b/layouts/partials/header.html index 0882433..8824580 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -1,14 +1,22 @@ {{ define "header" }}
-
Product Selector
+ + + +
Product Selector
+ {{ if ( not ( in .Site.Params.buildtype "package" ) ) }} -
+
{{ partial "coveo-atomic-search.html" }}
{{ end }} -
+
{{ $f5Sites := slice (dict "title" "DevCentral" "url" "https://community.f5.com/" "description" "Connect & learn in our hosted community") (dict "title" "MyF5" "url" "https://my.f5.com/" "description" "Your key to everything F5, including support, registration keys, and subscriptions") From 03b9f0782c6ab6483b6a8691fbb849cc2db93c01 Mon Sep 17 00:00:00 2001 From: Jack Hickey <133868041+nginx-jack@users.noreply.github.com> Date: Tue, 24 Jun 2025 14:16:37 +0100 Subject: [PATCH 25/37] Headers: Add back product selector --- assets/css/v2/style.css | 36 +++++++++++++++++++-- assets/js/product-selector.js | 21 +++++-------- layouts/partials/header.html | 59 ++++++++++++++++++++++++++++++++++- 3 files changed, 99 insertions(+), 17 deletions(-) diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css index 8282c4d..ec1196d 100644 --- a/assets/css/v2/style.css +++ b/assets/css/v2/style.css @@ -419,6 +419,23 @@ ol li:last-child { .header__product-selector { width: 10rem; + + .product-selector__button { + display: flex; + align-items: center; + background: oklch(var(--color-background)); + border: none; + width: 16rem; + font-weight: 500; + cursor: pointer; + color: oklch(var(--color-foreground)); + text-decoration-color: oklch(var(--color-brand) / 0.3); + transition: color 0.15s ease-in-out; + + & :hover { + color: oklch(var(--color-brand)); + } + } } > ul { @@ -1032,18 +1049,31 @@ body:not(:has(.main-layout)) header atomic-search-interface { */ .product-selector { + /* should appear above search box on smaller displays */ + z-index: 11; display: none; position: absolute; top: 0; - min-width: 80%; - margin-top: 8.375rem; - margin-left: 44rem; + margin-top: 4em; padding: 1rem 1.5rem; background-color: oklch(var(--color-background)); border: oklch(var(--color-foreground)) 1px solid; box-shadow: 3px 3px 0px oklch(var(--color-shadow)); } +.product-name { + padding-right: var(--space-s); +} + +.product-selector-button-icon { + color: black; + + svg { + color: black; + stroke: currentColor; + } +} + button:has(~ .product-selector[style*="block"]) > .product-selector-button-icon { transition: transform 0.1s ease-in-out; diff --git a/assets/js/product-selector.js b/assets/js/product-selector.js index 909b9f5..8ce2f0e 100644 --- a/assets/js/product-selector.js +++ b/assets/js/product-selector.js @@ -4,24 +4,19 @@ document.addEventListener('DOMContentLoaded', () => { 'product-selector-button' ); - if (productSelectorButton === null || productSelectorContent == null) { - return; - } + if (!productSelectorButton || !productSelectorContent) return; productSelectorButton.addEventListener('click', () => { - /* Logic for hiding/showing ONLY when the button is clicked */ - if (productSelectorContent.style.display === 'block') { - productSelectorContent.style.display = 'none'; - productSelectorButton.classList.remove('remove-bottom-radius'); - } else { - productSelectorContent.style.display = 'block'; - productSelectorButton.classList.add('remove-bottom-radius'); - } + const isVisible = productSelectorContent.style.display === 'block'; + productSelectorContent.style.display = isVisible ? 'none' : 'block'; + productSelectorButton.classList.toggle('remove-bottom-radius', !isVisible); }); window.addEventListener('click', (event) => { - /* Greedy Logic to hide the product selector when something other than the button is clicked. Assumes everything has an id containing "product-selector" */ - if (!event.target.id.includes('product-selector')) { + const isClickInside = + productSelectorButton.contains(event.target) || + productSelectorContent.contains(event.target); + if (!isClickInside) { productSelectorContent.style.display = 'none'; productSelectorButton.classList.remove('remove-bottom-radius'); } diff --git a/layouts/partials/header.html b/layouts/partials/header.html index 8824580..9a1849a 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -7,7 +7,64 @@
-
Product Selector
+
+ {{ $nginxProducts := slice + (dict "title" "NGINX One Console" "url" "/nginx-one" "type" "nginx-one") + (dict "title" "NGINX Plus" "url" "/nginx" "type" "nginx-one") + (dict "title" "NGINX Instance Manager" "url" "/nginx-instance-manager" "type" "nginx-one") + (dict "title" "NGINX Ingress Controller" "url" "/nginx-ingress-controller" "type" "nginx-one") + (dict "title" "NGINX Gateway Fabric" "url" "/nginx-gateway-fabric" "type" "nginx-one") + (dict "title" "NGINX Open Source" "url" "https://nginx.org/en/docs/" "type" "nginx-one") + (dict "title" "NGINX Agent" "url" "/nginx-agent" "type" "nginx-one") + (dict "title" "NGINX App Protect WAF" "url" "/nginx-app-protect-waf" "type" "nginx-app-protect") + (dict "title" "NGINX App Protect DoS" "url" "/nginx-app-protect-dos" "type" "nginx-app-protect") + (dict "title" "NGINX as a Service for Azure" "url" "/nginxaas/azure/" "type" "nginx-as-a-service") + (dict "title" "NGINX Unit" "url" "https://unit.nginx.org/" "type" "nginx-other") + }} + {{ $productMap := dict }} + {{ range $nginxProducts }} + {{ $productId := index (split .url "/") 1 }} + {{ $productMap = merge $productMap (dict $productId .title) }} + {{ end }} + {{ $relPermalink := .RelPermalink }} + {{ $productIdentifier := index ((split $relPermalink "/")) 1 }} + {{ $productName := index $productMap $productIdentifier }} + + +
+ {{ $groupedProducts := dict + "nginx-one" (where $nginxProducts "type" "nginx-one") + "nginx-app-protect" (where $nginxProducts "type" "nginx-app-protect") + "nginx-as-a-service" (where $nginxProducts "type" "nginx-as-a-service") + "nginx-other" (where $nginxProducts "type" "nginx-other") + }} + {{ $orderedKeys := slice "nginx-one" "nginx-app-protect" "nginx-as-a-service" "nginx-other" }} + {{ range $orderedKeys }} + {{ $type := . }} + {{ $products := index $groupedProducts $type }} +
+

{{ $type | humanize | title | upper }}

+ +
+ {{ end }} +
+ + +
{{ if ( not ( in .Site.Params.buildtype "package" ) ) }}
From e3f927013a4f86dab651f2472343399e87c1088f Mon Sep 17 00:00:00 2001 From: Jack Hickey <133868041+nginx-jack@users.noreply.github.com> Date: Tue, 24 Jun 2025 14:31:01 +0100 Subject: [PATCH 26/37] Headers: Fix header responsivness --- assets/css/v2/style.css | 23 ++--------------------- 1 file changed, 2 insertions(+), 21 deletions(-) diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css index ec1196d..97bff28 100644 --- a/assets/css/v2/style.css +++ b/assets/css/v2/style.css @@ -243,6 +243,7 @@ textarea:not([rows]) { /* @link https://utopia.fyi/grid/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 */ --grid-max-width: 69.75rem; + --grid-min-width: 34rem; --grid-gutter: var(--space-s-l, clamp(1rem, 0.4975rem + 2.5126vw, 2.25rem)); --grid-columns: 12; @@ -343,6 +344,7 @@ ol li:last-child { "sidebar content" "sidebar footer"; min-height: 100vh; + min-width: var(--grid-min-width); @media (max-width: 68rem) { grid-template-columns: 1fr; @@ -403,7 +405,6 @@ ol li:last-child { .header-container { display: flex; flex-direction: row; - flex-wrap: wrap; justify-content: space-between; align-items: center; width: 100%; @@ -441,26 +442,6 @@ ol li:last-child { > ul { padding: 0; } - - @media (max-width: 700px) { - a, - ul { - width: calc(50% - 1rem); - } - - li { - float: right; - } - - div { - order: 3; - width: 100%; - - #search-standalone-header { - margin-top: 1rem; - } - } - } } .dropdown-content { From 3ffd1d230926a7741278f3ad415a5fe4ff540be1 Mon Sep 17 00:00:00 2001 From: Lam Nguyen Date: Tue, 24 Jun 2025 10:38:06 -0700 Subject: [PATCH 27/37] Card: Fixed build error on card-layout due to Scratch --- exampleSite/content/test-product/_index.md | 23 +--------------------- layouts/_default/list.html | 3 --- layouts/partials/custom-landing-page.html | 22 --------------------- layouts/shortcodes/card-layout.html | 3 --- 4 files changed, 1 insertion(+), 50 deletions(-) delete mode 100644 layouts/partials/custom-landing-page.html diff --git a/exampleSite/content/test-product/_index.md b/exampleSite/content/test-product/_index.md index c3f5d6e..b52a281 100644 --- a/exampleSite/content/test-product/_index.md +++ b/exampleSite/content/test-product/_index.md @@ -2,25 +2,4 @@ description: Test pages for nginx-hugo-theme title: Test pages weight: 100 -hasCustomContent: true ---- - -{{< card-layout >}} - - - {{< card-section >}} - {{< card title="Call Out usages" >}} - - Examples for call-out shortcode - {{}} - {{< card title="Code Block usages" >}} - Examples for codeblock shortcode - {{}} - {{}} - # 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 494edfc..e282143 100644 --- a/layouts/_default/list.html +++ b/layouts/_default/list.html @@ -17,11 +17,8 @@

{{ .Title }}

{{ $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 256b766..0000000 --- a/layouts/partials/custom-landing-page.html +++ /dev/null @@ -1,22 +0,0 @@ -{{ $cards := .Page.Scratch.Get "cards" }} -{{ $showAsCards := index ( .Page.Scratch.Get "showAsCards") "main" }} -{{ $class := "card-grid wide"}} - -
- -
- {{ 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..8791ca4 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 From 44c87a7df5151033dbe49072c7f3165c89c3a81c Mon Sep 17 00:00:00 2001 From: Lam Nguyen Date: Tue, 24 Jun 2025 10:51:55 -0700 Subject: [PATCH 28/37] Mainframe: Removed old sidebar partial reference --- layouts/_default/single.html | 4 ---- 1 file changed, 4 deletions(-) diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 23edb76..24b3331 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -1,9 +1,5 @@ {{ define "main" }}
- - {{ $content := partial "icon-replacement.html" (dict "content" .Content) }} From 52ca5c825abefba66e0798a504f6439fc1904dc8 Mon Sep 17 00:00:00 2001 From: Lam Nguyen Date: Tue, 24 Jun 2025 11:10:14 -0700 Subject: [PATCH 29/37] Mainframe: Update test product landing + small card bug fix --- assets/css/v2/style.css | 4 +-- exampleSite/content/test-product/_index.md | 36 +++++++++++++--------- 2 files changed, 24 insertions(+), 16 deletions(-) diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css index 6b1084e..114af15 100644 --- a/assets/css/v2/style.css +++ b/assets/css/v2/style.css @@ -1233,7 +1233,7 @@ h6:has(a):hover { padding: 1rem; &.featured-card { - /* If there is a featured card, only the featured card should be full length */ + /* If there is a need for 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 */ @@ -1244,7 +1244,7 @@ h6:has(a):hover { } /* 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 { + &:not(:has(.featured-card)) .card-container:nth-child(3n) { grid-column: 1 / -1; } } diff --git a/exampleSite/content/test-product/_index.md b/exampleSite/content/test-product/_index.md index c3372c2..7491b56 100644 --- a/exampleSite/content/test-product/_index.md +++ b/exampleSite/content/test-product/_index.md @@ -1,33 +1,41 @@ --- -description: Test pages for nginx-hugo-theme +# The title is the product name title: Test pages weight: 100 -hasCustomContent: true +# The URL is the base of the deployed path, becoming "docs.nginx.com//" +url: +# The subtitle displays directly underneath the heading of a given page +nd-subtitle: Test pages for nginx-hugo-theme +# Indicates that this is a custom landing page +nd-landing-page: true +# Types have a 1:1 relationship with Hugo archetypes, so you shouldn't need to change this +nd-content-type: landing-page +# Intended for internal catalogue and search, case sensitive: +# Agent, N4Azure, NIC, NIM, NGF, NAP-DOS, NAP-WAF, NGINX One, NGINX+, Solutions, Unit +nd-product: --- ## About +[//]: # "These are Markdown comments to guide you through document structure. Remove them as you go, as well as any unnecessary sections." +[//]: # "Use underscores for _italics_, and double asterisks for **bold**." +[//]: # "Backticks are for `monospace`, used sparingly and reserved mostly for executable names - they can cause formatting problems. Avoid them in tables: use italics instead." + +[//]: # "This initial section introduces the product to a reader: give a short 1-2 sentence summary of what the product does and its value to the reader." +[//]: # "Name specific functionality it provides: avoid ambiguous descriptions such as 'enables efficiency', focus on what makes it unique." -[//]: # "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 +[//]: # "You can add a maximum of three cards: any extra will not display." +[//]: # "One card will take full width page: two will take half width each. Three will stack like an inverse pyramid." +[//]: # "Some examples of content could be the latest release note, the most common install path, and a popular new feature." -[//]: # "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." - {{}} - - {{}} {{}} All shortcodes in one page. {{}} {{}} - Examples for call-out shortcode {{}} {{}} @@ -37,8 +45,8 @@ This is a compilation of all our shortcodes to show how they look, function, res {{}} ## Other Content +[//]: # "You can add any extra content for the page here, such as additional cards, diagrams or text." -[//]: # "Provide any sort of additional supporting content you may want customers to see as well (e.g. more cards, diagrams, changelogs, etc.)" {{}} {{}} {{}} From 417422ede6435c0d9ffa2d72b956958d80d483bd Mon Sep 17 00:00:00 2001 From: Lam Nguyen Date: Tue, 24 Jun 2025 11:35:50 -0700 Subject: [PATCH 30/37] Landing: Updated list page with custom landing params --- layouts/_default/list.html | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/layouts/_default/list.html b/layouts/_default/list.html index e282143..8980538 100644 --- a/layouts/_default/list.html +++ b/layouts/_default/list.html @@ -11,11 +11,19 @@ {{ 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 }} {{ .Content }} {{ else }} From 44a5a3d22ecb824539cdfe0e78840b22305d9132 Mon Sep 17 00:00:00 2001 From: Lam Nguyen Date: Tue, 24 Jun 2025 12:39:24 -0700 Subject: [PATCH 31/37] Header: Added default product selector text --- assets/css/v2/style.css | 2 +- layouts/partials/header.html | 8 +++++--- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css index 9658db3..afc11bf 100644 --- a/assets/css/v2/style.css +++ b/assets/css/v2/style.css @@ -454,7 +454,7 @@ ol li:last-child { display: none; width: 400px; max-width: 80vw; - margin-right: 2rem; + margin-right: 1rem; } .dropdown-content ul { diff --git a/layouts/partials/header.html b/layouts/partials/header.html index 9a1849a..efb4011 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -23,12 +23,14 @@ }} {{ $productMap := dict }} {{ range $nginxProducts }} - {{ $productId := index (split .url "/") 1 }} - {{ $productMap = merge $productMap (dict $productId .title) }} + {{ if not (or (eq .title "NGINX Open Source" ) (eq .title "NGINX Unit")) }} + {{ $productId := index (split .url "/") 1 }} + {{ $productMap = merge $productMap (dict $productId .title) }} + {{ end }} {{ end }} {{ $relPermalink := .RelPermalink }} {{ $productIdentifier := index ((split $relPermalink "/")) 1 }} - {{ $productName := index $productMap $productIdentifier }} + {{ $productName := index $productMap $productIdentifier | default "Product Documentation" }}