ux: breadcrumb path, simpler IP replacer, remove tooltip

- Enable navigation.path for breadcrumb trail on every page
- Replace hidden ?-tooltip with always-visible inline hint text:
  "Replaces <your-unraid-ip> in all instructions & code blocks.
  Saved in your browser only."
- Add satellite antenna icon for visual recognition
- Remove tooltip JS/CSS (overengineered for a one-liner explanation)
- Simplify ip-replacer.js (no more tooltip code)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: rorar

docs/javascripts/ip-replacer.js

@@ -78,32 +78,13 @@
   function init() {
     var input = document.getElementById("ip-input");
     var resetBtn = document.getElementById("ip-reset");
-    var infoBtn = document.getElementById("ip-info-btn");
-    var tooltip = document.getElementById("ip-tooltip");
 
     if (!input) return;
 
     // Restore saved IP into input field
     var state = applyFromStorage();
     input.value = state.saved;
 
-    // Tooltip toggle — positioned relative to ? button via fixed positioning
-    if (infoBtn && tooltip) {
-      infoBtn.addEventListener("click", function (e) {
-        e.stopPropagation();
-        var isVisible = tooltip.classList.contains("ip-replacer-tooltip--visible");
-        if (!isVisible) {
-          var rect = infoBtn.getBoundingClientRect();
-          tooltip.style.top = (rect.bottom + 6) + "px";
-          tooltip.style.left = rect.left + "px";
-        }
-        tooltip.classList.toggle("ip-replacer-tooltip--visible");
-      });
-      document.addEventListener("click", function () {
-        tooltip.classList.remove("ip-replacer-tooltip--visible");
-      });
-    }
-
     // IP input handler
     input.addEventListener("input", function () {
       var val = input.value;

docs/stylesheets/extra.css

@@ -6,32 +6,39 @@
   margin: 0 2px;
 }
 
-/* IP Replacer — sticky input bar below header */
+/* IP Replacer — announcement bar below header */
 .ip-replacer {
   display: flex;
   align-items: center;
-  gap: 0.75rem;
-  padding: 0.4rem 1rem;
+  gap: 0.6rem;
+  padding: 0.35rem 1rem;
   background: var(--md-code-bg-color);
   border-bottom: 1px solid var(--md-default-fg-color--lightest);
-  font-size: 0.82rem;
+  font-size: 0.8rem;
   flex-wrap: wrap;
 }
 
 .ip-replacer label {
   font-weight: 600;
   white-space: nowrap;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+}
+
+.ip-replacer-icon {
+  font-size: 0.9rem;
 }
 
 .ip-replacer input {
   font-family: var(--md-code-font-family);
-  font-size: 0.82rem;
-  padding: 0.25rem 0.5rem;
+  font-size: 0.8rem;
+  padding: 0.2rem 0.5rem;
   border: 1px solid var(--md-default-fg-color--lighter);
   border-radius: 4px;
   background: var(--md-default-bg-color);
   color: var(--md-default-fg-color);
-  width: 10rem;
+  width: 9rem;
 }
 
 .ip-replacer input:focus {
@@ -40,8 +47,8 @@
 }
 
 .ip-replacer button {
-  font-size: 0.78rem;
-  padding: 0.2rem 0.6rem;
+  font-size: 0.75rem;
+  padding: 0.15rem 0.5rem;
   border: 1px solid var(--md-default-fg-color--lighter);
   border-radius: 4px;
   background: var(--md-default-bg-color);
@@ -53,63 +60,16 @@
   background: var(--md-accent-fg-color--transparent);
 }
 
-.ip-replacer .ip-replacer-disclaimer {
+.ip-replacer-hint {
   color: var(--md-default-fg-color--light);
-  font-size: 0.72rem;
-  font-style: italic;
-}
-
-/* Info button (?) */
-.ip-replacer-info-wrapper {
-  position: relative;
-  display: inline-flex;
-}
-
-.ip-replacer-info-btn {
-  width: 1.5rem;
-  height: 1.5rem;
-  padding: 0;
-  border-radius: 50%;
-  font-weight: 700;
-  font-size: 0.75rem;
-  line-height: 1;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border: 1px solid var(--md-default-fg-color--lighter);
-  background: var(--md-default-bg-color);
-  color: var(--md-default-fg-color);
-  cursor: pointer;
-}
-
-.ip-replacer-info-btn:hover {
-  background: var(--md-accent-fg-color--transparent);
-}
-
-/* Tooltip */
-.ip-replacer-tooltip {
-  display: none;
-  position: fixed;
-  z-index: 999;
-  width: 20rem;
-  padding: 0.6rem 0.8rem;
-  border-radius: 6px;
-  font-size: 0.78rem;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 1.5;
-  background: #1a1a2e;
-  color: #e8e8e8;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
-}
-
-[data-md-color-scheme="slate"] .ip-replacer-tooltip {
-  background: #f0f0f0;
-  color: #1a1a1a;
+  font-size: 0.7rem;
 }
 
-.ip-replacer-tooltip--visible {
-  display: block;
+.ip-replacer-hint code {
+  font-size: 0.68rem;
+  padding: 0.1rem 0.25rem;
+  border-radius: 3px;
+  background: var(--md-default-fg-color--lightest);
 }
 
 /* Highlighted replaced IP values */

mkdocs.yml

@@ -27,6 +27,7 @@ theme:
     - navigation.top
     - navigation.indexes
     - navigation.footer
+    - navigation.path
     - content.code.copy
     - search.suggest
     - search.highlight

overrides/main.html

@@ -2,18 +2,12 @@
 
 {% block announce %}
 <div class="ip-replacer">
-  <span class="ip-replacer-info-wrapper">
-    <button type="button" class="ip-replacer-info-btn" id="ip-info-btn" title="What is this?">?</button>
-    <div class="ip-replacer-tooltip" id="ip-tooltip">
-      Enter your Unraid server IP address here. All placeholders like
-      &ldquo;&lt;your-unraid-ip&gt;&rdquo; throughout the guide will be replaced
-      with your IP &mdash; including in copy-able code blocks.
-      Your IP is saved in your browser only and never transmitted.
-    </div>
-  </span>
-  <label for="ip-input">Your Unraid IP:</label>
+  <label for="ip-input">
+    <span class="ip-replacer-icon" aria-hidden="true">&#x1F4E1;</span>
+    Your Unraid IP:
+  </label>
   <input id="ip-input" type="text" placeholder="192.168.1.x" autocomplete="off" spellcheck="false" />
   <button id="ip-reset" type="button" title="Reset to placeholder">Reset</button>
-  <span class="ip-replacer-disclaimer">Browser-only &mdash; no data is sent.</span>
+  <span class="ip-replacer-hint">Replaces <code>&lt;your-unraid-ip&gt;</code> in all instructions &amp; code blocks. Saved in your browser only.</span>
 </div>
 {% endblock %}