kbcd.net

Adding Remark42 for comments functionality

I was thinking about adding a comments functionality to the site for some time already, but I wasn't really sure if it was even possible on a static website, and how to combine it with Pelican. Well, it turns out, it's actually not that difficult at all!

I found Remark42. A privacy-focused lightweight commenting engine. The recommended way is to spin up a docker container for the backend server. This works perfectly for my setup. On the "frontend" (in my case Jinja2 templates, which Pelican uses to generate its layout), you paste a small JS snippet to your base template and another HTML snippet to your articles' snippet where Remark42 will insert itself when the page loads.

Now, to the part which wasn't so obvious - theming the thing. By default, Remark42 has only two themes, light, and dark and to my knowledge no "easy/direct" way to define custom colors. The default colors are nice and I believe work great for simple dark/light websites, but if you have a custom theme or use different colors on your website, it just doesn't fit in...

So how did I fix this? I have to admit, I vibe-coded this a bit, or at least let Gemini figure the colors for me. In the project's source tree there is the directory /frontend/apps/remark42/app/styles/ with two files: custom-properties.css and global.css. In the custom-properties.css there are custom variables which (as I understand) influence colors of the various elements of the UI. The thing is, there aren't any comments which would say "--color8 is the background color of the form, and --color35 is for this etc." (Note: there are vars like --primary-color, --error-background, which are self-explanatory). Or maybe there are comments somewhere, I just haven't found them. Tell me if there are.

What I did was, I took the custom-properties.css file, gave the contents to Gemini and also gave it my site's css color variables and told it to modify the file so it fits with my colors.

After that I cloned the repo, modified the custom-properties.css file and built the "custom themed" docker image. And honestly, I think it did a pretty good job. So if anyone is trying to theme Remark, try this "vibe-coded remark colors" approach.

Anyhow... Why did I add comments in the first place? Well, I thought that if someone found something useful on this website, but had questions, or maybe wanted to say "Hi!" or "Thanks!" or "You <insert bad word>", then it would be nice to have that option.

For any questions, you can ask them in the comments now. Yay! 😎

(PS: I haven't set up notifications for the comments, so I apologize in advance if I don't answer)


Comments loading...
A badge of the World Wide Web