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 85e3843df25a chore(site): fix blog author field stacking issue (#17910)
85e3843df25a is described below
commit 85e3843df25a5cd50555fa4a38c714441006b143
Author: Shiyan Xu <[email protected]>
AuthorDate: Fri Jan 16 00:32:50 2026 -0600
chore(site): fix blog author field stacking issue (#17910)
---
website/src/components/AuthorName.js | 30 ++++++++++------------
.../BlogPostItem/Header/Authors/styles.module.css | 4 ++-
.../src/theme/BlogPostItem/Header/Info/index.js | 7 ++---
.../BlogPostItem/Header/Info/styles.module.css | 6 -----
4 files changed, 19 insertions(+), 28 deletions(-)
diff --git a/website/src/components/AuthorName.js
b/website/src/components/AuthorName.js
index 5ceb3bff46f7..453411b30085 100644
--- a/website/src/components/AuthorName.js
+++ b/website/src/components/AuthorName.js
@@ -12,22 +12,20 @@ const AuthorName = ({ authors = [], className, withLink =
true }) => {
return (
<>
{authors.map((author, idx) => (
- <div key={idx}>
- <div>
- {author.name && (
- <div>
- {idx !== 0 ? (idx !== authors.length - 1 ? "," : "and") : ""}
- {withLink ? (
- <Link href={author.url} itemProp="url">
- {renderName(author)}
- </Link>
- ) : (
- renderName(author)
- )}
- </div>
- )}
- </div>
- </div>
+ <span key={idx}>
+ {author.name && (
+ <>
+ {idx !== 0 ? (idx !== authors.length - 1 ? ", " : " and ") : " "}
+ {withLink ? (
+ <Link href={author.url} itemProp="url">
+ {renderName(author)}
+ </Link>
+ ) : (
+ renderName(author)
+ )}
+ </>
+ )}
+ </span>
))}
</>
);
diff --git a/website/src/theme/BlogPostItem/Header/Authors/styles.module.css
b/website/src/theme/BlogPostItem/Header/Authors/styles.module.css
index f65e4aeae7b6..275aa02c395c 100644
--- a/website/src/theme/BlogPostItem/Header/Authors/styles.module.css
+++ b/website/src/theme/BlogPostItem/Header/Authors/styles.module.css
@@ -1,5 +1,7 @@
.authorWrapper {
- margin-left: 10px;
+ display: flex;
+ flex-wrap: wrap;
+ gap: 8px;
}
.author {
diff --git a/website/src/theme/BlogPostItem/Header/Info/index.js
b/website/src/theme/BlogPostItem/Header/Info/index.js
index 42553fb79248..be706d8a902e 100644
--- a/website/src/theme/BlogPostItem/Header/Info/index.js
+++ b/website/src/theme/BlogPostItem/Header/Info/index.js
@@ -30,10 +30,7 @@ function ReadingTime({readingTime}) {
return <span
className={styles.marker}>{readingTimePlural(readingTime)}</span>;
}
function DateTime({date, formattedDate}) {
- return <time dateTime={date}>{formattedDate}</time>;
-}
-function Spacer() {
- return <span className={styles.spacer}>{' ยท '}</span>;
+ return <time className={styles.marker}
dateTime={date}>{formattedDate}</time>;
}
export default function BlogPostItemHeaderInfo({className}) {
const {metadata} = useBlogPost();
@@ -47,8 +44,8 @@ export default function BlogPostItemHeaderInfo({className}) {
const formatDate = (blogDate) => dateTimeFormat.format(new Date(blogDate));
return (
<div className={clsx(styles.container, 'margin-vert--sm', className)}>
- <DateTime date={date} formattedDate={formatDate(date)} />
<BlogPostItemHeaderAuthors />
+ <DateTime date={date} formattedDate={formatDate(date)} />
{typeof readingTime !== 'undefined' && (
<>
<ReadingTime readingTime={readingTime} />
diff --git a/website/src/theme/BlogPostItem/Header/Info/styles.module.css
b/website/src/theme/BlogPostItem/Header/Info/styles.module.css
index 05909b0f370b..558964b5f6e7 100644
--- a/website/src/theme/BlogPostItem/Header/Info/styles.module.css
+++ b/website/src/theme/BlogPostItem/Header/Info/styles.module.css
@@ -4,12 +4,6 @@
flex-direction: row;
align-items: center;
font-size: 1.1rem;
- margin-left: 2px;
-}
-
-.spacer {
- font-size: 35px;
- line-height: 28px;
}
.marker {
