nobbz.dev
1---
2// SPDX-FileCopyrightText: 2025 Norbert Melzer
3// SPDX-FileContributor: Norbert Melzer
4//
5// SPDX-License-Identifier: MIT
6
7export interface Props extends astroHTML.JSX.TimeHTMLAttributes {
8 format?: string;
9}
10
11const { datetime, format, ...props } = Astro.props;
12
13const lang = props.lang || "en";
14
15const timeData = { lang, datetime, "data-format": format };
16---
17
18<time data-relative {...props} {...timeData}>
19 <slot>
20 {datetime}
21 </slot>
22</time>
23
24<script>
25 import { DateTime } from "luxon";
26
27 const dateElements =
28 document.querySelectorAll<HTMLTimeElement>("[data-relative]");
29
30 dateElements.forEach((element) => {
31 const date: DateTime = DateTime.fromISO(element.dateTime);
32
33 const relative = date.setLocale(element.lang).toRelativeCalendar();
34 const format = element.dataset.format || "yyyy-MM-dd";
35
36 element.innerHTML = `<abbr title="${date.toFormat(format)}">${relative}</abbr>`;
37 });
38</script>