Add favicon to links in Roam Research

add_favicons.js

new MutationObserver(() => {
  let filtered = Array.prototype.filter.call(
    document.querySelectorAll(".roam-body a"),
    (a) => {
      return a.hostname && !a.hostname.includes("roamresearch.com");
    }
  );
  Array.prototype.forEach.call(filtered, (a) => {
    if (a.text == "*") {
      a.style.background = `url(https://www.google.com/s2/favicons?sz=16&domain=${a.hostname}) right center no-repeat`;
      a.style.paddingRight = "18px";
    } else {
      a.style.background = `url(https://www.google.com/s2/favicons?sz=16&domain=${a.hostname}) left center no-repeat`;
      a.style.paddingLeft = "20px";
    }
  });
}).observe(document.body, {
  attributes: true,
  childList: true,
  subtree: true,
});

Hi @ottsch, is there anything that needs to be done to reactivate the favicons script? I don't think the code above has changed but it does not seem to work anymore for me.
Roam Research v0.7.8-4a1c7ba5

Hm it still works here ... Last change to the code was Jan 10.

Adding an async function wrapper seems to fix all broken JS. HT: @GitMurf for the heads-up.

async function loadFavicons() {
const addFavicons = () => {
  let filtered = Array.prototype.filter.call(document.querySelectorAll('.roam-body a'), a => {
    return a.hostname && a.hostname !== document.location.hostname;
  });
  Array.prototype.forEach.call(filtered, a => {
    if (a.text == "*") {
      a.style.background = `url(https://www.google.com/s2/favicons?sz=16&domain=${a.hostname}) right center no-repeat`;
      a.style.paddingRight = "18px";
    } else {
      a.style.background = `url(https://www.google.com/s2/favicons?sz=16&domain=${a.hostname}) left center no-repeat`;
      a.style.paddingLeft = "20px";
    }
  });
};

const observer = new MutationObserver(addFavicons);
observer.observe(document.querySelector('.roam-body'), {
  attributes: true,
  childList: true,
  subtree: true
});
}
loadFavicons();

Thanks Abhay. Is there something that can be added to other scripts that are broken? Would `load<script name>();` do it?

…

On Thu, 21 Jan 2021 at 01:08, Abhay Prasanna ***@***.***> wrote: ***@***.**** commented on this gist. ------------------------------ Adding an async function wrapper seems to fix all broken JS. HT: @GitMurf <https://github.com/GitMurf> for the heads-up. const addFavicons = () => { let filtered = Array.prototype.filter.call(document.querySelectorAll('.roam-body a'), a => { return a.hostname && a.hostname !== document.location.hostname; }); Array.prototype.forEach.call(filtered, a => { if (a.text == "*") { a.style.background = `url(https://www.google.com/s2/favicons?sz=16&domain=${a.hostname}) right center no-repeat`; a.style.paddingRight = "18px"; } else { a.style.background = `url(https://www.google.com/s2/favicons?sz=16&domain=${a.hostname}) left center no-repeat`; a.style.paddingLeft = "20px"; } }); }; const observer = new MutationObserver(addFavicons); observer.observe(document.querySelector('.roam-body'), { attributes: true, childList: true, subtree: true }); } loadFavicons(); — You are receiving this because you commented. Reply to this email directly, view it on GitHub <https://gist.github.com/51a3640910a82d36fcd1fc70ad4b109b#gistcomment-3600685>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ARTR6N2MBUG6PZGAKAHRJZDS23PV3ANCNFSM4Q77UX5A> .

Really weird, still NOK for me... Same issue with Roamhacker_daytitle script... Could it be related to a combination of different scripts?

@ottsch any interest in updating this for the new official Roam plugin marketplace? If not would you be comfortable passing the reins to me or someone in the Roam community to keep it updated?

@8bitgentleman of course, go ahead!

Full disclosure @ottsch there is the potential for some proceeds from Roam for those who update and maintain plugins on the marketplace. Want to make sure you're aware of that and still OK with passing it on

@8bitgentleman Yep, that's fine with me