---
const route = Astro.locals.starlightRoute;
const data = route?.entry?.data ?? {};
const now = Date.now();
const newUntilMs =
  typeof data.newUntil === "string" ? new Date(data.newUntil).getTime() : NaN;
const isExplicitlyNew =
  data.isNew === true || (!isNaN(newUntilMs) && newUntilMs > now);
const id = route?.entry?.id ?? "";
---

<h1
  id="_top"
  class:list={["ra-page-title", { "ra-page-title--is-new": isExplicitlyNew }]}
  data-page-id={id}
>
  {data.title}
  <span class="ra-new-dot" aria-label="Recently added" title="Recently added"></span>
</h1>

<script is:inline>
  (function () {
    var apply = function () {
      var data = window.__ra_new_pages_data__;
      if (!Array.isArray(data) || data.length === 0) return;
      var h = document.querySelector("h1.ra-page-title");
      if (!h) return;
      if (h.classList.contains("ra-page-title--is-new")) return;
      var path = window.location.pathname.replace(/\/$/, "") || "/";
      for (var i = 0; i < data.length; i++) {
        var slug = String(data[i]).replace(/\/$/, "") || "/";
        if (slug === path) {
          h.classList.add("ra-page-title--is-new");
          return;
        }
      }
    };
    if (document.readyState === "loading") {
      document.addEventListener("DOMContentLoaded", apply);
    } else {
      apply();
    }
    document.addEventListener("astro:page-load", apply);
  })();
</script>
