efforting.tech/gitea
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Vendor relative-time-element as local web component (#36853)

Browse Source 
Replace the `@github/relative-time-element` npm dependency with a
vendored, simplified implementation.

- Support 24h format rendering [PR
329](https://github.com/github/relative-time-element/pull/329)
- Enable `::selection` styling in Firefox [PR
341](https://github.com/github/relative-time-element/pull/341)
- Remove timezone from tooltips (It's always local timezone)
- Clean up previous `title` workaround in tippy
- Remove unused features
- Use native `Intl.DurationFormat` with fallback for older browsers,
remove dead polyfill
- Add MIT license header to vendored file
- Add unit tests
- Add dedicated devtest page for all component variants

---------

Signed-off-by: silverwind <me@silverwind.io>
Co-authored-by: Claude claude-opus-4-6 20250630 <noreply@anthropic.com>
This commit is contained in:
silverwind
2026-03-13 11:43:17 +01:00
committed by GitHub
parent 2601f50026
commit 28e09ffc67
12 changed files with 734 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
templates/devtest/gitea-ui.tmpl
View File

@@ -117,15 +117,6 @@
</overflow-menu>
</div>
<div>
<h1>Absolute Dates</h1>
<div><relative-time datetime="2024-03-11" threshold="P0Y" prefix="" weekday="" year="numeric" month="short"></relative-time></div>
<div><relative-time datetime="2024-03-11" threshold="P0Y" prefix="" weekday="" year="numeric" month="long"></relative-time></div>
<div><relative-time datetime="2024-03-11" threshold="P0Y" prefix="" weekday="" year="" day="numeric" month="numeric"></relative-time></div>
<div><relative-time datetime="2024-03-11" threshold="P0Y" prefix="" weekday="long" year="" month="numeric"></relative-time></div>
<div><relative-time datetime="2024-03-11T19:00:00-05:00" threshold="P0Y" prefix="" weekday="long" year="" month="numeric"></relative-time></div>
</div>
<div>
<h1>LocaleNumber</h1>
<div>{{ctx.Locale.PrettyNumber 1}}</div>
@@ -137,17 +128,6 @@
<div>{{ctx.Locale.PrettyNumber 1234567}}</div>
</div>
<div>
<h1>TimeSince</h1>
<div>Now: {{DateUtils.TimeSince .TimeNow}}</div>
<div>5s past: {{DateUtils.TimeSince .TimePast5s}}</div>
<div>5s future: {{DateUtils.TimeSince .TimeFuture5s}}</div>
<div>2m past: {{DateUtils.TimeSince .TimePast2m}}</div>
<div>2m future: {{DateUtils.TimeSince .TimeFuture2m}}</div>
<div>1y past: {{DateUtils.TimeSince .TimePast1y}}</div>
<div>1y future: {{DateUtils.TimeSince .TimeFuture1y}}</div>
</div>
<div>
<h1>SVG alignment</h1>

66
templates/devtest/relative-time.tmpl Normal file
View File

@@ -0,0 +1,66 @@
{{template "devtest/devtest-header"}}
<div class="page-content devtest ui container">
<div class="tw-grid tw-grid-cols-3 tw-gap-4">
<div>
<h2>Relative (auto)</h2>
<div>now: <relative-time datetime="{{.TimeNow.Format "2006-01-02T15:04:05Z07:00"}}"></relative-time></div>
<div>3m ago: <relative-time datetime="{{.TimePast3m.Format "2006-01-02T15:04:05Z07:00"}}"></relative-time></div>
<div>3h ago: <relative-time datetime="{{.TimePast3h.Format "2006-01-02T15:04:05Z07:00"}}"></relative-time></div>
<div>1d ago: <relative-time datetime="{{.TimePast1d.Format "2006-01-02T15:04:05Z07:00"}}"></relative-time></div>
<div>3d ago: <relative-time datetime="{{.TimePast3d.Format "2006-01-02T15:04:05Z07:00"}}"></relative-time></div>
<div>3d future: <relative-time datetime="{{.TimeFuture3d.Format "2006-01-02T15:04:05Z07:00"}}"></relative-time></div>
<div>40d ago (threshold): <relative-time datetime="{{.TimePast40d.Format "2006-01-02T15:04:05Z07:00"}}"></relative-time></div>
</div>
<div>
<h2>tense=past</h2>
<div>3m ago: <relative-time tense="past" datetime="{{.TimePast3m.Format "2006-01-02T15:04:05Z07:00"}}"></relative-time></div>
<div>future clamped: <relative-time tense="past" datetime="{{.TimeFuture1h.Format "2006-01-02T15:04:05Z07:00"}}"></relative-time></div>
<div>60d ago: <relative-time tense="past" datetime="{{.TimePast60d.Format "2006-01-02T15:04:05Z07:00"}}"></relative-time></div>
</div>
<div>
<h2>tense=future</h2>
<div>3h future: <relative-time tense="future" datetime="{{.TimeFuture3h.Format "2006-01-02T15:04:05Z07:00"}}"></relative-time></div>
<div>past clamped: <relative-time tense="future" datetime="{{.TimePast1h.Format "2006-01-02T15:04:05Z07:00"}}"></relative-time></div>
</div>
<div>
<h2>Duration</h2>
<div>0s: <relative-time format="duration" datetime="{{.TimeNow.Format "2006-01-02T15:04:05Z07:00"}}"></relative-time></div>
<div>3h: <relative-time format="duration" datetime="{{.TimePast3h.Format "2006-01-02T15:04:05Z07:00"}}"></relative-time></div>
<div>1d 2h: <relative-time format="duration" datetime="{{.TimePast26h.Format "2006-01-02T15:04:05Z07:00"}}"></relative-time></div>
<div>short: <relative-time format="duration" format-style="short" datetime="{{.TimePast26h.Format "2006-01-02T15:04:05Z07:00"}}"></relative-time></div>
<div>narrow: <relative-time format="duration" format-style="narrow" datetime="{{.TimePast26h.Format "2006-01-02T15:04:05Z07:00"}}"></relative-time></div>
</div>
<div>
<h2>Datetime (absolute)</h2>
<div>default: <relative-time format="datetime" datetime="2024-03-11"></relative-time></div>
<div>month=short: <relative-time datetime="2024-03-11" threshold="P0Y" prefix="" weekday="" year="numeric" month="short"></relative-time></div>
<div>month=long: <relative-time datetime="2024-03-11" threshold="P0Y" prefix="" weekday="" year="numeric" month="long"></relative-time></div>
<div>numeric: <relative-time datetime="2024-03-11" threshold="P0Y" prefix="" weekday="" year="" day="numeric" month="numeric"></relative-time></div>
<div>weekday: <relative-time datetime="2024-03-11" threshold="P0Y" prefix="" weekday="long" year="" month="numeric"></relative-time></div>
<div>with time: <relative-time datetime="2024-03-11T19:00:00-05:00" threshold="P0Y" prefix="" weekday="long" year="" month="numeric"></relative-time></div>
</div>
<div>
<h2>Threshold</h2>
<div>P0Y: <relative-time threshold="P0Y" prefix="" weekday="" year="numeric" month="short" datetime="{{.TimePast1d.Format "2006-01-02T15:04:05Z07:00"}}"></relative-time></div>
<div>P1D: <relative-time threshold="P1D" datetime="{{.TimePast2d.Format "2006-01-02T15:04:05Z07:00"}}"></relative-time></div>
<div>P30D: <relative-time datetime="{{.TimePast1d.Format "2006-01-02T15:04:05Z07:00"}}"></relative-time></div>
</div>
<div>
<h2>Prefix</h2>
<div>default: <relative-time datetime="2024-03-11"></relative-time></div>
<div>prefix="": <relative-time prefix="" datetime="2024-03-11"></relative-time></div>
<div>prefix="at": <relative-time prefix="at" datetime="2024-03-11"></relative-time></div>
</div>
<div>
<h2>TimeSince (Go helper)</h2>
<div>now: {{DateUtils.TimeSince .TimeNow}}</div>
<div>5s past: {{DateUtils.TimeSince .TimePast5s}}</div>
<div>5s future: {{DateUtils.TimeSince .TimeFuture5s}}</div>
<div>2m past: {{DateUtils.TimeSince .TimePast2m}}</div>
<div>2m future: {{DateUtils.TimeSince .TimeFuture2m}}</div>
<div>1y past: {{DateUtils.TimeSince .TimePast1y}}</div>
<div>1y future: {{DateUtils.TimeSince .TimeFuture1y}}</div>
</div>
</div>
</div>
{{template "devtest/devtest-footer"}}