Merge pull request #164 from Web-Dev-Path/feature/add-link-to-tags

Add Links to Blog Tags

Author: mariana-caldas

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,25 @@
-import styles from '@/styles/Blog.module.scss';
+import Link from 'next/link';
+import styled from 'styled-components';
 
-const Tag = ({ text }) => {
-  return <div className={styles.tag}>{text}</div>;
-};
+export const TagContainer = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  max-height: 12rem;
+  overflow: hidden;
+  gap: 0.5rem;
+  margin-bottom: -1rem;
+  a {
+    text-decoration: none;
+  }
+`;
+
+const TagLink = styled(Link)`
+  background-color: #8cd5e8;
+  padding: 0.5rem 1rem;
+  border-radius: 2rem;
+  font-weight: bold;
+`;
 
-export default Tag;
+export const Tag = ({ text }) => {
+  return <TagLink href={`/blog/category/${text}`}>{text}</TagLink>;
+};

components/containers/Card.js

@@ -1,7 +1,7 @@
 import Image from 'next/image';
 import Link from 'next/link';
 import styles from '@/styles/Card.module.scss';
-import Tag from '@/components/blog/Tag';
+import { Tag, TagContainer } from '@/components/blog/Tag';
 
 export default function Card({
   card: { image, altTag, title, content, link, linkText, tagList },
@@ -30,11 +30,11 @@ export default function Card({
         {title}
       </h2>
       {tagList && tagList.length > 0 ? (
-        <div className={styles.tagListContainer}>
+        <TagContainer>
           {tagList.slice(0, 8).map((tag, i) => (
             <Tag key={i} text={tag} />
           ))}
-        </div>
+        </TagContainer>
       ) : null}
       <div className={styles.content}>
         <p>

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;
@@ -40,31 +51,18 @@
   justify-content: center;
   margin-bottom: 3rem;
 
-  @include mobile {
-    justify-content: center;
-  }
-
   @include tablet {
-    justify-content: space-between;
-  }
-
-  @include desktop {
     justify-content: flex-start;
   }
 }
 
 .postContainer > div {
-  @include mobile {
-    flex-basis: 100%;
-  }
-
-  @include tablet {
-    flex-basis: 43%;
+  @include desktop {
+    flex-basis: 48%;
   }
 
-  @include desktop {
+  @include large-desktop {
     flex-basis: 32%;
-    max-width: 200px;
   }
 }
 
@@ -78,10 +76,3 @@
     content: unset;
   }
 }
-
-.tag {
-  background-color: $light-bg-color;
-  padding: 0.5rem 1rem;
-  border-radius: 2rem;
-  font-weight: bold;
-}

styles/Card.module.scss

@@ -117,6 +117,10 @@
 
   &.blog {
     margin: 1rem 0.5rem 0 0.5rem;
+    @include tablet {
+      height: 40rem;
+    }
+
     .card__image {
       height: 12rem;
     }