thermograph/frontend/server/internal/render/templates/hub.html.tmpl

{{/* Ported from templates/hub.html.j2. Extra data: .Breadcrumb;
     .NCities/.NCountries int; .Groups — MUST be the ordered
     []contentapi.HubCountry slice from the hub payload, never a Go map
     (template range over a map sorts keys; Python's dict kept the backend's
     order, and the golden diff would catch the reorder). */}}{{template "base_head_start" .}}{{template "base_head_end" .}}{{template "base_body_start" .}}{{template "breadcrumb" .}}<article class="climate-page">
  <h1>City climates</h1>
  <p class="lede">Average temperatures by month, all-time records, and how today compares, for
     {{.NCities}} cities across {{.NCountries}} countries. Every day is graded against that
     location's own ~45 years of climate history.</p>

  <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">
{{range .Groups}}    <details class="hub-country">
      <summary>{{.Country}} <span class="hub-count">{{len .Cities}}</span></summary>
      <ul class="city-links">
{{range .Cities}}<li><a href="{{$.Base}}/climate/{{.Slug}}">{{.Name}}</a></li>{{end}}      </ul>
    </details>
{{end}}  </div>
</article>

<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;

  {{jscomment "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>
{{template "base_body_end" .}}{{template "base_scripts_default" .}}{{template "base_tail" .}}