mirror of
https://github.com/nubenetes/awesome-kubernetes.git
synced 2026-07-12 18:00:37 +00:00
feat(v2/nav): regroup quick-nav into 11 thematic menus + nested AWS submenu
Full category-driven reorganization of the quick-nav per the agreed taxonomy: one direct pill (Topic Map) + 11 thematic dropdowns that group related topics together so every destination has a sensible home. Digest · Kubernetes (Overview · Docker · Tools · Helm · kubectl · all kubernetes-* · Managed · OpenShift · Rancher) · Delivery (GitOps · CI/CD · DevOps · Argo · Flux · Tekton · Jenkins · …) · IaC (Terraform · IaC · Ansible · Pulumi · Crossplane · Kustomize) · Cloud (AWS ▸ nested submenu · Azure · GCP · Serverless · FinOps · Edge · …) · Network · Security · Observability & SRE · AI & Data · Dev & Platform · More - Docker now lives inside Kubernetes; CI/CD + GitOps + DevOps share Delivery; Terraform + IaC share the IaC menu (as requested). - AWS is a NESTED submenu inside Cloud (Cloud → AWS ▸ → 8 AWS pages), built with nested Popover API + explicit anchor() side-positioning (position-area's horizontal axis isn't honored when the anchor is inside another popover; left:anchor(right)/top:anchor(top) fixes it). Submenu keeps the parent open; flip-inline fallback near the right edge. - Pages may appear in more than one menu where it aids discovery. - Menus get max-height:82vh + overflow-y for the tall Kubernetes menu. Verified in Chrome 148 (Playwright): all 11 menus open below + fit viewport; the AWS submenu opens to the side with the parent kept open; bar stays one row to 1280px. Cache-bust ?v=2.9.36. V2-only. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Nubenetes Bot
@@ -13,23 +13,18 @@
|
||||
(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 · 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)
|
||||
Fully category-grouped: one direct pill (Topic Map) + 11 thematic dropdowns.
|
||||
Related topics live together (CI/CD · GitOps · DevOps in Delivery; Terraform ·
|
||||
IaC in IaC; Docker in Kubernetes; …). AWS is a NESTED submenu inside Cloud.
|
||||
Pages may appear in more than one menu when that aids discovery.
|
||||
Digest · Kubernetes (+Docker) · Delivery (CI/CD·GitOps·DevOps) · IaC
|
||||
· Cloud (AWS▸ · Azure · GCP · …) · Network · Security · Observability & SRE
|
||||
· AI & Data · Dev & Platform · More
|
||||
-#}
|
||||
{% 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="/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 & 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>
|
||||
@@ -40,24 +35,85 @@
|
||||
</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>
|
||||
<button class="nb-quicknav__link nb-quicknav__btn" popovertarget="nb-pop-k8s" type="button">☸️ Kubernetes <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="/kubernetes/">☸️ Overview</a>
|
||||
<a href="/docker/">🐳 Docker</a>
|
||||
<a href="/kubernetes-tools/">🧰 Tools</a>
|
||||
<a href="/helm/">📦 Helm</a>
|
||||
<a href="/kubectl-commands/">⌨️ kubectl</a>
|
||||
<a href="/container-managers/">📦 Container Managers</a>
|
||||
<a href="/kubernetes-networking/">🌐 Networking</a>
|
||||
<a href="/kubernetes-security/">🔐 Security</a>
|
||||
<a href="/kubernetes-monitoring/">📈 Monitoring</a>
|
||||
<a href="/kubernetes-storage/">💾 Storage</a>
|
||||
<a href="/kubernetes-autoscaling/">⚖️ Autoscaling</a>
|
||||
<a href="/kubernetes-operators-controllers/">🎛️ Operators</a>
|
||||
<a href="/kubernetes-alternatives/">🔀 Alternatives</a>
|
||||
<a href="/kubernetes-bigdata/">📊 Big Data</a>
|
||||
<a href="/kubernetes-tutorials/">🎓 Tutorials</a>
|
||||
<a href="/kubernetes-backup-migrations/">🗄️ Backup & Migrations</a>
|
||||
<a href="/kubernetes-client-libraries/">📚 Client Libraries</a>
|
||||
<a href="/kubernetes-based-devel/">💻 Local Dev</a>
|
||||
<a href="/kubernetes-on-premise/">🏢 On-Premise</a>
|
||||
<a href="/managed-kubernetes-in-public-cloud/">☁️ Managed K8s</a>
|
||||
<a href="/openshift/">🎩 OpenShift</a>
|
||||
<a href="/kubernetes-tutorials/">🎓 Tutorials</a>
|
||||
<a href="/rancher/">🐮 Rancher</a>
|
||||
</div>
|
||||
</span>
|
||||
|
||||
<span class="nb-quicknav__group">
|
||||
<button class="nb-quicknav__link nb-quicknav__btn" popovertarget="nb-pop-delivery" type="button">🔄 Delivery <span class="nb-quicknav__caret" aria-hidden="true">▾</span></button>
|
||||
<div class="nb-quicknav__menu" id="nb-pop-delivery" popover>
|
||||
<a href="/gitops/">🔄 GitOps</a>
|
||||
<a href="/cicd/">🚀 CI/CD</a>
|
||||
<a href="/devops/">♾️ DevOps</a>
|
||||
<a href="/argo/">🐙 Argo</a>
|
||||
<a href="/flux/">🔱 Flux</a>
|
||||
<a href="/tekton/">🛠️ Tekton</a>
|
||||
<a href="/jenkins/">🤵 Jenkins</a>
|
||||
<a href="/registries/">📦 Registries</a>
|
||||
<a href="/sonarqube/">🔎 SonarQube</a>
|
||||
<a href="/keptn/">🎯 Keptn</a>
|
||||
</div>
|
||||
</span>
|
||||
|
||||
<span class="nb-quicknav__group">
|
||||
<button class="nb-quicknav__link nb-quicknav__btn" popovertarget="nb-pop-iac" type="button">🏗️ IaC <span class="nb-quicknav__caret" aria-hidden="true">▾</span></button>
|
||||
<div class="nb-quicknav__menu" id="nb-pop-iac" popover>
|
||||
<a href="/terraform/">🏗️ Terraform</a>
|
||||
<a href="/iac/">📜 IaC</a>
|
||||
<a href="/ansible/">📋 Ansible</a>
|
||||
<a href="/pulumi/">🧩 Pulumi</a>
|
||||
<a href="/crossplane/">✈️ Crossplane</a>
|
||||
<a href="/kustomize/">🧱 Kustomize</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>
|
||||
<span class="nb-quicknav__subwrap">
|
||||
<button class="nb-quicknav__subtrigger" popovertarget="nb-pop-aws" type="button"><span>☁️ AWS</span><span class="nb-quicknav__caret" aria-hidden="true">▸</span></button>
|
||||
<div class="nb-quicknav__menu nb-quicknav__submenu" id="nb-pop-aws" popover>
|
||||
<a href="/aws/">☁️ AWS Overview</a>
|
||||
<a href="/aws-serverless/">⚡ Serverless</a>
|
||||
<a href="/aws-storage/">💾 Storage</a>
|
||||
<a href="/aws-networking/">🌐 Networking</a>
|
||||
<a href="/aws-security/">🔐 Security</a>
|
||||
<a href="/aws-iac/">📜 IaC</a>
|
||||
<a href="/aws-backup/">🗄️ Backup</a>
|
||||
<a href="/aws-newfeatures/">🆕 New Features</a>
|
||||
</div>
|
||||
</span>
|
||||
<a href="/azure/">☁️ Azure</a>
|
||||
<a href="/GoogleCloudPlatform/">☁️ GCP</a>
|
||||
<a href="/serverless/">⚡ Serverless</a>
|
||||
<a href="/finops/">💰 FinOps</a>
|
||||
<a href="/edge-computing/">🌍 Edge</a>
|
||||
<a href="/digitalocean/">🌊 DigitalOcean</a>
|
||||
<a href="/oraclecloud/">🔴 Oracle</a>
|
||||
<a href="/ibm_cloud/">🔵 IBM Cloud</a>
|
||||
</div>
|
||||
</span>
|
||||
|
||||
@@ -68,6 +124,8 @@
|
||||
<a href="/istio/">⛵ Istio</a>
|
||||
<a href="/servicemesh/">🕸️ Service Mesh</a>
|
||||
<a href="/kubernetes-networking/">🔗 K8s Net</a>
|
||||
<a href="/caching/">⚡ Caching</a>
|
||||
<a href="/web-servers/">🖥️ Web Servers</a>
|
||||
</div>
|
||||
</span>
|
||||
|
||||
@@ -76,18 +134,49 @@
|
||||
<div class="nb-quicknav__menu" id="nb-pop-sec" popover>
|
||||
<a href="/kubernetes-security/">🔐 K8s Security</a>
|
||||
<a href="/devsecops/">🛡️ DevSecOps</a>
|
||||
<a href="/securityascode/">📜 Security as Code</a>
|
||||
<a href="/aws-security/">☁️ AWS Security</a>
|
||||
</div>
|
||||
</span>
|
||||
|
||||
<span class="nb-quicknav__group">
|
||||
<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>
|
||||
<button class="nb-quicknav__link nb-quicknav__btn" popovertarget="nb-pop-obs" type="button">📈 Observability <span class="nb-quicknav__caret" aria-hidden="true">▾</span></button>
|
||||
<div class="nb-quicknav__menu" id="nb-pop-obs" popover>
|
||||
<a href="/monitoring/">📈 Observability</a>
|
||||
<a href="/prometheus/">🔥 Prometheus</a>
|
||||
<a href="/grafana/">📊 Grafana</a>
|
||||
<a href="/sre/">🛠️ SRE</a>
|
||||
<a href="/devops/">♾️ DevOps</a>
|
||||
<a href="/chaos-engineering/">🌪️ Chaos Engineering</a>
|
||||
<a href="/performance-testing-with-jenkins-and-jmeter/">⏱️ Performance Testing</a>
|
||||
<a href="/qa/">✅ QA</a>
|
||||
<a href="/test-automation-frameworks/">🤖 Test Automation</a>
|
||||
</div>
|
||||
</span>
|
||||
|
||||
<span class="nb-quicknav__group">
|
||||
<button class="nb-quicknav__link nb-quicknav__btn" popovertarget="nb-pop-aidata" type="button">🤖 AI & Data <span class="nb-quicknav__caret" aria-hidden="true">▾</span></button>
|
||||
<div class="nb-quicknav__menu" id="nb-pop-aidata" popover>
|
||||
<a href="/ai-agents-mcp/">🤖 AI & MCP</a>
|
||||
<a href="/mlops/">🧠 MLOps</a>
|
||||
<a href="/ai/">🤖 AI</a>
|
||||
<a href="/chatgpt/">💬 ChatGPT</a>
|
||||
<a href="/databases/">🗃️ Databases</a>
|
||||
<a href="/nosql/">🍃 NoSQL</a>
|
||||
<a href="/message-queue/">📨 Messaging</a>
|
||||
</div>
|
||||
</span>
|
||||
|
||||
<span class="nb-quicknav__group">
|
||||
<button class="nb-quicknav__link nb-quicknav__btn" popovertarget="nb-pop-dev" type="button">🧑💻 Dev <span class="nb-quicknav__caret" aria-hidden="true">▾</span></button>
|
||||
<div class="nb-quicknav__menu" id="nb-pop-dev" popover>
|
||||
<a href="/developerportals/">🏛️ Developer Portals</a>
|
||||
<a href="/python/">🐍 Python</a>
|
||||
<a href="/golang/">🐹 Go</a>
|
||||
<a href="/java_frameworks/">☕ Java</a>
|
||||
<a href="/javascript/">🟨 JavaScript</a>
|
||||
<a href="/dotnet/">🟣 .NET</a>
|
||||
<a href="/api/">🔌 API</a>
|
||||
<a href="/postman/">📮 Postman</a>
|
||||
</div>
|
||||
</span>
|
||||
|
||||
@@ -97,10 +186,10 @@
|
||||
<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>
|
||||
<a href="/mlops/">🧠 MLOps</a>
|
||||
<a href="/methodology/">📐 Methodology</a>
|
||||
<a href="/faq/">❓ FAQ</a>
|
||||
<a href="/about/">ℹ️ About</a>
|
||||
<a href="/recruitment/">💼 Career</a>
|
||||
<a class="nb-quicknav__menu-muted" href="/v1/">📚 V1 Archive</a>
|
||||
</div>
|
||||
</span>
|
||||
|
||||
90
docs/static/v2_elite.css
vendored
90
docs/static/v2_elite.css
vendored
@@ -1316,23 +1316,37 @@ 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; }
|
||||
#nb-pop-net { position-anchor: --nb-a-net; }
|
||||
[popovertarget="nb-pop-sec"] { anchor-name: --nb-a-sec; }
|
||||
#nb-pop-sec { position-anchor: --nb-a-sec; }
|
||||
[popovertarget="nb-pop-ops"] { anchor-name: --nb-a-ops; }
|
||||
#nb-pop-ops { position-anchor: --nb-a-ops; }
|
||||
[popovertarget="nb-pop-more"] { anchor-name: --nb-a-more; }
|
||||
#nb-pop-more { position-anchor: --nb-a-more; }
|
||||
[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-delivery"] { anchor-name: --nb-a-delivery; }
|
||||
#nb-pop-delivery { position-anchor: --nb-a-delivery; }
|
||||
[popovertarget="nb-pop-iac"] { anchor-name: --nb-a-iac; }
|
||||
#nb-pop-iac { position-anchor: --nb-a-iac; }
|
||||
[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; }
|
||||
#nb-pop-net { position-anchor: --nb-a-net; }
|
||||
[popovertarget="nb-pop-sec"] { anchor-name: --nb-a-sec; }
|
||||
#nb-pop-sec { position-anchor: --nb-a-sec; }
|
||||
[popovertarget="nb-pop-obs"] { anchor-name: --nb-a-obs; }
|
||||
#nb-pop-obs { position-anchor: --nb-a-obs; }
|
||||
[popovertarget="nb-pop-aidata"] { anchor-name: --nb-a-aidata; }
|
||||
#nb-pop-aidata { position-anchor: --nb-a-aidata; }
|
||||
[popovertarget="nb-pop-dev"] { anchor-name: --nb-a-dev; }
|
||||
#nb-pop-dev { position-anchor: --nb-a-dev; }
|
||||
[popovertarget="nb-pop-more"] { anchor-name: --nb-a-more; }
|
||||
#nb-pop-more { position-anchor: --nb-a-more; }
|
||||
/* nested AWS submenu anchors to its in-menu trigger */
|
||||
[popovertarget="nb-pop-aws"] { anchor-name: --nb-a-aws; }
|
||||
#nb-pop-aws { position-anchor: --nb-a-aws; }
|
||||
.nb-quicknav__menu {
|
||||
inset: auto; /* reset the UA-centered popover defaults */
|
||||
margin: 0;
|
||||
max-height: 82vh; /* tall menus (e.g. Kubernetes) scroll instead of overflowing */
|
||||
overflow-y: auto;
|
||||
overscroll-behavior: contain;
|
||||
/* drop below the invoking button, left-aligned. NB: position-area values must
|
||||
be all-physical or all-logical — mixing (e.g. `bottom span-inline-end`) is
|
||||
invalid and silently computes to `none`, leaving the menu over the button. */
|
||||
@@ -1388,6 +1402,54 @@ input[type="text"] {
|
||||
border-block-start: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
/* ── Nested submenu (e.g. Cloud → AWS ▸ → AWS pages) ──
|
||||
A second-level popover invoked from inside a menu. The trigger looks like a
|
||||
menu item; the submenu opens to the side (inline-end) of the trigger, with a
|
||||
flip fallback so it never leaves the viewport. Popover nesting keeps the
|
||||
parent menu open while the submenu is shown. */
|
||||
.nb-quicknav__subwrap { display: contents; }
|
||||
.nb-quicknav__subtrigger {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.6rem;
|
||||
width: 100%;
|
||||
padding: 0.34rem 0.6rem;
|
||||
border: none;
|
||||
border-radius: 0.4rem;
|
||||
background: none;
|
||||
color: rgba(255, 255, 255, 0.86);
|
||||
font-family: inherit;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 600;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
transition: background 0.14s ease, color 0.14s ease;
|
||||
}
|
||||
.nb-quicknav__subtrigger:hover,
|
||||
.nb-quicknav__subtrigger:focus-visible {
|
||||
background: color-mix(in srgb, var(--md-accent-fg-color) 30%, transparent);
|
||||
color: #fff;
|
||||
outline: none;
|
||||
}
|
||||
.nb-quicknav__subwrap:has(.nb-quicknav__submenu:popover-open) .nb-quicknav__caret {
|
||||
transform: rotate(0); /* caret is a side-arrow ▸, keep it static */
|
||||
}
|
||||
.nb-quicknav__submenu {
|
||||
/* Open to the RIGHT of the trigger, top-aligned. position-area's horizontal
|
||||
axis isn't honored reliably when the anchor lives inside another popover,
|
||||
so place explicitly with anchor(): left edge at the trigger's right edge. */
|
||||
position-area: none;
|
||||
top: anchor(top);
|
||||
left: anchor(right);
|
||||
right: auto;
|
||||
bottom: auto;
|
||||
position-try-fallbacks: flip-inline;
|
||||
margin-block-start: 0;
|
||||
margin-inline-start: 0.35rem;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.nb-quicknav__link,
|
||||
.nb-quicknav__caret,
|
||||
|
||||
@@ -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.33
|
||||
- static/v2_elite.css?v=2.9.36
|
||||
|
||||
extra_javascript:
|
||||
- static/v2_filter.js?v=2.9.19
|
||||
|
||||
Reference in New Issue
Block a user