refactor blog index page and add revalidate property to all getStaticProps

Author: cherylli

pages/blog/category/[tag].js

@@ -1,6 +1,7 @@
 import BlogPostsContainer from '@/components/blog/BlogPostsContainer';
 import { paths, tagToHeading } from '@/utils/blogCategories';
 import { useRouter } from 'next/router';
+import { blogRevalidate } from '@/utils/config';
 
 export default function BlogCategory({ posts }) {
   const router = useRouter();
@@ -33,6 +34,7 @@ export async function getStaticProps({ params }) {
           tagList: post.tag_list,
         })),
     },
+    revalidate: blogRevalidate,
   };
 }
 

pages/blog/category/all.js

@@ -1,4 +1,5 @@
 import BlogPostsContainer from '@/components/blog/BlogPostsContainer';
+import { blogRevalidate } from '@/utils/config';
 
 export default function BlogCategory({ posts }) {
   return (
@@ -26,5 +27,6 @@ export async function getStaticProps() {
         tagList: post.tag_list,
       })),
     },
+    revalidate: blogRevalidate,
   };
 }

pages/blog/first-post.js

@@ -3,23 +3,25 @@ import Container from '@/components/containers/Container';
 import SearchBar from '@/components/blog/SearchBar';
 import styles from '@/styles/Blog.module.scss';
 import Title from '@/components/snippets/Title';
+import { blogRevalidate } from '@/utils/config';
+import { tagToHeading } from '@/utils/blogCategories';
 
 export default function Blog({ posts }) {
   const latestPosts = posts.slice(0, 3);
-  const nextJsPosts = posts.filter(post => post.tagList.includes('nextjs'));
-  const typescriptPosts = posts.filter(post =>
-    post.tagList.includes('typescript')
-  );
+  const getPostsByTag = tag => {
+    return posts.filter(post => post.tagList.includes(tag));
+  };
 
   return (
     <>
       <div className={styles.blogSearch}>
         <Title customClass='blogTitle' title='Latest Posts' />
-        {/* <SearchBar /> */}
+        <SearchBar />
       </div>
       <BlogPostsContainer posts={latestPosts} />
-      <BlogPostsContainer posts={nextJsPosts} tag='nextjs' />
-      <BlogPostsContainer posts={typescriptPosts} tag='typescript' />
+      {Object.keys(tagToHeading).map(tag => (
+        <BlogPostsContainer key={tag} posts={getPostsByTag(tag)} tag={tag} />
+      ))}
     </>
   );
 }
@@ -40,5 +42,6 @@ export async function getStaticProps() {
         tagList: post.tag_list,
       })),
     },
+    revalidate: blogRevalidate,
   };
 }

pages/blog/index.js

@@ -0,0 +1 @@
+export const blogRevalidate = 60 * 60 * 24;