Custom Components -- add button or text at any plugin outlet

[pfaffman (Jay Pfaffman)]

	Summary	Add button or text anywhere
	Repository	REPOSITORY_LINK
	Install Guide	How to install a theme or theme component
	New to Discourse Themes?	Beginner’s guide to using Discourse Themes

Install this theme component

Add a link button or arbitrary text at any plugin outlet.

I started developing this plugin for someone who wanted to display a “click this button to subscribe so that you can send PMs” button on user profiles and user cards. They wanted the button to display if the user couldn’t send PMs. Because I’m not always as clever as I’d like to think, I wrote the component using groups to determine whether the button was displayed. One problem with this approach was that staff members weren’t in the subscriber group, so they’d get the “you gotta subscribe” button even though they could send PMs. Also, the group was hidden, so it was impossible to use it in a theme component anyway. I re-wrote that theme component to use currentUser.can_send_private_messages to determine whether to display the button.

Who is this for?

If you want to put a button with a link in it, or some arbitrary text that is displayed or hidden for certain groups, this will let you insert them at any plugin outlet. You want to add a “You outa subscribe” link button between every message except for those who aren’t members? This will do it. You want to stick some arbitrary HTML at a plugin outlet, just to see what it’ll look like? This will do that.

How it helps developers

This theme has some simple examples of how to:

• use the Objects type for theme setting
• use api.renderInOutlet (as described here to stick a Glimmer component at an outlet controlled by a setting rather than creating a file in the connectors directory
• Write a simple Glimmer component that accesses currentUser
• Wrap a component in another (inline) template to be able to pass data to it
• Display arbitrary HTML from a theme setting free of the constraints of Markdown–Sure, maybe

@Discourse

You can use the Ember’s html-safe helper here and it will render the HTML instead of the text.

but if you’re trying to do it inside of a <template> inside of a .gjs file, it works a little differently (like {{htmlSafe component.text}})

[NateDhaliwal]

Space makes the text not bold.

---

Great component!