1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13
14. 14
15. 15
16. 16
17. 17
18. 18
19. 19
20. 20
21. 21
22. 22
23. 23
24. 24
25. 25
26. 26
27. 27
28. 28
29. 29
30. 30
31. 31
32. 32
33. 33
34. 34
35. 35
36. 36
37. 37
38. 38
39. 39
40. 40
41. 41
42. 42
43. 43
44. 44
45. 45
46. 46

// SPDX-FileCopyrightText: 2024 Shota FUJI <pockawoooh@gmail.com>
//
// SPDX-License-Identifier: Apache-2.0

/** @jsx h */

import { h } from "../../../deps/esm.sh/hastscript/mod.ts";

export const datetimeScript = `
document.querySelectorAll("[data-macana-datetime]").forEach(el => {
	const datetime = new Date(el.dataset.macanaDatetime);
	el.textContent = datetime.toLocaleString(document.documentElement.lang, {
		dateStyle: "medium",
		timeStyle: "short",
	});
	el.style.display = "";
});
`.trim();

export interface DatetimeProps {
	datetime: Date;

	langOrLocale?: string;
}

export function datetime({ datetime, langOrLocale }: DatetimeProps) {
	const z = datetime.toISOString();

	return h(null, [
		<noscript>
			<time datetime={z}>
				{datetime.toLocaleString(langOrLocale, {
					year: "numeric",
					month: "numeric",
					day: "numeric",
					hour: "2-digit",
					minute: "2-digit",
					timeZone: "UTC",
					timeZoneName: "short",
				})}
			</time>
		</noscript>,
		// Initially hidden in order to avoid duplication on noscript env
		<time style="display:none;" datetime={z} data-macana-datetime={z} />,
	]);
}