BenDMyers / showmy.chat

On-demand themed Twitch chat overlay generator

https://showmy.chat

86 stars 24 forks source link

Allow users to bring their own styles #78

Closed NickyMeuleman closed 2 years ago

NickyMeuleman commented 2 years ago

Allow users to provide their own CSS. That way they can either tweak a theme to their liking, or even use it to bring their own custom theme. (maybe this can be used to build custom themes on a base of #44)

This raises a few security questions. It would mean executing CSS on the user's device. While CSS is probably fine, executing any code that can be user-supplied warrants a closer look at how that is handled.

BenDMyers commented 2 years ago

Hey, @NickyMeuleman! Can you let me know what you're imagining this experience to be like?

NickyMeuleman commented 2 years ago

I was thinking about an optional way to load a (local) .css file. That way you could use showmy.chat without having to stick strictly to the pre-defined themes.

This wouldn't replace the pre-defined themes, but be an optional way to provide CSS rules and supply additions/overrides.

Not sure how that would work yet. But some possible implementation: We may be able to provide another queryparam that does this. Like how the correct theme .css file is chosen now, also add a (local) one if it is supplied.

The filereader API is pretty neat, I use it on https://nickymeuleman.netlify.app/aoc2021-solver/ to let someone "upload" their own input. Upload is in quotes there, because the file never leaves the user's computer and all work is done on their machine.

73 Would be the guide for users to provide their own style rules, how they know what to target.

BenDMyers commented 2 years ago

Gotcha — I thiiiiink this is already supported, through other routes.

If you want to start with a theme and just tweak styles, OBS (and maybe OBS's descendants?) let you inject custom styles into your browser source.

If you'd like to inject a whole dang stylesheet, the theme attribute does support a valid URI. I haven't really tested it with local files, but I have confirmed that it supports any stylesheets hosted publicly and served with the text/css MIME type? (Unfortunately, GitHub's raw viewer serves even stylesheets as text/plain). It'd be worth validating whether this already supports local filepaths out of the box.

NickyMeuleman commented 2 years ago

Nice! Didn't know that. Just tried to load a local file really quick (with some minor changes to the sourcode) and it seems browsers block this for security reasons. The method I tried was using a file:// URI. I tested http://localhost:8080/c/test?DEMO=true&theme=file://home/nicky/projects/showmy.chat/src/test.css and the browser blocked it.

Since using local CSS is possible via the tools you're likely to use showmy.chat with like OBS this is fine. (OBS worked perfectly, really nice)

Didn't test the web-hosted files yet. If that works, feel free to close this issue!

BenDMyers commented 2 years ago

Here's an example of using Pico.css as an external, CDN-hosted stylesheet:

https://showmy.chat/c/NMeuleman?DEMO=true&theme=https://unpkg.com/@picocss/pico@latest/css/pico.min.css

BenDMyers commented 2 years ago

There's a brief comment about this feature in the config docs — https://showmy.chat/docs/configuration/#theme — but it's easy to miss. I think this feature is very cool because not only does it mean folks can build their own themes without having to go through the contributor workflow, it also allows us to provide private themes for folks (and have them be responsible for hosting).

NickyMeuleman commented 2 years ago

It's awesome and was exactly what I was thinking of when I created this issue!