Category specific Disclaimer

Development

AI-generated summary

The discussion is about adding a category-specific disclaimer in Discourse. nstoecki42 attempted to add a banner above each post in a specific category using a script, but it resulted in the post content being blank.

Arkshine suggested that the issue was due to an error, likely caused by the non-existent find method in the helper. They provided alternative solutions using the h helper or raw HTML, and explained how to add HTML before the cooked content.

nstoecki42 confirmed that Arkshine’s solution worked, and used the post:before widget to display the disclaimer text above all posts in the specified category.

1

Hi,

I tried to add a Disclaimer on a specific Category. I had the Idea to have a “banner” - like
This is User's first post - let's welcome the new member to our community!
or
It's been a while since we've seen USER - the last post was 1 year ago.
above each Post.

I tried to archive this with:

common/head_tag.html 
<script type="text/discourse-plugin" version="0.8">
  api.decorateWidget('post:after', (helper, args) => {
    if (args.topic.category_id === 51) {  // My Category
      const $post = helper.find('.cooked');
      const disclaimerText = api.decorateCooked(helper, args, settings.MY_DISCLAIMER);
      $post.prepend(`<div class="disclaimer">${disclaimerText}</div>`);
    }
  });
</script>

Just to be complete here is the

settings.yml 
MY_DISCLAIMER:
  type: string
  default: 'This is a Category that comes with limited warranty and is to be used at your own risk.'
  description: Disclaimer Text for Category

and there is also common/common.scss with the .disclaimer class in it.

But when I active that the Post itself is no longer shown, the content area is just blank.

Thanks for any help!

2

Is it blank in the source too?

3

Hi, welcome back!

If you see blank, it’s because you have an error. find doesn’t exist in the helper.
You can usually see that in the browser console (F12).

You probably want something like that:

api.decorateWidget('post:before', (helper, args) => {
    if (helper.widget.model.topic.category_id === 51) {
        return helper.h("div.disclaimer", settings.MY_DISCLAIMER)
    }
});

or using raw HTML:

const RawHtml = require("discourse/widgets/raw-html").default;

api.decorateWidget('post:before', (helper, args) => {
    if (helper.widget.model.topic.category_id === 51) {
         return new RawHtml({html: `<div class="container">${settings.MY_DISCLAIMER}</div>`})
    }
});

You can read this post explaining how this h helper works.

You can do the following if you want to add some HTML before the cooked content:

api.decorateWidget('post-contents:before', (helper, args) => {
    const { topic } = helper.widget.findAncestorModel();

    if (topic && topic.category_id === 51) {
         return helper.h("div.disclaimer", settings.MY_DISCLAIMER);
    }
});
4

Thanks @Arkshine, that helpt a lot!

I used the following Code due to I want to display the Text above all like the other, mentioned banners.

api.decorateWidget('post:before', (helper, args) => {
    if (helper.widget.model.topic.category_id === 51) {
        return helper.h("div.disclaimer", settings.MY_DISCLAIMER)
    }
});

Greetings!