3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-08-04 01:09:20 +02:00
Code Issues Projects Releases Packages Wiki Activity

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

Browse source
This commit is contained in:
Alexey Pyltsyn 2021-03-05 17:30:09 +03:00 • committed by GitHub
parent 4f419801da
commit 6be0bd41b0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 38 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

10
packages/docusaurus-theme-classic/src/theme/DocItem/index.tsx
View file

@ -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}
/>
)}

30
packages/docusaurus-theme-classic/src/theme/LastUpdated/index.tsx
View file

@ -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,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 ? (
<LastUpdatedAtDate lastUpdatedAt={lastUpdatedAt} />
) : (
''
),
atDate:
lastUpdatedAt && formattedLastUpdatedAt ? (
<LastUpdatedAtDate
lastUpdatedAt={lastUpdatedAt}
formattedLastUpdatedAt={formattedLastUpdatedAt}
/>
) : (
''
),
byUser: lastUpdatedBy ? (
<LastUpdatedByUser lastUpdatedBy={lastUpdatedBy} />
) : (