@docusaurus/theme-classic 0.0.0-5846 → 0.0.0-5847

package/lib/theme/BlogArchivePage/index.js

@@ -8,9 +8,17 @@ import React from 'react';
 import Link from '@docusaurus/Link';
 import {translate} from '@docusaurus/Translate';
 import {PageMetadata} from '@docusaurus/theme-common';
+import {useDateTimeFormat} from '@docusaurus/theme-common/internal';
 import Layout from '@theme/Layout';
 import Heading from '@theme/Heading';
 function Year({year, posts}) {
+  const dateTimeFormat = useDateTimeFormat({
+    day: 'numeric',
+    month: 'long',
+    timeZone: 'UTC',
+  });
+  const formatDate = (lastUpdated) =>
+    dateTimeFormat.format(new Date(lastUpdated));
   return (
     <>
       <Heading as="h3" id={year}>
@@ -20,7 +28,7 @@ function Year({year, posts}) {
         {posts.map((post) => (
           <li key={post.metadata.date}>
             <Link to={post.metadata.permalink}>
-              {post.metadata.formattedDate} - {post.metadata.title}
+              {formatDate(post.metadata.date)} - {post.metadata.title}
             </Link>
           </li>
         ))}

package/lib/theme/BlogPostItem/Header/Info/index.js

@@ -8,7 +8,10 @@ import React from 'react';
 import clsx from 'clsx';
 import {translate} from '@docusaurus/Translate';
 import {usePluralForm} from '@docusaurus/theme-common';
-import {useBlogPost} from '@docusaurus/theme-common/internal';
+import {
+  useBlogPost,
+  useDateTimeFormat,
+} from '@docusaurus/theme-common/internal';
 import styles from './styles.module.css';
 // Very simple pluralization: probably good enough for now
 function useReadingTimePlural() {
@@ -33,7 +36,7 @@ function ReadingTime({readingTime}) {
   const readingTimePlural = useReadingTimePlural();
   return <>{readingTimePlural(readingTime)}</>;
 }
-function Date({date, formattedDate}) {
+function DateTime({date, formattedDate}) {
   return <time dateTime={date}>{formattedDate}</time>;
 }
 function Spacer() {
@@ -41,10 +44,17 @@ function Spacer() {
 }
 export default function BlogPostItemHeaderInfo({className}) {
   const {metadata} = useBlogPost();
-  const {date, formattedDate, readingTime} = metadata;
+  const {date, readingTime} = metadata;
+  const dateTimeFormat = useDateTimeFormat({
+    day: 'numeric',
+    month: 'long',
+    year: 'numeric',
+    timeZone: 'UTC',
+  });
+  const formatDate = (blogDate) => dateTimeFormat.format(new Date(blogDate));
   return (
     <div className={clsx(styles.container, 'margin-vert--md', className)}>
-      <Date date={date} formattedDate={formattedDate} />
+      <DateTime date={date} formattedDate={formatDate(date)} />
       {typeof readingTime !== 'undefined' && (
         <>
           <Spacer />

package/lib/theme/DocItem/Footer/index.js

@@ -25,12 +25,7 @@ function TagsRow(props) {
     </div>
   );
 }
-function EditMetaRow({
-  editUrl,
-  lastUpdatedAt,
-  lastUpdatedBy,
-  formattedLastUpdatedAt,
-}) {
+function EditMetaRow({editUrl, lastUpdatedAt, lastUpdatedBy}) {
   return (
     <div className={clsx(ThemeClassNames.docs.docFooterEditMetaRow, 'row')}>
       <div className="col">{editUrl && <EditThisPage editUrl={editUrl} />}</div>
@@ -39,7 +34,6 @@ function EditMetaRow({
         {(lastUpdatedAt || lastUpdatedBy) && (
           <LastUpdated
             lastUpdatedAt={lastUpdatedAt}
-            formattedLastUpdatedAt={formattedLastUpdatedAt}
             lastUpdatedBy={lastUpdatedBy}
           />
         )}
@@ -49,8 +43,7 @@ function EditMetaRow({
 }
 export default function DocItemFooter() {
   const {metadata} = useDoc();
-  const {editUrl, lastUpdatedAt, formattedLastUpdatedAt, lastUpdatedBy, tags} =
-    metadata;
+  const {editUrl, lastUpdatedAt, lastUpdatedBy, tags} = metadata;
   const canDisplayTagsRow = tags.length > 0;
   const canDisplayEditMetaRow = !!(editUrl || lastUpdatedAt || lastUpdatedBy);
   const canDisplayFooter = canDisplayTagsRow || canDisplayEditMetaRow;
@@ -66,7 +59,6 @@ export default function DocItemFooter() {
           editUrl={editUrl}
           lastUpdatedAt={lastUpdatedAt}
           lastUpdatedBy={lastUpdatedBy}
-          formattedLastUpdatedAt={formattedLastUpdatedAt}
         />
       )}
     </footer>

package/lib/theme/LastUpdated/index.d.ts

@@ -6,4 +6,4 @@
  */
 /// <reference types="react" />
 import type { Props } from '@theme/LastUpdated';
-export default function LastUpdated({ lastUpdatedAt, formattedLastUpdatedAt, lastUpdatedBy, }: Props): JSX.Element;
+export default function LastUpdated({ lastUpdatedAt, lastUpdatedBy, }: Props): JSX.Element;

package/lib/theme/LastUpdated/index.js

@@ -7,7 +7,16 @@
 import React from 'react';
 import Translate from '@docusaurus/Translate';
 import {ThemeClassNames} from '@docusaurus/theme-common';
-function LastUpdatedAtDate({lastUpdatedAt, formattedLastUpdatedAt}) {
+import {useDateTimeFormat} from '@docusaurus/theme-common/internal';
+function LastUpdatedAtDate({lastUpdatedAt}) {
+  const atDate = new Date(lastUpdatedAt * 1000);
+  const dateTimeFormat = useDateTimeFormat({
+    day: 'numeric',
+    month: 'short',
+    year: 'numeric',
+    timeZone: 'UTC',
+  });
+  const formattedLastUpdatedAt = dateTimeFormat.format(atDate);
   return (
     <Translate
       id="theme.lastUpdated.atDate"
@@ -15,7 +24,7 @@ function LastUpdatedAtDate({lastUpdatedAt, formattedLastUpdatedAt}) {
       values={{
         date: (
           <b>
-            <time dateTime={new Date(lastUpdatedAt * 1000).toISOString()}>
+            <time dateTime={atDate.toISOString()}>
               {formattedLastUpdatedAt}
             </time>
           </b>
@@ -37,26 +46,18 @@ function LastUpdatedByUser({lastUpdatedBy}) {
     </Translate>
   );
 }
-export default function LastUpdated({
-  lastUpdatedAt,
-  formattedLastUpdatedAt,
-  lastUpdatedBy,
-}) {
+export default function LastUpdated({lastUpdatedAt, lastUpdatedBy}) {
   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 && formattedLastUpdatedAt ? (
-              <LastUpdatedAtDate
-                lastUpdatedAt={lastUpdatedAt}
-                formattedLastUpdatedAt={formattedLastUpdatedAt}
-              />
-            ) : (
-              ''
-            ),
+          atDate: lastUpdatedAt ? (
+            <LastUpdatedAtDate lastUpdatedAt={lastUpdatedAt} />
+          ) : (
+            ''
+          ),
           byUser: lastUpdatedBy ? (
             <LastUpdatedByUser lastUpdatedBy={lastUpdatedBy} />
           ) : (

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docusaurus/theme-classic",
-  "version": "0.0.0-5846",
+  "version": "0.0.0-5847",
   "description": "Classic theme for Docusaurus",
   "main": "lib/index.js",
   "types": "src/theme-classic.d.ts",
@@ -20,18 +20,18 @@
     "copy:watch": "node ../../admin/scripts/copyUntypedFiles.js --watch"
   },
   "dependencies": {
-    "@docusaurus/core": "0.0.0-5846",
-    "@docusaurus/mdx-loader": "0.0.0-5846",
-    "@docusaurus/module-type-aliases": "0.0.0-5846",
-    "@docusaurus/plugin-content-blog": "0.0.0-5846",
-    "@docusaurus/plugin-content-docs": "0.0.0-5846",
-    "@docusaurus/plugin-content-pages": "0.0.0-5846",
-    "@docusaurus/theme-common": "0.0.0-5846",
-    "@docusaurus/theme-translations": "0.0.0-5846",
-    "@docusaurus/types": "0.0.0-5846",
-    "@docusaurus/utils": "0.0.0-5846",
-    "@docusaurus/utils-common": "0.0.0-5846",
-    "@docusaurus/utils-validation": "0.0.0-5846",
+    "@docusaurus/core": "0.0.0-5847",
+    "@docusaurus/mdx-loader": "0.0.0-5847",
+    "@docusaurus/module-type-aliases": "0.0.0-5847",
+    "@docusaurus/plugin-content-blog": "0.0.0-5847",
+    "@docusaurus/plugin-content-docs": "0.0.0-5847",
+    "@docusaurus/plugin-content-pages": "0.0.0-5847",
+    "@docusaurus/theme-common": "0.0.0-5847",
+    "@docusaurus/theme-translations": "0.0.0-5847",
+    "@docusaurus/types": "0.0.0-5847",
+    "@docusaurus/utils": "0.0.0-5847",
+    "@docusaurus/utils-common": "0.0.0-5847",
+    "@docusaurus/utils-validation": "0.0.0-5847",
     "@mdx-js/react": "^3.0.0",
     "clsx": "^2.0.0",
     "copy-text-to-clipboard": "^3.2.0",
@@ -61,5 +61,5 @@
   "engines": {
     "node": ">=18.0"
   },
-  "gitHead": "3dd0ee8e670c2c89f785d221f36ac09ec90b6397"
+  "gitHead": "a819e55b3b147c8ca2c1483813cc9c0ce2b75500"
 }

package/src/theme/BlogArchivePage/index.tsx

@@ -9,6 +9,7 @@ import React from 'react';
 import Link from '@docusaurus/Link';
 import {translate} from '@docusaurus/Translate';
 import {PageMetadata} from '@docusaurus/theme-common';
+import {useDateTimeFormat} from '@docusaurus/theme-common/internal';
 import Layout from '@theme/Layout';
 import type {ArchiveBlogPost, Props} from '@theme/BlogArchivePage';
 import Heading from '@theme/Heading';
@@ -19,6 +20,15 @@ type YearProp = {
 };
 
 function Year({year, posts}: YearProp) {
+  const dateTimeFormat = useDateTimeFormat({
+    day: 'numeric',
+    month: 'long',
+    timeZone: 'UTC',
+  });
+
+  const formatDate = (lastUpdated: string) =>
+    dateTimeFormat.format(new Date(lastUpdated));
+
   return (
     <>
       <Heading as="h3" id={year}>
@@ -28,7 +38,7 @@ function Year({year, posts}: YearProp) {
         {posts.map((post) => (
           <li key={post.metadata.date}>
             <Link to={post.metadata.permalink}>
-              {post.metadata.formattedDate} - {post.metadata.title}
+              {formatDate(post.metadata.date)} - {post.metadata.title}
             </Link>
           </li>
         ))}

package/src/theme/BlogPostItem/Header/Info/index.tsx

@@ -9,7 +9,10 @@ import React from 'react';
 import clsx from 'clsx';
 import {translate} from '@docusaurus/Translate';
 import {usePluralForm} from '@docusaurus/theme-common';
-import {useBlogPost} from '@docusaurus/theme-common/internal';
+import {
+  useBlogPost,
+  useDateTimeFormat,
+} from '@docusaurus/theme-common/internal';
 import type {Props} from '@theme/BlogPostItem/Header/Info';
 
 import styles from './styles.module.css';
@@ -39,7 +42,13 @@ function ReadingTime({readingTime}: {readingTime: number}) {
   return <>{readingTimePlural(readingTime)}</>;
 }
 
-function Date({date, formattedDate}: {date: string; formattedDate: string}) {
+function DateTime({
+  date,
+  formattedDate,
+}: {
+  date: string;
+  formattedDate: string;
+}) {
   return <time dateTime={date}>{formattedDate}</time>;
 }
 
@@ -51,11 +60,21 @@ export default function BlogPostItemHeaderInfo({
   className,
 }: Props): JSX.Element {
   const {metadata} = useBlogPost();
-  const {date, formattedDate, readingTime} = metadata;
+  const {date, readingTime} = metadata;
+
+  const dateTimeFormat = useDateTimeFormat({
+    day: 'numeric',
+    month: 'long',
+    year: 'numeric',
+    timeZone: 'UTC',
+  });
+
+  const formatDate = (blogDate: string) =>
+    dateTimeFormat.format(new Date(blogDate));
 
   return (
     <div className={clsx(styles.container, 'margin-vert--md', className)}>
-      <Date date={date} formattedDate={formattedDate} />
+      <DateTime date={date} formattedDate={formatDate(date)} />
       {typeof readingTime !== 'undefined' && (
         <>
           <Spacer />

package/src/theme/DocItem/Footer/index.tsx

@@ -33,13 +33,12 @@ function TagsRow(props: TagsListInlineProps) {
 
 type EditMetaRowProps = Pick<
   DocContextValue['metadata'],
-  'editUrl' | 'lastUpdatedAt' | 'lastUpdatedBy' | 'formattedLastUpdatedAt'
+  'editUrl' | 'lastUpdatedAt' | 'lastUpdatedBy'
 >;
 function EditMetaRow({
   editUrl,
   lastUpdatedAt,
   lastUpdatedBy,
-  formattedLastUpdatedAt,
 }: EditMetaRowProps) {
   return (
     <div className={clsx(ThemeClassNames.docs.docFooterEditMetaRow, 'row')}>
@@ -49,7 +48,6 @@ function EditMetaRow({
         {(lastUpdatedAt || lastUpdatedBy) && (
           <LastUpdated
             lastUpdatedAt={lastUpdatedAt}
-            formattedLastUpdatedAt={formattedLastUpdatedAt}
             lastUpdatedBy={lastUpdatedBy}
           />
         )}
@@ -60,8 +58,7 @@ function EditMetaRow({
 
 export default function DocItemFooter(): JSX.Element | null {
   const {metadata} = useDoc();
-  const {editUrl, lastUpdatedAt, formattedLastUpdatedAt, lastUpdatedBy, tags} =
-    metadata;
+  const {editUrl, lastUpdatedAt, lastUpdatedBy, tags} = metadata;
 
   const canDisplayTagsRow = tags.length > 0;
   const canDisplayEditMetaRow = !!(editUrl || lastUpdatedAt || lastUpdatedBy);
@@ -81,7 +78,6 @@ export default function DocItemFooter(): JSX.Element | null {
           editUrl={editUrl}
           lastUpdatedAt={lastUpdatedAt}
           lastUpdatedBy={lastUpdatedBy}
-          formattedLastUpdatedAt={formattedLastUpdatedAt}
         />
       )}
     </footer>

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 * 1000);
+
+  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()}>
               {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

@@ -824,7 +824,6 @@ declare module '@theme/SearchMetadata' {
 declare module '@theme/LastUpdated' {
   export interface Props {
     readonly lastUpdatedAt?: number;
-    readonly formattedLastUpdatedAt?: string;
     readonly lastUpdatedBy?: string;
   }