From 6918fcf8b0365c8d0b67a3e3039f2cb2e2682160 Mon Sep 17 00:00:00 2001 From: ozakione <29860391+OzakIOne@users.noreply.github.com> Date: Mon, 19 Feb 2024 17:45:16 +0100 Subject: [PATCH 1/7] feat(theme-common): format date --- .../src/blogUtils.ts | 25 ------------------- .../src/plugin-content-blog.d.ts | 5 ---- .../src/theme/BlogArchivePage/index.tsx | 15 ++++++++++- .../theme/BlogPostItem/Header/Info/index.tsx | 21 +++++++++++++--- .../docusaurus-theme-common/src/internal.ts | 5 +++- .../src/utils/blogUtils.ts | 19 ++++++++++++++ 6 files changed, 54 insertions(+), 36 deletions(-) diff --git a/packages/docusaurus-plugin-content-blog/src/blogUtils.ts b/packages/docusaurus-plugin-content-blog/src/blogUtils.ts index e67e83345203..82494a641cee 100644 --- a/packages/docusaurus-plugin-content-blog/src/blogUtils.ts +++ b/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({ diff --git a/packages/docusaurus-plugin-content-blog/src/plugin-content-blog.d.ts b/packages/docusaurus-plugin-content-blog/src/plugin-content-blog.d.ts index f8b0bd3123ae..6506e5dc3f95 100644 --- a/packages/docusaurus-plugin-content-blog/src/plugin-content-blog.d.ts +++ b/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; /** diff --git a/packages/docusaurus-theme-classic/src/theme/BlogArchivePage/index.tsx b/packages/docusaurus-theme-classic/src/theme/BlogArchivePage/index.tsx index 28613c6a462a..cf54c1538318 100644 --- a/packages/docusaurus-theme-classic/src/theme/BlogArchivePage/index.tsx +++ b/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 ( <> @@ -28,7 +41,7 @@ function Year({year, posts}: YearProp) { {posts.map((post) => (
  • - {post.metadata.formattedDate} - {post.metadata.title} + {formattedDate(post.metadata.date)} - {post.metadata.title}
    • ))} diff --git a/packages/docusaurus-theme-classic/src/theme/BlogPostItem/Header/Info/index.tsx b/packages/docusaurus-theme-classic/src/theme/BlogPostItem/Header/Info/index.tsx index 22811b499ecc..58ff9f50f947 100644 --- a/packages/docusaurus-theme-classic/src/theme/BlogPostItem/Header/Info/index.tsx +++ b/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 (
    - + {typeof readingTime !== 'undefined' && ( <> diff --git a/packages/docusaurus-theme-common/src/internal.ts b/packages/docusaurus-theme-common/src/internal.ts index dc42172ced38..ae5135aca162 100644 --- a/packages/docusaurus-theme-common/src/internal.ts +++ b/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 { diff --git a/packages/docusaurus-theme-common/src/utils/blogUtils.ts b/packages/docusaurus-theme-common/src/utils/blogUtils.ts index d50a2ffac67e..08ca54757ec2 100644 --- a/packages/docusaurus-theme-common/src/utils/blogUtils.ts +++ b/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; + } +} From c6dde38da615c2d459acdd4ed08a90fbec67e1e9 Mon Sep 17 00:00:00 2001 From: ozakione <29860391+OzakIOne@users.noreply.github.com> Date: Wed, 21 Feb 2024 15:48:00 +0100 Subject: [PATCH 2/7] refactor: review --- .../src/theme/BlogArchivePage/index.tsx | 19 +++++------ .../theme/BlogPostItem/Header/Info/index.tsx | 34 +++++++++++-------- .../docusaurus-theme-common/src/internal.ts | 6 ++-- .../src/utils/IntlUtils.ts | 27 +++++++++++++++ .../src/utils/blogUtils.ts | 19 ----------- 5 files changed, 57 insertions(+), 48 deletions(-) create mode 100644 packages/docusaurus-theme-common/src/utils/IntlUtils.ts diff --git a/packages/docusaurus-theme-classic/src/theme/BlogArchivePage/index.tsx b/packages/docusaurus-theme-classic/src/theme/BlogArchivePage/index.tsx index cf54c1538318..20e2b99a49aa 100644 --- a/packages/docusaurus-theme-classic/src/theme/BlogArchivePage/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/BlogArchivePage/index.tsx @@ -9,8 +9,7 @@ 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 {useDateTimeFormat} from '@docusaurus/theme-common/internal'; import Layout from '@theme/Layout'; import type {ArchiveBlogPost, Props} from '@theme/BlogArchivePage'; import Heading from '@theme/Heading'; @@ -21,16 +20,14 @@ type YearProp = { }; function Year({year, posts}: YearProp) { - const { - i18n: {currentLocale, localeConfigs}, - } = useDocusaurusContext(); + const dateTimeFormat = useDateTimeFormat({ + day: 'numeric', + month: 'long', + year: undefined, // Can be customized just for this page + timeZone: 'UTC', + }); - const formattedDate = (date: string) => - formatBlogPostDate( - currentLocale, - date, - localeConfigs[currentLocale]!.calendar, - ); + const formattedDate = (date: string) => dateTimeFormat.format(new Date(date)); return ( <> diff --git a/packages/docusaurus-theme-classic/src/theme/BlogPostItem/Header/Info/index.tsx b/packages/docusaurus-theme-classic/src/theme/BlogPostItem/Header/Info/index.tsx index 58ff9f50f947..2a30b592fe54 100644 --- a/packages/docusaurus-theme-classic/src/theme/BlogPostItem/Header/Info/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/BlogPostItem/Header/Info/index.tsx @@ -8,11 +8,10 @@ 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, - formatBlogPostDate, + useDateTimeFormat, } from '@docusaurus/theme-common/internal'; import type {Props} from '@theme/BlogPostItem/Header/Info'; @@ -43,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 ; } @@ -56,19 +61,20 @@ export default function BlogPostItemHeaderInfo({ }: Props): JSX.Element { const {metadata} = useBlogPost(); const {date, readingTime} = metadata; - const { - i18n: {currentLocale, localeConfigs}, - } = useDocusaurusContext(); + + const dateTimeFormat = useDateTimeFormat({ + day: 'numeric', + month: 'long', + year: 'numeric', + timeZone: 'UTC', + }); + + const formattedDate = (blogDate: string) => + dateTimeFormat.format(new Date(blogDate)); + return (
    - + {typeof readingTime !== 'undefined' && ( <> diff --git a/packages/docusaurus-theme-common/src/internal.ts b/packages/docusaurus-theme-common/src/internal.ts index ae5135aca162..31f081a62118 100644 --- a/packages/docusaurus-theme-common/src/internal.ts +++ b/packages/docusaurus-theme-common/src/internal.ts @@ -113,10 +113,8 @@ export { type TOCHighlightConfig, } from './hooks/useTOCHighlight'; -export { - useVisibleBlogSidebarItems, - formatBlogPostDate, -} from './utils/blogUtils'; +export {useVisibleBlogSidebarItems} from './utils/blogUtils'; +export {useDateTimeFormat} from './utils/IntlUtils'; export {useHideableNavbar} from './hooks/useHideableNavbar'; export { diff --git a/packages/docusaurus-theme-common/src/utils/IntlUtils.ts b/packages/docusaurus-theme-common/src/utils/IntlUtils.ts new file mode 100644 index 000000000000..a127e3492b0a --- /dev/null +++ b/packages/docusaurus-theme-common/src/utils/IntlUtils.ts @@ -0,0 +1,27 @@ +/** + * 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 useDocusaurusContext from '@docusaurus/useDocusaurusContext'; + +export function useCalendar(): string { + const { + i18n: {currentLocale, localeConfigs}, + } = useDocusaurusContext(); + return localeConfigs[currentLocale]!.calendar; +} + +export function useDateTimeFormat( + options: Intl.DateTimeFormatOptions = {}, +): Intl.DateTimeFormat { + const { + i18n: {currentLocale}, + } = useDocusaurusContext(); + const calendar = useCalendar(); + return new Intl.DateTimeFormat(currentLocale, { + calendar, + ...options, + }); +} diff --git a/packages/docusaurus-theme-common/src/utils/blogUtils.ts b/packages/docusaurus-theme-common/src/utils/blogUtils.ts index 08ca54757ec2..d50a2ffac67e 100644 --- a/packages/docusaurus-theme-common/src/utils/blogUtils.ts +++ b/packages/docusaurus-theme-common/src/utils/blogUtils.ts @@ -30,22 +30,3 @@ 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; - } -} From a5882e20a792356d91fbbdbade8020de2e04d403 Mon Sep 17 00:00:00 2001 From: ozakione <29860391+OzakIOne@users.noreply.github.com> Date: Wed, 21 Feb 2024 19:02:48 +0100 Subject: [PATCH 3/7] refactor: review --- .../__snapshots__/index.test.ts.snap | 28 ------------------- .../src/__tests__/docs.test.ts | 5 ---- .../src/docs.ts | 24 ---------------- .../src/plugin-content-docs.d.ts | 2 -- .../src/theme-classic.d.ts | 1 - .../src/theme/BlogArchivePage/index.tsx | 4 +-- .../theme/BlogPostItem/Header/Info/index.tsx | 4 +-- .../src/theme/DocItem/Footer/index.tsx | 8 ++---- .../src/theme/LastUpdated/index.tsx | 15 +++++++++- 9 files changed, 20 insertions(+), 71 deletions(-) diff --git a/packages/docusaurus-plugin-content-docs/src/__tests__/__snapshots__/index.test.ts.snap b/packages/docusaurus-plugin-content-docs/src/__tests__/__snapshots__/index.test.ts.snap index 2a8b72873b07..2cacda09b97d 100644 --- a/packages/docusaurus-plugin-content-docs/src/__tests__/__snapshots__/index.test.ts.snap +++ b/packages/docusaurus-plugin-content-docs/src/__tests__/__snapshots__/index.test.ts.snap @@ -52,7 +52,6 @@ exports[`simple website content 1`] = ` "description": "Images", "draft": false, "editUrl": undefined, - "formattedLastUpdatedAt": undefined, "frontMatter": { "id": "baz", "pagination_label": "baz pagination_label", @@ -105,7 +104,6 @@ exports[`simple website content 2`] = ` "description": "Hi, Endilie here :)", "draft": false, "editUrl": undefined, - "formattedLastUpdatedAt": undefined, "frontMatter": { "id": "hello", "sidebar_label": "Hello sidebar_label", @@ -151,7 +149,6 @@ exports[`simple website content 3`] = ` "description": "This is custom description", "draft": false, "editUrl": undefined, - "formattedLastUpdatedAt": undefined, "frontMatter": { "description": "This is custom description", "id": "bar", @@ -1971,7 +1968,6 @@ exports[`site with full autogenerated sidebar docs in fully generated sidebar ha "description": "Getting started text", "draft": false, "editUrl": undefined, - "formattedLastUpdatedAt": undefined, "frontMatter": {}, "id": "getting-started", "lastUpdatedAt": undefined, @@ -1999,7 +1995,6 @@ exports[`site with full autogenerated sidebar docs in fully generated sidebar ha "description": "Installation text", "draft": false, "editUrl": undefined, - "formattedLastUpdatedAt": undefined, "frontMatter": {}, "id": "installation", "lastUpdatedAt": undefined, @@ -2030,7 +2025,6 @@ exports[`site with full autogenerated sidebar docs in fully generated sidebar ha "description": "Guide 1 text", "draft": false, "editUrl": undefined, - "formattedLastUpdatedAt": undefined, "frontMatter": { "id": "guide1", "sidebar_position": 1, @@ -2064,7 +2058,6 @@ exports[`site with full autogenerated sidebar docs in fully generated sidebar ha "description": "Guide 2 text", "draft": false, "editUrl": undefined, - "formattedLastUpdatedAt": undefined, "frontMatter": { "id": "guide2", }, @@ -2097,7 +2090,6 @@ exports[`site with full autogenerated sidebar docs in fully generated sidebar ha "description": "Guide 2.5 text", "draft": false, "editUrl": undefined, - "formattedLastUpdatedAt": undefined, "frontMatter": { "id": "guide2.5", "sidebar_position": 2.5, @@ -2131,7 +2123,6 @@ exports[`site with full autogenerated sidebar docs in fully generated sidebar ha "description": "Guide 3 text", "draft": false, "editUrl": undefined, - "formattedLastUpdatedAt": undefined, "frontMatter": { "id": "guide3", "sidebar_position": 3, @@ -2165,7 +2156,6 @@ exports[`site with full autogenerated sidebar docs in fully generated sidebar ha "description": "Guide 4 text", "draft": false, "editUrl": undefined, - "formattedLastUpdatedAt": undefined, "frontMatter": { "id": "guide4", }, @@ -2198,7 +2188,6 @@ exports[`site with full autogenerated sidebar docs in fully generated sidebar ha "description": "Guide 5 text", "draft": false, "editUrl": undefined, - "formattedLastUpdatedAt": undefined, "frontMatter": { "id": "guide5", }, @@ -2231,7 +2220,6 @@ exports[`site with full autogenerated sidebar docs in fully generated sidebar ha "description": "API Overview text", "draft": false, "editUrl": undefined, - "formattedLastUpdatedAt": undefined, "frontMatter": {}, "id": "API/api-overview", "lastUpdatedAt": undefined, @@ -2262,7 +2250,6 @@ exports[`site with full autogenerated sidebar docs in fully generated sidebar ha "description": "Client API text", "draft": false, "editUrl": undefined, - "formattedLastUpdatedAt": undefined, "frontMatter": {}, "id": "API/Core APIs/Client API", "lastUpdatedAt": undefined, @@ -2293,7 +2280,6 @@ exports[`site with full autogenerated sidebar docs in fully generated sidebar ha "description": "Server API text", "draft": false, "editUrl": undefined, - "formattedLastUpdatedAt": undefined, "frontMatter": {}, "id": "API/Core APIs/Server API", "lastUpdatedAt": undefined, @@ -2324,7 +2310,6 @@ exports[`site with full autogenerated sidebar docs in fully generated sidebar ha "description": "Plugin API text", "draft": false, "editUrl": undefined, - "formattedLastUpdatedAt": undefined, "frontMatter": {}, "id": "API/Extension APIs/Plugin API", "lastUpdatedAt": undefined, @@ -2355,7 +2340,6 @@ exports[`site with full autogenerated sidebar docs in fully generated sidebar ha "description": "Theme API text", "draft": false, "editUrl": undefined, - "formattedLastUpdatedAt": undefined, "frontMatter": {}, "id": "API/Extension APIs/Theme API", "lastUpdatedAt": undefined, @@ -2386,7 +2370,6 @@ exports[`site with full autogenerated sidebar docs in fully generated sidebar ha "description": "API End text", "draft": false, "editUrl": undefined, - "formattedLastUpdatedAt": undefined, "frontMatter": {}, "id": "API/api-end", "lastUpdatedAt": undefined, @@ -2566,7 +2549,6 @@ exports[`site with partial autogenerated sidebars docs in partially generated si "description": "API End text", "draft": false, "editUrl": undefined, - "formattedLastUpdatedAt": undefined, "frontMatter": {}, "id": "API/api-end", "lastUpdatedAt": undefined, @@ -2594,7 +2576,6 @@ exports[`site with partial autogenerated sidebars docs in partially generated si "description": "API Overview text", "draft": false, "editUrl": undefined, - "formattedLastUpdatedAt": undefined, "frontMatter": {}, "id": "API/api-overview", "lastUpdatedAt": undefined, @@ -2625,7 +2606,6 @@ exports[`site with partial autogenerated sidebars docs in partially generated si "description": "Plugin API text", "draft": false, "editUrl": undefined, - "formattedLastUpdatedAt": undefined, "frontMatter": {}, "id": "API/Extension APIs/Plugin API", "lastUpdatedAt": undefined, @@ -2656,7 +2636,6 @@ exports[`site with partial autogenerated sidebars docs in partially generated si "description": "Theme API text", "draft": false, "editUrl": undefined, - "formattedLastUpdatedAt": undefined, "frontMatter": {}, "id": "API/Extension APIs/Theme API", "lastUpdatedAt": undefined, @@ -2716,7 +2695,6 @@ exports[`versioned website (community) content 1`] = ` "description": "Team current version (translated)", "draft": false, "editUrl": undefined, - "formattedLastUpdatedAt": undefined, "frontMatter": { "title": "Team title translated", }, @@ -2743,7 +2721,6 @@ exports[`versioned website (community) content 2`] = ` "description": "Team 1.0.0", "draft": false, "editUrl": undefined, - "formattedLastUpdatedAt": undefined, "frontMatter": {}, "id": "team", "lastUpdatedAt": undefined, @@ -3023,7 +3000,6 @@ exports[`versioned website content 1`] = ` "description": "This is next version of bar.", "draft": false, "editUrl": undefined, - "formattedLastUpdatedAt": undefined, "frontMatter": { "slug": "barSlug", "tags": [ @@ -3074,7 +3050,6 @@ exports[`versioned website content 2`] = ` "description": "Bar 1.0.1 !", "draft": false, "editUrl": undefined, - "formattedLastUpdatedAt": undefined, "frontMatter": {}, "id": "foo/bar", "lastUpdatedAt": undefined, @@ -3102,7 +3077,6 @@ exports[`versioned website content 3`] = ` "description": "Hello next !", "draft": false, "editUrl": undefined, - "formattedLastUpdatedAt": undefined, "frontMatter": { "slug": "/", }, @@ -3132,7 +3106,6 @@ exports[`versioned website content 4`] = ` "description": "Hello 1.0.1 !", "draft": false, "editUrl": undefined, - "formattedLastUpdatedAt": undefined, "frontMatter": { "slug": "/", }, @@ -3162,7 +3135,6 @@ exports[`versioned website content 5`] = ` "description": "Baz 1.0.0 ! This will be deleted in next subsequent versions.", "draft": false, "editUrl": undefined, - "formattedLastUpdatedAt": undefined, "frontMatter": {}, "id": "foo/baz", "lastUpdatedAt": undefined, diff --git a/packages/docusaurus-plugin-content-docs/src/__tests__/docs.test.ts b/packages/docusaurus-plugin-content-docs/src/__tests__/docs.test.ts index 7309620d737c..a2c86b4d5935 100644 --- a/packages/docusaurus-plugin-content-docs/src/__tests__/docs.test.ts +++ b/packages/docusaurus-plugin-content-docs/src/__tests__/docs.test.ts @@ -475,7 +475,6 @@ describe('simple site', () => { unrelated_front_matter: "won't be part of metadata", }, lastUpdatedAt: 1539502055, - formattedLastUpdatedAt: 'Oct 14, 2018', lastUpdatedBy: 'Author', tags: [], unlisted: false, @@ -573,7 +572,6 @@ describe('simple site', () => { title: 'Custom Last Update', }, lastUpdatedAt: new Date('1/1/2000').getTime() / 1000, - formattedLastUpdatedAt: 'Jan 1, 2000', lastUpdatedBy: 'Custom Author (processed by parseFrontMatter)', sidebarPosition: undefined, tags: [], @@ -612,7 +610,6 @@ describe('simple site', () => { title: 'Last Update Author Only', }, lastUpdatedAt: 1539502055, - formattedLastUpdatedAt: 'Oct 14, 2018', lastUpdatedBy: 'Custom Author (processed by parseFrontMatter)', sidebarPosition: undefined, tags: [], @@ -651,7 +648,6 @@ describe('simple site', () => { title: 'Last Update Date Only', }, lastUpdatedAt: new Date('1/1/2000').getTime() / 1000, - formattedLastUpdatedAt: 'Jan 1, 2000', lastUpdatedBy: 'Author', sidebarPosition: undefined, tags: [], @@ -691,7 +687,6 @@ describe('simple site', () => { title: 'Custom Last Update', }, lastUpdatedAt: undefined, - formattedLastUpdatedAt: undefined, lastUpdatedBy: undefined, sidebarPosition: undefined, tags: [], diff --git a/packages/docusaurus-plugin-content-docs/src/docs.ts b/packages/docusaurus-plugin-content-docs/src/docs.ts index 2907ac7211f3..158f949ef370 100644 --- a/packages/docusaurus-plugin-content-docs/src/docs.ts +++ b/packages/docusaurus-plugin-content-docs/src/docs.ts @@ -8,7 +8,6 @@ import path from 'path'; import fs from 'fs-extra'; import _ from 'lodash'; -import logger from '@docusaurus/logger'; import { aliasedSitePath, getEditUrl, @@ -142,7 +141,6 @@ async function doProcessDocMetadata({ const {source, content, contentPath, filePath} = docFile; const { siteDir, - i18n, siteConfig: { markdown: {parseFrontMatter}, }, @@ -257,21 +255,6 @@ async function doProcessDocMetadata({ const draft = isDraft({env, frontMatter}); const unlisted = isUnlisted({env, frontMatter}); - const formatDate = (locale: string, date: Date, calendar: string): string => { - try { - return new Intl.DateTimeFormat(locale, { - day: 'numeric', - month: 'short', - year: 'numeric', - timeZone: 'UTC', - calendar, - }).format(date); - } catch (err) { - logger.error`Can't format docs lastUpdatedAt date "${String(date)}"`; - throw err; - } - }; - // Assign all of object properties during instantiation (if possible) for // NodeJS optimization. // Adding properties to object after instantiation will cause hidden @@ -291,13 +274,6 @@ async function doProcessDocMetadata({ version: versionMetadata.versionName, lastUpdatedBy: lastUpdate.lastUpdatedBy, lastUpdatedAt: lastUpdate.lastUpdatedAt, - formattedLastUpdatedAt: lastUpdate.lastUpdatedAt - ? formatDate( - i18n.currentLocale, - new Date(lastUpdate.lastUpdatedAt * 1000), - i18n.localeConfigs[i18n.currentLocale]!.calendar, - ) - : undefined, sidebarPosition, frontMatter, }; diff --git a/packages/docusaurus-plugin-content-docs/src/plugin-content-docs.d.ts b/packages/docusaurus-plugin-content-docs/src/plugin-content-docs.d.ts index 96f8fb3883a0..dc0db6e40368 100644 --- a/packages/docusaurus-plugin-content-docs/src/plugin-content-docs.d.ts +++ b/packages/docusaurus-plugin-content-docs/src/plugin-content-docs.d.ts @@ -407,8 +407,6 @@ declare module '@docusaurus/plugin-content-docs' { export type LastUpdateData = { /** A timestamp in **seconds**, directly acquired from `git log`. */ lastUpdatedAt?: number; - /** `lastUpdatedAt` formatted as a date according to the current locale. */ - formattedLastUpdatedAt?: string; /** The author's name directly acquired from `git log`. */ lastUpdatedBy?: string; }; diff --git a/packages/docusaurus-theme-classic/src/theme-classic.d.ts b/packages/docusaurus-theme-classic/src/theme-classic.d.ts index a54f0799a81e..6afed49abcfc 100644 --- a/packages/docusaurus-theme-classic/src/theme-classic.d.ts +++ b/packages/docusaurus-theme-classic/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; } diff --git a/packages/docusaurus-theme-classic/src/theme/BlogArchivePage/index.tsx b/packages/docusaurus-theme-classic/src/theme/BlogArchivePage/index.tsx index 20e2b99a49aa..32a480d4fef3 100644 --- a/packages/docusaurus-theme-classic/src/theme/BlogArchivePage/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/BlogArchivePage/index.tsx @@ -27,7 +27,7 @@ function Year({year, posts}: YearProp) { timeZone: 'UTC', }); - const formattedDate = (date: string) => dateTimeFormat.format(new Date(date)); + const formatDate = (date: string) => dateTimeFormat.format(new Date(date)); return ( <> @@ -38,7 +38,7 @@ function Year({year, posts}: YearProp) { {posts.map((post) => (
  • - {formattedDate(post.metadata.date)} - {post.metadata.title} + {formatDate(post.metadata.date)} - {post.metadata.title}
    • ))} diff --git a/packages/docusaurus-theme-classic/src/theme/BlogPostItem/Header/Info/index.tsx b/packages/docusaurus-theme-classic/src/theme/BlogPostItem/Header/Info/index.tsx index 2a30b592fe54..9b5308bbc73a 100644 --- a/packages/docusaurus-theme-classic/src/theme/BlogPostItem/Header/Info/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/BlogPostItem/Header/Info/index.tsx @@ -69,12 +69,12 @@ export default function BlogPostItemHeaderInfo({ timeZone: 'UTC', }); - const formattedDate = (blogDate: string) => + const formatDate = (blogDate: string) => dateTimeFormat.format(new Date(blogDate)); return (
    - + {typeof readingTime !== 'undefined' && ( <> diff --git a/packages/docusaurus-theme-classic/src/theme/DocItem/Footer/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocItem/Footer/index.tsx index 971d7a8ff754..c59b85b3d49d 100644 --- a/packages/docusaurus-theme-classic/src/theme/DocItem/Footer/index.tsx +++ b/packages/docusaurus-theme-classic/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 (
    @@ -49,7 +48,6 @@ function EditMetaRow({ {(lastUpdatedAt || 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} /> )} diff --git a/packages/docusaurus-theme-classic/src/theme/LastUpdated/index.tsx b/packages/docusaurus-theme-classic/src/theme/LastUpdated/index.tsx index 5ba4c3e2f249..75ebdfc85257 100644 --- a/packages/docusaurus-theme-classic/src/theme/LastUpdated/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/LastUpdated/index.tsx @@ -8,6 +8,7 @@ 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({ @@ -54,9 +55,21 @@ function LastUpdatedByUser({ export default function LastUpdated({ lastUpdatedAt, - formattedLastUpdatedAt, lastUpdatedBy, }: Props): JSX.Element { + const dateTimeFormat = useDateTimeFormat({ + day: 'numeric', + month: 'short', + year: 'numeric', + timeZone: 'UTC', + }); + + const formatDate = (blogDate: string | number) => + dateTimeFormat.format(new Date(blogDate)); + + const formattedLastUpdatedAt = + lastUpdatedAt && formatDate(lastUpdatedAt * 1000); + return ( Date: Wed, 21 Feb 2024 19:37:40 +0100 Subject: [PATCH 4/7] refactor: fix and removed deprecated tests --- .../src/__tests__/index.test.ts | 47 ++----------------- 1 file changed, 3 insertions(+), 44 deletions(-) diff --git a/packages/docusaurus-plugin-content-blog/src/__tests__/index.test.ts b/packages/docusaurus-plugin-content-blog/src/__tests__/index.test.ts index 51b2f63f2fe7..79a7c68994fa 100644 --- a/packages/docusaurus-plugin-content-blog/src/__tests__/index.test.ts +++ b/packages/docusaurus-plugin-content-blog/src/__tests__/index.test.ts @@ -41,6 +41,7 @@ const markdown: MarkdownConfig = { } return result; }, + remarkRehypeOptions: undefined, }; function findByTitle( @@ -175,7 +176,6 @@ describe('blog plugin', () => { description: `date inside front matter`, authors: [], date: new Date('2019-01-01'), - formattedDate: 'January 1, 2019', frontMatter: { date: new Date('2019-01-01'), tags: ['date'], @@ -210,9 +210,11 @@ describe('blog plugin', () => { description: `Happy birthday! (translated)`, authors: [ { + imageURL: undefined, name: 'Yangshun Tay (translated)', }, { + imageURL: undefined, email: 'lorber.sebastien@gmail.com', key: 'slorber', name: 'Sébastien Lorber (translated)', @@ -220,7 +222,6 @@ describe('blog plugin', () => { }, ], date: new Date('2018-12-14'), - formattedDate: 'December 14, 2018', frontMatter: { authors: [ { @@ -256,7 +257,6 @@ describe('blog plugin', () => { title: 'Simple Slug', }, date: new Date('2020-08-16'), - formattedDate: 'August 16, 2020', frontMatter: { date: '2020/08/16', slug: '/hey/my super path/héllô', @@ -302,7 +302,6 @@ describe('blog plugin', () => { title: 'draft', }, date: new Date('2020-08-15'), - formattedDate: 'August 15, 2020', frontMatter: { author: 'Sébastien Lorber', author_title: 'Docusaurus maintainer', @@ -328,7 +327,6 @@ describe('blog plugin', () => { description: '', authors: [], date: new Date('2019-01-02'), - formattedDate: 'January 2, 2019', frontMatter: { date: new Date('2019-01-02'), }, @@ -343,39 +341,6 @@ describe('blog plugin', () => { }); }); - it('builds simple website blog with localized dates', async () => { - const siteDir = path.join(__dirname, '__fixtures__', 'website'); - const blogPostsFrench = await getBlogPosts(siteDir, {}, getI18n('fr')); - expect(blogPostsFrench).toHaveLength(10); - expect(blogPostsFrench[0]!.metadata.formattedDate).toMatchInlineSnapshot( - `"23 juillet 2023"`, - ); - expect(blogPostsFrench[1]!.metadata.formattedDate).toMatchInlineSnapshot( - `"6 mars 2021"`, - ); - expect(blogPostsFrench[2]!.metadata.formattedDate).toMatchInlineSnapshot( - `"5 mars 2021"`, - ); - expect(blogPostsFrench[3]!.metadata.formattedDate).toMatchInlineSnapshot( - `"16 août 2020"`, - ); - expect(blogPostsFrench[4]!.metadata.formattedDate).toMatchInlineSnapshot( - `"15 août 2020"`, - ); - expect(blogPostsFrench[5]!.metadata.formattedDate).toMatchInlineSnapshot( - `"27 février 2020"`, - ); - expect(blogPostsFrench[6]!.metadata.formattedDate).toMatchInlineSnapshot( - `"27 février 2020"`, - ); - expect(blogPostsFrench[7]!.metadata.formattedDate).toMatchInlineSnapshot( - `"2 janvier 2019"`, - ); - expect(blogPostsFrench[8]!.metadata.formattedDate).toMatchInlineSnapshot( - `"1 janvier 2019"`, - ); - }); - it('handles edit URL with editLocalizedBlogs: true', async () => { const siteDir = path.join(__dirname, '__fixtures__', 'website'); const blogPosts = await getBlogPosts(siteDir, {editLocalizedFiles: true}); @@ -476,11 +441,6 @@ describe('blog plugin', () => { // We know the file exists and we know we have git const result = getFileCommitDate(noDateSourceFile, {age: 'oldest'}); const noDateSourceTime = result.date; - const formattedDate = Intl.DateTimeFormat('en', { - day: 'numeric', - month: 'long', - year: 'numeric', - }).format(noDateSourceTime); expect({ ...getByTitle(blogPosts, 'no date').metadata, @@ -494,7 +454,6 @@ describe('blog plugin', () => { description: `no date`, authors: [], date: noDateSourceTime, - formattedDate, frontMatter: {}, tags: [], prevItem: undefined, From f6486e1b73bef3aa6b0cf0635981c5444358f1bf Mon Sep 17 00:00:00 2001 From: OzakIOne Date: Wed, 21 Feb 2024 18:42:47 +0000 Subject: [PATCH 5/7] refactor: apply lint autofix --- project-words.txt | 4 ---- 1 file changed, 4 deletions(-) diff --git a/project-words.txt b/project-words.txt index b3af64e7d0bf..cf88f27ad900 100644 --- a/project-words.txt +++ b/project-words.txt @@ -8,7 +8,6 @@ algoliasearch Allez Anshul anshul -août APFS apfs appinstalled @@ -105,7 +104,6 @@ Formik FOUC froms funboxteam -février gabrielcsapo Gifs Goss @@ -139,14 +137,12 @@ interactiveness Interpolatable interpolatable Investec -janvier javadoc jiti jmarcey jodyheavener joshcena jssdk -juillet Kaszubowski Katex katex From 8d7bb9c36e6a4914f7ea248bdd536da8c07a1805 Mon Sep 17 00:00:00 2001 From: ozakione <29860391+OzakIOne@users.noreply.github.com> Date: Fri, 23 Feb 2024 16:32:29 +0100 Subject: [PATCH 6/7] wip: review comments --- .../src/__tests__/index.test.ts | 1 - .../src/theme/BlogArchivePage/index.tsx | 4 +- .../src/theme/LastUpdated/index.tsx | 46 +++++++++---------- 3 files changed, 23 insertions(+), 28 deletions(-) diff --git a/packages/docusaurus-plugin-content-blog/src/__tests__/index.test.ts b/packages/docusaurus-plugin-content-blog/src/__tests__/index.test.ts index 79a7c68994fa..af712c024535 100644 --- a/packages/docusaurus-plugin-content-blog/src/__tests__/index.test.ts +++ b/packages/docusaurus-plugin-content-blog/src/__tests__/index.test.ts @@ -210,7 +210,6 @@ describe('blog plugin', () => { description: `Happy birthday! (translated)`, authors: [ { - imageURL: undefined, name: 'Yangshun Tay (translated)', }, { diff --git a/packages/docusaurus-theme-classic/src/theme/BlogArchivePage/index.tsx b/packages/docusaurus-theme-classic/src/theme/BlogArchivePage/index.tsx index 32a480d4fef3..f4174faa91c2 100644 --- a/packages/docusaurus-theme-classic/src/theme/BlogArchivePage/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/BlogArchivePage/index.tsx @@ -23,11 +23,11 @@ function Year({year, posts}: YearProp) { const dateTimeFormat = useDateTimeFormat({ day: 'numeric', month: 'long', - year: undefined, // Can be customized just for this page timeZone: 'UTC', }); - const formatDate = (date: string) => dateTimeFormat.format(new Date(date)); + const formatDate = (lastUpdated: string) => + dateTimeFormat.format(new Date(lastUpdated)); return ( <> diff --git a/packages/docusaurus-theme-classic/src/theme/LastUpdated/index.tsx b/packages/docusaurus-theme-classic/src/theme/LastUpdated/index.tsx index 75ebdfc85257..fb3227057a16 100644 --- a/packages/docusaurus-theme-classic/src/theme/LastUpdated/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/LastUpdated/index.tsx @@ -13,11 +13,24 @@ import type {Props} from '@theme/LastUpdated'; function LastUpdatedAtDate({ lastUpdatedAt, - formattedLastUpdatedAt, }: { lastUpdatedAt: number; - formattedLastUpdatedAt: string; }): JSX.Element { + const convertedLastUpdateAt = lastUpdatedAt * 1000; + + const dateTimeFormat = useDateTimeFormat({ + day: 'numeric', + month: 'short', + year: 'numeric', + timeZone: 'UTC', + }); + + const formatLastUpdatedAt = (lastUpdated: number) => + dateTimeFormat.format(new Date(lastUpdated)); + + const formattedLastUpdatedAt = + lastUpdatedAt && formatLastUpdatedAt(convertedLastUpdateAt); + return ( -