Content Warning Module

[DrewBrasher]

I would like to create a module that would add a content warning (CW) feature. People use this type of feature a lot on platforms like Discord and Mastodon to hide content that some people might not want to see until they select that they want to see it. I think a feature like this would be especially useful in a blog site.

I'm trying to think about the best way to implement something like this so if anyone has any ideas let me know.

Some things I'm considering are:

• When you enable the feature, should that add the option to put a CW on every content type or should there be a settings page where you specify which content types have the option for a CW?
• I think it would be good if entire content items could have a CW but also a way to just hide sections of text. Discord does this when you enclose the text in double pipes (||). Maybe this could be a shortcode in the OC module.
• Maybe there should be a way for users to turn off CW for themselves if they don't care about that and don't want to have to click to see content.

Update on 2024-05-31: I've started building this. The repository is https://github.com/DrewBrasher/OrchardCoreModules

[Piedone]

Late to the party but I just noticed this topic.

Are we talking about something like an NSFW warning?

I'd handle this on the client side: e.g. add a blur overlay onto the content item's div with a button to show the content (and that'd also save it to local storage that you already set that particular item to show).

Otherwise, I'd do this as a content part with an editor checkbox to add a CW to the whole item. Otherwise, perhaps a shortcode to use it for just selected pieces of text/body would work?

[DrewBrasher]

Yes, I'm talking about something that could be used for NSFW warning as well as other things like movie spoilers and trigger warnings.

I think doing both the content part and the short code would be good because sometimes just a small piece for text needs a CW and sometimes the whole content might need it.

One thing I need to look into more is how to handle when people are using accessibility features like a screen reader. In that case I think it should read the warning and wait to for some kind of confirmation before reading the content. I'm not sure how this is handled on other platforms that use content warnings.

[ns8482e]

This can be achieved by creating a Part with ContentPicker field. Logic could be similar to FormPart where when a Part is attached, a ContentDriver will add a wrapper shape around the content. In wrapper you could render selected content item from content picker and show/hide/blur the original content using css/js

[Piedone]

I can't check now, but I think it might be possible to wrap content zones (it certainly is possible to wrap global - layout - zones), like Content (where the body of a content item is displayed). Check out with Shape Tracing if there's an existing wrapper.

If not, then you can run the debugger with an IShapeDisplayEvents implementation to see if DisplayingAsync is called for a content zone. Even if not, it'll be called for the Content shape, at which point you'll be able to access the shape to be displayed in its Content zone in the Content property (yes, both are "Content") and add a wrapper on it directly.

[DrewBrasher]

@Piedone Thank you, I'll try that.

[DrewBrasher]

After enabling shape tracing and looking at the rendered html closer I think the wrapper is fine the way it is. It is already not wrapping the title in the detail view. I think I just got confused because it does wrap the whole thing including the title in the summary view but now I'm thinking that the summary view should not even be wrapped in a warning because only the title and subtitle are displayed anyway.

The issue in the detail view is that the script and stylesheet elements don't get rendered properly for some reason. they are rendered like this:

<style asp-src="~/DrewBrasher.OrchardCore.ContentWarning/ContentWarning.css"></style>
<script asp-src="~/DrewBrasher.OrchardCore.ContentWarning/ContentWarning.js" at="Foot"></script>

The asp-src= is not getting processed in the detail view but it is in the summary view.

[DrewBrasher]

I think for the summary view, I'll just append the warning message to the end of the summary.

[DrewBrasher]

I fixed the issue with the ContentWarning js and css files not getting loaded in the details view by registering them with the resource manager in the content driver instead of referencing them in the wrapper view.

[DrewBrasher]

Here is an article that describes the kind of behavior I would like to implement including accessibility consideration:
https://www.aaron-gustafson.com/notebook/considering-content-warnings-in-html/

and here is the codepen from that article: https://codepen.io/aarongustafson/pen/QWZpqPe

[hishamco]

As expected

[Piedone]

Sanitization should probably happen after shortcodes are rendered though, since the point of shortcodes is to provide alternative dynamic behavior that you otherwise can't achieve with a restricted editor.

[DrewBrasher]

Sanitization should probably happen after shortcodes are rendered though, since the point of shortcodes is to provide alternative dynamic behavior that you otherwise can't achieve with a restricted editor.

@Piedone Is there already an open issue for this or should one be created?

[Piedone]

I don't think there is one, please open one.

[DrewBrasher]

Opened issue #16226