@docusaurus/theme-classic 3.1.1 → 3.2.1

package/src/theme/LastUpdated/index.tsx

@@ -8,15 +8,25 @@
 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,
-  formattedLastUpdatedAt,
 }: {
   lastUpdatedAt: number;
-  formattedLastUpdatedAt: string;
 }): 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"
@@ -24,7 +34,7 @@ function LastUpdatedAtDate({
       values={{
         date: (
           <b>
-            <time dateTime={new Date(lastUpdatedAt * 1000).toISOString()}>
+            <time dateTime={atDate.toISOString()} itemProp="dateModified">
               {formattedLastUpdatedAt}
             </time>
           </b>
@@ -54,7 +64,6 @@ function LastUpdatedByUser({
 
 export default function LastUpdated({
   lastUpdatedAt,
-  formattedLastUpdatedAt,
   lastUpdatedBy,
 }: Props): JSX.Element {
   return (
@@ -63,15 +72,11 @@ 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 && formattedLastUpdatedAt ? (
-              <LastUpdatedAtDate
-                lastUpdatedAt={lastUpdatedAt}
-                formattedLastUpdatedAt={formattedLastUpdatedAt}
-              />
-            ) : (
-              ''
-            ),
+          atDate: lastUpdatedAt ? (
+            <LastUpdatedAtDate lastUpdatedAt={lastUpdatedAt} />
+          ) : (
+            ''
+          ),
           byUser: lastUpdatedBy ? (
             <LastUpdatedByUser lastUpdatedBy={lastUpdatedBy} />
           ) : (

package/src/theme-classic.d.ts

@@ -676,6 +676,16 @@ declare module '@theme/DocVersionSuggestions' {
   export default function DocVersionSuggestions(): JSX.Element;
 }
 
+declare module '@theme/EditMetaRow' {
+  export interface Props {
+    readonly className: string;
+    readonly editUrl: string | null | undefined;
+    readonly lastUpdatedAt: number | undefined;
+    readonly lastUpdatedBy: string | undefined;
+  }
+  export default function EditMetaRow(props: Props): JSX.Element;
+}
+
 declare module '@theme/EditThisPage' {
   export interface Props {
     readonly editUrl: string;
@@ -824,7 +834,6 @@ declare module '@theme/SearchMetadata' {
 declare module '@theme/LastUpdated' {
   export interface Props {
     readonly lastUpdatedAt?: number;
-    readonly formattedLastUpdatedAt?: string;
     readonly lastUpdatedBy?: string;
   }
 

package/src/theme/BlogPostItem/Footer/styles.module.css

@@ -1,10 +0,0 @@
-/**
- * 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.
- */
-
-.blogPostFooterDetailsFull {
-  flex-direction: column;
-}

package/lib/theme/{DocItem/Footer → EditMetaRow}/styles.module.css

@@ -6,9 +6,9 @@
  */
 
 .lastUpdated {
-  margin-top: 0.2rem;
-  font-style: italic;
   font-size: smaller;
+  font-style: italic;
+  margin-top: 0.2rem;
 }
 
 @media (min-width: 997px) {

package/src/theme/{DocItem/Footer → EditMetaRow}/styles.module.css

@@ -6,9 +6,9 @@
  */
 
 .lastUpdated {
-  margin-top: 0.2rem;
-  font-style: italic;
   font-size: smaller;
+  font-style: italic;
+  margin-top: 0.2rem;
 }
 
 @media (min-width: 997px) {