nginxinc · lamATnginx · Jul 1, 2025
@@ -1,4 +1,4 @@
-name: Testing for visual regression on old theme
+name: Running Playwright test on UI
 
 # Run the workflow when code is pushed or when a pull request is created
 on:
@@ -25,19 +25,16 @@ jobs:
           - name: Install dependencies and playwright browsers
             run: cd tests && npm ci && npx playwright install --with-deps
           - name: Run Playwright tests
-            id: test-visual
+            id: test-ui
             run: |
               make tests | tee output.log
-              if grep -q -e "Error: A snapshot doesn't exist at" -e "Screenshot comparison failed" output.log; then
-                echo "Playwright tests failed due to a snapshot issue."
-                exit 1
-              elif grep -q "failed" output.log; then
-                echo "Playwright tests failed due to a non-snapshot issue."
+              if grep -q "failed" output.log; then
+                echo "Playwright tests failed. Please view the Playwright report to see full error."
                 exit 1
               fi
           - uses: actions/upload-artifact@v4
             id: artifact-upload
-            if: ${{ !cancelled() && failure() && steps.test-visual.conclusion == 'failure' }}
+            if: ${{ !cancelled() && failure() && steps.test-ui.conclusion == 'failure' }}
             with:
               name: playwright-report
               path: tests/playwright-report/
@@ -47,10 +44,9 @@ jobs:
             if: ${{ failure() }}
             with:
               script: |
-                const body = `### <span aria-hidden="true">❌</span> Playwright visual snapshot differences were detected.
+                const body = `### <span aria-hidden="true">❌</span> Playwright differences were detected.
 
