Inyectar Widget en HTML personalizado

[B-iggy]

¡Hola!
Lo siento si la respuesta ya estaba esperándome en algún lugar, pero después de horas no pude encontrarla ni resolverlo por mi cuenta.

Creo que entendí el significado de widgets y componentes, pero cada ejemplo que encontré tenía una estructura similar.
Un widget o componente se acopla a uno ya existente o a un conector o salida predefinido.

Lo que estoy intentando hacer:
Estoy usando el componente alternador de modo oscuro/claro, pero no es intuitivo para los usuarios encontrarlo.
Otros componentes de cambio de tema (el mío incluido) siempre están adjuntos a un elemento existente de Discourse (encabezado, enlaces, navegación, etc.).

Pero quiero colocarlo en mi propio HTML, en mi propia barra lateral:

Mi barra lateral se ve así en pantalla:

	<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">
				Jugadores en línea en 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 del 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 Obtener ayuda">
		    ¿Necesitas ayuda?
		</a>
		<hr class="content-textLine">

¿Cómo puedo hacerlo?
Idealmente, sería 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",

    // lógica de modo oscuro/claro
  });
</script>

Y luego inyectarlo en mi propio HTML así:

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

Creo que es algo sencillo que solo se me escapa…
¡Agradezco cualquier ayuda!

[Johani (Joe)]

¿Cómo estás agregando el HTML para tu barra lateral? ¿Se agrega en plugin-outlet?

[B-iggy]

Hola @Johani,
gracias por tu respuesta.
Lo estoy agregando en mi tema > encabezado

[Johani (Joe)]

Cuando agregas HTML sin procesar en la pestaña de encabezado de tu tema, se inserta aquí:

app/views/layouts/application.html.erb

Esto está fuera de la aplicación. Por lo tanto, no puedes usar cosas como:

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

En lugar de agregar HTML sin procesar, utiliza el plugin-outlet above-site-header. Se inserta en el mismo lugar, por lo que debería verse igual visualmente.

Algo como esto:

<script type="text/x-handlebars" data-template-name="/connectors/above-site-header/my-sidebar">
  agrega tu HTML aquí
  Puedes insertar {{mount-widget widget="my-dark-light-widget"}} en cualquier parte del marcado
</script>

[B-iggy]

¡Genial, como siempre, gracias por tomarte el tiempo de responder de una manera que también enseña!
Con tu ayuda fue muy fácil y pude incluso usar el widget de componente una segunda vez.