Barra de progreso

[Canapin (Coin-coin le Canapin)]

	Resumen	Añade una barra de progreso a tu sitio
	Vista previa	\[pendiente\]
	Repositorio	\u003chttps://github.com/Canapin/Discourse-progress-bar\u003e
	Guía de instalación	Cómo instalar un tema o componente de tema
	¿Nuevo en los temas de Discourse?	Guía para principiantes sobre el uso de temas de Discourse

Instalar este componente de tema

Barra de Progreso de Discourse

Descripción

Este componente añade una barra de progreso a cualquier salida disponible de tu sitio.

Se utiliza mejor con scripts que actualizan el valor de la barra de progreso automáticamente realizando una solicitud PUT a /admin/theme/[theme_component_ID]/setting con la carga útil {\"name\":\"current_value\",\"value\":\"[yourNewValue]\"}.

La barra de progreso está optimizada para encajar en las siguientes salidas:

• above-main-container
• above-site-header
• before-header-panel
• below-site-header
• before-sidebar-sections

Caso de Uso

Este componente fue desarrollado para mostrar públicamente el progreso de las donaciones en un foro financiado por la comunidad.

Un script personalizado utilizó los webhooks de Ko-fi para actualizar dinámicamente la barra de progreso por cada donación.

Tener una barra de progreso se convirtió en un enorme incentivo para que la comunidad donara.
Anteriormente, solo se utilizaba un tema fijado, y el objetivo de donación se alcanzaba a lo largo de varios meses.
¡Con la barra de progreso, el objetivo de donación se ha alcanzado en un par de días durante los últimos años!

Esta barra de progreso obviamente se puede usar para otros fines. ¡Comparte para qué la usas!

Capturas de Pantalla

Escritorio

above-main-container

before-sidebar-sections

above-site-header

before-header-panel (solo escritorio)

below-site-header

Móvil

above-main-container y below-site-header

before-sidebar-sections

above-site-header

Configuración

Configuración	Descripción
content_before	Texto mostrado encima de la barra de progreso (se permite HTML). Por defecto: \u003cstrong\u003eProgreso de donaciones\u003c/strong\u003e
content_after	Texto mostrado debajo de la barra de progreso (se permite HTML). Por defecto: vacío
progress_bar_width	Ancho del contenedor de la barra de progreso. Por defecto: 50%
progress_bar_height	Altura de la barra de progreso. Por defecto: 10px
max_value	Valor máximo para la barra de progreso. Por defecto: 300
current_value	Valor actual de la barra de progreso. Por defecto: 150
value_display	Formato de visualización del valor mostrado junto a la barra de progreso. Marcadores de posición disponibles: {current}, {max}, {percentage}. Ejemplos:\u003cbr\u003e{percentage}% muestra 33%.\u003cbr\u003e{current} de {max} patitos de goma muestra 9 de 15 patitos de goma. Por defecto: {percentage}%
hide_when_full	Ocultar la barra de progreso cuando esté llena. Por defecto: false
outlet_name	Ubicación del sitio donde se muestra la barra de progreso. Salidas recomendadas: above-main-container, above-site-header, before-header-panel, below-site-header, before-sidebar-sections. Por defecto: above-main-container
display_on_mobile	Mostrar la barra de progreso en dispositivos móviles. Por defecto: true
display_on_homepage	Mostrar la barra de progreso en la página de inicio. Por defecto: true
url_must_contain	URLs donde se muestra la barra de progreso. Por defecto: `/latest
progress_bar_color	Valor de fondo CSS válido. Ejemplos:\u003cbr\u003e#FC0FC0\u003cbr\u003ergb(252,15,192)\u003cbr\u003evar(--tertiary)\u003cbr\u003elinear-gradient(0deg, white 0%, var(--tertiary) 100%)\u003cbr\u003eNota: si está vacío, se utiliza un color dinámico de rojo (0%) a verde (100%). Por defecto: var(--tertiary)

Agradecimientos

Gracias a @Arkshine, por la ayuda general con el código y los consejos