feat(v2/nav): expand quick-nav menus with 13 high-value pages (38 total)

Data-driven expansion (ranked by per-page link count + relevance):
- New 📊 Digest menu: Tech & Cloud Digest + Industry & Geo Digest (was a single
  pill; now pairs both editions).
- New 🧰 K8s menu: Kubernetes Tools (144 links) · Helm · Managed K8s · OpenShift
  · Tutorials — the Kubernetes ecosystem, which the portal is centered on.
- ☁️ Cloud += Serverless · FinOps.
- 🌐 Network += Service Mesh (the category alongside Istio; Istio emoji → ).
- ⚙️ Ops += IaC · Developer Portals.
- ⋯ More += Technical Tags (1355 links) · Demos (102).

38 destinations total across 6 direct pills + 7 Popover menus. Added explicit
anchor pairs for the two new menus. Chip font trimmed to 0.62rem + tighter
gap/padding so all 13 bar chips still fit one row down to ~1280px. Verified in
Chrome 148 via Playwright: all 7 menus open below their button, stay on-screen
(right-edge flip), and close on Esc. Cache-bust ?v=2.9.33. V2-only.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Nubenetes Bot
2026-06-20 16:28:07 +02:00
parent c3149c3d25
commit 79a13bd9ac
3 changed files with 42 additions and 10 deletions

View File

@@ -13,28 +13,51 @@
(Baseline 2026) — zero JS, with free Esc/click-outside dismissal and focus
management. Adding a leaf grows a menu, never the bar.
Direct pills: Topic Map · Digest · Kubernetes · Docker · GitOps · Terraform · AI & MCP
Menus: Cloud (AWS · Azure · GCP) · Network (Networking · Istio · K8s Net)
· Security (Security · DevSecOps) · Ops (CI/CD · Observability · SRE · DevOps)
· More (Videos · Ansible · Messaging · MLOps · Methodology · V1 Archive)
Direct pills: Topic Map · Kubernetes · Docker · GitOps · Terraform · AI & MCP
Menus: Digest (Tech · Industry) · K8s (Tools · Helm · Managed · OpenShift · Tutorials)
· Cloud (AWS · Azure · GCP · Serverless · FinOps)
· Network (Networking · Istio · Service Mesh · K8s Net)
· Security (K8s Security · DevSecOps)
· Ops (CI/CD · IaC · Observability · SRE · DevOps · Dev Portals)
· More (Tags · Demos · Videos · Ansible · Messaging · MLOps · Methodology · V1)
-#}
{% block tabs %}
<nav class="nb-quicknav" aria-label="Quick navigation">
<div class="nb-quicknav__inner">
<a class="nb-quicknav__link" href="/topic-map/">🗺️ Topic Map</a>
<a class="nb-quicknav__link" href="/tech-digest/">📊 Digest</a>
<a class="nb-quicknav__link" href="/kubernetes/">☸️ Kubernetes</a>
<a class="nb-quicknav__link" href="/docker/">🐳 Docker</a>
<a class="nb-quicknav__link" href="/gitops/">🔄 GitOps</a>
<a class="nb-quicknav__link" href="/terraform/">🏗️ Terraform</a>
<a class="nb-quicknav__link" href="/ai-agents-mcp/">🤖 AI &amp; MCP</a>
<span class="nb-quicknav__group">
<button class="nb-quicknav__link nb-quicknav__btn" popovertarget="nb-pop-digest" type="button">📊 Digest <span class="nb-quicknav__caret" aria-hidden="true"></span></button>
<div class="nb-quicknav__menu" id="nb-pop-digest" popover>
<a href="/tech-digest/">📊 Tech &amp; Cloud Digest</a>
<a href="/industry-digest/">🌍 Industry &amp; Geo Digest</a>
</div>
</span>
<span class="nb-quicknav__group">
<button class="nb-quicknav__link nb-quicknav__btn" popovertarget="nb-pop-k8s" type="button">🧰 K8s <span class="nb-quicknav__caret" aria-hidden="true"></span></button>
<div class="nb-quicknav__menu" id="nb-pop-k8s" popover>
<a href="/kubernetes-tools/">🧰 Kubernetes Tools</a>
<a href="/helm/">📦 Helm</a>
<a href="/managed-kubernetes-in-public-cloud/">☁️ Managed K8s</a>
<a href="/openshift/">🎩 OpenShift</a>
<a href="/kubernetes-tutorials/">🎓 Tutorials</a>
</div>
</span>
<span class="nb-quicknav__group">
<button class="nb-quicknav__link nb-quicknav__btn" popovertarget="nb-pop-cloud" type="button">☁️ Cloud <span class="nb-quicknav__caret" aria-hidden="true"></span></button>
<div class="nb-quicknav__menu" id="nb-pop-cloud" popover>
<a href="/aws/">☁️ AWS</a>
<a href="/azure/">☁️ Azure</a>
<a href="/GoogleCloudPlatform/">☁️ GCP</a>
<a href="/serverless/">⚡ Serverless</a>
<a href="/finops/">💰 FinOps</a>
</div>
</span>
@@ -42,7 +65,8 @@
<button class="nb-quicknav__link nb-quicknav__btn" popovertarget="nb-pop-net" type="button">🌐 Network <span class="nb-quicknav__caret" aria-hidden="true"></span></button>
<div class="nb-quicknav__menu" id="nb-pop-net" popover>
<a href="/networking/">🌐 Networking</a>
<a href="/istio/">🕸️ Istio</a>
<a href="/istio/"> Istio</a>
<a href="/servicemesh/">🕸️ Service Mesh</a>
<a href="/kubernetes-networking/">🔗 K8s Net</a>
</div>
</span>
@@ -59,15 +83,19 @@
<button class="nb-quicknav__link nb-quicknav__btn" popovertarget="nb-pop-ops" type="button">⚙️ Ops <span class="nb-quicknav__caret" aria-hidden="true"></span></button>
<div class="nb-quicknav__menu" id="nb-pop-ops" popover>
<a href="/cicd/">🚀 CI/CD</a>
<a href="/iac/">📜 IaC</a>
<a href="/monitoring/">📈 Observability</a>
<a href="/sre/">🛠️ SRE</a>
<a href="/devops/">♾️ DevOps</a>
<a href="/developerportals/">🏛️ Developer Portals</a>
</div>
</span>
<span class="nb-quicknav__group">
<button class="nb-quicknav__link nb-quicknav__btn" popovertarget="nb-pop-more" type="button">⋯ More <span class="nb-quicknav__caret" aria-hidden="true"></span></button>
<div class="nb-quicknav__menu" id="nb-pop-more" popover>
<a href="/tags/">🏷️ Technical Tags</a>
<a href="/demos/">🧪 Demos</a>
<a href="/videos/">🎥 Videos</a>
<a href="/ansible/">📋 Ansible</a>
<a href="/message-queue/">📨 Messaging</a>

