frontend/index.ts


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

import htmx from "htmx.org";

htmx.config.historyRestoreAsHxRequest = false;
htmx.config.includeIndicatorStyles = false;

function setupAnchors() {
  document.querySelectorAll("a").forEach((e) => {
    // stuff related to external links are already handled in the backend
    if (!e.href.startsWith(window.location.origin) && /https?:\/\//.test(e.href)) return;
    // stuff related to RSS must not be processed by HTMX.
    if (e.href.endsWith("/rss/") || e.href.endsWith("/rss")) {
      e.target = "_blank";
      return;
    }

    if (e.href == window.location.href) e.classList.add("target");
    else e.classList.remove("target");

    if (e.hasAttribute("hx-trigger")) return;

    e.setAttribute("hx-get", e.href);
    e.setAttribute("hx-trigger", "click");
    e.setAttribute("hx-target", "#content");
    e.setAttribute("hx-swap", "outerHTML show:body:top");
    htmx.process(e);
  });
}

// updating history and window title
document.addEventListener("htmx:afterSettle", (e) => {
  if (e.detail.xhr === undefined) return;
  const title = e.detail.xhr.getResponseHeader("Updated-Title");
  if (title?.length !== 0) document.title = decodeURIComponent(title).replaceAll("+", " ");
  const quote = e.detail.xhr.getResponseHeader("Updated-Quote");
  if (quote?.length !== 0)
    document.querySelector("#quote")!.innerHTML =
      "«&thinsp;" + decodeURIComponent(quote).replaceAll("+", " ") + "&thinsp;»";
  setupAnchors();
});

document.body.addEventListener("htmx:beforeSwap", function (e) {
  if (e.detail.xhr.status !== 404) return;
  e.detail.shouldSwap = true;
  e.detail.isError = false;
});

setupAnchors();