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 bbac28289b89 chore(site): implement filter and searching for blog page
(#14339)
bbac28289b89 is described below
commit bbac28289b89d082afc7fcc29edba165230bf780
Author: pintusoliya <[email protected]>
AuthorDate: Fri Jan 16 21:33:30 2026 +0530
chore(site): implement filter and searching for blog page (#14339)
---------
Co-authored-by: Shiyan Xu <[email protected]>
---
website/learn/blog.md | 5 +-
website/src/components/BlogList/Icon/search.svg | 3 +
website/src/components/BlogList/index.js | 265 +++++++++++++++---
.../src/components/ContentList/styles.module.css | 303 ++++++++++++++++++++-
website/src/components/VideoList/index.js | 2 +-
website/src/css/custom.css | 2 +
.../BlogPostItem/Header/Info/styles.module.css | 1 +
.../2025-06-16-Apache-Hudi-does-XYZ-110-cover.jpg | Bin 121443 -> 258119 bytes
8 files changed, 529 insertions(+), 52 deletions(-)
diff --git a/website/learn/blog.md b/website/learn/blog.md
index 7bd0edc50e8c..4471286481a7 100644
--- a/website/learn/blog.md
+++ b/website/learn/blog.md
@@ -1,11 +1,8 @@
---
title: "Blogs"
+hide_title: true
---
import BlogList from '@site/src/components/BlogList';
-# Blogs
-
-Welcome to Apache Hudi blogs! Here you'll find the latest articles, tutorials,
and updates from the Hudi community.
-
<BlogList />
diff --git a/website/src/components/BlogList/Icon/search.svg
b/website/src/components/BlogList/Icon/search.svg
new file mode 100644
index 000000000000..229e4b8f2b5d
--- /dev/null
+++ b/website/src/components/BlogList/Icon/search.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none"
xmlns="http://www.w3.org/2000/svg";>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.21814 1C7.88399 1 9.44694
1.65138 10.6185 2.82227L10.8207 3.03125C12.789 5.16769 12.9517 8.37016 11.3812
10.7021L15.3246 13.9053L15.389 13.9619C15.6931 14.2607 15.7006 14.7295 15.4388
15.0566C15.291 15.2413 15.0679 15.3496 14.8177 15.3496C14.6285 15.3494 14.4516
15.2752 14.3177 15.1748L14.3109 15.1699L10.2992 11.9258C9.15627 12.9019 7.73564
13.4502 6.21814 13.4502C4.55193 13.4501 2.98839 12.7984 1.81677
11.627C-0.605591 9.20437 -0.60559 [...]
+</svg>
diff --git a/website/src/components/BlogList/index.js
b/website/src/components/BlogList/index.js
index 0cbd219f7832..84e1eb6e4d58 100644
--- a/website/src/components/BlogList/index.js
+++ b/website/src/components/BlogList/index.js
@@ -1,9 +1,13 @@
import {useDateTimeFormat} from "@docusaurus/theme-common/internal";
-import React, { useState } from 'react';
+import React, {useState, useMemo, useEffect, useRef} from 'react';
import Link from '@docusaurus/Link';
import { useBaseUrlUtils } from
'@docusaurus/core/lib/client/exports/useBaseUrl';
import AuthorName from '@site/src/components/AuthorName';
import styles from '../ContentList/styles.module.css';
+import {useHistory} from '@docusaurus/router';
+import SearchIcon from './Icon/search.svg';
+import { useLocation } from 'react-router-dom';
+
const allBlogPosts = ((ctx) => {
const blogpostNames = ctx.keys();
@@ -30,19 +34,89 @@ const allBlogPosts = ((ctx) => {
);
})(require.context('../../../blog', true, /\.mdx?$/));
-const sortedBlogPosts = allBlogPosts
- .filter(post => post.metadata && post.metadata.title &&
post.metadata.permalink)
- .sort((a,b) => {
- const dateA = a.metadata?.date ? new Date(a.metadata.date).getTime() : 0;
- const dateB = b.metadata?.date ? new Date(b.metadata.date).getTime() : 0;
- return dateB - dateA;
- });
-
const POSTS_PER_PAGE = 12;
export default function BlogList() {
+ const history = useHistory();
+ const location = useLocation();
+ const urlParams = new URLSearchParams(location.search);
+ const defaultCategory = urlParams.get("category");
+ const defaultPage = +urlParams.get("page");
+ const defaultSearch = urlParams.get("search") || "";
+
const { withBaseUrl } = useBaseUrlUtils();
- const [currentPage, setCurrentPage] = useState(1);
+ const [currentPage, setCurrentPage] = useState(defaultPage || 1);
+ const [category, setCategory] = useState(defaultCategory || 'all');
+ const [searchInput, setSearchInput] = useState(defaultSearch);
+ const [searchQuery, setSearchQuery] = useState(defaultSearch);
+ const debounceTimerRef = useRef(null);
+
+ const dateTimeFormat = useDateTimeFormat({
+ day: 'numeric',
+ month: 'long',
+ year: 'numeric',
+ timeZone: 'UTC',
+ });
+ const formatDate = (blogDate) => dateTimeFormat.format(new Date(blogDate));
+
+ const buildUrl = (category, pageNum, search) => {
+ const parts = [];
+ parts.push(`category=${encodeURIComponent(category)}`);
+ parts.push(`page=${pageNum}`);
+ if(search && search.trim())
parts.push(`search=${encodeURIComponent(search.trim())}`);
+ return `/learn/blog?${parts.join('&')}`;
+ };
+
+ useEffect(() => {
+ debounceTimerRef.current = setTimeout(() => {
+ const isNewSearch = searchInput !== searchQuery;
+ if (isNewSearch) {
+ setCurrentPage(1);
+ }
+ setSearchQuery(searchInput);
+ history.replace(
+ buildUrl(
+ category,
+ isNewSearch ? 1 : currentPage,
+ searchInput
+ )
+ );
+
+ }, 800);
+
+ return () => {
+ if (debounceTimerRef.current) {
+ clearTimeout(debounceTimerRef.current);
+ }
+ };
+ }, [searchInput]);
+
+ const filteredBlogPosts = useMemo(() => {
+ let filtered = allBlogPosts;
+ // Filter by category
+ if(category !== 'all') {
+ filtered = filtered.filter((elem) => elem.frontMatter.category ===
category);
+ }
+
+ // Filter by search query - only search by title (case-insensitive)
+ if(searchQuery.trim()) {
+ const query = searchQuery.toLowerCase().trim();
+ filtered = filtered.filter((post) => {
+ const title = post.metadata?.title?.toLowerCase() || '';
+ return title.includes(query);
+ });
+ }
+
+ return filtered;
+ },[category, searchQuery])
+
+ const sortedBlogPosts = filteredBlogPosts
+ .filter(post => post.metadata && post.metadata.title &&
post.metadata.permalink)
+ .sort((a,b) => {
+ const dateA = a.metadata?.date ? new Date(a.metadata.date).getTime() : 0;
+ const dateB = b.metadata?.date ? new Date(b.metadata.date).getTime() : 0;
+ return dateB - dateA;
+ });
const totalPages = Math.ceil(sortedBlogPosts.length / POSTS_PER_PAGE);
const startIndex = (currentPage - 1) * POSTS_PER_PAGE;
@@ -52,48 +126,136 @@ export default function BlogList() {
const handlePageChange = (page) => {
setCurrentPage(page);
window.scrollTo({ top: 0, behavior: 'smooth' });
+ history.push(buildUrl(category, page, searchQuery));
+ };
+
+ const handleSearchChange = (e) => {
+ setSearchInput(e.target.value);
};
const getPageNumbers = () => {
+ const maxVisible = 9;
const pages = [];
- 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);
- }
+ if (totalPages <= maxVisible) {
+ for (let i = 1; i <= totalPages; i++) {
+ pages.push(i);
+ }
+ } else {
+ let startPage = Math.max(1, currentPage - Math.floor(maxVisible / 2));
+ let endPage = Math.min(totalPages, startPage + maxVisible - 1);
- for (let i = startPage; i <= endPage; i++) {
- pages.push(i);
+ if (endPage - startPage < maxVisible - 1) {
+ startPage = Math.max(1, endPage - maxVisible + 1);
+ }
+
+ for (let i = startPage; i <= endPage; i++) {
+ pages.push(i);
+ }
}
return pages;
};
+ const getDropdownPages = () => {
+ const visiblePages = getPageNumbers();
+ const allPages = [];
+ for (let i = 1; i <= totalPages; i++) {
+ if (!visiblePages.includes(i)) {
+ allPages.push(i);
+ }
+ }
+ return allPages;
+ };
+
+ // Derive categories dynamically from blog data
+ const categoryData = useMemo(() => {
+ const categorySet = new Set();
+ allBlogPosts.forEach(post => {
+ if (post.frontMatter?.category) {
+ categorySet.add(post.frontMatter.category);
+ }
+ });
+
+ // Define display labels for known categories
+ const categoryLabels = {
+ 'deep-dive': 'Deep Dive',
+ 'how-to': 'How To',
+ 'case-study': 'Case Study',
+ 'community': 'Community',
+ };
+
+ // Sort categories alphabetically, with known ones first in preferred order
+ const preferredOrder = ['deep-dive', 'how-to', 'case-study', 'community'];
+ const sortedCategories = Array.from(categorySet).sort((a, b) => {
+ const aIndex = preferredOrder.indexOf(a);
+ const bIndex = preferredOrder.indexOf(b);
+ if (aIndex !== -1 && bIndex !== -1) return aIndex - bIndex;
+ if (aIndex !== -1) return -1;
+ if (bIndex !== -1) return 1;
+ return a.localeCompare(b);
+ });
+
+ return [
+ { label: 'All', value: 'all' },
+ ...sortedCategories.map(cat => ({
+ label: categoryLabels[cat] || cat.split('-').map(w =>
w.charAt(0).toUpperCase() + w.slice(1)).join(' '),
+ value: cat
+ }))
+ ];
+ }, []);
+
+
return (
<div className={styles.container}>
- <h2>All Blog Posts</h2>
- <div className={styles.grid}>
+ <div className={styles.blogFilterSection}>
+ <div className={styles.blogFilters}>
+ <div className={styles.categoryBar}>
+ {categoryData.map(elem => (
+ <button
+ key={elem.label}
+ className={elem.value === (category ?? 'all') ?
styles.categoryActive : styles.category}
+ onClick={() => {
+ setCategory(elem.value)
+ setCurrentPage(1)
+ setSearchInput('')
+ setSearchQuery('')
+ history.push(buildUrl(elem.value, 1, ''));
+ }}
+ type="button"
+ >
+ {elem.label}
+ </button>
+ ))}
+ </div>
+ <div className={styles.searchContainer}>
+ <SearchIcon className={styles.searchIcon} width={20} height={20} />
+ <input
+ type="text"
+ className={styles.searchInput}
+ placeholder="Search"
+ value={searchInput}
+ onChange={handleSearchChange}
+ />
+ </div>
+ </div>
+ </div>
+ <div key={`${category}-${searchQuery}-${currentPage}`}
className={styles.gridWrapper}>
+ <div className={styles.grid}>
{currentPosts.map((blog, index) => {
const { frontMatter, assets, metadata } = blog;
const { date, title, authors, permalink, description } = metadata ||
{};
const image = assets?.image ?? frontMatter?.image ??
"/assets/images/hudi.png";
- if (!title || !permalink) {
- return null;
- }
-
- const dateTimeFormat = useDateTimeFormat({
- day: 'numeric',
- month: 'long',
- year: 'numeric',
- timeZone: 'UTC',
- });
- const formatDate = (blogDate) => dateTimeFormat.format(new
Date(blogDate));
+ if (!title || !permalink) return null;
+
const formattedDate = date ? formatDate(date) : '';
return (
- <article key={index} className={styles.card}>
+ <article
+ key={index}
+ className={styles.card}
+ style={{ animationDelay: `${index * 0.1}s` }}
+ >
<Link to={permalink} className={styles.link} target="_blank"
rel="noopener noreferrer">
<div className={styles.imageWrapper}>
<img
@@ -103,20 +265,22 @@ export default function BlogList() {
/>
</div>
<div className={styles.content}>
+ <h3 className={styles.title}>{title}</h3>
<div className={styles.meta}>
- <AuthorName
- authors={authors}
- className={styles.authorName}
- withLink={false}
- />
+ <span className={styles.authorName}>
+ <AuthorName
+ authors={authors}
+ withLink={false}
+ />
+ </span>
<span className={styles.date}>{formattedDate}</span>
</div>
- <h3 className={styles.title}>{title}</h3>
</div>
</Link>
</article>
);
})}
+ </div>
</div>
{totalPages > 1 && (
@@ -142,6 +306,25 @@ export default function BlogList() {
{pageNum}
</button>
))}
+ {getDropdownPages().length > 0 && (
+ <select
+ className={styles.paginationDropdown}
+ value=""
+ onChange={(e) => {
+ if (e.target.value) {
+ handlePageChange(parseInt(e.target.value, 10));
+ }
+ }}
+ aria-label="More pages"
+ >
+ <option value="">...</option>
+ {getDropdownPages().map((pageNum) => (
+ <option key={pageNum} value={pageNum}>
+ Page {pageNum}
+ </option>
+ ))}
+ </select>
+ )}
</div>
<button
@@ -156,7 +339,11 @@ export default function BlogList() {
)}
<div className={styles.paginationInfo}>
- Showing {startIndex + 1}-{Math.min(endIndex, sortedBlogPosts.length)}
of {sortedBlogPosts.length} posts
+ {currentPosts.length > 0 ? (
+ <>Showing {startIndex + 1}-{Math.min(endIndex,
sortedBlogPosts.length)} of {sortedBlogPosts.length} posts</>
+ ) : (
+ <>No blog posts available</>
+ )}
</div>
</div>
);
diff --git a/website/src/components/ContentList/styles.module.css
b/website/src/components/ContentList/styles.module.css
index fa1caa1210d6..1ce7360fdb99 100644
--- a/website/src/components/ContentList/styles.module.css
+++ b/website/src/components/ContentList/styles.module.css
@@ -9,22 +9,97 @@
font-size: 2rem;
}
+.gridWrapper {
+ animation: wrapperFadeIn 0.4s ease-out;
+ will-change: opacity, transform;
+ transition: opacity 0.4s ease-out, transform 0.4s ease-out;
+}
+
+@keyframes wrapperFadeIn {
+ 0% {
+ opacity: 0;
+ transform: scale(0.8);
+ }
+ 100% {
+ opacity: 1;
+ transform: scale(1);
+ }
+}
+
.grid {
display: grid;
- grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+ grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 2rem;
+ max-width: 100%;
+ animation: gridFadeIn 0.5s ease-out;
+ will-change: opacity, transform, scale;
+ position: relative;
+ transition: opacity 0.3s ease-out, transform 0.3s ease-out;
+}
+
+@media (min-width: 1400px) {
+ .grid {
+ grid-template-columns: repeat(4, 1fr);
+ }
+}
+
+@keyframes gridFadeIn {
+ 0% {
+ opacity: 0;
+ transform: translateX(20px);
+ }
+ 100% {
+ opacity: 1;
+ transform: translateX(0);
+ }
+}
+
+.grid.fadeOut {
+ animation: gridFadeOut 0.3s ease-in forwards;
+}
+
+@keyframes gridFadeOut {
+ 0% {
+ opacity: 1;
+ transform: scale(1);
+ }
+ 100% {
+ opacity: 0;
+ transform: scale(0.95);
+ }
}
.card {
- border: 1px solid var(--ifm-color-emphasis-200);
- border-radius: 8px;
+ border: 1px solid var(--ifm-gray-200);
+ border-radius: 12px;
overflow: hidden;
- transition: transform 0.2s, box-shadow 0.2s;
+ transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
+ box-shadow 0.2s,
+ opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
+ scale 0.4s cubic-bezier(0.4, 0, 0.2, 1),
+ height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
+ margin 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+ animation: fadeInUp 0.6s ease-out;
+ opacity: 0;
+ animation-fill-mode: forwards;
+ will-change: opacity, transform, scale, height;
+ transform-origin: center;
+}
+
+@keyframes fadeInUp {
+ 0% {
+ opacity: 0;
+ transform: translateY(25px) scale(0.95);
+ }
+ 100% {
+ opacity: 1;
+ transform: translateY(0) scale(1);
+ }
}
.card:hover {
transform: translateY(-4px);
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+ box-shadow: 0px 5px 12px 0px #06376D1A;
}
.link {
@@ -52,8 +127,8 @@
.meta {
display: flex;
- align-items: center;
- gap: 1rem;
+ flex-direction: column;
+ gap: 4px;
margin-bottom: 0.75rem;
font-size: 0.875rem;
color: var(--ifm-color-emphasis-600);
@@ -61,13 +136,16 @@
.date {
font-size: 0.875rem;
+ color: var(--ifm-gray-800);
+ font-family: var(--ifm-heading-font-family) !important;
}
.title {
font-size: 1.25rem;
font-weight: 600;
margin: 0.5rem 0;
- color: var(--ifm-heading-color);
+ color: var(--ifm-blue-900);
+ font-family: var(--ifm-heading-font-family) !important;
}
.description {
@@ -80,11 +158,13 @@
line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
+ font-family: var(--ifm-heading-font-family);
}
/* Pagination styles */
.pagination {
display: flex;
+ flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 1rem;
@@ -115,6 +195,8 @@
.paginationNumbers {
display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
gap: 0.5rem;
}
@@ -145,6 +227,31 @@
color: var(--ifm-color-primary-contrast-background);
}
+.paginationDropdown {
+ min-width: 2.5rem;
+ height: 2.5rem;
+ padding: 0 0.5rem;
+ border: 1px solid var(--ifm-color-emphasis-300);
+ border-radius: 4px;
+ background-color: var(--ifm-background-color);
+ color: var(--ifm-font-color-base);
+ cursor: pointer;
+ font-size: 0.9375rem;
+ transition: background-color 0.2s, border-color 0.2s;
+ appearance: none;
+ text-align: center;
+}
+
+.paginationDropdown:hover {
+ background-color: var(--ifm-color-emphasis-100);
+ border-color: var(--ifm-color-primary);
+}
+
+.paginationDropdown:focus {
+ outline: none;
+ border-color: var(--ifm-color-primary);
+}
+
.paginationInfo {
text-align: center;
margin-top: 1rem;
@@ -157,6 +264,8 @@
/* Author name (used by BlogList and VideoList) */
.authorName {
font-size: 0.875rem;
+ color: var(--ifm-blue-900);
+ font-family: var(--ifm-heading-font-family) !important;
}
/* FAQ-specific styles */
@@ -193,7 +302,185 @@
font-weight: 500;
}
+.link:hover {
+ text-decoration: none !important;
+}
+
.faqCard:hover .faqLinkText {
text-decoration: underline;
}
+.blogTitle {
+ display: flex;
+ justify-content: center;
+ margin-bottom: 40px;
+}
+
+.blogFilterSection {
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+ margin-bottom: 60px;
+ width: 100%;
+}
+
+.blogFilters {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-between;
+ gap: 20px;
+ width: 100%;
+}
+
+.categoryBar {
+ display: inline-flex;
+ flex-direction: row;
+ gap: 12px;
+ padding: 10px 18px;
+ border-radius: 30px;
+ border: 1px solid rgba(10, 37, 64, 0.08);
+ box-shadow: 0 1px 0 rgba(16, 24, 40, 0.04) inset;
+
+ overflow-x: auto;
+ overflow-y: hidden;
+ flex-wrap: nowrap;
+ white-space: nowrap;
+ scrollbar-width: thin;
+ scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
+ -webkit-overflow-scrolling: touch;
+}
+
+.categoryBar::-webkit-scrollbar {
+ height: 1px !important;
+ display: block;
+}
+
+.categoryBar::-webkit-scrollbar-track {
+ background: transparent;
+ border-radius: 0;
+}
+
+.categoryBar::-webkit-scrollbar-thumb {
+ background-color: rgba(0, 0, 0, 0.15) !important;
+ border-radius: 0;
+}
+
+.categoryBar::-webkit-scrollbar-thumb:hover {
+ background-color: rgba(0, 0, 0, 0.3) !important;
+}
+
+.category,
+.categoryActive {
+ appearance: none;
+ background: transparent;
+ border: 0;
+ color: var(--ifm-blue-900);
+ font-weight: 400;
+ font-size: 16px;
+ padding: 10px 14px;
+ border-radius: 20px;
+ cursor: pointer;
+ transition: background 150ms ease, color 150ms ease, box-shadow 150ms ease;
+ white-space: nowrap;
+ flex-shrink: 0;
+}
+
+.category:hover {
+ background: var(--ifm-gray-100);
+}
+
+.categoryActive {
+ background: var(--ifm-gray-100);
+ color: #0f2e4f;
+ box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06),
+ inset 0 0 0 1px rgba(10, 37, 64, 0.10);
+}
+
+.category:focus-visible,
+.categoryActive:focus-visible {
+ outline: 0;
+ box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(13, 177, 249, 0.55);
+}
+
+.searchContainer {
+ display: inline-flex;
+ align-items: center;
+ gap: 12px;
+ padding: 10px 18px;
+ border-radius: 30px;
+ border: 1px solid rgba(10, 37, 64, 0.08);
+ box-shadow: 0 1px 0 rgba(16, 24, 40, 0.04) inset;
+ background-color: var(--ifm-background-color);
+ width: auto;
+ height: 50px !important;
+ flex-shrink: 0;
+}
+
+.searchIcon {
+ flex-shrink: 0;
+ color: #082C54;
+ width: 20px;
+ height: 20px;
+ display: block;
+}
+
+.searchIcon svg {
+ width: 100%;
+ height: 100%;
+ color: inherit;
+}
+
+.searchInput {
+ flex: 1;
+ border: 0;
+ background: transparent;
+ outline: none;
+ font-size: 16px;
+ color: var(--ifm-blue-900);
+ width: 100%;
+ min-width: 250px;
+}
+
+.searchInput::placeholder {
+ color: var(--ifm-blue-900);
+ opacity: 0.4;
+ font-size: 14px;
+ font-weight: 400;
+}
+
+.searchInput:focus {
+ outline: none;
+}
+
+@media (max-width: 996px) {
+ .blogFilters {
+ flex-direction: column;
+ }
+
+ .categoryBar {
+ gap: 14px;
+ padding: 8px 12px;
+ }
+
+ .category, .categoryActive {
+ padding: 8px 12px;
+ font-size: 15px;
+ }
+
+ .searchContainer {
+ padding: 8px 16px;
+ gap: 10px;
+ width: 100%;
+ }
+
+ .searchIcon {
+ width: 18px;
+ height: 18px;
+ }
+
+ .searchInput {
+ font-size: 15px;
+ }
+}
+
diff --git a/website/src/components/VideoList/index.js
b/website/src/components/VideoList/index.js
index 71b0f7889dbc..2faa919d4884 100644
--- a/website/src/components/VideoList/index.js
+++ b/website/src/components/VideoList/index.js
@@ -38,7 +38,7 @@ const sortedVideos = allVideos
return dateB - dateA;
});
-const POSTS_PER_PAGE = 12;
+const POSTS_PER_PAGE = 9;
export default function VideoList() {
const { withBaseUrl } = useBaseUrlUtils();
diff --git a/website/src/css/custom.css b/website/src/css/custom.css
index b70f290cbab5..e4d248eb1e66 100644
--- a/website/src/css/custom.css
+++ b/website/src/css/custom.css
@@ -38,6 +38,8 @@
--ifm-blue-800: #15467D;
--ifm-blue-900: #082C54;
--ifmyellow-500: #FFAA00;
+ --ifm-gray-100: #EDF1F4;
+ --ifm-gray-200: #E4EBEF;
--ifm-gray-500: #C0CED5;
--ifm-gray-600: #ABBDC7;
--ifm-gray-800: #69818E;
diff --git a/website/src/theme/BlogPostItem/Header/Info/styles.module.css
b/website/src/theme/BlogPostItem/Header/Info/styles.module.css
index 558964b5f6e7..564840206df0 100644
--- a/website/src/theme/BlogPostItem/Header/Info/styles.module.css
+++ b/website/src/theme/BlogPostItem/Header/Info/styles.module.css
@@ -1,6 +1,7 @@
.container {
color: #1c1e21;
display: flex;
+ gap:10px;
flex-direction: row;
align-items: center;
font-size: 1.1rem;
diff --git
a/website/static/assets/images/blog/2025-06-16-Apache-Hudi-does-XYZ-110-cover.jpg
b/website/static/assets/images/blog/2025-06-16-Apache-Hudi-does-XYZ-110-cover.jpg
index 861e7568337b..998b841a268a 100644
Binary files
a/website/static/assets/images/blog/2025-06-16-Apache-Hudi-does-XYZ-110-cover.jpg
and
b/website/static/assets/images/blog/2025-06-16-Apache-Hudi-does-XYZ-110-cover.jpg
differ