View File

@@ -1246,9 +1246,9 @@ input[type="text"] {
flex-wrap: wrap;
align-items: center;
justify-content: center; /* centered rows read as a balanced command bar */
gap: 0.4rem 0.38rem;
gap: 0.4rem 0.32rem;
padding-block: 0.5rem;
padding-inline: 1rem;
padding-inline: 0.7rem;
}
.nb-quicknav__link {
/* chip colors derived from the theme accent via color-mix (Chrome 111+) */
@@ -1259,7 +1259,7 @@ input[type="text"] {
gap: 0.3em;
color: rgba(255, 255, 255, 0.82) !important;
text-decoration: none;
font-size: 0.64rem; /* ~1pt smaller so all pills + menus fit one row */
font-size: 0.62rem; /* sized so all pills + menus fit one row down to ~1280px */
font-weight: 600;
letter-spacing: 0.01em;
white-space: nowrap;
@@ -1316,6 +1316,10 @@ input[type="text"] {
/* Explicit anchor pairing per button↔menu — do NOT rely on the popover's
implicit anchor (it isn't established reliably, leaving the menu in its
static position over the button). */
[popovertarget="nb-pop-digest"] { anchor-name: --nb-a-digest; }
#nb-pop-digest { position-anchor: --nb-a-digest; }
[popovertarget="nb-pop-k8s"] { anchor-name: --nb-a-k8s; }
#nb-pop-k8s { position-anchor: --nb-a-k8s; }
[popovertarget="nb-pop-cloud"] { anchor-name: --nb-a-cloud; }
#nb-pop-cloud { position-anchor: --nb-a-cloud; }
[popovertarget="nb-pop-net"] { anchor-name: --nb-a-net; }

View File

@@ -114,7 +114,7 @@ extra:
extra_css:
- https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap
- static/extra.css
- static/v2_elite.css?v=2.9.32
- static/v2_elite.css?v=2.9.33
extra_javascript:
- static/v2_filter.js?v=2.9.19