-
-
Notifications
You must be signed in to change notification settings - Fork 8k
/
index.tsx
96 lines (89 loc) · 2.44 KB
/
index.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
import React from 'react';
import Translate from '@docusaurus/Translate';
import {ThemeClassNames} from '@docusaurus/theme-common';
import {useDateTimeFormat} from '@docusaurus/theme-common/internal';
import type {Props} from '@theme/LastUpdated';
function LastUpdatedAtDate({
lastUpdatedAt,
}: {
lastUpdatedAt: number;
}): JSX.Element {
const atDate = new Date(lastUpdatedAt);
const dateTimeFormat = useDateTimeFormat({
day: 'numeric',
month: 'short',
year: 'numeric',
timeZone: 'UTC',
});
const formattedLastUpdatedAt = dateTimeFormat.format(atDate);
return (
<Translate
id="theme.lastUpdated.atDate"
description="The words used to describe on which date a page has been last updated"
values={{
date: (
<b>
<time dateTime={atDate.toISOString()} itemProp="dateModified">
{formattedLastUpdatedAt}
</time>
</b>
),
}}>
{' on {date}'}
</Translate>
);
}
function LastUpdatedByUser({
lastUpdatedBy,
}: {
lastUpdatedBy: string;
}): JSX.Element {
return (
<Translate
id="theme.lastUpdated.byUser"
description="The words used to describe by who the page has been last updated"
values={{
user: <b>{lastUpdatedBy}</b>,
}}>
{' by {user}'}
</Translate>
);
}
export default function LastUpdated({
lastUpdatedAt,
lastUpdatedBy,
}: Props): JSX.Element {
return (
<span className={ThemeClassNames.common.lastUpdated}>
<Translate
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} />
) : (
''
),
byUser: lastUpdatedBy ? (
<LastUpdatedByUser lastUpdatedBy={lastUpdatedBy} />
) : (
''
),
}}>
{'Last updated{atDate}{byUser}'}
</Translate>
{process.env.NODE_ENV === 'development' && (
<div>
{/* eslint-disable-next-line @docusaurus/no-untranslated-text */}
<small> (Simulated during dev for better perf)</small>
</div>
)}
</span>
);
}