add links to tag and edit styles

Author: cherylli

CHANGELOG.md

@@ -86,6 +86,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - Blog page which pulls content from dev.to
 - Search functionality for blog posts
 - Styled components to Title component
+- Links to blog tags to show all posts with the same tag
 
 ### Fixed
 

components/blog/BlogPostsContainer.js

@@ -19,6 +19,7 @@ const BlogPostsContainer = ({
   tag,
   swipe = true,
   viewall = true,
+  back = false,
 }) => {
   // process posts props (e.g. insert default image)
   posts.map(post => {
@@ -51,7 +52,7 @@ const BlogPostsContainer = ({
           ) : (
             <Container>
               <div className={styles.postContainer}>
-                {posts.map((p, index) => (
+                {posts?.map((p, index) => (
                   <Card customClass='blog' key={index} card={p} />
                 ))}
               </div>
@@ -61,13 +62,23 @@ const BlogPostsContainer = ({
         {viewall && posts.length >= 3 ? (
           <Container>
             <Link
-              className={styles.viewAll}
+              className={`${styles.bottomLink} ${styles.viewAll}`}
               href={tag ? `/blog/category/${tag}` : '/blog/category/all'}
             >
               view all
             </Link>
           </Container>
         ) : null}
+        {back ? (
+          <Container>
+            <Link
+              className={`${styles.bottomLink} ${styles.backLink}}`}
+              href={`/blog`}
+            >
+              &#60; Back
+            </Link>
+          </Container>
+        ) : null}
       </div>
     </RevealContentContainer>
   );

components/blog/Tag.js

@@ -1,7 +1,12 @@
 import styles from '@/styles/Blog.module.scss';
+import Link from 'next/link';
 
 const Tag = ({ text }) => {
-  return <div className={styles.tag}>{text}</div>;
+  return (
+    <Link className={styles.tag} href={`/blog/category/${text}`}>
+      {text}
+    </Link>
+  );
 };
 
 export default Tag;

pages/blog/category/[tag].js

@@ -6,13 +6,17 @@ import { blogRevalidate } from '@/utils/config';
 export default function BlogCategory({ posts }) {
   const router = useRouter();
   const { tag } = router.query;
+
   return (
-    <BlogPostsContainer
-      posts={posts}
-      swipe={false}
-      heading={tagToHeading[tag]}
-      viewall={false}
-    />
+    <>
+      <BlogPostsContainer
+        posts={posts}
+        swipe={false}
+        heading={tagToHeading[tag] || `#${tag}`}
+        viewall={false}
+        back={true}
+      />
+    </>
   );
 }
 
@@ -41,6 +45,6 @@ export async function getStaticProps({ params }) {
 export async function getStaticPaths() {
   return {
     paths,
-    fallback: false,
+    fallback: 'blocking',
   };
 }

styles/Blog.module.scss

@@ -7,20 +7,31 @@
   margin: 3rem 0;
 }
 
-.viewAll {
+.bottomLink {
   font-size: 1.5rem;
   font-weight: bold;
   position: relative;
-  top: -3rem;
   display: block;
   text-align: center;
+}
 
+.viewAll {
+  top: -3rem;
   @include desktop {
     float: right;
     top: -5rem;
   }
 }
 
+.backLink {
+  top: -2rem;
+
+  @include desktop {
+    float: left;
+    top: -1rem;
+  }
+}
+
 .blogSearch {
   display: flex;
   padding-top: 2.5rem;
@@ -84,4 +95,5 @@
   padding: 0.5rem 1rem;
   border-radius: 2rem;
   font-weight: bold;
+  text-decoration: none !important;
 }