reduce card title font size and fix tags on viewall page

Author: cherylli

components/blog/BlogPostsContainer.js

@@ -12,7 +12,13 @@ function* splitPosts(arr, n) {
   }
 }
 
-const BlogPostsContainer = ({ posts, heading, tag, swipe = true }) => {
+const BlogPostsContainer = ({
+  posts,
+  heading,
+  tag,
+  swipe = true,
+  viewall = true,
+}) => {
   // process posts props (e.g. insert default image)
   posts.map(post => {
     if (!post.image) {
@@ -36,12 +42,6 @@ const BlogPostsContainer = ({ posts, heading, tag, swipe = true }) => {
               {[...splitPosts(posts, 3)].map((p, index) => (
                 <CardsColumns key={index} cards={p} customClass='blog' />
               ))}
-              <Link
-                className={styles.viewAll}
-                href={tag ? `/blog/category/${tag}` : '/blog/category/all'}
-              >
-                view all
-              </Link>
             </>
           ) : (
             <div className={styles.postContainer}>
@@ -51,6 +51,14 @@ const BlogPostsContainer = ({ posts, heading, tag, swipe = true }) => {
             </div>
           )
         }
+        {viewall ? (
+          <Link
+            className={styles.viewAll}
+            href={tag ? `/blog/category/${tag}` : '/blog/category/all'}
+          >
+            view all
+          </Link>
+        ) : null}
       </div>
     </RevealContentContainer>
   );

pages/blog/category/all.js

@@ -5,7 +5,12 @@ export default function BlogCategory({ posts }) {
   posts = posts.concat(posts).concat(posts);
 
   return (
-    <BlogPostsContainer posts={posts} swipe={false} heading='Latest Posts' />
+    <BlogPostsContainer
+      posts={posts}
+      swipe={true}
+      heading='All Posts'
+      viewall={false}
+    />
   );
 }
 
@@ -21,6 +26,7 @@ export async function getStaticProps() {
         content: post.description,
         link: post.url,
         linkText: 'Read more',
+        tagList: post.tag_list,
       })),
     },
   };

pages/blog/index.js

@@ -15,7 +15,9 @@ export default function Blog({ posts }) {
     <Container>
       <div className={styles.blogSearch}>
         <Title customClass='blogTitle' title='Latest Posts' />
-        <SearchBar />
+        {/*
+          <SearchBar />
+        */}
       </div>
       <BlogPostsContainer posts={latestPosts} />
       <BlogPostsContainer posts={nextJsPosts} tag='nextjs' />

styles/Card.module.scss

@@ -127,9 +127,15 @@
     }
 
     .title {
-      height: 6.5rem;
+      font-size: 1.3rem;
+      margin-bottom: 0.7rem;
+      max-height: 6rem;
       overflow: hidden;
     }
+
+    &.swiper-wrapper {
+      justify-content: flex-start;
+    }
   }
 
   .tagListContainer {