This is an automated email from the ASF dual-hosted git repository.
xushiyan pushed a commit to branch asf-site
in repository https://gitbox.apache.org/repos/asf/hudi.git
The following commit(s) were added to refs/heads/asf-site by this push:
new 6b55c5126735 chore(site): fix date inconsistency issue in blog card in
homepage (#17633)
6b55c5126735 is described below
commit 6b55c5126735bac9a96cf06d4251a3be14a829e8
Author: pintusoliya <[email protected]>
AuthorDate: Thu Dec 18 11:41:22 2025 +0530
chore(site): fix date inconsistency issue in blog card in homepage (#17633)
---
website/src/components/BlogsSlider/BlogCard.js | 12 ++++++---
website/src/components/VideoList/index.js | 35 ++++++++++++++------------
website/src/theme/BlogPostItem/BlogPostBox.js | 12 ++++++---
3 files changed, 37 insertions(+), 22 deletions(-)
diff --git a/website/src/components/BlogsSlider/BlogCard.js
b/website/src/components/BlogsSlider/BlogCard.js
index 6ec0cc40bb89..27f4163c622d 100644
--- a/website/src/components/BlogsSlider/BlogCard.js
+++ b/website/src/components/BlogsSlider/BlogCard.js
@@ -1,3 +1,4 @@
+import {useDateTimeFormat} from "@docusaurus/theme-common/internal";
import React from "react";
import { useBaseUrlUtils } from
"@docusaurus/core/lib/client/exports/useBaseUrl";
import Link from "@docusaurus/Link";
@@ -12,9 +13,14 @@ const BlogCard = ({ blog }) => {
const { date, title, authors, permalink } = metadata;
const image = assets.image ?? frontMatter.image ?? "/assets/images/hudi.png";
- const dateObj = new Date(date);
- const options = { year: 'numeric', month: 'long', day: 'numeric' };
- const formattedDate = dateObj.toLocaleDateString('en-US', options);
+ const dateTimeFormat = useDateTimeFormat({
+ day: 'numeric',
+ month: 'long',
+ year: 'numeric',
+ timeZone: 'UTC',
+ });
+ const formatDate = (blogDate) => dateTimeFormat.format(new Date(blogDate));
+ const formattedDate = date ? formatDate(date) : '';
return (
diff --git a/website/src/components/VideoList/index.js
b/website/src/components/VideoList/index.js
index a0dc9d9a8400..71b0f7889dbc 100644
--- a/website/src/components/VideoList/index.js
+++ b/website/src/components/VideoList/index.js
@@ -1,3 +1,4 @@
+import {useDateTimeFormat} from "@docusaurus/theme-common/internal";
import React, { useState } from 'react';
import Link from '@docusaurus/Link';
import { useBaseUrlUtils } from
'@docusaurus/core/lib/client/exports/useBaseUrl';
@@ -42,7 +43,7 @@ const POSTS_PER_PAGE = 12;
export default function VideoList() {
const { withBaseUrl } = useBaseUrlUtils();
const [currentPage, setCurrentPage] = useState(1);
-
+
const totalPages = Math.ceil(sortedVideos.length / POSTS_PER_PAGE);
const startIndex = (currentPage - 1) * POSTS_PER_PAGE;
const endIndex = startIndex + POSTS_PER_PAGE;
@@ -58,11 +59,11 @@ export default function VideoList() {
const maxVisible = 5;
let startPage = Math.max(1, currentPage - Math.floor(maxVisible / 2));
let endPage = Math.min(totalPages, startPage + maxVisible - 1);
-
+
if (endPage - startPage < maxVisible - 1) {
startPage = Math.max(1, endPage - maxVisible + 1);
}
-
+
for (let i = startPage; i <= endPage; i++) {
pages.push(i);
}
@@ -78,21 +79,23 @@ export default function VideoList() {
const { date, title, authors, permalink, description } = metadata ||
{};
const image = assets?.image ?? frontMatter?.image ??
"/assets/images/hudi.png";
const videoUrl = frontMatter?.navigate || permalink;
-
+
if (!title || !videoUrl) {
return null;
}
-
- const dateObj = date ? new Date(date) : null;
- const formattedDate = dateObj ? dateObj.toLocaleDateString('en-US',
{
- year: 'numeric',
- month: 'long',
- day: 'numeric'
- }) : '';
+
+ const dateTimeFormat = useDateTimeFormat({
+ day: 'numeric',
+ month: 'long',
+ year: 'numeric',
+ timeZone: 'UTC',
+ });
+ const formatDate = (blogDate) => dateTimeFormat.format(new
Date(blogDate));
+ const formattedDate = date ? formatDate(date) : '';
const isExternalUrl = videoUrl && (videoUrl.startsWith('http://') ||
videoUrl.startsWith('https://'));
const LinkComponent = isExternalUrl ? 'a' : Link;
- const linkProps = isExternalUrl
+ const linkProps = isExternalUrl
? { href: videoUrl, target: '_blank', rel: 'noopener noreferrer' }
: { to: videoUrl, target: '_blank', rel: 'noopener noreferrer' };
@@ -127,7 +130,7 @@ export default function VideoList() {
);
})}
</div>
-
+
{totalPages > 1 && (
<nav className={styles.pagination} aria-label="Video pagination">
<button
@@ -138,7 +141,7 @@ export default function VideoList() {
>
Previous
</button>
-
+
<div className={styles.paginationNumbers}>
{getPageNumbers().map((pageNum) => (
<button
@@ -152,7 +155,7 @@ export default function VideoList() {
</button>
))}
</div>
-
+
<button
className={styles.paginationButton}
onClick={() => handlePageChange(currentPage + 1)}
@@ -163,7 +166,7 @@ export default function VideoList() {
</button>
</nav>
)}
-
+
<div className={styles.paginationInfo}>
Showing {startIndex + 1}-{Math.min(endIndex, sortedVideos.length)} of
{sortedVideos.length} videos
</div>
diff --git a/website/src/theme/BlogPostItem/BlogPostBox.js
b/website/src/theme/BlogPostItem/BlogPostBox.js
index a499f16b0fe6..ba961753420b 100644
--- a/website/src/theme/BlogPostItem/BlogPostBox.js
+++ b/website/src/theme/BlogPostItem/BlogPostBox.js
@@ -1,3 +1,4 @@
+import {useDateTimeFormat} from "@docusaurus/theme-common/internal";
import React from 'react';
import clsx from 'clsx';
import Link from '@docusaurus/Link';
@@ -38,9 +39,14 @@ export default function BlogPostBox({metadata = {}, assets,
frontMatter}) {
);
}
const AuthorsList = () => {
- const dateObj = new Date(date);
- const options = { year: 'numeric', month: 'long', day: 'numeric' };
- const formattedDate = dateObj.toLocaleDateString('en-US', options);
+ const dateTimeFormat = useDateTimeFormat({
+ day: 'numeric',
+ month: 'long',
+ year: 'numeric',
+ timeZone: 'UTC',
+ });
+ const formatDate = (blogDate) => dateTimeFormat.format(new
Date(blogDate));
+ const formattedDate = date ? formatDate(date) : '';
const authorsCount = authors.length;
if (authorsCount === 0) {
