URL encoding في Plugin Outlets

[bruno_at_dq]

I’m trying to add a LinkedIn share button to badges in a Discourse-hosted community I’m an admin in.

To this end, I’m trying to use this Plugin Outlet. I included the following code in the head section of a theme.

<script type='text/x-handlebars' data-template-name='/connectors/badge-contents-top/linkedin-button'>
  <a href="https://www.linkedin.com/profile/add?certUrl=https://community.my_community.io{{@outletArgs.url}}" class="linkedin-share-button">
    <img src="https://download.linkedin.com/desktop/add2profile/buttons/en_US.png " alt="LinkedIn Add to Profile button">
  </a>
</script>

Please note href attribute: https://www.linkedin.com/profile/add?certUrl=https://community.my_community.io/{{@outletArgs.url}}.

The @outletArgs.url value looks something like https://community.my_community.io/badges/<badge_id>/<badge_name>?username=<username>. I want to focus on the username=<username> part.

The URL is not encoded, the equal sign is being passed literally, so when the browser processes https://www.linkedin.com/profile/add?certUrl=https://community.my_community.io/https://community.my_community.io/badges/<badge_id>/<badge_name>?username=<username>, it ignores =<username>.

How do I encode the URL here?

[bruno_at_dq]

I handled this by using Discourse Theme CLI in the following way:

• Created a new theme and made it a component (ran discourse_theme new and followed the prompts).

• In javascripts/discourse/connectors/badge-contents-top created a JavaScript file with content not far from. . .

  import Component from "@glimmer/component";
  import { inject as service } from "@ember/service";
  
  export default class LinkedinButton extends Component {
    @service siteSettings;
  
    get encodedUrl() {
      return encodeURIComponent(this.args.outletArgs.url);
    }
  }
  

• In the same directory as above, created a Handlebars file that roughly contains the inner HTML from the script tag in the question.

  • I gave this and the previous file the same name, other than their termination, that is, for what it’s worth.

[merefield (Robert)]

@bruno_at_dq

@service siteSettings;

I don’t see an application of this? Is it redundant?

[bruno_at_dq]

Yes! Thank you for catching that.