404.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Local First Tools — Not Found (checking redirects)</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
:root { color-scheme: light dark; }
body {
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  max-width: 42em;
  margin: 3em auto;
  padding: 0 1em;
}
h1 { font-size: 1.4em; margin-bottom: 0.3em; }
p { margin: 0.4em 0; }
code {
  background: color-mix(in srgb, currentColor 8%, transparent);
  padding: 0.1em 0.4em;
  border-radius: 3px;
  font-size: 0.9em;
}
a { color: #06c; text-decoration: none; }
a:hover { text-decoration: underline; }
#status { opacity: 0.7; font-size: 0.95em; }
</style>
</head>
<body>
<h1>Hmm, this page moved.</h1>
<p id="status">Checking the redirect map…</p>
<p>Or go to <a href="/localFirstTools/">the gallery</a> &middot; <a href="/">home</a>.</p>
<script>
(async () => {
  const status = document.getElementById("status");
  // Deploy-prefix-aware: strip leading "/localFirstTools/" if present
  const raw = location.pathname;
  const stripped = raw.replace(/^\/localFirstTools\//, "").replace(/^\//, "");

  // Try to find redirects.json — works whether served at / or /localFirstTools/
  const candidates = [
    "/localFirstTools/data/redirects.json",
    "/data/redirects.json",
    "data/redirects.json",
  ];

  let map = null;
  for (const url of candidates) {
    try {
      const res = await fetch(url);
      if (res.ok) { map = await res.json(); break; }
    } catch (_) {}
  }

  if (!map) {
    status.textContent = "Couldn't load the redirect map. Try the gallery link below.";
    return;
  }

  // Follow the chain up to 8 hops
  let cur = stripped;
  for (let i = 0; i < 8; i++) {
    if (map[cur]) { cur = map[cur]; continue; }
    break;
  }

  if (cur && cur !== stripped) {
    // Preserve query + hash
    const target = cur + location.search + location.hash;
    status.innerHTML = 'Redirecting to <code>' + cur + '</code>…';
    // Give the user a beat to see it
    setTimeout(() => location.replace("/" + target.replace(/^\//, "")), 300);
    return;
  }

  status.textContent = "No redirect found for this path.";
})();
</script>
</body>
</html>