[Feature] Different styling for asides inside posts

[filipesmedeiros]

Is your feature request related to a problem? Please describe.

When using GoToSocial, sometimes media couldn't be federated for whatever reason, although the post itself was. Currently, in these cases, the server stores a link to the original media and presents a "fallback" text format of the media, as seen below.

This fallback presentation is put inside an <aside> tag. Right now it's rendered with the exact same CSS.

This is the code (sorry I couldn't put it inside a <details> because it's code).

<div lang="en" dir="auto" class="inner-content"><p>Europe is a place where diverse cultural and religious identities are honored.</p><p>Respect and tolerance are the founding values of our societies.</p><p>Therefore, we must stand up against anti-Semitism and anti-Muslim hatred, whenever we encounter it.</p><p>We are stepping up action against hatred through additional funding and reinforcing action across a variety of policies.</p><p>This is a call for action to all Europeans → <a href="https://europa.eu/!N6jPyN" rel="nofollow noopener noreferrer" target="_blank" class="has-url-text"><span class="invisible">https://</span><span>europa.eu/!N6jPyN</span><span class="invisible"></span></a></p><aside><p>Note from social.filipesm.eu: 4 attachments in this status could not be downloaded. Treat the following external links with care:</p><ul><li><a href="https://social.network.europa.eu/system/media_attachments/files/111/534/065/571/435/038/original/d5ae9424da426a98.png" rel="nofollow noreferrer noopener" target="_blank">d5ae9424da426a98.png</a> [A visual resembling a hand-written note, entitiled 'Article 2, Treaty on European Union'. The Union is founded on the values of respect for human dignity, freedom, democracy, equality, the rule of law and respect for human rights, including the rights of persons belonging to minorities. These values are common to the Member States in a society in which pluralism, non-discrimination, tolerance, justice, solidarity and equality between women and men prevail.]</li><li><a href="https://social.network.europa.eu/system/media_attachments/files/111/534/066/690/432/639/original/036a4bef90650669.png" rel="nofollow noreferrer noopener" target="_blank">036a4bef90650669.png</a> [A visual resembling a hand-written note, quoting Nelson Mandela, Anti-apartheid activist, President on South Africa (1994-1999). “Safety and security don't just happen, they are the result of collective consensus and public investment. We owe our children, the most vulnerable citizens in our society, a life free of violence and fear”]</li><li><a href="https://social.network.europa.eu/system/media_attachments/files/111/534/067/428/046/336/original/13f682096d27ab75.png" rel="nofollow noreferrer noopener" target="_blank">13f682096d27ab75.png</a> [A visual resembling a hand-written note, quoting Helen Keller, American author and political activist, Disability rights advocate. "Alone we can do so little, together we can do so much".]</li><li><a href="https://social.network.europa.eu/system/media_attachments/files/111/534/068/651/421/441/original/75a69b20814694a3.png" rel="nofollow noreferrer noopener" target="_blank">75a69b20814694a3.png</a> [A visual resembling a hand-written note, quoting Elie Wiesel, Nobel laureate, Holocaust survivor: "What hurts the victim most is not the cruelty of the oppressor, but the silence of the bystander”.]</li></ul><p></p></aside></div>

Describe the solution you'd like
Maybe we could give it a slightly less prominent look? Maybe faded color and smaller font size?

Describe alternatives you've considered
Just dealing with it ahah

Additional context
This is using GTS, but I suppose having a special more subtle style for asides is good in general?

[cheeaun]

Wondering if you're aware of other clients doing special handling of this?

Adding my own quick notes here:

• Can't really style it too differently as <aside> is still quite generic. It's not contextual enough to have specialised styling, unless it has a special class name or we "understand" the text first 🫣. Semantically it could have been wrapped in a <small> tag.
• Instead of inline non-user-generated "note", GTS could have stashed it inside media_attachments key of the post object. On Mastodon, media attachments have urls from both local and remote. Most clients, including Phanpy, I assume, do multiple fallbacks to load the media due to cases like slow connection, broken image links, sometimes-missing local media URLs etc. Some Mastodon/non-Mastodon instances already have such (broken) cases. However, I do understand GTS does this inline note to prevent loading of remote media attachments due to privacy reasons.

[filipesmedeiros]

I will show them this post of yours! Since this issue is about styling <aside>s, feel free to close it if you want!

[tsmethurst]

Instead of inline non-user-generated "note", GTS could have stashed it inside media_attachments key of the post object.

We tried this but unfortunately this makes a few clients behave in glitchy ways, because they don't handle the unknown media type properly, despite it being legit mastodon API stuff. So we went with injecting it into the post instead, since that's prettymuch guaranteed to be compatible across all clients. I'll try wrapping it in <small> as well and see how it looks...

[filipesmedeiros]

Also, let me just say, thank you to both of you for the work. In this case, especially @cheeaun because of the extra work on trying to support a server that technically is unsupported (GtS). It means a lot and I believe that this interoperability is amazing.

It kinda makes me sad that we are relying so much on Mastodon and their API, but I think it's a decent trade-off to make.

[cheeaun]

@tsmethurst ahh got it. I'm also aware that other clients not handling them well 😬. I had to fix the attachment bugs when I saw them on Phanpy too 😆

As for using <small>, I think that there'll still be other clients that don't style or parse them as intended. Phanpy is not the most-widely-used client, compared to Mastodon apps, Ivory, Ice Cubes and Elk, so I'm not sure if this change would make much difference(?)

I'm also not sure if Mastodon whitelists <small> in their HTML sanitization code. Mobile apps definitely have their own HTML parsers and whitelist specific tags too. Elk also has one to prevent XSS and render basic Markdown formatting. Phanpy doesn't have this (yet) 🫣

[filipesmedeiros]

Just for the sake of conversation continuity I'll ask here, but move out to GoToSocial asap: @tsmethurst would it be worth it to have a toggle in the config/settings that allowed admins to choose between an <aside> or media_attachments? You implied the code for media_attachments was already written (at least partially), so the effort to have the toggle might be relatively low? Not sure

[tsmethurst]

would it be worth it to have a toggle in the config/settings

Hmmm I'm not sure, it seems a bit fiddly to add an extra setting just for that (which most folks will probably never touch). I'll discuss it with the other devs.

I'm also not sure if Mastodon whitelists in their HTML sanitization code

But that's fine, this text will never appear in Mastodon, it's only ever shown via the GoToSocial API, not federated. We specifically replace unknown attachment types in the JSON when serializing via the API.

[filipesmedeiros]

@tsmethurst sounds good! Should we open an issue in GTS, or not worth it? Since this seems like more of a GTS discussion, do you want to close this one @cheeaun?

[tsmethurst]

I'll make a GtS issue for it and link back to this one, no worries.