-                View the [Playwright report](${{ steps.artifact-upload.outputs.artifact-url }}) 
-                **To approve the snapshot changes and update the snapshots, please comment:** /approve-snapshots`;
+                View the [Playwright report](${{ steps.artifact-upload.outputs.artifact-url }})`;
 
                 await github.rest.issues.createComment({
                   issue_number: context.issue.number,

@@ -1,19 +1,14 @@
 {{ define "main"}}
 
-<div class="container hero">
-  <h1><i class="far fa-frown"></i></h1>
-  <h1>Page not found</h1>
-
-  <div class="row no-gutters">
-    <div class="card list-card col-md-4">
-      <div class="col-md-4">
-      </div>
-      <div class="card-body">
-
-        <div class="card-text">
-        <p>Uh oh! We couldn't find the page you were looking for.</p>
-        <p><a class="button button-solid" href="{{ "/" | absURL }}">Return to the NGINX Docs Home page.</a></p>
-      </div>
+<div class="content" data-testid="content">
+    <div class="not-found-container" data-testid="not-found-container">
+        <h1 class="info-header">
+          HTTP 404 - Page not found
+        </h1>
+        <div class="info-desc">
+          <p>Uh oh! We couldn't find the page/path you were looking for.</p>
+          <a href="{{ .Site.BaseURL | relLangURL }}" aria-label="Return home">Return to the {{ .Site.Title }} homepage.</a>
+        </div>
     </div>
   </div>
 </div>

@@ -166,30 +166,26 @@
     {{ if or ( not hugo.IsServer ) ( not ( in .Site.Params.buildtype "package" ) ) }}
   {{ partial "universal-tag.html" . }}
     {{ end }}
-
-    <header>
-      {{ block "header" . }}{{end}}
-    </header>
-
-    <section class="base-layout" data-testid="base-layout">
-      <section id="breadcrumb-v1">
-        {{ if not .IsHome }}
-          {{ if not (in .Params.display_breadcrumb "false" ) }}
-          {{ partial "breadcrumb" .}}  
-          {{ end }}
-        {{ end }}
-      </section>
-
-      <div class="main container-fluid min-page-height" data-menu-id="{{.RelPermalink}}">
+    <input type="checkbox" id="sidebar-panel" class="sidebar-panel" hidden/>
+    <div class="grid-container">
+        <aside class="sidebar" data-testid="sidebar">
+            {{ partial "sidebar-v2.html" . }}
+        </aside>
+
+        <header class="header" data-testid="header">
+            {{ block "header" . }}{{end}}
+        </header>
+
         {{ block "main" . }}{{ end }}
       </div>
   </section>
 
-    <footer id="footer">
-      {{ block "footer" . }}
-      {{ partial "footer.html" . }}
-      {{ end }}
-    </footer>
+        <footer class="footer" data-testid="footer">
+            {{ block "footer-v2" . }}
+            {{ partial "footer-v2.html" . }}
+            {{ end }}
+        </footer>
+    </div>
 
     <footer data-mf="true" id="footer-v2" style="display:none;">
       {{ block "footer-v2" . }}

@@ -8,9 +8,7 @@
   </main>
 </div>
 
-{{/*  mf list page  */}}
-
-<main class="content col d-block align-top content-has-toc" role="main" data-mf="true" style="display: none">
+<main class="content " role="main" data-testid="content">
 <section class="main-layout">
   <div class="sidebar-layout" id="sidebar-layout">
     <button class="sidebar__mobile__toggle" aria-expanded="false" data-mf="true">{{ partial "lucide" (dict "context" . "icon" "x")}}Close</button>

@@ -4,8 +4,9 @@
     {{ partial "sidebar.html" . }}
   </nav>
 
-  <!-- Replace icons -->
-  {{ $content := partial "icon-replacement.html" (dict "content" .Content) }}
+<main class="content" data-testid="content">
+    <!-- Replace icons -->
+    {{ $content := partial "icon-replacement.html" (dict "content" .Content) }}
 
   {{if (.Params.catalog) }}
   <main class="content content-has-toc" role="main">

@@ -1,6 +1,6 @@
 <!--Use wide page layout for the API reference pages-->
   <div class="nginx-docs-api-container">     
-    <div id="api-component" class="content">
+    <div id="api-component" class="content" data-testid="content">
       {{ .Content}}
     </div>
   </div>

@@ -1,9 +1,9 @@
 <div class="footer-layout">
-    <div class="footer-f5-trademark">
+    <div class="footer-f5-trademark" data-testid="footer-f5-trademark">
         <img class="f5-logo-footer" src="{{ "/images/icons/Logo_F5.svg" | absURL }}" alt="F5 logo">
         <p>©2025 F5, Inc. All rights reserved. NGINX is a registered trademark of F5, Inc.</p>
     </div>
-    <div class="footer-useful-links">
+    <div class="footer-useful-links" data-testid="footer-useful-links">
         <a
             href="https://www.f5.com/company/policies/trademarks"
             rel="noopener"

@@ -1,53 +1,133 @@
 {{ define "header" }}
-<div class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar navbar-fixed-top">
-  <div class="container-fluid flex-md-row flex-column header-container">
-    <a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="NGINX Docs">
-      <img class="navbar-img" src="{{ "/images/icons/NGINX-Docs-horiz-white-type.svg" | absURL }}" alt="NGINX Docs">
-    </a>
+<div class="header-container">
+
+    <div class="header__logo-small">
+        <a href="{{ .Site.BaseURL | relLangURL }}" alt="NGINX Docs Home">
+            <img class="header__img" src="{{ "/images/icons/NGINX-product-icon.svg" | absURL }}" alt="NGINX Docs">
+        </a>
+    </div>
+    <div class="header__logo">
+        <a href="{{ .Site.BaseURL | relLangURL }}" alt="NGINX Docs Home">
+            <img class="header__img" src="{{ "/images/icons/NGINX-Docs-horiz-black-type.svg" | absURL }}" alt="NGINX Docs">
+        </a>
+    </div>
+
+    <div class="header__sidebar__panel">
+        <label for="sidebar-panel">
+        {{ partial "lucide" (dict "context" . "icon" "panel-left-open") }}
+        </label>
+    </div>
+
+    <div class="header__product-selector" data-testid="header__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 }}
+            {{ 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 | default "Product Documentation" }}
+
+        <button class="product-selector__button" id="product-selector-button" data-testid="product-selector__button">
+            {{/* product name and selector */}}
+            <span class="product-name">{{ $productName }}</span>
+            <span class="product-selector-button-icon">
+                <svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M1 13L7 7L0.999999 1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                </svg>
+            </span>
+        </button>
+        <div class="product-selector" id="product-selector" data-testid="product-selector">
+            {{ $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 }}
+                <div class="product-selector-content" id="product-selector-content" data-testid="product-selector-content">
+                    <p>{{ $type | humanize | title | upper }}</p>
+                    <ul>
+                    {{ range $products }}
+                        <li>
+                            <a href="{{ .url }}">{{ .title }}</a>
+                        </li>
+                    {{ end }}
+                    </ul>
+                </div>
+            {{ end }}
+        </div>
+    </div>
+
     {{ if ( not ( in .Site.Params.buildtype "package" ) ) }}
-      <div class="navbar navbar-nav">
+      <div class="header__search" data-testid="header__search">
         <!-- Standalone search box. -->
         {{ partial "coveo-legacy-search.html" . }}
         {{ partial "coveo-atomic-search.html" . }}
       </div>
     {{ end }}
-    {{ if ( in .Site.Params.buildtype "package" ) }}
-    <div class="navbar-nav-scroll" id="navbarNavScroll">
-      <ul class="navbar-nav flex-row">
-        <li class="nav-item dropdown active">
-          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-            Sections
-          </a>
-          {{ partial "products-menu.html" . }}
-        </li>
-      </ul>
-    </div>
-    {{ end }}
-
-    {{ $f5Sites := slice 
+
+    <div class="header__f5sites" data-testid="header__f5sites">
+    {{ $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")
     }}
-    <ul class="navbar navbar-nav">
-        <li class="nav-item-explore active">
-          <button id="navbar-sites-button" class="button navbar-button">
-              F5 Sites
-              <i id="navbar-sites-button-icon" class="link-chevron-icon fa-solid fa-chevron-down"></i>
-          </button>
-          <div class="dropdown-content" id="dropdown-content">
-            <ul>
-              {{ range $f5Sites }}
-                <li>
-                  <a href="{{ .url }}" target="_blank" >{{ .title }}</a>
-                  <p>{{ .description }}</p>
-                </li>
-              {{ end }}
-            </ul>
-          </div>
-        </li>
-    </ul>
-  </div>
+
+    <button id="navbar-sites-button" class="header__f5sites__button" data-testid="header__f5sites__button">
+        <div class="header__f5sites__logo">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000">
+                <title>f5-logo-black</title>
+                <g id="Layer_2" data-name="Layer 2">
+                    <g id="Layer_1-2" data-name="Layer 1">
+                    <g id="f5-logo-rgb">
+                        <g id="Logo-black-and-white">
+                        <path
+                            fill="currentColor"
+                            d="M940.37,894.53a30.85,30.85,0,0,1,9.47,22.94,32.43,32.43,0,0,1-55.4,23.08A32,32,0,0,1,885,917.47a32.54,32.54,0,0,1,32.37-32.57A30.88,30.88,0,0,1,940.37,894.53Zm3.81-3.75a36.65,36.65,0,0,0-26.8-11,37.72,37.72,0,1,0,26.8,64.32,37.71,37.71,0,0,0,0-53.36ZM923,915.65a18.8,18.8,0,0,1-6.93.92h-6.54v-15h6.23c4,0,7,.57,8.77,1.58s2.76,3.07,2.76,6A6.38,6.38,0,0,1,923,915.65Zm-20.75,22.29h7.28V921.66h5.77c3.82,0,6.56.4,8.11,1.36,2.57,1.54,3.88,4.72,3.88,9.48v3.33l.14,1.25a2.91,2.91,0,0,1,.11.5c0,.2.06.27.19.36h6.76l-.24-.48a4.42,4.42,0,0,1-.35-2.11c-.09-1.14-.09-2.15-.09-3.07v-3.07a11.52,11.52,0,0,0-2.26-6.43c-1.54-2.21-3.95-3.51-7.19-4.08a17,17,0,0,0,6-2c2.77-1.75,4.06-4.56,4.06-8.2,0-5.18-2.06-8.73-6.4-10.49-2.39-1-6.14-1.49-11.3-1.49H902.25Z"
+                        />
+                        <path
+                            fill="currentColor"
+                            d="M912.66,217.69c-6.13,25.33-9.34,51.58-15.26,78.43-75-9.73-163.08-16.86-262-20.34-7.94,25.11-15.46,49.69-24.06,76.52,165.55,10.18,246,53.81,293.72,105.22,46.41,52,56.26,109.45,53.58,162.79C952.67,707,914.45,761.79,862,802.41c-53.08,40-117.29,59.84-168.65,64.16C617.56,872.24,516.22,854.2,494.66,841c-13-29.54-25.77-59.3-39.54-91.76-3.35-6.91-5.46-14,4-22.23,14.74-14.13,28.92-27.8,43.84-42.28,6.59-6.44,13.9-12.44,19.44-3.21,20.38,31.43,39.48,60.27,58.61,89,21.73,32.05,54.83,61.26,127.14,56.4,60.79-5.44,107-51.42,111.93-102,5.32-93.6-89.38-160-335.64-181.27C531.7,401,577.75,262.93,614.59,153.2c58.5,2.7,112.65,7.47,164.38,14.15,38.26,4.87,73.81,13.78,109.46,17.9C796.77,72.26,656.88,0,500,0,223.87,0,0,223.86,0,500A497.64,497.64,0,0,0,97.31,796.3c21.18.16,35.86-4.57,37.45-13.7,1.94-9.55.31-24.33-1.36-39.24-10-98.12-13.53-204.06-9.77-310.22-25.36,1.1-48.12,2.24-69.94,3.52.88-19.63,1.94-38.23,3.52-57.59,21.55-2.07,44.38-3.88,69.46-6,1.07-16.91,2.28-33.28,3.74-49.81C141.67,222,248.29,160.08,337.1,136.18c39.41-9.6,63.51-12.63,82.43-13.62,6.84-.22,14.21-.49,21.55-.49,18.41,0,37.09,1.72,48.92,9.76,19.16,14.36,38.09,28.65,58.22,44.54,2,2.72,4.2,7-.8,14.35-9.24,10.81-18.16,21.14-27.55,32.26-5.41,6.57-14.39,4.84-21.95,2.79-15.84-8.11-31.08-15.56-46.54-23.05-28-12.46-57-25.28-89.27-24-20.13,1.61-39.62,22.21-41.64,50.39-2.79,42.88-4.66,86.84-6.24,134.46C370.18,362,426,361,484.85,360.74c0,13.39-.09,25.67-.09,39.39-19.2,8.58-37.3,17.25-56.54,26-39.7.46-77.48.77-115.53,1.43-1.76,113.29-.09,226.16,5,330.51,1,15.75,1.76,31.7,6.29,42.38,5.43,13.44,36.66,23.8,104.6,27.63.27,11.83.6,23,1,34.46-110.63-3.22-216.86-13.81-302-29.13C219.07,935.63,352,1000,500,1000c276.15,0,500-223.87,500-500A497.6,497.6,0,0,0,912.66,217.69Z"
+                        />
+                        <path fill="currentColor" d="M127.51,833.43h0v0Z" />
+                        </g>
+                    </g>
+                    </g>
+                </g>
+            </svg>
+        </div>
+    </button>
+    <div class="dropdown-content" id="dropdown-content" data-testid="header__f5sites-content">
+        <ul>
+            {{ range $f5Sites }}
+            <li>
+                <a href="{{ .url }}" target="_blank" >{{ .title }}</a>
+                <p>{{ .description }}</p>
+            </li>
+            {{ end }}
+        </ul>
+    </div>
+
+    </div>
 </div>
 
 {{ end }}