Styling remark42 using a reverse proxy
|Some time ago whilst prototyping this website I was looking to add the ability to comment under articles. That's when a friend of mine recommended me remark42 - a "Privacy-focused lightweight commenting engine". Everything was going well up to the point where I wanted to style it in the theme of my website.
"Why style it?" you may ask? For starters, the default themes looked HIDEOUS.
This is when I've encountered the first major roadblock. Remark DOES NOT support custom css. The first thing that came to mind was a nasty javascript solution that listened to the "DOMNodeInserted" event and injected the custom css directly. The second one was not so obvious, and relied on literally MITM (man in the middle)-ing the stylesheet using a proxy (nginx in my case) and changing the desired parameters.
This could be done by exposing the old stylesheet on a different url
i.e. "/web/remark-old.css", then importing it in the new stylesheet using
the import rule
@import url("/web/remark-old.css");,
and exposing it on the original url.
Example nginx config.
With remark running on port 8080 and the proxy target being /remark/
location /remark/ {
proxy_redirect off;
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Access-Control-Allow-Origin *;
# expose the old stylesheet on a different url
location = /remark/web/remark-old.css {
proxy_pass http://127.0.0.1:8080/web/remark.css;
}
# use the new one as the original
location = /remark/web/remark.css {
try_files /assets/css/remark.css =404;
}
proxy_pass http://127.0.0.1:8080/;
}
NOTE: I also proxy a custom js file, because the original one had was adding additional 20px in the height calculations, which was messing up the navbar alignments. When proxying a js file, remember to specify the correct mimetype, otherwise things just don't work.
location = /remark/web/remark.mjs {
add_header Content-Type application/javascript;
try_files /assets/js/remark.mjs =404;
}
Conclusions
The modified css and js files are available for download here and here. If you've found this useful, you might wanna check out my other articles and let me know about any mistakes I've made here in the comments below.
< Previous |
Next > |