בעיות בהוספת רכיב CSS/JS: חיזוק קישורים לשמירה על פונקציונליות הקישור

מפתח

סיכום מבוסס בינה מלאכותית

MSH is trying to implement a CSS/JS component — the Robustify tool — on their Discourse forum to enable tooltip pop-ups for hyperlinks, allowing users to access archived versions of broken links. They’ve added the required code (CSS and JS) via a remote theme component, experimenting with script types (including text/discourse-plugin) and CSS embedding methods, but the pop-ups aren’t appearing. fzngagan suggests checking the browser’s JavaScript console and Network tab for CSP issues. MSH shares screenshots showing no obvious CSP errors but notes the JS code may be getting overwritten or not loaded — possibly due to switching script types or missing DOI references. They’re considering switching to the full Robustify API if component-level implementation proves too difficult. The goal is to preserve link functionality over time, especially for archived or unmaintained pages.

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.

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

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.