How to create a custom activity tab in user profile?

Dev
1

I was dabbling with plugin development and while I have been able to make the plugin settings appear on the admin settings page, I am not quite sure how to make the UI elements to appear on the discourse UI.

If someone can point me to the direction of relevant documentation or which files to look at in any existing plugin as reference, then that would be really great.

PS:
I am trying to modify these sections overall.

  1. add a custom string in the (topic meta data) userbit area under the username in the post.
  2. add a button in the posts control area to open a form
  3. add a custom tab on the user profile activity page
  4. add some custom summary information on the user card and user summary stats
1 Like
2

I would recommend using Introducing Discourse developer toolbar .

Then, look for a plugin outlet where you can insert a component:

image

Then you can see for example:

The image shows a navigation bar on a website or application with tabs for Summary, Activity, Notifications, Messages, Invites, and Badges, including a highlighted tab labeled "user-main-nav" in green. (Captioned by AI)
The image shows a navigation bar on a website or application with tabs for Summary, Activity, Notifications, Messages, Invites, and Badges, including a highlighted tab labeled "user-main-nav" in green. (Captioned by AI)1072Ă—137 12.3 KB

Here is a guide about it:

2 Likes
3

Is it possible to request plugin outlets?

I am hoping to insert user reputation rating under their username. Or based on experience what would be a good place to insert it. topic-map-expanded-after?

Screenshot 2025-04-09 at 11.40.29 PM
Screenshot 2025-04-09 at 11.40.29 PM1704Ă—1100 240 KB

1 Like
4

Sure! You can make Dev topic.

It doesn’t show for some reason, but you do have outlets around the post name:

old answer

discourse/app/assets/javascripts/discourse/app/components/post/meta-data/poster-name.gjs at main · discourse/discourse · GitHub

It requires you enable the glimmer post stream mode:

The image shows a settings menu for enabling a new 'glimmer' post stream implementation in 'auto' mode, currently in active development and not intended for production use. (Captioned by AI)
The image shows a settings menu for enabling a new 'glimmer' post stream implementation in 'auto' mode, currently in active development and not intended for production use. (Captioned by AI)649Ă—339 34.4 KB

Then, they appears:

The image shows HTML code where a element displays the name "John Doe" between its opening and closing tags. (Captioned by AI)
The image shows HTML code where a element displays the name "John Doe" between its opening and closing tags. (Captioned by AI)651Ă—213 12.9 KB

1 Like
5

So this outlet would be post-metadata__after, or use renderAfterWrapperOutlet("post-metadata")?

1 Like
6

That would be a good option to try, yes.

1 Like
7

It’s fine to play with this, but please make sure to read the disclaimer in the setting description. This mode is not yet ready for production use. We aren’t even using it on Meta.

For the current post-stream implementation, you’d need to use the old decorateWidget API, or the addPosterIcon API:

2 Likes
8

Sorry, David, I got too excited with the new stuff that I completely disregarded the warning that it’s still under active development. :sweat_smile: I will be careful next time.

2 Likes
9

For this I used the following to render the button.

api.registerValueTransformer("post-menu-buttons", ({ value: dag, context })

Now I am stuck where I am not able to open the modal without errors when using other components.

1 Like