refactor(v2): format post date using Intl (#4344)

* refactor(v2): format post date using Intl

* Fix test

* Blog: add localized blog post date test

Co-authored-by: slorber <lorber.sebastien@gmail.com>

packages/docusaurus-plugin-content-blog/src/__tests__/generateBlogFeed.test.ts

@@ -7,9 +7,16 @@
 
 import path from 'path';
 import {generateBlogFeed} from '../blogUtils';
-import {LoadContext} from '@docusaurus/types';
+import {LoadContext, I18n} from '@docusaurus/types';
 import {PluginOptions, BlogContentPaths} from '../types';
 
+const DefaultI18N: I18n = {
+  currentLocale: 'en',
+  locales: ['en'],
+  defaultLocale: 'en',
+  localeConfigs: {},
+};
+
 function getBlogContentPaths(siteDir: string): BlogContentPaths {
   return {
     contentPath: path.resolve(siteDir, 'blog'),
@@ -39,6 +46,7 @@ describe('blogFeed', () => {
           {
             siteDir,
             siteConfig,
+            i18n: DefaultI18N,
           } as LoadContext,
           {
             path: 'invalid-blog-path',
@@ -71,6 +79,7 @@ describe('blogFeed', () => {
             siteDir,
             siteConfig,
             generatedFilesDir,
+            i18n: DefaultI18N,
           } as LoadContext,
           {
             path: 'blog',

packages/docusaurus-plugin-content-blog/src/__tests__/index.test.ts

@@ -13,12 +13,16 @@ import {PluginOptionSchema} from '../pluginOptionSchema';
 import {PluginOptions, EditUrlFunction} from '../types';
 import Joi from 'joi';
 
-const DefaultI18N: I18n = {
-  currentLocale: 'en',
-  locales: ['en'],
-  defaultLocale: 'en',
-  localeConfigs: {},
-};
+function getI18n(locale: string): I18n {
+  return {
+    currentLocale: locale,
+    locales: [locale],
+    defaultLocale: locale,
+    localeConfigs: {},
+  };
+}
+
+const DefaultI18N: I18n = getI18n('en');
 
 function validateAndNormalize(
   schema: Joi.ObjectSchema,
@@ -40,6 +44,7 @@ describe('loadBlog', () => {
   const getBlogPosts = async (
     siteDir: string,
     pluginOptions: Partial<PluginOptions> = {},
+    i18n: I18n = DefaultI18N,
   ) => {
     const generatedFilesDir: string = path.resolve(siteDir, '.docusaurus');
     const siteConfig = {
@@ -52,7 +57,7 @@ describe('loadBlog', () => {
         siteDir,
         siteConfig,
         generatedFilesDir,
-        i18n: DefaultI18N,
+        i18n,
       } as LoadContext,
       validateAndNormalize(PluginOptionSchema, {
         path: PluginPath,
@@ -80,6 +85,7 @@ describe('loadBlog', () => {
       title: 'date-matter',
       description: `date inside front matter`,
       date: new Date('2019-01-01'),
+      formattedDate: 'January 1, 2019',
       prevItem: undefined,
       tags: [],
       nextItem: {
@@ -106,6 +112,7 @@ describe('loadBlog', () => {
       title: 'Happy 1st Birthday Slash! (translated)',
       description: `Happy birthday! (translated)`,
       date: new Date('2018-12-14'),
+      formattedDate: 'December 14, 2018',
       tags: [],
       prevItem: {
         permalink: '/blog/date-matter',
@@ -130,6 +137,7 @@ describe('loadBlog', () => {
         title: 'Simple Slug',
       },
       date: new Date('2020-08-16'),
+      formattedDate: 'August 16, 2020',
       tags: [],
       truncated: false,
     });
@@ -150,11 +158,33 @@ describe('loadBlog', () => {
         title: 'draft',
       },
       date: new Date('2020-08-15'),
+      formattedDate: 'August 15, 2020',
       tags: [],
       truncated: false,
     });
   });
 
+  test('simple website blog dates localized', async () => {
+    const siteDir = path.join(__dirname, '__fixtures__', 'website');
+    const blogPostsFrench = await getBlogPosts(siteDir, {}, getI18n('fr'));
+    expect(blogPostsFrench).toHaveLength(5);
+    expect(blogPostsFrench[0].metadata.formattedDate).toMatchInlineSnapshot(
+      `"16 août 2020"`,
+    );
+    expect(blogPostsFrench[1].metadata.formattedDate).toMatchInlineSnapshot(
+      `"15 août 2020"`,
+    );
+    expect(blogPostsFrench[2].metadata.formattedDate).toMatchInlineSnapshot(
+      `"27 février 2020"`,
+    );
+    expect(blogPostsFrench[3].metadata.formattedDate).toMatchInlineSnapshot(
+      `"1 janvier 2019"`,
+    );
+    expect(blogPostsFrench[4].metadata.formattedDate).toMatchInlineSnapshot(
+      `"14 décembre 2018"`,
+    );
+  });
+
   test('edit url with editLocalizedBlogs true', async () => {
     const siteDir = path.join(__dirname, '__fixtures__', 'website');
     const blogPosts = await getBlogPosts(siteDir, {editLocalizedFiles: true});
@@ -232,6 +262,11 @@ describe('loadBlog', () => {
     const noDateSourceBirthTime = (
       await fs.stat(noDateSource.replace('@site', siteDir))
     ).birthtime;
+    const formattedDate = Intl.DateTimeFormat('en', {
+      day: 'numeric',
+      month: 'long',
+      year: 'numeric',
+    }).format(noDateSourceBirthTime);
 
     expect({
       ...blogPosts.find((v) => v.metadata.title === 'no date')!.metadata,
@@ -244,6 +279,7 @@ describe('loadBlog', () => {
       title: 'no date',
       description: `no date`,
       date: noDateSourceBirthTime,
+      formattedDate,
       tags: [],
       prevItem: undefined,
       nextItem: undefined,

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

@@ -27,6 +27,7 @@ import {
   getEditUrl,
   getFolderContainingFile,
   posixPath,
+  getDateTimeFormat,
 } from '@docusaurus/utils';
 import {LoadContext} from '@docusaurus/types';
 import {keyBy} from 'lodash';
@@ -168,6 +169,14 @@ export async function generateBlogPosts(
 
       // Use file create time for blog.
       date = date || (await fs.stat(source)).birthtime;
+      const formattedDate = getDateTimeFormat(i18n.currentLocale)(
+        i18n.currentLocale,
+        {
+          day: 'numeric',
+          month: 'long',
+          year: 'numeric',
+        },
+      ).format(date);
 
       const slug =
         frontMatter.slug || (match ? toUrl({date, link: linkName}) : linkName);
@@ -214,6 +223,7 @@ export async function generateBlogPosts(
           source: aliasedSource,
           description: frontMatter.description || excerpt,
           date,
+          formattedDate,
           tags: frontMatter.tags,
           title: frontMatter.title,
           readingTime: showReadingTime

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

@@ -106,6 +106,7 @@ export interface MetaData {
   source: string;
   description: string;
   date: Date;
+  formattedDate: string;
   tags: (Tag | string)[];
   title: string;
   readingTime?: number;