Myspace Mode - Chapter 1: User Custom CSS

[sneakers-the-rat]

This is the first PR of Myspace Mode.

This PR adds the ability to set user-custom CSS in the profile settings page, and it is then applied on the account page.

Wiki page: https://wiki.neuromatch.social/Myspace_Mode

Implementation

Implementation is just about as straightforward as you can be. Added a nullable text column to an account, added it to a form, put it in the haml template when viewing that account's page.

re: the name - i didn't want to just call it css or custom_css because i also want to add the ability to add css that gets applied for you when you are viewing the rest of the site - so "public account css that styles your profile" and "let me tweak the way masto looks for myself real quick" as two separable things

TODO

• [x] Force HAML rendering when navigating within the webapp - I think (???) the HAML template version of the page is only loaded when you go to the URL directly, rather than navigate within the app, which is sort of ok but sucks. There has got to be a way to force the template to render when navigating with the react router
  • we might need to do it as a .scss import in the account profile component to get it to force re-render on enter and exit if we don't want to just force a full refresh every time...? https://blog.logrocket.com/react-dynamic-imports-route-centric-code-splitting-guide/
  • ended up using helmet and using the react AccountHeader to render it, but that makes it harder to test... it does work when navigating within a session though :)
• [x] Sanitize CSS
  • it ends up making it not possible to modify the theme variables, but you can still override everything else like normal
• [x] Code highlighting? I found a really lightweight highlighting thing: https://github.com/WebCoder49/code-input and it can just use Prism.js - since the form is all haml and ruby and not React i didn't know how to use like a react-based one, but this one would be like ~7-8kb of JS overhead and can be applied to just the textbox. not sure if worth it, since idk people can just use any other editor and copy/paste it in
• [x] Write wiki page
  • Common CSS targets u might want to hit
• [x] ... ?

[sneakers-the-rat]

ok @hobgoblina this works now, with css changing on page transitions and not requiring haml embeds and stuff, but i can't get the test to work, it seems to not be running the before do block or something? if you have any idea why that's not working we can fix it, otherwise there are only like 8 end to end tests in masto and it might be ok to not have it? the react testing sorta sucks