From af4a141454dd994791dfc6cc89449e0ccf726aea Mon Sep 17 00:00:00 2001 From: Idan Levi <29idan29@gmail.com> Date: Mon, 10 Mar 2025 22:57:53 +0200 Subject: [PATCH 1/4] enabling filtering with more than one category --- pages/blog/index.page.tsx | 139 +++++++++++++++++++++----------------- 1 file changed, 76 insertions(+), 63 deletions(-) diff --git a/pages/blog/index.page.tsx b/pages/blog/index.page.tsx index a866346cf..de037d32f 100644 --- a/pages/blog/index.page.tsx +++ b/pages/blog/index.page.tsx @@ -1,3 +1,4 @@ +/* eslint-disable indent */ import React, { useState, useEffect } from 'react'; import Head from 'next/head'; import Link from 'next/link'; @@ -18,13 +19,15 @@ type Author = { link?: string; byline?: string; }; + export type blogCategories = | 'All' | 'Community' | 'Case Study' | 'Engineering' | 'Update' - | 'Opinion'; + | 'Opinion' + | 'Documentation'; export async function getStaticProps({ query }: { query: any }) { const files = fs.readdirSync(PATH); @@ -76,33 +79,51 @@ export default function StaticMarkdownPage({ filterTag: any; }) { const router = useRouter(); - const [currentFilterTag, setCurrentFilterTag] = useState( - filterTag || 'All', - ); + // Initialize selected filter tags: if query.type is 'All' or not provided, no filter is applied. + const initialTags = + filterTag && filterTag !== 'All' + ? ((filterTag as string) + .split(',') + .filter((tag) => isValidCategory(tag)) as blogCategories[]) + : []; + const [selectedFilterTags, setSelectedFilterTags] = + useState(initialTags); useEffect(() => { const { query } = router; - if (query.type && isValidCategory(query.type)) { - setCurrentFilterTag(query.type); + if (query.type) { + const types = (query.type as string) + .split(',') + .filter((tag) => isValidCategory(tag)) as blogCategories[]; + setSelectedFilterTags(types); + } else { + setSelectedFilterTags([]); } }, [router.query]); - useEffect(() => { - // Set the filter tag based on the initial query parameter when the page loads - setCurrentFilterTag(filterTag); - }, [filterTag]); - const handleClick = (event: React.MouseEvent) => { - event.preventDefault(); // Prevent default scrolling behavior + event.preventDefault(); const clickedTag = event.currentTarget.value as blogCategories; if (clickedTag === 'All') { - setCurrentFilterTag('All'); - history.replaceState(null, '', '/blog'); // Update the URL without causing a scroll - } else if (isValidCategory(clickedTag)) { - setCurrentFilterTag(clickedTag); - history.replaceState(null, '', `/blog?type=${clickedTag}`); // Update URL + setSelectedFilterTags([]); + history.replaceState(null, '', '/blog'); + } else { + if (selectedFilterTags.includes(clickedTag)) { + const newTags = selectedFilterTags.filter((tag) => tag !== clickedTag); + setSelectedFilterTags(newTags); + if (newTags.length > 0) { + history.replaceState(null, '', `/blog?type=${newTags.join(',')}`); + } else { + history.replaceState(null, '', '/blog'); + } + } else { + const newTags = [...selectedFilterTags, clickedTag]; + setSelectedFilterTags(newTags); + history.replaceState(null, '', `/blog?type=${newTags.join(',')}`); + } } }; + const recentBlog = blogPosts.sort((a, b) => { const dateA = new Date(a.frontmatter.date).getTime(); const dateB = new Date(b.frontmatter.date).getTime(); @@ -110,21 +131,19 @@ export default function StaticMarkdownPage({ }); const timeToRead = Math.ceil(readingTime(recentBlog[0].content).minutes); - const setOfTags: any[] = blogPosts.map((tag) => tag.frontmatter.type); - const spreadTags: any[] = [...setOfTags]; - const allTags = [...new Set(spreadTags)]; - //add tag for all - allTags.unshift('All'); + const setOfTags: any[] = blogPosts.map((post) => post.frontmatter.type); + const uniqueTags = [...new Set(setOfTags)]; + // Prepend 'All' for the filter button + const allTags = ['All', ...uniqueTags]; return ( - // @ts-ignore JSON Schema Blog
{recentBlog[0] && ( -
+
-

{recentBlog[0].frontmatter.authors[0].name}

-
+
{recentBlog[0].frontmatter.date} · {timeToRead}{' '} min read @@ -172,7 +190,6 @@ export default function StaticMarkdownPage({ Welcome to the JSON Schema Blog!
-

Want to publish a blog post? Check out the  @@ -187,7 +204,6 @@ export default function StaticMarkdownPage({  and submit yours!

- {/* Filter Buttons */} -
{allTags.map((tag) => ( @@ -224,15 +241,16 @@ export default function StaticMarkdownPage({ Filter blog posts by category...
- - {/* filterTag === frontmatter.type && */} -
+ {/* Filtered Blog Posts */} +
{blogPosts .filter((post) => { - if (!currentFilterTag || currentFilterTag === 'All') return true; + if (selectedFilterTags.length === 0) return true; const blogType = post.frontmatter.type as string | undefined; if (!blogType) return false; - return blogType.toLowerCase() === currentFilterTag.toLowerCase(); + return selectedFilterTags.some( + (tag) => tag.toLowerCase() === blogType.toLowerCase(), + ); }) .sort((a, b) => { const dateA = new Date(a.frontmatter.date).getTime(); @@ -255,7 +273,7 @@ export default function StaticMarkdownPage({ className='bg-slate-50 h-[160px] w-full self-stretch mr-3 bg-cover bg-center' style={{ backgroundImage: `url(${frontmatter.cover})` }} /> -
+
{ e.preventDefault(); e.stopPropagation(); - if (frontmatter.type) { - setCurrentFilterTag(frontmatter.type); - history.replaceState( - null, - '', - `/blog?type=${frontmatter.type}`, - ); + const newTags = selectedFilterTags.includes( + frontmatter.type, + ) + ? selectedFilterTags.filter( + (tag) => tag !== frontmatter.type, + ) + : [...selectedFilterTags, frontmatter.type]; + setSelectedFilterTags(newTags); + if (newTags.length > 0) { + history.replaceState( + null, + '', + `/blog?type=${newTags.join(',')}`, + ); + } else { + history.replaceState(null, '', '/blog'); + } } }} > @@ -280,7 +308,6 @@ export default function StaticMarkdownPage({
{frontmatter.title}
-
-
+
{(frontmatter.authors || []).map( (author: Author, index: number) => ( @@ -314,14 +335,7 @@ export default function StaticMarkdownPage({ ), )}
- -
+
{frontmatter.authors.length > 2 ? ( <> @@ -347,7 +361,6 @@ export default function StaticMarkdownPage({ ) )}
-
{frontmatter.date && ( From d705f6c6ab7e3db783bfc0bb5e2bf43cd468925a Mon Sep 17 00:00:00 2001 From: Idan Levi <29idan29@gmail.com> Date: Tue, 11 Mar 2025 15:49:01 +0200 Subject: [PATCH 2/4] allowing support to more than 1 category --- pages/blog/index.page.tsx | 115 ++++++++++++++++++++++++++++---------- 1 file changed, 85 insertions(+), 30 deletions(-) diff --git a/pages/blog/index.page.tsx b/pages/blog/index.page.tsx index de037d32f..9218ddc9c 100644 --- a/pages/blog/index.page.tsx +++ b/pages/blog/index.page.tsx @@ -49,6 +49,7 @@ export async function getStaticProps({ query }: { query: any }) { await generateRssFeed(blogPosts); + // Filtering based on query parameter const filterTag: string = query?.type || 'All'; return { @@ -71,6 +72,17 @@ function isValidCategory(category: any): category is blogCategories { ].includes(category); } +// Helper to extract categories whether frontmatter.categories or frontmatter.type is provided. +const extractCategories = (post: any): string[] => { + const categories = post.frontmatter.categories || post.frontmatter.type; + if (Array.isArray(categories)) { + return categories; + } else if (typeof categories === 'string') { + return [categories]; + } + return []; +}; + export default function StaticMarkdownPage({ blogPosts, filterTag, @@ -110,7 +122,9 @@ export default function StaticMarkdownPage({ } else { if (selectedFilterTags.includes(clickedTag)) { const newTags = selectedFilterTags.filter((tag) => tag !== clickedTag); - setSelectedFilterTags(newTags); + setSelectedFilterTags( + newTags.filter(isValidCategory) as blogCategories[], + ); if (newTags.length > 0) { history.replaceState(null, '', `/blog?type=${newTags.join(',')}`); } else { @@ -118,22 +132,28 @@ export default function StaticMarkdownPage({ } } else { const newTags = [...selectedFilterTags, clickedTag]; - setSelectedFilterTags(newTags); + setSelectedFilterTags( + newTags.filter(isValidCategory) as blogCategories[], + ); history.replaceState(null, '', `/blog?type=${newTags.join(',')}`); } } }; + // Sort all blog posts in descending order by date (for the hero section) const recentBlog = blogPosts.sort((a, b) => { const dateA = new Date(a.frontmatter.date).getTime(); const dateB = new Date(b.frontmatter.date).getTime(); - return dateA < dateB ? 1 : -1; + return dateB - dateA; }); + // Calculate time to read for the most recent blog post. const timeToRead = Math.ceil(readingTime(recentBlog[0].content).minutes); - const setOfTags: any[] = blogPosts.map((post) => post.frontmatter.type); - const uniqueTags = [...new Set(setOfTags)]; - // Prepend 'All' for the filter button + + // Create a set of unique tags from all posts using the helper. + const allTagsSet = blogPosts.flatMap((post) => extractCategories(post)); + const uniqueTags = [...new Set(allTagsSet)]; + // Prepend 'All' for the filter button. const allTags = ['All', ...uniqueTags]; return ( @@ -154,8 +174,16 @@ export default function StaticMarkdownPage({ />
-
- {recentBlog[0].frontmatter.type} + {/* Render each category as a separate badge */} +
+ {extractCategories(recentBlog[0]).map((cat, idx) => ( +
+ {cat} +
+ ))}

@@ -229,7 +257,8 @@ export default function StaticMarkdownPage({ onClick={handleClick} className={`cursor-pointer font-semibold inline-block px-3 py-1 rounded-full mb-4 mr-4 text-sm ${ (tag === 'All' && selectedFilterTags.length === 0) || - (tag !== 'All' && selectedFilterTags.includes(tag)) + (tag !== 'All' && + selectedFilterTags.includes(tag as blogCategories)) ? 'dark:bg-blue-200 dark:text-slate-700 bg-blue-800 text-blue-100' : 'dark:bg-slate-700 dark:text-blue-100 bg-blue-100 text-blue-800 hover:bg-blue-200 hover:dark:bg-slate-600' }`} @@ -246,21 +275,41 @@ export default function StaticMarkdownPage({ {blogPosts .filter((post) => { if (selectedFilterTags.length === 0) return true; - const blogType = post.frontmatter.type as string | undefined; - if (!blogType) return false; - return selectedFilterTags.some( - (tag) => tag.toLowerCase() === blogType.toLowerCase(), + const postCategories = extractCategories(post); + if (!postCategories.length) return false; + return selectedFilterTags.some((tag) => + postCategories + .map((c) => c.toLowerCase()) + .includes(tag.toLowerCase()), ); }) .sort((a, b) => { + // When multiple filter tags are selected, sort by match count first. + if (selectedFilterTags.length > 1) { + const aMatches = extractCategories(a).filter((cat) => + selectedFilterTags.some( + (tag) => tag.toLowerCase() === cat.toLowerCase(), + ), + ).length; + const bMatches = extractCategories(b).filter((cat) => + selectedFilterTags.some( + (tag) => tag.toLowerCase() === cat.toLowerCase(), + ), + ).length; + if (aMatches !== bMatches) { + return bMatches - aMatches; + } + } + // Fallback sort: by date descending. const dateA = new Date(a.frontmatter.date).getTime(); const dateB = new Date(b.frontmatter.date).getTime(); - return dateA < dateB ? 1 : -1; + return dateB - dateA; }) .map((blogPost: any) => { const { frontmatter, content } = blogPost; const date = new Date(frontmatter.date); const timeToRead = Math.ceil(readingTime(content).minutes); + const postCategories = extractCategories(blogPost); return (
@@ -275,21 +324,27 @@ export default function StaticMarkdownPage({ />
-
-
{ - e.preventDefault(); - e.stopPropagation(); - if (frontmatter.type) { + {/* Render each category as a separate clickable badge */} +
+ {postCategories.map((cat, idx) => ( +
{ + e.preventDefault(); + e.stopPropagation(); const newTags = selectedFilterTags.includes( - frontmatter.type, + cat as blogCategories, ) ? selectedFilterTags.filter( - (tag) => tag !== frontmatter.type, + (tag) => tag !== cat, ) - : [...selectedFilterTags, frontmatter.type]; - setSelectedFilterTags(newTags); + : [...selectedFilterTags, cat]; + setSelectedFilterTags( + newTags.filter( + isValidCategory, + ) as blogCategories[], + ); if (newTags.length > 0) { history.replaceState( null, @@ -299,11 +354,11 @@ export default function StaticMarkdownPage({ } else { history.replaceState(null, '', '/blog'); } - } - }} - > - {frontmatter.type || 'Unknown Type'} -
+ }} + > + {cat} +
+ ))}
{frontmatter.title} From 6fdb58b3ee6c0f8c174b60ea08768ba5eb68cb74 Mon Sep 17 00:00:00 2001 From: Idan Levi <29idan29@gmail.com> Date: Tue, 18 Mar 2025 09:17:59 +0200 Subject: [PATCH 3/4] Revert "allowing support to more than 1 category" This reverts commit d705f6c6ab7e3db783bfc0bb5e2bf43cd468925a. --- pages/blog/index.page.tsx | 115 ++++++++++---------------------------- 1 file changed, 30 insertions(+), 85 deletions(-) diff --git a/pages/blog/index.page.tsx b/pages/blog/index.page.tsx index 9218ddc9c..de037d32f 100644 --- a/pages/blog/index.page.tsx +++ b/pages/blog/index.page.tsx @@ -49,7 +49,6 @@ export async function getStaticProps({ query }: { query: any }) { await generateRssFeed(blogPosts); - // Filtering based on query parameter const filterTag: string = query?.type || 'All'; return { @@ -72,17 +71,6 @@ function isValidCategory(category: any): category is blogCategories { ].includes(category); } -// Helper to extract categories whether frontmatter.categories or frontmatter.type is provided. -const extractCategories = (post: any): string[] => { - const categories = post.frontmatter.categories || post.frontmatter.type; - if (Array.isArray(categories)) { - return categories; - } else if (typeof categories === 'string') { - return [categories]; - } - return []; -}; - export default function StaticMarkdownPage({ blogPosts, filterTag, @@ -122,9 +110,7 @@ export default function StaticMarkdownPage({ } else { if (selectedFilterTags.includes(clickedTag)) { const newTags = selectedFilterTags.filter((tag) => tag !== clickedTag); - setSelectedFilterTags( - newTags.filter(isValidCategory) as blogCategories[], - ); + setSelectedFilterTags(newTags); if (newTags.length > 0) { history.replaceState(null, '', `/blog?type=${newTags.join(',')}`); } else { @@ -132,28 +118,22 @@ export default function StaticMarkdownPage({ } } else { const newTags = [...selectedFilterTags, clickedTag]; - setSelectedFilterTags( - newTags.filter(isValidCategory) as blogCategories[], - ); + setSelectedFilterTags(newTags); history.replaceState(null, '', `/blog?type=${newTags.join(',')}`); } } }; - // Sort all blog posts in descending order by date (for the hero section) const recentBlog = blogPosts.sort((a, b) => { const dateA = new Date(a.frontmatter.date).getTime(); const dateB = new Date(b.frontmatter.date).getTime(); - return dateB - dateA; + return dateA < dateB ? 1 : -1; }); - // Calculate time to read for the most recent blog post. const timeToRead = Math.ceil(readingTime(recentBlog[0].content).minutes); - - // Create a set of unique tags from all posts using the helper. - const allTagsSet = blogPosts.flatMap((post) => extractCategories(post)); - const uniqueTags = [...new Set(allTagsSet)]; - // Prepend 'All' for the filter button. + const setOfTags: any[] = blogPosts.map((post) => post.frontmatter.type); + const uniqueTags = [...new Set(setOfTags)]; + // Prepend 'All' for the filter button const allTags = ['All', ...uniqueTags]; return ( @@ -174,16 +154,8 @@ export default function StaticMarkdownPage({ />
- {/* Render each category as a separate badge */} -
- {extractCategories(recentBlog[0]).map((cat, idx) => ( -
- {cat} -
- ))} +
+ {recentBlog[0].frontmatter.type}

@@ -257,8 +229,7 @@ export default function StaticMarkdownPage({ onClick={handleClick} className={`cursor-pointer font-semibold inline-block px-3 py-1 rounded-full mb-4 mr-4 text-sm ${ (tag === 'All' && selectedFilterTags.length === 0) || - (tag !== 'All' && - selectedFilterTags.includes(tag as blogCategories)) + (tag !== 'All' && selectedFilterTags.includes(tag)) ? 'dark:bg-blue-200 dark:text-slate-700 bg-blue-800 text-blue-100' : 'dark:bg-slate-700 dark:text-blue-100 bg-blue-100 text-blue-800 hover:bg-blue-200 hover:dark:bg-slate-600' }`} @@ -275,41 +246,21 @@ export default function StaticMarkdownPage({ {blogPosts .filter((post) => { if (selectedFilterTags.length === 0) return true; - const postCategories = extractCategories(post); - if (!postCategories.length) return false; - return selectedFilterTags.some((tag) => - postCategories - .map((c) => c.toLowerCase()) - .includes(tag.toLowerCase()), + const blogType = post.frontmatter.type as string | undefined; + if (!blogType) return false; + return selectedFilterTags.some( + (tag) => tag.toLowerCase() === blogType.toLowerCase(), ); }) .sort((a, b) => { - // When multiple filter tags are selected, sort by match count first. - if (selectedFilterTags.length > 1) { - const aMatches = extractCategories(a).filter((cat) => - selectedFilterTags.some( - (tag) => tag.toLowerCase() === cat.toLowerCase(), - ), - ).length; - const bMatches = extractCategories(b).filter((cat) => - selectedFilterTags.some( - (tag) => tag.toLowerCase() === cat.toLowerCase(), - ), - ).length; - if (aMatches !== bMatches) { - return bMatches - aMatches; - } - } - // Fallback sort: by date descending. const dateA = new Date(a.frontmatter.date).getTime(); const dateB = new Date(b.frontmatter.date).getTime(); - return dateB - dateA; + return dateA < dateB ? 1 : -1; }) .map((blogPost: any) => { const { frontmatter, content } = blogPost; const date = new Date(frontmatter.date); const timeToRead = Math.ceil(readingTime(content).minutes); - const postCategories = extractCategories(blogPost); return (
@@ -324,27 +275,21 @@ export default function StaticMarkdownPage({ />
- {/* Render each category as a separate clickable badge */} -
- {postCategories.map((cat, idx) => ( -
{ - e.preventDefault(); - e.stopPropagation(); +
+
{ + e.preventDefault(); + e.stopPropagation(); + if (frontmatter.type) { const newTags = selectedFilterTags.includes( - cat as blogCategories, + frontmatter.type, ) ? selectedFilterTags.filter( - (tag) => tag !== cat, + (tag) => tag !== frontmatter.type, ) - : [...selectedFilterTags, cat]; - setSelectedFilterTags( - newTags.filter( - isValidCategory, - ) as blogCategories[], - ); + : [...selectedFilterTags, frontmatter.type]; + setSelectedFilterTags(newTags); if (newTags.length > 0) { history.replaceState( null, @@ -354,11 +299,11 @@ export default function StaticMarkdownPage({ } else { history.replaceState(null, '', '/blog'); } - }} - > - {cat} -
- ))} + } + }} + > + {frontmatter.type || 'Unknown Type'} +
{frontmatter.title} From ad6a9a5f679e51a2c1cc6568340c1d1fc78240c7 Mon Sep 17 00:00:00 2001 From: Idan Levi <29idan29@gmail.com> Date: Tue, 18 Mar 2025 09:18:13 +0200 Subject: [PATCH 4/4] Revert "enabling filtering with more than one category" This reverts commit af4a141454dd994791dfc6cc89449e0ccf726aea. --- pages/blog/index.page.tsx | 139 +++++++++++++++++--------------------- 1 file changed, 63 insertions(+), 76 deletions(-) diff --git a/pages/blog/index.page.tsx b/pages/blog/index.page.tsx index de037d32f..a866346cf 100644 --- a/pages/blog/index.page.tsx +++ b/pages/blog/index.page.tsx @@ -1,4 +1,3 @@ -/* eslint-disable indent */ import React, { useState, useEffect } from 'react'; import Head from 'next/head'; import Link from 'next/link'; @@ -19,15 +18,13 @@ type Author = { link?: string; byline?: string; }; - export type blogCategories = | 'All' | 'Community' | 'Case Study' | 'Engineering' | 'Update' - | 'Opinion' - | 'Documentation'; + | 'Opinion'; export async function getStaticProps({ query }: { query: any }) { const files = fs.readdirSync(PATH); @@ -79,51 +76,33 @@ export default function StaticMarkdownPage({ filterTag: any; }) { const router = useRouter(); - // Initialize selected filter tags: if query.type is 'All' or not provided, no filter is applied. - const initialTags = - filterTag && filterTag !== 'All' - ? ((filterTag as string) - .split(',') - .filter((tag) => isValidCategory(tag)) as blogCategories[]) - : []; - const [selectedFilterTags, setSelectedFilterTags] = - useState(initialTags); + const [currentFilterTag, setCurrentFilterTag] = useState( + filterTag || 'All', + ); useEffect(() => { const { query } = router; - if (query.type) { - const types = (query.type as string) - .split(',') - .filter((tag) => isValidCategory(tag)) as blogCategories[]; - setSelectedFilterTags(types); - } else { - setSelectedFilterTags([]); + if (query.type && isValidCategory(query.type)) { + setCurrentFilterTag(query.type); } }, [router.query]); + useEffect(() => { + // Set the filter tag based on the initial query parameter when the page loads + setCurrentFilterTag(filterTag); + }, [filterTag]); + const handleClick = (event: React.MouseEvent) => { - event.preventDefault(); + event.preventDefault(); // Prevent default scrolling behavior const clickedTag = event.currentTarget.value as blogCategories; if (clickedTag === 'All') { - setSelectedFilterTags([]); - history.replaceState(null, '', '/blog'); - } else { - if (selectedFilterTags.includes(clickedTag)) { - const newTags = selectedFilterTags.filter((tag) => tag !== clickedTag); - setSelectedFilterTags(newTags); - if (newTags.length > 0) { - history.replaceState(null, '', `/blog?type=${newTags.join(',')}`); - } else { - history.replaceState(null, '', '/blog'); - } - } else { - const newTags = [...selectedFilterTags, clickedTag]; - setSelectedFilterTags(newTags); - history.replaceState(null, '', `/blog?type=${newTags.join(',')}`); - } + setCurrentFilterTag('All'); + history.replaceState(null, '', '/blog'); // Update the URL without causing a scroll + } else if (isValidCategory(clickedTag)) { + setCurrentFilterTag(clickedTag); + history.replaceState(null, '', `/blog?type=${clickedTag}`); // Update URL } }; - const recentBlog = blogPosts.sort((a, b) => { const dateA = new Date(a.frontmatter.date).getTime(); const dateB = new Date(b.frontmatter.date).getTime(); @@ -131,19 +110,21 @@ export default function StaticMarkdownPage({ }); const timeToRead = Math.ceil(readingTime(recentBlog[0].content).minutes); - const setOfTags: any[] = blogPosts.map((post) => post.frontmatter.type); - const uniqueTags = [...new Set(setOfTags)]; - // Prepend 'All' for the filter button - const allTags = ['All', ...uniqueTags]; + const setOfTags: any[] = blogPosts.map((tag) => tag.frontmatter.type); + const spreadTags: any[] = [...setOfTags]; + const allTags = [...new Set(spreadTags)]; + //add tag for all + allTags.unshift('All'); return ( + // @ts-ignore JSON Schema Blog
{recentBlog[0] && ( -
+
+

{recentBlog[0].frontmatter.authors[0].name}

-
+
{recentBlog[0].frontmatter.date} · {timeToRead}{' '} min read @@ -190,6 +172,7 @@ export default function StaticMarkdownPage({ Welcome to the JSON Schema Blog!

+

Want to publish a blog post? Check out the  @@ -204,6 +187,7 @@ export default function StaticMarkdownPage({  and submit yours!

+ {/* Filter Buttons */} +
{allTags.map((tag) => ( @@ -241,16 +224,15 @@ export default function StaticMarkdownPage({ Filter blog posts by category...
- {/* Filtered Blog Posts */} -
+ + {/* filterTag === frontmatter.type && */} +
{blogPosts .filter((post) => { - if (selectedFilterTags.length === 0) return true; + if (!currentFilterTag || currentFilterTag === 'All') return true; const blogType = post.frontmatter.type as string | undefined; if (!blogType) return false; - return selectedFilterTags.some( - (tag) => tag.toLowerCase() === blogType.toLowerCase(), - ); + return blogType.toLowerCase() === currentFilterTag.toLowerCase(); }) .sort((a, b) => { const dateA = new Date(a.frontmatter.date).getTime(); @@ -273,7 +255,7 @@ export default function StaticMarkdownPage({ className='bg-slate-50 h-[160px] w-full self-stretch mr-3 bg-cover bg-center' style={{ backgroundImage: `url(${frontmatter.cover})` }} /> -
+
{ e.preventDefault(); e.stopPropagation(); + if (frontmatter.type) { - const newTags = selectedFilterTags.includes( - frontmatter.type, - ) - ? selectedFilterTags.filter( - (tag) => tag !== frontmatter.type, - ) - : [...selectedFilterTags, frontmatter.type]; - setSelectedFilterTags(newTags); - if (newTags.length > 0) { - history.replaceState( - null, - '', - `/blog?type=${newTags.join(',')}`, - ); - } else { - history.replaceState(null, '', '/blog'); - } + setCurrentFilterTag(frontmatter.type); + history.replaceState( + null, + '', + `/blog?type=${frontmatter.type}`, + ); } }} > @@ -308,6 +280,7 @@ export default function StaticMarkdownPage({
{frontmatter.title}
+
-
+
{(frontmatter.authors || []).map( (author: Author, index: number) => ( @@ -335,7 +314,14 @@ export default function StaticMarkdownPage({ ), )}
-
+ +
{frontmatter.authors.length > 2 ? ( <> @@ -361,6 +347,7 @@ export default function StaticMarkdownPage({ ) )}
+
{frontmatter.date && (