feat(v1): search blog by tag

.env.example

@@ -1,4 +1,4 @@
-CONTENTFUL_SPACE_ID = ''
-CONTENTFUL_ACCESS_KEY = ''
+NEXT_PUBLIC_CONTENTFUL_ACCESS_KEY = ''
+NEXT_PUBLIC_CONTENTFUL_SPACE_ID = ''
 NEXT_PUBLIC_CUSDIS_APPID = ''
 NEXT_PUBLIC_SITE_URL = ''

README.md

@@ -7,8 +7,8 @@
 First, copy `.env.example` and paste as `.env.local`, fill all field:
 
 ```bash
-CONTENTFUL_SPACE_ID = ''
-CONTENTFUL_ACCESS_KEY = ''
+NEXT_PUBLIC_CONTENTFUL_SPACE_ID = ''
+NEXT_PUBLIC_CONTENTFUL_ACCESS_KEY = ''
 NEXT_PUBLIC_CUSDIS_APPID = ''
 NEXT_PUBLIC_SITE_URL = ''
 ```

components/blog/Card.js

@@ -2,51 +2,52 @@ import Link from 'next/link';
 import { Badge, Heading, HStack, Text, VStack } from '@chakra-ui/react';
 import { format } from 'date-fns';
 
-const Card = ({ createdAt, slug, summary, tags, title }) => (
-  <Link href={`/blog/${slug}`} passHref>
-    <VStack
-      as="article"
-      spacing={4}
-      p={6}
-      w="full"
-      textAlign="center"
-      rounded="md"
-      shadow="md"
-      transition="all 0.2s ease-in-out"
-      _hover={{
-        bg: 'gray.200',
-        cursor: 'pointer',
-        transform: 'translateY(-3px);',
-      }}
-    >
-      <Text fontWeight="600">
-        {format(new Date(createdAt), 'EEEE, MMMM do, yyyy')}
-      </Text>
-      <Heading size="lg" _hover={{ textDecor: 'underline' }}>
+const Card = ({ createdAt, router, slug, summary, tags, title }) => (
+  <VStack
+    as="article"
+    spacing={4}
+    p={6}
+    w="full"
+    textAlign="center"
+    rounded="md"
+    shadow="md"
+    transition="all 0.2s ease-in-out"
+    _hover={{
+      bg: 'gray.200',
+      transform: 'translateY(-3px);',
+    }}
+  >
+    <Text fontWeight="600">
+      {format(new Date(createdAt), 'EEEE, MMMM do, yyyy')}
+    </Text>
+    <Link href={`/blog/${slug}`} passHref>
+      <Heading size="lg" _hover={{ textDecor: 'underline', cursor: 'pointer' }}>
         {title}
       </Heading>
-      <Text fontWeight="500" lineHeight="tall" noOfLines={[4, 3]}>
-        {summary}
-      </Text>
-      <HStack>
-        {tags.map((tag) => (
-          <Badge
-            key={tag.sys.id}
-            variant="solid"
-            py={1}
-            px={2}
-            bg="gray.700"
-            fontWeight="500"
-            textTransform="capitalize"
-            rounded="md"
-            shadow="inner"
-          >
-            {tag.sys.id}
-          </Badge>
-        ))}
-      </HStack>
-    </VStack>
-  </Link>
+    </Link>
+    <Text fontWeight="500" lineHeight="tall" noOfLines={[4, 3]}>
+      {summary}
+    </Text>
+    <HStack>
+      {tags.map((tag) => (
+        <Badge
+          key={tag.sys.id}
+          onClick={() => router.replace(`/blog?tag=${tag.sys.id}`)}
+          variant="solid"
+          py={1}
+          px={2}
+          bg="gray.700"
+          fontWeight="500"
+          textTransform="capitalize"
+          rounded="md"
+          shadow="inner"
+          _hover={{ textDecor: 'underline', cursor: 'pointer' }}
+        >
+          {tag.sys.id}
+        </Badge>
+      ))}
+    </HStack>
+  </VStack>
 );
 
 export default Card;

pages/blog/[slug].js

@@ -1,4 +1,5 @@
 import Image from 'next/image';
+import { useRouter } from 'next/router';
 import { NextSeo } from 'next-seo';
 import { createClient } from 'contentful';
 import { Badge, Box, Divider, Heading, HStack, Text } from '@chakra-ui/react';
@@ -8,8 +9,8 @@ import MarkdownComponent from '../../components/blog/MarkdownComponent';
 import Comments from '../../components/blog/Comments';
 
 const client = createClient({
-  space: process.env.CONTENTFUL_SPACE_ID,
-  accessToken: process.env.CONTENTFUL_ACCESS_KEY,
+  space: process.env.NEXT_PUBLIC_CONTENTFUL_SPACE_ID,
+  accessToken: process.env.NEXT_PUBLIC_CONTENTFUL_ACCESS_KEY,
 });
 
 export const getStaticPaths = async () => {
@@ -40,6 +41,7 @@ const DetailBlog = ({ blog }) => {
   const { description, file } = thumbnail.fields;
   const { width, height } = file.details.image;
   const url = `${process.env.NEXT_PUBLIC_SITE_URL}/blog/${slug}`;
+  const router = useRouter();
 
   return (
     <>
@@ -101,6 +103,7 @@ const DetailBlog = ({ blog }) => {
         {tags.map((tag) => (
           <Badge
             key={tag.sys.id}
+            onClick={() => router.push(`/blog?tag=${tag.sys.id}`)}
             py={1}
             px={2}
             bg="brand.light"
@@ -109,6 +112,12 @@ const DetailBlog = ({ blog }) => {
             textTransform="capitalize"
             rounded="md"
             shadow="inner"
+            transition="all 0.2s ease-in-out"
+            _hover={{
+              bg: 'gray.200',
+              textDecor: 'underline',
+              cursor: 'pointer',
+            }}
           >
             {tag.sys.id}
           </Badge>

pages/blog/index.js

@@ -1,14 +1,17 @@
+import { useEffect, useState } from 'react';
+import { useRouter } from 'next/router';
 import { NextSeo } from 'next-seo';
 import { createClient } from 'contentful';
 import { Divider, Heading, Text, VStack } from '@chakra-ui/react';
 
 import Card from '../../components/blog/Card';
 
+const client = createClient({
+  space: process.env.NEXT_PUBLIC_CONTENTFUL_SPACE_ID,
+  accessToken: process.env.NEXT_PUBLIC_CONTENTFUL_ACCESS_KEY,
+});
+
 export const getStaticProps = async () => {
-  const client = createClient({
-    space: process.env.CONTENTFUL_SPACE_ID,
-    accessToken: process.env.CONTENTFUL_ACCESS_KEY,
-  });
   const res = await client.getEntries({ content_type: 'blog' });
 
   return { props: { blogs: res.items } };
@@ -18,6 +21,24 @@ const Blog = ({ blogs }) => {
   const title = 'Blog';
   const url = `${process.env.NEXT_PUBLIC_SITE_URL}/blog`;
 
+  const router = useRouter();
+  const { query } = router;
+  const [blogLists, setBlogLists] = useState(blogs);
+
+  useEffect(() => {
+    if (!query) return;
+
+    const fetchBlogByTag = async () => {
+      const res = await client.getEntries({
+        content_type: 'blog',
+        'metadata.tags.sys.id[in]': query.tag,
+      });
+      setBlogLists(res.items);
+    };
+
+    fetchBlogByTag();
+  }, [query]);
+
   return (
     <>
       <NextSeo title={title} canonical={url} openGraph={{ url, title }} />
@@ -30,7 +51,7 @@ const Blog = ({ blogs }) => {
       </Text>
       <Divider mb={8} />
       <VStack spacing={6}>
-        {blogs.map((blog) => {
+        {blogLists.map((blog) => {
           const { slug, summary } = blog.fields;
           const { tags } = blog.metadata;
           const { createdAt, id } = blog.sys;
@@ -43,6 +64,7 @@ const Blog = ({ blogs }) => {
               title={blog.fields.title}
               tags={tags}
               createdAt={createdAt}
+              router={router}
             />
           );
         })}