diff --git a/packages/docusaurus-plugin-content-docs/src/__tests__/docs.test.ts b/packages/docusaurus-plugin-content-docs/src/__tests__/docs.test.ts index 3bee62a9d3..bb8021e61c 100644 --- a/packages/docusaurus-plugin-content-docs/src/__tests__/docs.test.ts +++ b/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', }); }); diff --git a/packages/docusaurus-plugin-content-docs/src/docs.ts b/packages/docusaurus-plugin-content-docs/src/docs.ts index dbc1a5bd04..0f8d720d17 100644 --- a/packages/docusaurus-plugin-content-docs/src/docs.ts +++ b/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, }; } diff --git a/packages/docusaurus-plugin-content-docs/src/plugin-content-docs.d.ts b/packages/docusaurus-plugin-content-docs/src/plugin-content-docs.d.ts index 258b9b22c2..5ca68ee3a3 100644 --- a/packages/docusaurus-plugin-content-docs/src/plugin-content-docs.d.ts +++ b/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}; diff --git a/packages/docusaurus-plugin-content-docs/src/types.ts b/packages/docusaurus-plugin-content-docs/src/types.ts index be171ee779..4a430f2113 100644 --- a/packages/docusaurus-plugin-content-docs/src/types.ts +++ b/packages/docusaurus-plugin-content-docs/src/types.ts @@ -128,6 +128,7 @@ export type OrderMetadata = { export type LastUpdateData = { lastUpdatedAt?: number; + formattedLastUpdatedAt?: string; lastUpdatedBy?: string; }; diff --git a/packages/docusaurus-theme-classic/src/theme/DocItem/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocItem/index.tsx index 329fd3a36c..523d00fd30 100644 --- a/packages/docusaurus-theme-classic/src/theme/DocItem/index.tsx +++ b/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) && ( )} diff --git a/packages/docusaurus-theme-classic/src/theme/LastUpdated/index.tsx b/packages/docusaurus-theme-classic/src/theme/LastUpdated/index.tsx index 599ec83995..bd77e088b7 100644 --- a/packages/docusaurus-theme-classic/src/theme/LastUpdated/index.tsx +++ b/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 ( - {new Date(lastUpdatedAt * 1000).toLocaleDateString()} + {formattedLastUpdatedAt} ), }}> @@ -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,11 +64,15 @@ 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: + lastUpdatedAt && formattedLastUpdatedAt ? ( + + ) : ( + '' + ), byUser: lastUpdatedBy ? ( ) : (