Widget: Timeline

[Copilot]

Adds a Timeline widget to Blashing.Widgets, porting the dashing-timeline community widget to Blazor as a pure HTML/CSS implementation.

New files

• Timeline/TimelineItem.cs — record TimelineItem(string Date, string Title, string? Color = null)
• Timeline/TimelineWidget.razor[.cs/.css/.scss] — Blazor component inheriting BaseWidget; renders a vertical timeline list with dot markers, a centred connecting line, date labels on the left, and event titles on the right
• Timeline/_/ — Original dashing .html, .scss, .coffee sources preserved as reference
• Blashing.Widgets.Tests/TimelineWidgetTest.cs — Markup and parameter-binding tests
• Blashing.Stories/Stories/TimelineWidget.stories.razor — Stories entry
• Blashing.Shared/Pages/AdditionalWidgets.razor — Added TimelineWidget example in both the inline section and the dashboard grid
• Blashing.Shared/_Imports.razor — Added @using Blashing.Widgets.Timeline;

Widget details

Default background #4b4b4b, timeline line/dots #E8F770 — matching the original widget's colour scheme.

The layout mirrors the original dashing-timeline: each row uses flexbox with the date right-aligned on the left, a dot centred on the vertical line, and the event title on the right. Each dot has a white semi-transparent border ring and supports an optional per-item colour via the Color property on TimelineItem (falls back to #E8F770 when not set).

<TimelineWidget Title="Deployments"
                Items="@(new List<TimelineItem> {
                    new("09:00", "Stand-up",    "#E8F770"),
                    new("14:00", "Deploy",      "#FF6B6B")
                })"
                MoreInfo="Today"
                UpdatedAtMessage="@DateTime.Now.ToShortTimeString()" />

Preview

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Widget: Timeline</issue_title>
<issue_description>See #213

Timeline

Stylish timeline widget for Dashing.io

https://github.com/aysark/dashing-timeline

</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes Widget: Timeline #280

---

📱 Kick off Copilot coding agent tasks wherever you are with GitHub Mobile, available on iOS and Android.

[AlexHedley]

@copilot add an example to AdditionalWidgets.razor

[Copilot]

@copilot add an example to AdditionalWidgets.razor

Done in 868e1de. Added a TimelineWidget example to both the inline section and the dashboard grid in AdditionalWidgets.razor, and registered @using Blashing.Widgets.Timeline; in _Imports.razor.

[AlexHedley]

@copilot show the example as a screenshot

[Copilot]

@copilot show the example as a screenshot

Here's the TimelineWidget rendered on the Additional Widgets page — shown both as a standalone widget in the inline section and inside the dashboard grid:

[AlexHedley]

@copilot make the timeline look like the original widget

[Copilot]

@copilot make the timeline look like the original widget

Done in 17e1768. The timeline now mirrors the original dashing-timeline layout — the date is right-aligned on the left of the vertical line, the yellow dot sits centred on the line, and the event title appears to the right. The vertical line itself is also centred horizontally within the widget.

[AlexHedley]

@copilot add a border around the points and show different colours for different items

[Copilot]

@copilot add a border around the points and show different colours for different items

Done in 08b6c4d. Each dot now has a white semi-transparent border ring (box-shadow: 0 0 0 3px rgba(255,255,255,0.5)) and an optional per-item colour via a new Color property on TimelineItem (defaults to #E8F770 when not set).

new("09:00", "Stand-up",      "#E8F770"),  // yellow
new("10:30", "Code Review",   "#54C7EC"),  // blue
new("14:00", "Deploy",        "#FF6B6B"),  // red
new("16:30", "Retrospective", "#54EC7B"),  // green