Molecule 7/7: ansible_remote_tmp fix

site/assets/css/main.css

@@ -73,6 +73,115 @@ header {
   }
 }
 
+/* ---- Suche (Pagefind) ---- */
+.search {
+  position: relative;
+  flex: 1 1 auto;
+  max-width: 360px;
+  min-width: 160px;
+
+  input[type="search"] {
+    width: 100%;
+    padding: 0.45rem 0.9rem;
+    font-size: 0.9rem;
+    font-family: inherit;
+    color: var(--text);
+    background: var(--card);
+    border: 1px solid var(--border);
+    border-radius: 999px;
+    outline: none;
+    transition: border-color 0.15s, box-shadow 0.15s;
+
+    &::placeholder { color: var(--muted); }
+
+    &:focus {
+      border-color: var(--accent);
+      box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 20%, transparent);
+    }
+
+    &::-webkit-search-cancel-button { cursor: pointer; }
+  }
+}
+
+.search-results {
+  position: absolute;
+  top: calc(100% + 0.5rem);
+  left: 0;
+  right: 0;
+  z-index: 50;
+  max-height: 70vh;
+  overflow-y: auto;
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 0.5rem;
+  box-shadow: 0 12px 32px oklch(0 0 0 / 0.18);
+
+  &[hidden] { display: none; }
+}
+
+.search-item {
+  display: block;
+  padding: 0.6rem 0.75rem;
+  border-radius: calc(var(--radius) - 2px);
+  text-decoration: none;
+
+  &:hover { background: var(--card-h); }
+}
+
+.search-title {
+  display: block;
+  color: var(--text);
+  font-weight: 600;
+  font-size: 0.9rem;
+}
+
+.search-excerpt {
+  display: block;
+  color: var(--muted);
+  font-size: 0.8rem;
+  margin-top: 0.15rem;
+  line-height: 1.5;
+
+  mark {
+    background: color-mix(in oklab, var(--accent) 30%, transparent);
+    color: var(--text);
+    border-radius: 2px;
+    padding: 0 0.1em;
+  }
+}
+
+.search-sub {
+  list-style: none;
+  margin: 0.25rem 0 0.5rem;
+  padding-left: 0.75rem;
+  border-left: 2px solid var(--border);
+
+  li {
+    margin: 0.15rem 0;
+
+    a {
+      display: block;
+      padding: 0.25rem 0.5rem;
+      border-radius: calc(var(--radius) - 2px);
+      color: var(--muted);
+      font-size: 0.8rem;
+      text-decoration: none;
+
+      &:hover { background: var(--card-h); color: var(--text); }
+    }
+
+    .search-excerpt { font-size: 0.75rem; }
+  }
+}
+
+.search-empty {
+  padding: 0.75rem;
+  color: var(--muted);
+  font-size: 0.85rem;
+  text-align: center;
+}
+
 /* ---- Footer ---- */
 footer {
   margin-top: 3rem;

site/assets/js/search.js

@@ -0,0 +1,103 @@
+(function () {
+  "use strict";
+
+  const input = document.getElementById("search-input");
+  const results = document.getElementById("search-results");
+  if (!input || !results) return;
+
+  let pagefind = null;
+  let timer = null;
+
+  async function getPagefind() {
+    if (!pagefind) pagefind = await import("/pagefind/pagefind.js");
+    return pagefind;
+  }
+
+  function escapeHtml(str) {
+    const div = document.createElement("div");
+    div.textContent = str;
+    return div.innerHTML;
+  }
+
+  function render(items) {
+    if (!items.length) {
+      results.innerHTML = '<p class="search-empty">Keine Treffer.</p>';
+      results.hidden = false;
+      return;
+    }
+    results.innerHTML = items
+      .map((it) => {
+        // excerpt enthält bereits <mark> von Pagefind – als HTML rendern
+        const excerpt = it.excerpt
+          ? `<span class="search-excerpt">${it.excerpt}</span>`
+          : "";
+        const sub = (it.sub_results || [])
+          .slice(0, 3)
+          .map(
+            (s) =>
+              `<li><a href="${s.url}">${escapeHtml(s.title)}</a>` +
+              (s.excerpt ? `<span class="search-excerpt">${s.excerpt}</span>` : "") +
+              `</li>`
+          )
+          .join("");
+        return (
+          `<a class="search-item" href="${it.url}">` +
+          `<span class="search-title">${escapeHtml(it.title)}</span>${excerpt}</a>` +
+          (sub ? `<ul class="search-sub">${sub}</ul>` : "")
+        );
+      })
+      .join("");
+    results.hidden = false;
+  }
+
+  async function doSearch(query) {
+    query = query.trim();
+    if (query.length < 2) {
+      results.hidden = true;
+      results.innerHTML = "";
+      return;
+    }
+    try {
+      const pf = await getPagefind();
+      const search = await pf.search(query);
+      const items = [];
+      for (const res of search.results.slice(0, 8)) {
+        const data = await res.data();
+        items.push({
+          url: data.url,
+          title: (data.meta && data.meta.title) || data.url,
+          excerpt: data.excerpt,
+          sub_results: (data.sub_results || []).map((s) => ({
+            url: s.url,
+            title: s.title,
+            excerpt: s.excerpt,
+          })),
+        });
+      }
+      render(items);
+    } catch (e) {
+      results.innerHTML = '<p class="search-empty">Suche nicht verfügbar.</p>';
+      results.hidden = false;
+    }
+  }
+
+  input.addEventListener("input", () => {
+    clearTimeout(timer);
+    timer = setTimeout(() => doSearch(input.value), 150);
+  });
+
+  input.addEventListener("focus", () => {
+    if (input.value.trim().length >= 2) doSearch(input.value);
+  });
+
+  document.addEventListener("click", (e) => {
+    if (!e.target.closest(".search")) results.hidden = true;
+  });
+
+  document.addEventListener("keydown", (e) => {
+    if (e.key === "Escape") {
+      results.hidden = true;
+      input.blur();
+    }
+  });
+})();