From 64dc599532c7b90d98c49e68f6c834723cdc349c Mon Sep 17 00:00:00 2001 From: Emma Segal-Grossman Date: Tue, 4 Mar 2025 13:52:06 -0500 Subject: [PATCH] Add basic date & time formatters using navigator language (#404) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Adjacent to #400 — while this isn't yet a proper localization pass, at least dates & times will now use the user's browser language/locale settings. When used in Browsertrix, this should ensure dates are formatted more consistently, at least when the user has a locale with a language matching one of the supported languages in Browsertrix set in their browser settings. Also adds tabular numerals in a few places (e.g. lists of dates/times). --- src/embed-receipt.ts | 5 ++++- src/item-info.ts | 5 ++++- src/item.ts | 18 +++++++++++++++--- src/pageentry.ts | 31 ++++++++++++------------------- src/story.ts | 3 ++- src/url-resources.ts | 3 ++- src/utils/dateTimeFormatter.ts | 23 +++++++++++++++++++++++ 7 files changed, 62 insertions(+), 26 deletions(-) create mode 100644 src/utils/dateTimeFormatter.ts diff --git a/src/embed-receipt.ts b/src/embed-receipt.ts index 0c35042..cd87a6c 100644 --- a/src/embed-receipt.ts +++ b/src/embed-receipt.ts @@ -12,6 +12,7 @@ import { tsToDate } from "./pageutils"; import prettyBytes from "pretty-bytes"; import { property } from "lit/decorators.js"; import type { ItemType } from "./types"; +import { dateTimeFormatter } from "./utils/dateTimeFormatter"; // =========================================================================== export class RWPEmbedReceipt extends LitElement { @@ -184,7 +185,9 @@ export class RWPEmbedReceipt extends LitElement { ? `https://crt.sh/?q=${certFingerprint}` : ""; - const dateStr = tsToDate(this.ts).toLocaleString(); + const dateStr = this.ts + ? dateTimeFormatter.format(tsToDate(this.ts) as Date) + : ""; return html`
diff --git a/src/item-info.ts b/src/item-info.ts index f117f4f..092417e 100644 --- a/src/item-info.ts +++ b/src/item-info.ts @@ -7,6 +7,7 @@ import prettyBytes from "pretty-bytes"; import type { ItemType } from "./types"; import "./components/labeled-field"; +import { dateTimeFormatter } from "./utils/dateTimeFormatter"; // =========================================================================== class ItemInfo extends LitElement { @@ -111,7 +112,9 @@ class ItemInfo extends LitElement { ` : nothing} - ${item!.ctime ? new Date(item!.ctime).toLocaleString() : nothing} + ${item!.ctime + ? dateTimeFormatter.format(new Date(item!.ctime)) + : nothing} ${prettyBytes(Number(item!.totalSize || item!.size || 0))} diff --git a/src/item.ts b/src/item.ts index e50216c..bb71dff 100644 --- a/src/item.ts +++ b/src/item.ts @@ -55,6 +55,7 @@ import type { Replay } from "./replay"; import { ifDefined } from "lit/directives/if-defined.js"; import "./item-info"; +import { dateTimeFormatter } from "./utils/dateTimeFormatter"; const RWP_SCHEME = "search://"; @@ -756,6 +757,7 @@ class Item extends LitElement { align-items: center; transition: background-color var(--sl-transition-fast); color: var(--sl-color-neutral-600); + font-variant-numeric: tabular-nums; } .timestamp-dropdown-btn:hover { @@ -782,6 +784,10 @@ class Item extends LitElement { transform: translateY(0.075em); } + .timestamp-menu-item { + font-variant-numeric: tabular-nums; + } + .timestamp-menu-item[aria-selected="true"]::part(label) { color: var(--sl-color-blue-600); } @@ -1245,7 +1251,9 @@ class Item extends LitElement { protected renderToolbarRight() { const isReplay = !!this.tabData.url; - const dateStr = tsToDate(this.ts).toLocaleString(); + const dateStr = this.ts + ? dateTimeFormatter.format(tsToDate(this.ts) as Date) + : ""; return html`
${timestampStrs.length > 1 ? html` diff --git a/src/pageentry.ts b/src/pageentry.ts index 0350474..5e01e04 100644 --- a/src/pageentry.ts +++ b/src/pageentry.ts @@ -9,6 +9,11 @@ import { getPageDateTS, getReplayLink } from "./pageutils"; import { wrapCss } from "./misc"; import type { URLResource } from "./types"; +import { + dateFormatter, + dateTimeFormatter, + timeFormatter, +} from "./utils/dateTimeFormatter"; // =========================================================================== class PageEntry extends LitElement { @@ -154,6 +159,10 @@ class PageEntry extends LitElement { .media-content a { display: block; } + + .col-date { + font-variant-numeric: tabular-nums; + } `); } @@ -218,20 +227,8 @@ class PageEntry extends LitElement { ` : ""}
-
- ${ - // TODO: Fix this the next time the file is edited. - // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition - date ? date.toLocaleDateString() : "" - } -
-
- ${ - // TODO: Fix this the next time the file is edited. - // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition - date ? date.toLocaleTimeString() : "" - } -
+
${date ? dateFormatter.format(date) : ""}
+
${date ? timeFormatter.format(date) : ""}
@@ -259,11 +256,7 @@ class PageEntry extends LitElement { >${this.thumbnailValid ? this.renderFavicon() : ""}

- ${ - // TODO: Fix this the next time the file is edited. - // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition - date ? date.toLocaleString() : "" - } + ${date ? dateTimeFormatter.format(date) : ""}

${this.textSnippet diff --git a/src/story.ts b/src/story.ts index b1cce2d..513f37f 100644 --- a/src/story.ts +++ b/src/story.ts @@ -10,6 +10,7 @@ import { getTS, getReplayLink } from "./pageutils"; import Split from "split.js"; import { type ItemType } from "./types"; import { customElement, property } from "lit/decorators.js"; +import { dateTimeFormatter } from "./utils/dateTimeFormatter"; // =========================================================================== @customElement("wr-coll-story") @@ -364,7 +365,7 @@ class Story extends LitElement {

${p.title}

${p.url}

-

${date.toLocaleString()}

+

${dateTimeFormatter.format(date)}

${p.desc}

diff --git a/src/url-resources.ts b/src/url-resources.ts index 0e02a6f..f2e4342 100644 --- a/src/url-resources.ts +++ b/src/url-resources.ts @@ -8,6 +8,7 @@ import fasSearch from "@fortawesome/fontawesome-free/svgs/solid/search.svg"; import "keyword-mark-element/lib/keyword-mark.js"; import { type ItemType } from "./types"; import { type URLResource } from "./types"; +import { dateTimeFormatter } from "./utils/dateTimeFormatter"; // =========================================================================== /** @@ -544,7 +545,7 @@ class URLResources extends LitElement {

Date

- ${new Date(result.date).toLocaleString()} + ${dateTimeFormatter.format(new Date(result.date))}

Media Type

diff --git a/src/utils/dateTimeFormatter.ts b/src/utils/dateTimeFormatter.ts new file mode 100644 index 0000000..9f8f16d --- /dev/null +++ b/src/utils/dateTimeFormatter.ts @@ -0,0 +1,23 @@ +export const dateTimeFormatter = new Intl.DateTimeFormat( + [...navigator.languages], + { + month: "2-digit", + day: "2-digit", + year: "numeric", + hour: "2-digit", + minute: "2-digit", + second: "2-digit", + }, +); + +export const dateFormatter = new Intl.DateTimeFormat([...navigator.languages], { + month: "2-digit", + day: "2-digit", + year: "numeric", +}); + +export const timeFormatter = new Intl.DateTimeFormat([...navigator.languages], { + hour: "2-digit", + minute: "2-digit", + second: "2-digit", +});