¡Estoy emocionado de compartir un nuevo componente de tema que agrega elegantes diseños de línea de tiempo a tu comunidad de Discourse!
Este es mi primer componente de tema, construido con la ayuda de LLM.
¿Qué es?
Discourse Timelines es un componente de tema que implementa BBCode personalizado [timelines]...[/timelines] para crear hermosos y minimalistas diseños de línea de tiempo. Perfecto para hojas de ruta de proyectos, guías paso a paso, historiales de empresas, divisiones de capítulos y más.
BBCode personalizado - Sencilla sintaxis [timelines] Botón de barra de herramientas del editor - ¡No es necesario escribir las etiquetas manualmente (resuelve el problema de escape de corchetes del nuevo editor!) Diseño hermoso - Línea de gradiente vertical con una estética limpia y minimalista Soporte de Markdown - Conserva todo el formato dentro de las líneas de tiempo Multilingüe - Traducciones integradas para 9 idiomas (EN, ZH_CN, ZH_TW, DE, ES, FR, JA, KO, RU) Compatible con temas - Funciona con modos claro y oscuro Personalizable - Cambia fácilmente los colores a través de la configuración de administrador Responsivo - Diseño adaptable a dispositivos móviles Seguro - Protección XSS integrada Sin dependencias - Utiliza solo las API nativas de Discourse
Uso
Usando el botón de la barra de herramientas (¡Lo más fácil!)
Abre el editor
Haz clic en el botón del menú “+” (opciones)
Selecciona “Insertar línea de tiempo”
Edita tu contenido
¡Publica!
El botón de la barra de herramientas resuelve el problema por el cual el nuevo editor de Discourse escapa automáticamente los corchetes escritos manualmente.
Ejemplo de sintaxis
[timelines]
## Enero 2024 - Lanzamiento del proyecto
El proyecto se inició oficialmente y se formó el equipo.
## Marzo 2024 - Primera versión
Se completó el desarrollo de la funcionalidad principal y comenzó la prueba beta.
## Junio 2024 - Versión 2.0
Actualización importante con nuevas características:
- Característica A
- Característica B
- Característica C
[/timelines]
Personalización
Todos los colores se pueden personalizar a través de la configuración del tema:
timeline_gradient_start - Color del gradiente superior (predeterminado: #ff7a18)
timeline_gradient_end - Color del gradiente inferior (predeterminado: #ffb800)
timeline_heading_color - Color del texto del encabezado (predeterminado: #d96d14)
timeline_dot_color - Color del punto de la línea de tiempo (predeterminado: #ff7a18)
timeline_heading_color_dark - Color del encabezado en modo oscuro (predeterminado: #ff9854)
timeline_dot_border_color_dark - Borde del punto en modo oscuro (opcional)
¡Espero que encuentres útil este componente! Por favor, házmelo saber si tienes alguna pregunta, comentario o sugerencia.
Al usarlo en una publicación con la tabla de contenido automática (autoTOC), destaca al depender de la marca de encabezado 2 y 3. ¿Hay alguna manera de cambiarlo para que use encabezados 4 o 5 en su lugar/además para tener más flexibilidad?
Si la cronología aparece más abajo en la jerarquía de la tabla de contenido, como después de un encabezado 2 o 3, hace que la tabla de contenido parezca visualmente desordenada.
EDITAR: Puedo envolver esto en etiquetas [details] y elimina que los encabezados de la cronología aparezcan en la tabla de contenido. Una solución razonable para mis propósitos, por si sirve de algo.
Estos se representan como H2/H3 dentro de la línea de tiempo, pero no se tratan como encabezados reales, por lo que el autoTOC se mantiene ordenado independientemente de dónde se encuentre la línea de tiempo.
Si desea que los encabezados de una línea de tiempo permanezcan en la TOC, siga usando ##/### normales.
Ahora mismo, si hay un solo ##! (o ###!) dentro de [timelines], la TOC omitirá toda la línea de tiempo.
Mezclar ambos estilos en la misma línea de tiempo aún no es compatible.
Ahora puede mezclarlos: ##/### todavía aparecen en la TOC, mientras que ##!/###! se representan solo dentro de la línea de tiempo y quedan fuera de la TOC.
¡Esa es una idea de solución alternativa ingeniosa!
Esto pareció funcionar bien para
[timelines]
##! 2020 - Foudnation
Content...
###! March
Content
[/timelines]
Pero no para dos encabezados pseudo-encabezados seguidos de otra lista de formato:
[timelines]
##! 2020 - Foundation
* Listicle
###! March
Dooooooom!
[/timelines]
El primer pseudo-encabezado también prefiere estar en línea con la etiqueta de apertura [timelines] para evitar formatear una línea vacía arriba. Como:
[timelines]##! 2020 - Foundation
Content...
[/timelines]
De lo contrario, hay un espacio por encima del primer pseudo-encabezado como si fuera una línea de bloque de línea de tiempo normal, no un encabezado.
Gracias por tu trabajo en esto, se está volviendo increíblemente flexible de usar ahora.
El código también parece activarse dondequiera que [timelines] esté presente en la publicación, incluso si está encerrado entre comillas invertidas de código como arriba. Escapar con barra invertida \\[timelines] tampoco parece marcar la diferencia.
ETA: las etiquetas [timelines] y [/timelines] parecen escapar los saltos de línea y aparecen en la misma línea que el texto más cercano en bloques de código con tres comillas invertidas ```
Así que
[timelines]
Blah
Blah
[/timelines]
Aparece como
[timelines]Blah
Blah[/timelines]
Encontré esto mientras escribía una guía para usarlo, así que probablemente sea solo un caso extremo.
BBCode personalizado - Sencilla sintaxis 
