807f26262f
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).
89 lines
3.3 KiB
Django/Jinja
89 lines
3.3 KiB
Django/Jinja
{% extends "base.html.j2" %}
|
||
{% block title %}{{ page_title }}{% endblock %}
|
||
{% block description %}{{ page_description }}{% endblock %}
|
||
{% block canonical_path %}{{ canonical_path }}{% endblock %}
|
||
{% block content %}
|
||
<nav class="breadcrumb" aria-label="Breadcrumb">
|
||
{% for label, href in breadcrumb %}{% if href %}<a href="{{ href }}">{{ label }}</a>{% else %}<span>{{ label }}</span>{% endif %}{% if not loop.last %} <span class="sep">›</span> {% endif %}{% endfor %}
|
||
</nav>
|
||
<article class="climate-page">
|
||
<h1>City climates</h1>
|
||
<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>
|
||
|
||
<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 { "&": "&", "<": "<", ">": ">", '"': """, "'": "'" }[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 %}
|