Injetar Widget em HTML personalizado

[B-iggy]

Ei,
desculpe se a resposta já está esperando por mim em algum lugar, mas após horas não consegui encontrar e descobrir por conta própria.

Então, acho que entendi o significado de widgets e componentes, mas todos os exemplos que encontrei foram construídos de forma semelhante.
Um widget ou componente é acoplado a um já existente ou a um conector ou saída existente.

O que estou tentando fazer:
Estou usando o componente Alternador de Tema Escuro/Claro, mas não é intuitivo para os usuários encontrá-lo.
Outros componentes de alternador de tema (incluindo o meu próprio) estão sempre anexados a um elemento existente do Discourse (cabeçalho, links, navegação, etc.).

Mas eu quero que ele esteja no meu próprio HTML. Na minha própria barra lateral:

Minha barra lateral que você vê na tela parece assim:

	<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">
				Jogador online no 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">Hora do Servidor</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 Obter ajuda">
		    Precisa de ajuda?
		</a>
		<hr class="content-textLine">

Como posso fazer isso?
Idealmente, seria algo como

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

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

    // coisas de escuro/claro
  });
</script>

e depois injetando isso no meu próprio HTML assim:

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

Acho que é algo simples que estou apenas perdendo…
Qualquer ajuda é apreciada!

[Johani (Joe)]

Como você está adicionando o HTML para sua barra lateral? Ele é adicionado no plugin-outlet?

[B-iggy]

Olá @Johani,
obrigado pela sua resposta.
Estou adicionando no meu tema > cabeçalho

[Johani (Joe)]

Ao adicionar HTML bruto na aba de cabeçalho do seu tema, ele é inserido aqui:

app/views/layouts/application.html.erb

Isso está fora do escopo da aplicação. Portanto, você não pode usar coisas como:

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

Em vez de adicionar HTML bruto, use o plugin-outlet above-site-header. Ele é inserido no mesmo local, então visualmente deve parecer o mesmo.

Algo assim:

<script type="text/x-handlebars" data-template-name="/connectors/above-site-header/my-sidebar">
  adicione seu HTML aqui
  Você pode inserir {{mount-widget widget="my-dark-light-widget"}} em qualquer lugar do markup
</script>

[B-iggy]

Maravilhoso, como sempre, obrigado por dedicar seu tempo a responder de uma forma que também ensina!
Com sua ajuda, ficou muito fácil e eu consegui até mesmo usar o widget de componente uma segunda vez.