Issues adding CSS/JS component: Robustifying links to preserve link functionality

Dev
1

TL;DR summary:

  • Issues incorporating javascript & CSS links to enable Robustify tooltip pop-ups to hyperlinks on our Discourse.
  • Some similarities to this earlier case although we’re stopping short of querying the Robustify API; maybe sensible to go this route eventually but had intended to start just by enabling popups for correctly wrapped hyperlinks.

Details:

I am writing with a hopefully straightforward question about implementing a small CSS/JS app on our Discourse forum: we are trying to use a neat little app put together by Mementoweb that attaches a pop-up box to any hyperlinks on a page, allowing you to choose between accessing the site or viewing an earlier cached version of the site if the link is no longer functional. It is a really neat feature!, & we’re hoping it might solve some of the inevitable problems around coming back to a website a couple of years later & finding dead links to unmaintained pages. Initially I hoped to just try ensuring it would work when one of us manually generates a code on the Robustify site (example).

The app runs on a couple of lines of code - links are wrapped with a longer a href tag, & there are links to a CSS stylesheet and some Javascript code in the head tags. I was a little unsure whether Discourse would permit Javascript customization but was really encouraged reading the Beginner’s guide & seeing how much scope there was for modifications. We’re using a remote theme (Sam’s Simple Theme) and I’ve tried to add our code to the site header as a new component:

image
image935×286 9.67 KB

image
image1100×235 14.1 KB

I haven’t been able to get this up & running yet but thought I’d solved it yesterday, reading up on plugins & switching out our JS type value to “text/discourse-plugin” version=“0.8.13”; I’ve also tried to solve around the slight variables of relocating the CSS (linking the sheet directly instead of as a DOI; copying the tags directly into the CSS space; including as Embedded CSS, etc) without any luck - posts with wrapped links still appear without a popup:

image
image987×272 10.9 KB

Any guidance much appreciated here!, & I’ll bump this post if I stumble on a solution in the meantime.

4

Can you share a screenshot of your browser’s javascript console and the Network tab. It could be a Content Security Policy (CSP) issue which is preventing the js code to be loaded on the page.

2 Likes
6

TY Faizaan :slight_smile: Including a screenshot below, can’t immediately see a CSP issue but happy to try another machine if it might help:

image
image1920×972 87.1 KB

Have glanced at the code & it does look like there’s some sort of overwrite preventing the Javascript tags pictured in the screenshot in the earlier post from being incorporated:

image
image1307×91 15.4 KB

I’m not 100% sure whether this is a result of switching out the script-type value from text/javascript to text/discourse-plugin; have a feeling it wasn’t working with the original value, & there’s no longer a pointer to the JS DOI indicated in the Component code.

TY for support with this one - wonder if it might end up being easier to try to configure the fuller API if more problems getting the individual links up & running.