Inserisci Widget in HTML personalizzato

[B-iggy]

Ciao,
scusa se la risposta era già da qualche parte per me, ma dopo ore non sono riuscito a trovarla e a capirla da solo.

Quindi penso di aver capito il significato di widget e componenti, ma ogni esempio che ho trovato era costruito in modo simile.
Un widget o un componente viene agganciato a uno già esistente o a un connettore o un’uscita già presenti.

Quello che sto cercando di fare:
Sto usando il componente Dark/Light Toggler, ma non è intuitivo per gli utenti da trovare.
Altri componenti per il cambio tema (il mio incluso) sono sempre attaccati a un elemento esistente di Discourse (intestazione, collegamenti, navigazione, ecc.).

Ma io vorrei inserirlo nel mio HTML, nella mia barra laterale:

La mia barra laterale che vedi sullo schermo è così:

	<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">
				Giocatori online su 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">Ora del server</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 Ottieni aiuto">
		    Hai bisogno di aiuto?
		</a>
		<hr class="content-textLine">

Come posso farlo?
Idealmente, sarebbe qualcosa come

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

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

    // cose relative a dark-light
  });
</script>

e poi iniettarlo nel mio HTML come

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

Penso che sia qualcosa di semplice che mi sfugge…
Qualsiasi aiuto è apprezzato!

[Johani (Joe)]

Come stai aggiungendo l’HTML per la tua barra laterale? Viene aggiunto in plugin-outlet?

[B-iggy]

Ciao @Johani, grazie per la tua risposta.
Lo sto aggiungendo nel mio tema > header

[Johani (Joe)]

Quando aggiungi HTML grezzo nella scheda header del tuo tema, questo viene inserito qui
discourse/app/views/layouts/application.html.erb at 13b31def80c1f1262bf6fd21226c0639dcfabb13 · discourse/discourse · GitHub

Questo si trova al di fuori dell’applicazione. Quindi, non puoi utilizzare cose come

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

Invece di aggiungere HTML grezzo, utilizza il plugin-outlet above-site-header. Viene inserito nello stesso punto, quindi dovrebbe apparire visivamente identico.

Qualcosa del genere

<script type="text/x-handlebars" data-template-name="/connectors/above-site-header/my-sidebar">
  inserisci qui il tuo HTML
  Puoi inserire {{mount-widget widget="my-dark-light-widget"}} ovunque nel markup
</script>

[B-iggy]

Fantastico, come sempre, grazie per il tempo dedicato a rispondere in modo tale da insegnare allo stesso tempo!
Grazie al tuo aiuto è stato molto semplice e sono riuscito a utilizzare il widget del componente una seconda volta.