From 807f26262f515aa87abb27b20a77cc843099f332 Mon Sep 17 00:00:00 2001
From: Emi Griffith <me@emigriffith.dev>
Date: Wed, 15 Jul 2026 21:44:18 -0700
Subject: [PATCH] Climate hub: client-side search + alphabetical results (#110)

Add a search box to /climate that filters to a flat, alphabetical list of matching
cities (by city or country name), shown with their country; clearing it restores the
collapsible directory. The index is built from the already-crawlable links, so it's
a pure progressive enhancement (no SEO impact). Also sort cities alphabetically
within each country in the directory (were population-ordered).
---
 cities.py             |  6 ++--
 templates/hub.html.j2 | 82 ++++++++++++++++++++++++++++++++++++++-----
 2 files changed, 77 insertions(+), 11 deletions(-)

diff --git a/cities.py b/cities.py
index 67f7db8..2f48bb2 100644
--- a/cities.py
+++ b/cities.py
@@ -57,12 +57,12 @@ def display_name(city: dict) -> str:
 
 
 def by_country() -> dict[str, list[dict]]:
-    """Cities grouped by country (population-descending within each), country keys
-    ordered alphabetically — for the /climate hub's crawlable link graph."""
+    """Cities grouped by country, both the countries and the cities within each
+    ordered alphabetically — for the /climate hub's crawlable link graph + search."""
     groups: dict[str, list[dict]] = {}
     for c in _load():
         key = c.get("country") or c.get("country_code") or "Other"
         groups.setdefault(key, []).append(c)
     for v in groups.values():
-        v.sort(key=lambda x: -x["population"])
+        v.sort(key=lambda x: x["name"].lower())
     return dict(sorted(groups.items(), key=lambda kv: kv[0].lower()))
diff --git a/templates/hub.html.j2 b/templates/hub.html.j2
index ef932bd..21fe005 100644
--- a/templates/hub.html.j2
+++ b/templates/hub.html.j2
@@ -11,13 +11,79 @@
   <p class="lede">Average temperatures by month, all-time records, and how today compares — for
      {{ n_cities }} cities across {{ n_countries }} countries. Every day is graded against that
      location's own ~45 years of climate history.</p>
-  {% for country, cs in groups.items() %}
-  <details class="hub-country">
-    <summary>{{ country }} <span class="hub-count">{{ cs | length }}</span></summary>
-    <ul class="city-links">
-      {% for c in cs %}<li><a href="{{ base }}/climate/{{ c.slug }}">{{ c.name }}</a></li>{% endfor %}
-    </ul>
-  </details>
-  {% endfor %}
+
+  <div class="hub-search">
+    <input type="search" id="hub-q" placeholder="Search a city or country…" autocomplete="off"
+           aria-label="Search cities" />
+  </div>
+  <ul class="hub-results" id="hub-results" hidden></ul>
+
+  <div id="hub-directory">
+    {% for country, cs in groups.items() %}
+    <details class="hub-country">
+      <summary>{{ country }} <span class="hub-count">{{ cs | length }}</span></summary>
+      <ul class="city-links">
+        {% for c in cs %}<li><a href="{{ base }}/climate/{{ c.slug }}">{{ c.name }}</a></li>{% endfor %}
+      </ul>
+    </details>
+    {% endfor %}
+  </div>
 </article>
+
+{% raw %}
+<script>
+(function () {
+  var q = document.getElementById("hub-q");
+  var results = document.getElementById("hub-results");
+  var directory = document.getElementById("hub-directory");
+  if (!q || !results || !directory) return;
+
+  // Build a flat, alphabetical index from the crawlable directory links.
+  var index = [];
+  directory.querySelectorAll("details.hub-country").forEach(function (d) {
+    var country = (d.querySelector("summary").firstChild.textContent || "").trim();
+    d.querySelectorAll(".city-links a").forEach(function (a) {
+      index.push({ name: a.textContent, country: country, href: a.getAttribute("href") });
+    });
+  });
+  index.sort(function (a, b) {
+    return a.name.toLowerCase().localeCompare(b.name.toLowerCase());
+  });
+
+  function esc(s) {
+    return s.replace(/[&<>"']/g, function (c) {
+      return { "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" }[c];
+    });
+  }
+
+  function render() {
+    var term = q.value.trim().toLowerCase();
+    if (!term) {
+      results.hidden = true;
+      results.innerHTML = "";
+      directory.hidden = false;
+      return;
+    }
+    directory.hidden = true;
+    results.hidden = false;
+    var matches = index.filter(function (e) {
+      return e.name.toLowerCase().indexOf(term) >= 0 ||
+             e.country.toLowerCase().indexOf(term) >= 0;
+    });
+    if (!matches.length) {
+      results.innerHTML = '<li class="hub-empty muted">No cities match “' + esc(q.value.trim()) + "”.</li>";
+      return;
+    }
+    results.innerHTML = matches.slice(0, 300).map(function (e) {
+      return '<li><a href="' + e.href + '">' + esc(e.name) + "</a>" +
+             '<span class="hub-r-country">' + esc(e.country) + "</span></li>";
+    }).join("") + (matches.length > 300
+      ? '<li class="hub-empty muted">…and ' + (matches.length - 300) + " more — keep typing to narrow.</li>"
+      : "");
+  }
+
+  q.addEventListener("input", render);
+})();
+</script>
+{% endraw %}
 {% endblock %}