diff --git a/pages/blog/index.page.tsx b/pages/blog/index.page.tsx index 1fd6c34ed..5f91e3905 100644 --- a/pages/blog/index.page.tsx +++ b/pages/blog/index.page.tsx @@ -92,6 +92,8 @@ export default function StaticMarkdownPage({ setCurrentFilterTag(filterTag); }, [filterTag]); + const [searchQuery, setSearchQuery] = useState(''); + const handleClick = (event: React.MouseEvent) => { event.preventDefault(); // Prevent default scrolling behavior const clickedTag = event.currentTarget.value as blogCategories; @@ -103,6 +105,9 @@ export default function StaticMarkdownPage({ history.replaceState(null, '', `/blog?type=${clickedTag}`); // Update URL } }; + const handleSearch = (event: React.ChangeEvent) => { + setSearchQuery(event.target.value); + }; const recentBlog = blogPosts.sort((a, b) => { const dateA = new Date(a.frontmatter.date).getTime(); const dateB = new Date(b.frontmatter.date).getTime(); @@ -223,16 +228,42 @@ export default function StaticMarkdownPage({ Filter blog posts by category... + {/* Search box */} +
+ +
{/* filterTag === frontmatter.type && */}
{blogPosts .filter((post) => { - if (!currentFilterTag || currentFilterTag === 'All') return true; - const blogType = post.frontmatter.type as string | undefined; - if (!blogType) return false; - return blogType.toLowerCase() === currentFilterTag.toLowerCase(); + if (currentFilterTag !== 'All') { + const blogType = post.frontmatter.type as string | undefined; + if (!blogType || blogType.toLowerCase() !== currentFilterTag.toLowerCase()) { + return false; + } + } + + // Then apply search filter + if (searchQuery) { + const searchTerms = searchQuery.toLowerCase(); + return ( + post.frontmatter.title.toLowerCase().includes(searchTerms) || + post.frontmatter.excerpt.toLowerCase().includes(searchTerms) || + post.frontmatter.authors.some((author: Author) => + author.name.toLowerCase().includes(searchTerms) + ) + ); + } + + return true; }) .sort((a, b) => { const dateA = new Date(a.frontmatter.date).getTime();