Discourse Qingwa Timelines - Custom BBCode for Beautiful Timeline Layouts

[scavin]

	Summary	A Discourse theme component for creating beautiful timeline layouts
	Preview	https://meta.appinn.net/t/topic/76953
	Repository	GitHub - scavin/discourse-qingwa-timelines: A Discourse theme component for creating beautiful timeline layouts
	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!)

1. Open the composer
2. Click the “+”(options) menu button
3. Select “Insert Timeline”
4. Edit your content
5. 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.

[Heliosurge (Dan DeMontmorency)]

This is a very nice component! Very useful.

[Heliosurge (Dan DeMontmorency)]

Does this also support pics/video?

[scavin]

Yes, it supports both images and videos.

Here is a quick demo[DEMO LINK]

[Heliosurge (Dan DeMontmorency)]

Very sweet indeed. Awesome work!

[jordanjay29]

Does this work with the DiscoTOC?

It seems to rely on the larger headers, which makes it a little more inflexible with the TOC hierarchy.

[scavin]

I tested it with DiscoTOC and didn’t find any issues.

I’ve added a TOC on the demo page — feel free to open it and see how it works.

[jordanjay29]

Thanks for that reference.

When using it in a post with the autoTOC, it stands out by relying on the header 2 and 3 markdown. Is there any way to shift it to using headers 4 or 5 instead/in addition for more flexibility?

If the timeline appears further down in the TOC hierarchy, like after a header 2 or 3, it causes the TOC to look visually unordered.

EDIT: I can wrap this in [details] tags and it removes the Timeline headers from showing up on the TOC. Reasonable workaround for my purposes fwiw.

[scavin]

Thanks for the suggestion! I’ll look into how to improve this.

[scavin]

You can now keep your timeline headings out of the TOC without workarounds:

use pseudo-headings inside [timelines] by prefixing with ##! (for H2 styling) or ###! (for H3 styling).

Example:

[timelines]

##! 2020 – Foundation
Content…
[/timelines]

These render like H2/H3 inside the timeline but are not treated as real headings, so autoTOC stays tidy regardless of where the timeline sits.

If you want a timeline’s headings to stay in the TOC, keep using normal ##/###.

Right now, if there’s even a single ##! (or ###!) inside [timelines], the TOC will skip the entire timeline.

Mixing both styles in the same timeline isn’t supported yet.

You can mix them now: ##/### still show up in the TOC, while ##!/###! render only inside the timeline and stay out of the TOC.

Please update the component and give it a try.

[jordanjay29]

That’s a clever workaround idea!

This seemed to work fine for

[timelines]
##! 2020 - Foudnation
Content...
###! March
Content
[/timelines]

But not for a pseudo-header following another formatting item like a list:

[timelines]
##! 2020 - Foundation
* Listicle
###! March 
Dooooooom!
[/timelines]

The first pseudo-header also prefers to be inline with the opening [timelines] tag to avoid formatting an empty line above. Like:

[timelines]##! 2020 - Foundation
Content...
[/timelines]

Otherwise there’s a gap above the first pseudo-header as if it was a regular, non-header, timeline block line.

Thanks for your work on this, it’s getting incredibly flexible to use now.

[scavin]

Thanks for flagging it.

I’m seeing the same. Right now these render correctly:

  [timelines]##! 2020 - Foundation
  Content...
  [/timelines]

and

  [timelines]

  ##! 2020 - Foundation
  Content...
  [/timelines]

But this does not work:

  [timelines]
  ##! 2020 - Foundation
  Content...
  [/timelines]

I’m looking into it but haven’t settled on the right fix yet.

[jordanjay29]

The code also appears to activate anywhere [timelines] is present in the post, even if it is enclosed in code backticks like above. Escaping with backslash \[timelines] does not appear to make a difference, either.

ETA: the [timelines] and [/timelines] tags appear to escape linebreaks and appear on the same line as the closest text in code blocks with three backticks ```

So

[timelines]
Blah
Blah
[/timelines]

Appears as

[timelines]Blah
Blah[/timelines]

Encountered this while writing up a guide to use it, so it’s probably just an edge case.