 |
Summary | A Discourse theme component for creating beautiful timeline layouts |
 |
Preview | https://meta.appinn.net/t/topic/76953 |
 |
Repository | GitHub - scavin/discourse-qingwa-timelines |
 |
Install Guide | How to install a theme or theme component |
 |
New to Discourse Themes? | Beginner’s guide to using Discourse Themes |
Install this theme component
I’m excited to share a new theme component that adds elegant timeline layouts to your Discourse community!
This is my first theme component, built with the assistance of LLM.
What is it?
Discourse Timelines is a theme component that implements custom BBCode [timelines]...[/timelines] for creating beautiful, minimalist timeline layouts. Perfect for project roadmaps, step-by-step guides, company histories, chapter divisions, and more.
Published Timeline Effect
Composer Toolbar Button
Markdown Editor View
Key Features
Custom BBCode - Simple [timelines] syntax
Composer Toolbar Button - No need to type tags manually (solves the new editor bracket escaping issue!)
Beautiful Design - Vertical gradient line with clean, minimalist aesthetic
Markdown Support - Preserves all formatting inside timelines
Multilingual - Built-in translations for 9 languages (EN, ZH_CN, ZH_TW, DE, ES, FR, JA, KO, RU)
Theme Compatible - Works with both light and dark modes
Customizable - Easily change colors via admin settings
Responsive - Mobile-friendly layout
Safe - XSS protection built-in
No Dependencies - Uses only Discourse native APIs
Usage
Using the Toolbar Button (Easiest!)
- Open the composer
- Click the “+”(options) menu button
- Select “Insert Timeline”
- Edit your content
- Publish!
The toolbar button solves the issue where the new Discourse editor auto-escapes manually typed square brackets.
Example Syntax
[timelines]
## January 2024 - Project Launch
The project was officially initiated, and the team was formed.
## March 2024 - First Release
Core functionality development completed and beta testing began.
## June 2024 - Version 2.0
Major update with new features:
- Feature A
- Feature B
- Feature C
[/timelines]
Customization
All colors can be customized via theme settings:
- timeline_gradient_start - Top gradient color (default:
#ff7a18) - timeline_gradient_end - Bottom gradient color (default:
#ffb800) - timeline_heading_color - Heading text color (default:
#d96d14) - timeline_dot_color - Timeline dot color (default:
#ff7a18) - timeline_heading_color_dark - Dark mode heading color (default:
#ff9854) - timeline_dot_border_color_dark - Dark mode dot border (optional)
I hope you find this component useful! Please let me know if you have any questions, feedback, or suggestions. 