Skip to content

Commit a8a39b3

Browse files
nginx-jacknginx-jack
authored
Merge pull request #281 from nginxinc/mainframe-regrid
Mainframe regrid
2 parents 52ca5c8 + 44a5a3d commit a8a39b3

File tree

11 files changed

+537
-389
lines changed

11 files changed

+537
-389
lines changed

‎assets/css/v2/style.css‎

Lines changed: 364 additions & 173 deletions
Large diffs are not rendered by default.

‎assets/js/product-selector.js‎

Lines changed: 8 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -4,24 +4,19 @@ document.addEventListener('DOMContentLoaded', () => {
44
'product-selector-button'
55
);
66

7-
if (productSelectorButton === null || productSelectorContent == null) {
8-
return;
9-
}
7+
if (!productSelectorButton || !productSelectorContent) return;
108

119
productSelectorButton.addEventListener('click', () => {
12-
/* Logic for hiding/showing ONLY when the button is clicked */
13-
if (productSelectorContent.style.display === 'block') {
14-
productSelectorContent.style.display = 'none';
15-
productSelectorButton.classList.remove('remove-bottom-radius');
16-
} else {
17-
productSelectorContent.style.display = 'block';
18-
productSelectorButton.classList.add('remove-bottom-radius');
19-
}
10+
const isVisible = productSelectorContent.style.display === 'block';
11+
productSelectorContent.style.display = isVisible ? 'none' : 'block';
12+
productSelectorButton.classList.toggle('remove-bottom-radius', !isVisible);
2013
});
2114

2215
window.addEventListener('click', (event) => {
23-
/* Greedy Logic to hide the product selector when something other than the button is clicked. Assumes everything has an id containing "product-selector" */
24-
if (!event.target.id.includes('product-selector')) {
16+
const isClickInside =
17+
productSelectorButton.contains(event.target) ||
18+
productSelectorContent.contains(event.target);
19+
if (!isClickInside) {
2520
productSelectorContent.style.display = 'none';
2621
productSelectorButton.classList.remove('remove-bottom-radius');
2722
}

‎exampleSite/content/test-product/_index.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,4 +53,4 @@ This is a compilation of all our shortcodes to show how they look, function, res
5353
Installing NGINX
5454
{{</card >}}
5555
{{</card-section >}}
56-
{{</card-layout >}}
56+
{{</card-layout >}}

‎layouts/_default/baseof.html‎

Lines changed: 17 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -39,24 +39,27 @@
3939

4040
<body id="body">
4141
{{ if or ( not hugo.IsServer ) ( not ( in .Site.Params.buildtype "package" ) ) }}
42-
{{ partial "universal-tag.html" . }}
42+
{{ partial "universal-tag.html" . }}
4343
{{ end }}
44+
<div class="grid-container">
45+
<aside class="sidebar">
46+
{{ partial "sidebar-v2.html" . }}
47+
</aside>
4448

45-
<header>
46-
{{ block "header" . }}{{end}}
47-
</header>
49+
<header class="header">
50+
{{ block "header" . }}{{end}}
51+
</header>
4852

49-
<section class="base-layout" data-testid="base-layout">
50-
<div class="main container-fluid min-page-height" data-menu-id="{{.RelPermalink}}">
5153
{{ block "main" . }}{{ end }}
52-
</div>
53-
</section>
54-
55-
<footer id="footer-v2">
56-
{{ block "footer-v2" . }}
57-
{{ partial "footer-v2.html" . }}
58-
{{ end }}
59-
</footer>
54+
55+
<footer class="footer">
56+
{{ block "footer-v2" . }}
57+
{{ partial "footer-v2.html" . }}
58+
{{ end }}
59+
</footer>
60+
</div>
61+
62+
6063
{{ partial "scripts.html" . }}
6164
<div id="consent_blackbar"></div>
6265
</body>

‎layouts/_default/list.html‎

Lines changed: 30 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,58 +1,50 @@
11
{{ define "main" }}
2-
{{/* mf list page */}}
3-
<main class="content col d-block align-top content-has-toc" role="main">
4-
<section class="main-layout">
5-
<div class="sidebar-layout" id="sidebar-layout">
6-
<button class="sidebar__mobile__toggle" aria-label="sidebar__mobile__toggle" aria-expanded="false">{{ partial "lucide" (dict "context" . "icon" "x")}}Close</button>
7-
<nav id="sidebar-v2" class="sidebar">
8-
{{ partial "sidebar-v2.html" . }}
9-
</nav>
10-
</div>
112

12-
<section id="maincontent" class="content-layout">
3+
<main class="content content-has-toc" role="main">
4+
<section class="main-layout">
5+
<section id="maincontent" class="content-layout">
136
<div data-cms-edit="content" class="text-content list-page">
14-
<section class="breadcrumb-layout wide">
7+
<section class="breadcrumb-layout wide">
158
{{ if not .IsHome }}
16-
{{ if not (in .Params.display_breadcrumb "false" ) }}
17-
{{ partial "breadcrumb" .}}
18-
{{ end }}
9+
{{ if not (in .Params.display_breadcrumb "false" ) }}
10+
{{ partial "breadcrumb" .}}
11+
{{ end }}
1912
{{ end }}
20-
</section>
21-
<div class="list-header-container">
22-
<img src="/images/icons/{{ .Params.logo | default "NGINX-product-icon.svg" }}">
23-
<div class="list-header-title">
24-
<h1>{{ .Title }}</h1>
25-
{{ if index .Params "nd-subtitle" }}
26-
<p>{{ index .Params "nd-subtitle" | markdownify }}</p>
27-
{{ end }}
13+
</section>
14+
<div class="list-header-container">
15+
<img src="/images/icons/{{ .Params.logo | default "NGINX-product-icon.svg" }}">
16+
<div class="list-header-title">
17+
<h1>{{ .Title }}</h1>
18+
{{ if index .Params "nd-subtitle" }}
19+
<p>{{ index .Params "nd-subtitle" | markdownify }}</p>
20+
{{ end }}
21+
</div>
2822
</div>
29-
</div>
3023

31-
{{ partial "banner" . }}
32-
{{ $hasCustomContent := index .Params "nd-landing-page" | default false }}
33-
{{ if $hasCustomContent }}
24+
{{ partial "banner" . }}
25+
26+
{{ $hasCustomContent := index .Params "nd-landing-page" | default false }}
27+
{{ if $hasCustomContent }}
3428
{{ .Content }}
35-
{{ else }}
29+
{{ else }}
3630
{{ range .Pages.ByWeight }}
3731
<h2>
3832
<a href="{{ if .Params.url}}{{ .Params.url}}{{else}}{{ .Permalink }}{{end}}">{{ .Title }}</a>
3933
</h2>
4034
{{ end }}
41-
{{ end }}
35+
{{ end }}
4236

43-
<hr>
44-
{{ if .Page.Lastmod }}
45-
<div class="last-modified">
37+
<hr>
38+
{{ if .Page.Lastmod }}
39+
<div class="last-modified">
4640
{{ partial "page-meta-links" . }}
47-
</div>
48-
{{ end }}
49-
50-
</main>
41+
</div>
42+
{{ end }}
5143

5244
</div>
53-
</section>
54-
</section>
45+
</section>
5546
</section>
5647
</main>
57-
{{ end }}
5848

49+
50+
{{ end }}

‎layouts/_default/single.html‎

Lines changed: 23 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,19 @@
11
{{ define "main" }}
2-
<div class="docs-container row override-sidebar-collapse">
3-
<!-- Replace icons -->
4-
{{ $content := partial "icon-replacement.html" (dict "content" .Content) }}
52

6-
{{if (.Params.catalog) }}
7-
<main class="content content-has-toc" role="main">
8-
{{ else if and (gt .WordCount 200 ) (.Params.toc) }}
9-
<main class="content col d-block align-top content-has-toc" role="main">
10-
{{ else }}
11-
<main class="content col d-block align-top content-no-toc" role="main">
12-
{{ end }}
13-
14-
<section class="main-layout">
15-
<div class="sidebar-layout" id="sidebar-layout">
16-
<button class="sidebar__mobile__toggle" aria-expanded="false" data-mf="true">{{ partial "lucide" (dict "context" . "icon" "x")}}Close</button>
17-
<nav data-mf="true" id="sidebar-v2" class="sidebar">
18-
{{ partial "sidebar-v2.html" . }}
19-
</nav>
20-
</div>
3+
<main class="content">
4+
<!-- Replace icons -->
5+
{{ $content := partial "icon-replacement.html" (dict "content" .Content) }}
6+
<main role="main">
217

8+
<section class="main-layout">
229
<section id="maincontent" class="content-layout">
23-
<div data-cms-edit="content" class="text-content">
24-
<section class="breadcrumb-layout wide" data-mf="true" style="display: none;">
25-
{{ if not .IsHome }}
10+
<div data-cms-edit="content" class="text-content">
11+
<section class="breadcrumb-layout wide">
12+
{{ if not .IsHome }}
2613
{{ if not (in .Params.display_breadcrumb "false" ) }}
2714
{{ partial "breadcrumb" .}}
2815
{{ end }}
29-
{{ end }}
16+
{{ end }}
3017
</section>
3118
{{ partial "banner" .}}
3219
<h1>{{ .Title }}</h1>
@@ -38,31 +25,30 @@ <h1>{{ .Title }}</h1>
3825

3926
{{ if .Page.Lastmod }}
4027
<div class="last-modified">
41-
{{ partial "page-meta-links" . }}
28+
{{ partial "page-meta-links" . }}
4229
</div>
4330
{{ end }}
4431

4532
{{ partial "version-list" . }}
4633
{{ partial "qualtrics-feedback.html" }}
4734

4835
{{ partial "previous-next-links-in-section-with-title.html" . }}
49-
</main>
50-
{{ if and (gt .WordCount 200 ) (.Params.toc) }}
51-
{{ if (add (len (findRE "<h3" .Content)) (len (findRE "<h2" .Content))) }}
52-
<div id="toc" class="col-md-3 d-none d-xl-block d-print-none nginx-toc align-top">
53-
{{ partial "toc.html" . }}
54-
</div>
55-
{{ end }}
56-
{{ end }}
5736

58-
</div>
37+
</main>
38+
</section>
5939
</section>
60-
</section>
61-
</div>
40+
</main>
41+
42+
43+
6244
<!-- If there is a script defined in the page metadata, load it -->
6345
{{if .Params.script}}
64-
{{ $script := (delimit (slice "scripts" .Params.script) "/")}}
65-
{{ partial (string $script) .}}
46+
{{ $script := (delimit (slice "scripts" .Params.script) "/")}}
47+
{{ partial (string $script) .}}
6648
{{end }}
6749

68-
{{ end }}
50+
51+
52+
53+
54+
{{ end }}

‎layouts/partials/header.html‎

Lines changed: 76 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,87 @@
11
{{ define "header" }}
2-
<div class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar navbar-fixed-top">
3-
<div class="container-fluid flex-md-row flex-column header-container">
4-
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="NGINX Docs">
5-
<img class="navbar-img" src="{{ "/images/icons/NGINX-Docs-horiz-white-type.svg" | absURL }}" alt="NGINX Docs">
6-
</a>
2+
<div class="header-container">
3+
4+
<div class="header__logo">
5+
<a href="{{ .Site.BaseURL | relLangURL }}" alt="NGINX Docs Home">
6+
<img class="header__img" src="{{ "/images/icons/NGINX-Docs-horiz-black-type.svg" | absURL }}" alt="NGINX Docs">
7+
</a>
8+
</div>
9+
10+
<div class="header__product-selector">
11+
{{ $nginxProducts := slice
12+
(dict "title" "NGINX One Console" "url" "/nginx-one" "type" "nginx-one")
13+
(dict "title" "NGINX Plus" "url" "/nginx" "type" "nginx-one")
14+
(dict "title" "NGINX Instance Manager" "url" "/nginx-instance-manager" "type" "nginx-one")
15+
(dict "title" "NGINX Ingress Controller" "url" "/nginx-ingress-controller" "type" "nginx-one")
16+
(dict "title" "NGINX Gateway Fabric" "url" "/nginx-gateway-fabric" "type" "nginx-one")
17+
(dict "title" "NGINX Open Source" "url" "https://nginx.org/en/docs/" "type" "nginx-one")
18+
(dict "title" "NGINX Agent" "url" "/nginx-agent" "type" "nginx-one")
19+
(dict "title" "NGINX App Protect WAF" "url" "/nginx-app-protect-waf" "type" "nginx-app-protect")
20+
(dict "title" "NGINX App Protect DoS" "url" "/nginx-app-protect-dos" "type" "nginx-app-protect")
21+
(dict "title" "NGINX as a Service for Azure" "url" "/nginxaas/azure/" "type" "nginx-as-a-service")
22+
(dict "title" "NGINX Unit" "url" "https://unit.nginx.org/" "type" "nginx-other")
23+
}}
24+
{{ $productMap := dict }}
25+
{{ range $nginxProducts }}
26+
{{ if not (or (eq .title "NGINX Open Source" ) (eq .title "NGINX Unit")) }}
27+
{{ $productId := index (split .url "/") 1 }}
28+
{{ $productMap = merge $productMap (dict $productId .title) }}
29+
{{ end }}
30+
{{ end }}
31+
{{ $relPermalink := .RelPermalink }}
32+
{{ $productIdentifier := index ((split $relPermalink "/")) 1 }}
33+
{{ $productName := index $productMap $productIdentifier | default "Product Documentation" }}
34+
35+
<button class="product-selector__button" id="product-selector-button">
36+
{{/* product name and selector */}}
37+
<span class="product-name">{{ $productName }}</span>
38+
<span class="product-selector-button-icon">
39+
<svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">
40+
<path d="M1 13L7 7L0.999999 1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
41+
</svg>
42+
</span>
43+
</button>
44+
<div class="product-selector" id="product-selector">
45+
{{ $groupedProducts := dict
46+
"nginx-one" (where $nginxProducts "type" "nginx-one")
47+
"nginx-app-protect" (where $nginxProducts "type" "nginx-app-protect")
48+
"nginx-as-a-service" (where $nginxProducts "type" "nginx-as-a-service")
49+
"nginx-other" (where $nginxProducts "type" "nginx-other")
50+
}}
51+
{{ $orderedKeys := slice "nginx-one" "nginx-app-protect" "nginx-as-a-service" "nginx-other" }}
52+
{{ range $orderedKeys }}
53+
{{ $type := . }}
54+
{{ $products := index $groupedProducts $type }}
55+
<div class="product-selector-content" id="product-selector-content">
56+
<p>{{ $type | humanize | title | upper }}</p>
57+
<ul>
58+
{{ range $products }}
59+
<li>
60+
<a href="{{ .url }}">{{ .title }}</a>
61+
</li>
62+
{{ end }}
63+
</ul>
64+
</div>
65+
{{ end }}
66+
</div>
67+
68+
69+
</div>
70+
771
{{ if ( not ( in .Site.Params.buildtype "package" ) ) }}
8-
<div class="navbar navbar-nav">
72+
<div class="header__search">
973
<!-- Standalone search box. -->
1074
{{ partial "coveo-atomic-search.html" }}
1175
</div>
1276
{{ end }}
13-
{{ if ( in .Site.Params.buildtype "package" ) }}
14-
<div class="navbar-nav-scroll" id="navbarNavScroll">
15-
<ul class="navbar-nav flex-row">
16-
<li class="nav-item dropdown active">
17-
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
18-
Sections
19-
</a>
20-
{{ partial "products-menu.html" . }}
21-
</li>
22-
</ul>
23-
</div>
24-
{{ end }}
25-
26-
{{ $f5Sites := slice
77+
78+
<div class="header__f5sites">
79+
{{ $f5Sites := slice
2780
(dict "title" "DevCentral" "url" "https://community.f5.com/" "description" "Connect & learn in our hosted community")
2881
(dict "title" "MyF5" "url" "https://my.f5.com/" "description" "Your key to everything F5, including support, registration keys, and subscriptions")
2982
(dict "title" "NGINX" "url" "https://nginx.org/" "description" "Learn more about NGINX Open Source and read the community blog")
3083
}}
84+
3185
<ul class="navbar navbar-nav">
3286
<li class="nav-item-explore active">
3387
<button id="navbar-sites-button" class="button navbar-button">
@@ -46,7 +100,7 @@
46100
</div>
47101
</li>
48102
</ul>
49-
</div>
50-
</div>
51103

104+
</div>
105+
</div>
52106
{{ end }}

0 commit comments

Comments
 (0)