feat: Add blur image placeholder and remove cover-image API endpoint

Author: 01-binary

package.json

@@ -11,6 +11,7 @@
     "prepare": "husky install"
   },
   "dependencies": {
+    "add": "^2.0.6",
     "dayjs": "^1.11.8",
     "is-url-superb": "^6.1.0",
     "jotai": "^2.8.0",
@@ -19,11 +20,14 @@
     "notion-to-jsx": "^1.2.7",
     "notion-to-utils": "^1.1.0",
     "p-map": "^7.0.2",
+    "plaiceholder": "^3.0.0",
     "prismjs": "^1.30.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.9.0",
-    "rss": "^1.2.2"
+    "rss": "^1.2.2",
+    "sharp": "^0.34.1",
+    "yarn": "^1.22.22"
   },
   "devDependencies": {
     "@types/lodash": "^4.14.195",

pages/api/cover-image.ts

@@ -5,7 +5,7 @@ import { categoriesAtom } from '@/atoms/categories';
 import { postsAtom } from '@/atoms/posts';
 import Home from '@/features/home';
 import { Category, PostMeta } from '@/interfaces';
-import { getPostsMeta, fetchNotionPostsMeta, getCategories } from '@/utils';
+import { getPostsMeta, fetchNotionPostsMeta, getCategories, getBlurImage } from '@/utils';
 import { siteConfig } from 'site.config';
 
 import PageHead from '@/components/common/PageHead';
@@ -37,7 +37,12 @@ export const getStaticProps: GetStaticProps<Props> = async () => {
     throw new Error('NOTION_POST_DATABASE_ID is not defined');
 
   const notionPostsResponse = await fetchNotionPostsMeta(process.env.NOTION_POST_DATABASE_ID);
-  const posts = getPostsMeta(notionPostsResponse);
+  const posts = await Promise.all(
+    getPostsMeta(notionPostsResponse).map(async (post) => ({
+      ...post,
+      blurImage: await getBlurImage(post.cover),
+    })),
+  );
   const categories = getCategories(notionPostsResponse);
 
   return {

pages/index.tsx

@@ -19,3 +19,6 @@ export const DEFAULT_CATEGORY_COLOR: SelectColor = 'default';
 
 export const REVALIDATE_TIME = 60;
 export const IMAGE_MAX_AGE = 60 * 60;
+
+export const DEFAULT_BLUR_BASE64 =
+  'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxIiBoZWlnaHQ9IjEiPjxyZWN0IHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9IiNGM0Y0RjYiLz48L3N2Zz4=';

src/assets/constants.ts

@@ -5,6 +5,8 @@ import { useAtomValue } from 'jotai';
 import { categoriesAtom, selectedCategoryAtom } from '@/atoms/categories';
 import { useCategorySelect } from '@/features/home/hooks';
 
+import { COLOR_TABLE } from '@/assets/constants';
+
 const CategoryList = () => {
   const categories = useAtomValue(categoriesAtom);
   const seletedCategory = useAtomValue(selectedCategoryAtom);
@@ -17,14 +19,14 @@ const CategoryList = () => {
         <section className="flex min-h-[65px] gap-3 overflow-x-auto bg-[hsla(0,0%,100%,.8)] p-3">
           {categories.map((category) => {
             const { id, name, color, count } = category;
+            const selectedColor = COLOR_TABLE[color as keyof typeof COLOR_TABLE];
+
             return (
               <section
-                className={`cursor-pointer whitespace-nowrap rounded-3xl border-[2px] border-solid bg-[#fff] py-2 px-4 text-[14px] shadow-[0_2px_4px_rgba(0,0,0,.1)] ${
-                  seletedCategory === name ? 'border-[#c0c0c0]' : 'border-transparent'
-                }`}
+                className={`cursor-pointer whitespace-nowrap rounded-3xl border-[2px] border-solid bg-[#fff] py-2 px-4 text-[14px] shadow-[0_2px_4px_rgba(0,0,0,.1)]`}
                 key={id}
-                style={{ color }}
                 onClick={handleClickCategory(name)}
+                style={{ borderColor: seletedCategory === name ? selectedColor : 'transparent' }}
               >
                 {`${name} (${count})`}
               </section>

src/features/home/CategoryList/index.tsx

@@ -7,6 +7,8 @@ import { HiMail } from 'react-icons/hi';
 
 import { siteConfig } from 'site.config';
 
+import { DEFAULT_BLUR_BASE64 } from '@/assets/constants';
+
 const profileImage = `/api/profile-image`;
 
 const Intro = () => {
@@ -19,6 +21,8 @@ const Intro = () => {
           width={110}
           height={110}
           alt={'Intro Picture'}
+          placeholder="blur"
+          blurDataURL={DEFAULT_BLUR_BASE64}
         />
         <section className="flex flex-col justify-around gap-1">
           <section className="flex flex-col gap-2">

src/features/home/Intro/index.tsx

@@ -7,7 +7,7 @@ import { calculate } from '@/features/home/PostList/Post/util';
 import { PostMeta as Item } from '@/interfaces';
 import { siteConfig } from 'site.config';
 
-import { COLOR_TABLE } from '@/assets/constants';
+import { COLOR_TABLE, DEFAULT_BLUR_BASE64 } from '@/assets/constants';
 
 interface Props {
   item: Item;
@@ -16,7 +16,7 @@ interface Props {
 const Post = ({ item }: Props) => {
   const ref = useRef<HTMLDivElement>(null);
   const [onError, setOnError] = useState<boolean>(false);
-  const { cover, description, published, category, title, slug } = item;
+  const { cover, description, published, category, title, slug, blurImage } = item;
 
   useEffect(() => {
     if (!ref.current) return;
@@ -58,6 +58,8 @@ const Post = ({ item }: Props) => {
               src={cover}
               alt={title}
               fill
+              placeholder="blur"
+              blurDataURL={blurImage || DEFAULT_BLUR_BASE64}
               onError={() => setOnError(true)}
             />
           ) : (

src/features/home/PostList/Post/index.tsx

@@ -19,6 +19,7 @@ export interface PostMeta {
   description: string;
   title: string;
   slug: string;
+  blurImage?: string;
 }
 
 export interface Category extends SelectPropertyResponse {

src/interfaces/index.ts

@@ -0,0 +1,14 @@
+import { getPlaiceholder } from 'plaiceholder';
+
+const getBlurImage = async (imgSrc: string) => {
+  try {
+    const buffer = await fetch(imgSrc).then(async (res) => Buffer.from(await res.arrayBuffer()));
+    const { base64 } = await getPlaiceholder(buffer, { size: 10 });
+    return base64;
+  } catch (e) {
+    console.log(e);
+    return '';
+  }
+};
+
+export default getBlurImage;

src/utils/getBlurImage.ts

@@ -4,3 +4,4 @@ export { default as fetchIdBySlug } from './fetchIdBySlug';
 export { default as getCategories } from './getCategories';
 export { default as getSlugs } from './getSlugs';
 export { default as getPostsMeta } from './getPostsMeta';
+export { default as getBlurImage } from './getBlurImage';