custom.js

function collapseAndAbbreviateNamespaceRefs() {
  const observer = new MutationObserver((mutationList) => {
    for (const mutation of mutationList) {
      for (const node of mutation.addedNodes) {
        if (!node.querySelectorAll) continue;

        const initialNamespaceRefs = node.querySelectorAll(
          '.ls-block a.page-ref[data-ref*="/"], .foldable-title [data-ref*="/"], li[title*="root/"] .page-title, a.tag[data-ref*="/"]'
        );
        const pageTitleRefs = node.querySelectorAll('.page-title');
        const filteredPageTitleRefs = Array.from(pageTitleRefs).filter((pageTitleRef) =>
          Array.from(pageTitleRef.childNodes).some((child) => child.nodeType === 3 && child.textContent.includes('/'))
        );
        const namespaceRefs = [...initialNamespaceRefs, ...filteredPageTitleRefs];

        for (const namespaceRef of namespaceRefs) {
          const text = namespaceRef.textContent;
          const testText = namespaceRef.classList.contains("tag")
            ? text.substring(1).toLowerCase()
            : text.toLowerCase();
          if (testText !== namespaceRef.dataset.ref) continue;

          // Perform collapsing.
          const abbreviatedText = text.split('/').map((part, index, arr) => {
            if (namespaceRef.matches('a.tag[data-ref*="/"]') && index === 0) {
              return part.substring(0, 2);
            } else if (index === arr.length - 1) {
              return part;
            } else {
              return part.charAt(0);
            }
          }).join('/');

          namespaceRef.dataset.origText = text;
          namespaceRef.textContent = abbreviatedText;

          // Show entire string on hover for all except 'a.tag[data-ref*="/"]' elements
          if (!namespaceRef.matches('a.tag[data-ref*="/"]')) {
            namespaceRef.addEventListener('mouseenter', () => {
              namespaceRef.textContent = namespaceRef.dataset.origText;
            });

            namespaceRef.addEventListener('mouseleave', () => {
              namespaceRef.textContent = abbreviatedText;
            });
          }
        }
      }
    }
  });

  observer.observe(document.getElementById("app-container"), {
    subtree: true,
    childList: true,
  });
}

collapseAndAbbreviateNamespaceRefs();