Improve create/update datetime formatting, more concise and consistent This patch reduces clutters in a datetime string and make the string more consistent to other parts of the document. The first and most significant problem was the datetime string is formatted using UA's locale. The UA's locale could be different to a document's locale. This results in inconsistent text formatting: for example, when a user viewing the page with `lang="ja"` but UA uses "en-US", chunk of "en-US" text appears in "ja" document as a result. The second problem is the datetime string is verbose. I can't imagine any usecase where seconds part benefits a user (viewer). The final problem is ugliness of the datetime string in noscript env. It's ISO-8601 string because of timezone. I remembered that `toLocaleString` (`Intl.DateTimeFormat`) can display timezone string, so here it is. Even though the metadata is not properly styled and is still ugly, I'm satisfied how the result looks good without compromising semantic markup and/or build process.

Changes

4 changed files (+29/-10)

• page_builder/default_theme/pages/json_canvas.tsx
  • @@ -50,7 +50,7 @@ nav: documentTree({ context }),
    footer: footer({ copyright: context.copyright }), main: h(null, [ title({ children: context.document.metadata.title }), - pageMetadata({ metadata: context.document.metadata }), + pageMetadata({ context }), wrappedJsonCanvas({ data: content }), ]), }, context),
• page_builder/default_theme/pages/markdown.tsx
  • @@ -50,7 +50,7 @@ nav: documentTree({ context }),
    footer: footer({ copyright: context.copyright }), main: h(null, [ title({ children: context.document.metadata.title }), - pageMetadata({ metadata: context.document.metadata }), + pageMetadata({ context }), content, ]), }, context),
• page_builder/default_theme/widgets/datetime.tsx
  • @@ -9,21 +9,36 @@
    export const datetimeScript = ` document.querySelectorAll("[data-macana-datetime]").forEach(el => { const datetime = new Date(el.dataset.macanaDatetime); - el.textContent = datetime.toLocaleString(); + 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 }: DatetimeProps) { + export function datetime({ datetime, langOrLocale }: DatetimeProps) { const z = datetime.toISOString(); return h(null, [ <noscript> - <time datetime={z}>{z}</time> + <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} />,
• page_builder/default_theme/widgets/page_metadata.tsx
  • @@ -6,17 +6,19 @@ /** @jsx h */
    import { h } from "../../../deps/esm.sh/hastscript/mod.ts"; - import type { DocumentMetadata } from "../../../types.ts"; + import type { BuildContext } from "../context.ts"; import { datetime, datetimeScript } from "./datetime.tsx"; export const pageMetadataScript = datetimeScript; export interface PageMetadataProps { - metadata: DocumentMetadata; + context: BuildContext; } - export function pageMetadata({ metadata }: PageMetadataProps) { + export function pageMetadata( + { context: { document: { metadata }, language } }: PageMetadataProps, + ) { if (!metadata.createdAt && !metadata.updatedAt) { return null; }
  • @@ -26,7 +28,8 @@ metadata.createdAt
    ? ( <div> <small> - Created at {datetime({ datetime: metadata.createdAt })} + Created at{" "} + {datetime({ datetime: metadata.createdAt, langOrLocale: language })} </small> </div> )
  • @@ -35,7 +38,8 @@ metadata.updatedAt
    ? ( <div> <small> - Updated at {datetime({ datetime: metadata.updatedAt })} + Updated at{" "} + {datetime({ datetime: metadata.updatedAt, langOrLocale: language })} </small> </div> )