カスタムHTMLにウィジェットを挿入

[B-iggy]

こんにちは、
もしすでに答えがどこかにあるならごめんなさい。数時間探しましたが、自分で見つけられませんでした。

ウィジェットとコンポーネントの意味は理解できたと思いますが、見つけた例はすべて似たような構造でした。
ウィジェットやコンポーネントは、既存のコンポーネントや既存のコネクタ、アウトレットにフックされるものばかりです。

私がやりたいこと：
Dark/Light Toggler コンポーネント を使用していますが、ユーザーにとって見つけるのが直感的ではありません。
他のテーマスイッチャーコンポーネント（私のものも含めて）は、常に既存の Discourse 要素（ヘッダー、リンク、ナビゲーションなど）にアタッチされています。

しかし、私はそれを独自の HTML、つまり独自のサイドバーに入れたいのです：

画面に表示されている私のサイドバーは以下のようになっています：

	<div class="row">
		<div class="sidebar-counterTitleWrapper">
			<div class="sidebar-counterRefreshIcon" type="success" size="medium" circle>
				<svg class="far fa-sync fa d-icon d-icon-sync svg-icon svg-node">
					<use xlink:href="#sync"></use>
				</svg>
			</div>
			<h3 class="sidebar-counterTitle">
				HWS のオンラインプレイヤー
			</h3>
		</div>
		<div class="sidebar-counterServers">
			<span class="sidebar-counterPlayer">HWS EU:</span>
			<strong class="sidebar-counterPlayer--eu">
			</strong>
		</div>
		<div class="sidebar-counterServers">
			<span class="sidebar-counterPlayer">HWS NA:</span>
			<strong class="sidebar-counterPlayer--na">
			</strong>
		</div>
		<div class="sidebar-counterServers">
			<span class="sidebar-counterPlayer">HWS RE:</span>
			<strong class="sidebar-counterPlayer--re">
			</strong>
		</div>
		<br>
		<h4 class="sidebar-server-title">サーバー時間</h4>
		<div class="sidebar-server-time"></div>
	</div>
	<hr class="content-textLine">
	<div class="need-help-wrapper">
		<a href="https://help.hws.global" title="HWS ヘルプ">
		    ヘルプが必要ですか？
		</a>
		<hr class="content-textLine">

どうすれば実現できますか？
理想的には、以下のような形になるはずです。

<script type="text/discourse-plugin" version="0.8">
  const h = require("virtual-dom").h;

  api.createWidget("my-dark-light-widget", {
    tagName: "div.my-widget",

    // ダーク/ライト関連の処理
  });
</script>

そして、それを独自の HTML に以下のように注入します。

<script type="text/x-handlebars" inject-to-my-class-selector(.sidebar-counterTitleWrapper)>
  {{mount-widget widget="my-dark-light-widget"}}
</script>

これは私が何か簡単なものを見落としているだけだと思っています…
ご助力いただければ幸いです！

[Johani (Joe)]

サイドバーの HTML をどのように追加していますか？plugin-outlet に追加されていますか？

[B-iggy]

@Johani さん、こんにちは。
返信ありがとうございます。
私のテーマのヘッダーに追加します。

[Johani (Joe)]

テーマのヘッダータブに生の HTML を追加すると、ここに加算されます
discourse/app/views/layouts/application.html.erb at 13b31def80c1f1262bf6fd21226c0639dcfabb13 · discourse/discourse · GitHub

これはアプリケーションの外側にあるため、以下のようなものは使用できません。

{{mount-widget widget="my-dark-light-widget"}}

生の HTML を追加する代わりに、above-site-header プラグインアウトレットを使用してください。同じ場所に挿入されるため、視覚的には同じように表示されます。

以下のような形式です。

<script type="text/x-handlebars" data-template-name="/connectors/above-site-header/my-sidebar">
  HTML をここに追加
  {{mount-widget widget="my-dark-light-widget"}} をマークアップ内の任意の場所に挿入できます
</script>

[B-iggy]

いつも素晴らしいご回答をありがとうございます。そのおかげで、学べる形で教えていただけたことにも感謝しています！
あなたの助けのおかげで、とても簡単にできましたし、コンポーネントウィジェットを2回目に使うことさえできました。