Skip to content

Instantly share code, notes, and snippets.

@ottsch
Last active July 16, 2022 17:56
Show Gist options
  • Save ottsch/51a3640910a82d36fcd1fc70ad4b109b to your computer and use it in GitHub Desktop.
Save ottsch/51a3640910a82d36fcd1fc70ad4b109b to your computer and use it in GitHub Desktop.
Add favicon to links in Roam Research
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,
});
@JasperGeh
Copy link

Good to know.
I tried to play around with the styling, but haven't managed to change much besides moving it to the right of the link. Given that the favicon is added as the background, is even possible to make it smaller and move it upwards (so it looks similar to a footnote)?

@ottsch
Copy link
Author

ottsch commented Sep 14, 2020

Good to know.
I tried to play around with the styling, but haven't managed to change much besides moving it to the right of the link. Given that the favicon is added as the background, is even possible to make it smaller and move it upwards (so it looks similar to a footnote)?

Try this as a starting point:

a.style.background = `url(https://www.google.com/s2/favicons?sz=16&domain=${a.hostname}) right top no-repeat`;
a.style.backgroundSize = "15%";
a.style.paddingRight = "10px";

Also no need for the if ... else anymore then.

@JasperGeh
Copy link

Ok, thanks for the pointer. I tried that, but sadly, setting a.style.backgroundSize completely freezes and crashed the Roam DB when trying to display a block with a link

@kmaustral
Copy link

The recent update to Roam Research seems to have broken this script. Is there any update to the style that will restore this?

@JasperGeh
Copy link

I think the issue is that roam-body-main now excludes the content of the right sidebar, so only links on the main page get the favicon. If you change the targeted class to roam-body without the -main in the second row, it works again. Perhaps there's also the option to target roam-body-main as well as sidebar-content, but I don't know how to do that.

@kmaustral
Copy link

Yes. That change fixes it. Thanks

@ottsch
Copy link
Author

ottsch commented Nov 4, 2020

I've updated the gist accordingly

@ciceronianus
Copy link

Hi, just a small suggestion :).
What about renaming the observer to something like observerFav for people running multiple observers
(I know, inefficient but still). :)
Thank you for the great code!

@kmaustral
Copy link

The latest update to Roam breaks this script. I presume there's been a change in the CSS. It's a shame as I've grown to rely on this. The icons are a very economical visual reference.

@billpetro
Copy link

Thanks for the update. I miss the visual favicons.

@kmaustral
Copy link

I found you can get this script to work again but disabling it and re-enabling it. There is something happening in the loading order.

@ottsch
Copy link
Author

ottsch commented Jan 10, 2021

Should work again 🤞

@JasperGeh
Copy link

I think the solitary } in line 15 is superfluous.

@ottsch
Copy link
Author

ottsch commented Jan 10, 2021

I think the solitary } in line 15 is superfluous.

Can't find any unbalanced brackets. line 15 is the end of the else statement

@JasperGeh
Copy link

Nevermind, I deleted/modified a bit and overlooked that. You're absolutely correct, of course

@KoenVdB
Copy link

KoenVdB commented Jan 20, 2021

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

@ottsch
Copy link
Author

ottsch commented Jan 20, 2021

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.

@abhayprasanna
Copy link

abhayprasanna commented Jan 20, 2021

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();

@kmaustral
Copy link

kmaustral commented Jan 20, 2021 via email

@KoenVdB
Copy link

KoenVdB commented Jan 20, 2021

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

@8bitgentleman
Copy link

@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?

@ottsch
Copy link
Author

ottsch commented Jul 15, 2022

@8bitgentleman of course, go ahead!

@8bitgentleman
Copy link

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

@ottsch
Copy link
Author

ottsch commented Jul 16, 2022

@8bitgentleman Yep, that's fine with me

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment