refactor(v2): format last updated date using Intl (#4352)

packages/docusaurus-plugin-content-docs/src/__tests__/docs.test.ts

@@ -352,6 +352,7 @@ describe('simple site', () => {
       editUrl: 'https://github.com/customUrl/docs/lorem.md',
       description: 'Lorem ipsum.',
       lastUpdatedAt: 1539502055,
+      formattedLastUpdatedAt: '10/14/2018',
       lastUpdatedBy: 'Author',
     });
   });

packages/docusaurus-plugin-content-docs/src/docs.ts

@@ -14,6 +14,7 @@ import {
   normalizeUrl,
   parseMarkdownString,
   posixPath,
+  getDateTimeFormat,
 } from '@docusaurus/utils';
 import {LoadContext} from '@docusaurus/types';
 
@@ -113,7 +114,7 @@ export function processDocMetadata({
 }): DocMetadataBase {
   const {source, content, lastUpdate, docsDirPath, filePath} = docFile;
   const {homePageId} = options;
-  const {siteDir} = context;
+  const {siteDir, i18n} = context;
 
   // ex: api/myDoc -> api
   // ex: myDoc -> .
@@ -210,6 +211,11 @@ export function processDocMetadata({
     version: versionMetadata.versionName,
     lastUpdatedBy: lastUpdate.lastUpdatedBy,
     lastUpdatedAt: lastUpdate.lastUpdatedAt,
+    formattedLastUpdatedAt: lastUpdate.lastUpdatedAt
+      ? getDateTimeFormat(i18n.currentLocale)(i18n.currentLocale).format(
+          lastUpdate.lastUpdatedAt * 1000,
+        )
+      : undefined,
     sidebar_label,
   };
 }

packages/docusaurus-plugin-content-docs/src/plugin-content-docs.d.ts

@@ -69,6 +69,7 @@ declare module '@theme/DocItem' {
     readonly permalink?: string;
     readonly editUrl?: string;
     readonly lastUpdatedAt?: number;
+    readonly formattedLastUpdatedAt?: string;
     readonly lastUpdatedBy?: string;
     readonly version?: string;
     readonly previous?: {readonly permalink: string; readonly title: string};

packages/docusaurus-plugin-content-docs/src/types.ts

@@ -128,6 +128,7 @@ export type OrderMetadata = {
 
 export type LastUpdateData = {
   lastUpdatedAt?: number;
+  formattedLastUpdatedAt?: string;
   lastUpdatedBy?: string;
 };
 

packages/docusaurus-theme-classic/src/theme/DocItem/index.tsx

@@ -33,7 +33,14 @@ function DocItem(props: Props): JSX.Element {
       hide_table_of_contents: hideTableOfContents,
     },
   } = DocContent;
-  const {description, title, editUrl, lastUpdatedAt, lastUpdatedBy} = metadata;
+  const {
+    description,
+    title,
+    editUrl,
+    lastUpdatedAt,
+    formattedLastUpdatedAt,
+    lastUpdatedBy,
+  } = metadata;
 
   const {pluginId} = useActivePlugin({failfast: true});
   const versions = useVersions(pluginId);
@@ -81,6 +88,7 @@ function DocItem(props: Props): JSX.Element {
                   {(lastUpdatedAt || lastUpdatedBy) && (
                     <LastUpdated
                       lastUpdatedAt={lastUpdatedAt}
+                      formattedLastUpdatedAt={formattedLastUpdatedAt}
                       lastUpdatedBy={lastUpdatedBy}
                     />
                   )}

packages/docusaurus-theme-classic/src/theme/LastUpdated/index.tsx

@@ -9,21 +9,23 @@ import React from 'react';
 import styles from './styles.module.css';
 import Translate from '@docusaurus/Translate';
 
-function LastUpdatedAtDate({lastUpdatedAt}: {lastUpdatedAt: number}) {
+function LastUpdatedAtDate({
+  lastUpdatedAt,
+  formattedLastUpdatedAt,
+}: {
+  lastUpdatedAt: number;
+  formattedLastUpdatedAt: string;
+}) {
   return (
     <Translate
       id="theme.lastUpdated.atDate"
       description="The words used to describe on which date a page has been last updated"
       values={{
-        // TODO localize this date
-        // If it's the only place we need this, we'd rather keep it simple
-        // Day.js may be a good lightweight option?
-        // https://www.skypack.dev/blog/2021/02/the-best-javascript-date-libraries/
         date: (
           <time
             dateTime={new Date(lastUpdatedAt * 1000).toISOString()}
             className={styles.lastUpdatedDate}>
-            {new Date(lastUpdatedAt * 1000).toLocaleDateString()}
+            {formattedLastUpdatedAt}
           </time>
         ),
       }}>
@@ -47,9 +49,11 @@ function LastUpdatedByUser({lastUpdatedBy}: {lastUpdatedBy: string}) {
 
 export default function LastUpdated({
   lastUpdatedAt,
+  formattedLastUpdatedAt,
   lastUpdatedBy,
 }: {
   lastUpdatedAt: number | undefined;
+  formattedLastUpdatedAt: string | undefined;
   lastUpdatedBy: string | undefined;
 }) {
   return (
@@ -60,8 +64,12 @@ export default function LastUpdated({
             id="theme.lastUpdated.lastUpdatedAtBy"
             description="The sentence used to display when a page has been last updated, and by who"
             values={{
-              atDate: lastUpdatedAt ? (
+              atDate:
-                <LastUpdatedAtDate lastUpdatedAt={lastUpdatedAt} />
+                lastUpdatedAt && formattedLastUpdatedAt ? (
+                  <LastUpdatedAtDate
+                    lastUpdatedAt={lastUpdatedAt}
+                    formattedLastUpdatedAt={formattedLastUpdatedAt}
+                  />
                 ) : (
                   ''
                 ),