Plugin Outlets での URL encoding

[bruno_at_dq]

Discourse-hosted コミュニティの管理者は、バッジに LinkedIn シェアボタンを追加しようとしています。

そのために、このプラグインアウトレット を使用しようとしています。次のコードをテーマの head セクションに含めました。

<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>

href 属性に注意してください: https://www.linkedin.com/profile/add?certUrl=https://community.my_community.io/{{@outletArgs.url}}。

@outletArgs.url の値は https://community.my_community.io/badges/<badge_id>/<badge_name>?username=<username> のようになります。username=<username> の部分に注目したいと思います。

URL はエンコードされておらず、等号は文字通り渡されるため、ブラウザが https://www.linkedin.com/profile/add?certUrl=https://community.my_community.io/https://community.my_community.io/badges/<badge_id>/<badge_name>?username=<username> を処理すると、=<username> は無視されます。

ここで URL をエンコードするにはどうすればよいですか？

[bruno_at_dq]

以下のように Discourse Theme CLI を使用してこれを処理しました。

• 新しいテーマを作成し、コンポーネントにしました (discourse_theme new を実行し、プロンプトに従いました)。

• javascripts/discourse/connectors/badge-contents-top で、以下に近い内容の JavaScript ファイルを作成しました。

  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);
    }
  }
  

• 上記と同じディレクトリに、質問のスクリプトタグのおおよその内部 HTML を含む Handlebars ファイルを作成しました。

  • このファイルと前のファイルに、拡張子を除いて同じ名前を付けました。

[merefield (Robert)]

@bruno_at_dq

@service siteSettings;

これの適用例が見当たりません。冗長ですか？

[bruno_at_dq]

はい！それに気づいてくれてありがとうございます。