refactor(theme): dates should be formatted on the client-side instead of in nodejs code

packages/docusaurus-plugin-content-blog/src/blogUtils.ts

@@ -164,25 +164,6 @@ export function parseBlogFileName(
   return {date: undefined, text, slug};
 }
 
-function formatBlogPostDate(
-  locale: string,
-  date: Date,
-  calendar: string,
-): string {
-  try {
-    return new Intl.DateTimeFormat(locale, {
-      day: 'numeric',
-      month: 'long',
-      year: 'numeric',
-      timeZone: 'UTC',
-      calendar,
-    }).format(date);
-  } catch (err) {
-    logger.error`Can't format blog post date "${String(date)}"`;
-    throw err;
-  }
-}
-
 async function parseBlogPostMarkdownFile({
   filePath,
   parseFrontMatter,
@@ -289,11 +270,6 @@ async function processBlogSourceFile(
   }
 
   const date = await getDate();
-  const formattedDate = formatBlogPostDate(
-    i18n.currentLocale,
-    date,
-    i18n.localeConfigs[i18n.currentLocale]!.calendar,
-  );
 
   const title = frontMatter.title ?? contentTitle ?? parsedBlogFileName.text;
   const description = frontMatter.description ?? excerpt ?? '';
@@ -348,7 +324,6 @@ async function processBlogSourceFile(
       title,
       description,
       date,
-      formattedDate,
       tags: normalizeFrontMatterTags(tagsBasePath, frontMatter.tags),
       readingTime: showReadingTime
         ? options.readingTime({

packages/docusaurus-plugin-content-blog/src/plugin-content-blog.d.ts

@@ -192,11 +192,6 @@ yarn workspace v1.22.19image` is a collocated image path, this entry will be the
      * into a string.
      */
     readonly date: Date;
-    /**
-     * Publish date formatted according to the locale, so that the client can
-     * render the date regardless of the existence of `Intl.DateTimeFormat`.
-     */
-    readonly formattedDate: string;
     /** Full link including base URL. */
     readonly permalink: string;
     /**

packages/docusaurus-theme-classic/src/theme/BlogArchivePage/index.tsx

@@ -9,6 +9,8 @@ import React from 'react';
 import Link from '@docusaurus/Link';
 import {translate} from '@docusaurus/Translate';
 import {PageMetadata} from '@docusaurus/theme-common';
+import {formatBlogPostDate} from '@docusaurus/theme-common/internal';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import Layout from '@theme/Layout';
 import type {ArchiveBlogPost, Props} from '@theme/BlogArchivePage';
 import Heading from '@theme/Heading';
@@ -19,6 +21,17 @@ type YearProp = {
 };
 
 function Year({year, posts}: YearProp) {
+  const {
+    i18n: {currentLocale, localeConfigs},
+  } = useDocusaurusContext();
+
+  const formattedDate = (date: string) =>
+    formatBlogPostDate(
+      currentLocale,
+      date,
+      localeConfigs[currentLocale]!.calendar,
+    );
+
   return (
     <>
       <Heading as="h3" id={year}>
@@ -28,7 +41,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}
+              {formattedDate(post.metadata.date)} - {post.metadata.title}
             </Link>
           </li>
         ))}

packages/docusaurus-theme-classic/src/theme/BlogPostItem/Header/Info/index.tsx

@@ -8,8 +8,12 @@
 import React from 'react';
 import clsx from 'clsx';
 import {translate} from '@docusaurus/Translate';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import {usePluralForm} from '@docusaurus/theme-common';
-import {useBlogPost} from '@docusaurus/theme-common/internal';
+import {
+  useBlogPost,
+  formatBlogPostDate,
+} from '@docusaurus/theme-common/internal';
 import type {Props} from '@theme/BlogPostItem/Header/Info';
 
 import styles from './styles.module.css';
@@ -51,11 +55,20 @@ export default function BlogPostItemHeaderInfo({
   className,
 }: Props): JSX.Element {
   const {metadata} = useBlogPost();
-  const {date, formattedDate, readingTime} = metadata;
-
+  const {date, readingTime} = metadata;
+  const {
+    i18n: {currentLocale, localeConfigs},
+  } = useDocusaurusContext();
   return (
     <div className={clsx(styles.container, 'margin-vert--md', className)}>
-      <Date date={date} formattedDate={formattedDate} />
+      <Date
+        date={date}
+        formattedDate={formatBlogPostDate(
+          currentLocale,
+          date,
+          localeConfigs[currentLocale]!.calendar,
+        )}
+      />
       {typeof readingTime !== 'undefined' && (
         <>
           <Spacer />

packages/docusaurus-theme-common/src/internal.ts

@@ -113,7 +113,10 @@ export {
   type TOCHighlightConfig,
 } from './hooks/useTOCHighlight';
 
-export {useVisibleBlogSidebarItems} from './utils/blogUtils';
+export {
+  useVisibleBlogSidebarItems,
+  formatBlogPostDate,
+} from './utils/blogUtils';
 
 export {useHideableNavbar} from './hooks/useHideableNavbar';
 export {

packages/docusaurus-theme-common/src/utils/blogUtils.ts

@@ -30,3 +30,22 @@ export function useVisibleBlogSidebarItems(
     [items, pathname],
   );
 }
+
+export function formatBlogPostDate(
+  locale: string,
+  date: Date | string,
+  calendar: string,
+): string {
+  try {
+    return new Intl.DateTimeFormat(locale, {
+      day: 'numeric',
+      month: 'long',
+      year: 'numeric',
+      timeZone: 'UTC',
+      calendar,
+    }).format(typeof date === 'string' ? new Date(date) : date);
+  } catch (err) {
+    console.error('Failed to format date', err);
+    throw err;
+  }
+}