Merge pull request #37 from 01-binary/issue#35

refactor: profile image to use Notion URL directly and remove API end…

Author: 01-binary

package.json

@@ -17,7 +17,7 @@
     "lodash": "^4.17.21",
     "next": "^13.4.4",
     "notion-to-jsx": "^1.2.8",
-    "notion-to-utils": "^1.1.0",
+    "notion-to-utils": "^1.1.1",
     "p-map": "^7.0.2",
     "plaiceholder": "^3.0.0",
     "prismjs": "^1.30.0",

pages/about.tsx

@@ -1,20 +1,24 @@
 import { GetStaticProps } from 'next';
 import { NotionBlock, Renderer } from 'notion-to-jsx';
 
-import { notionClient } from '@/utils';
+import { fetchNotionProfileUrl, notionClient } from '@/utils';
 
 import PageHead from '@/components/common/PageHead';
 
 import { REVALIDATE_TIME } from '@/assets/constants';
 
 interface Props {
   blocks: NotionBlock[];
+  profileUrl: string;
 }
 
-const AboutPage = ({ blocks }: Props) => {
+const AboutPage = ({ blocks, profileUrl }: Props) => {
   return (
     <>
-      <PageHead title="About" />
+      <PageHead
+        title="About"
+        image={profileUrl}
+      />
       <Renderer blocks={blocks} />
     </>
   );
@@ -26,10 +30,11 @@ export const getStaticProps: GetStaticProps<Props> = async () => {
   const aboutId = process.env.NOTION_ABOUT_ID;
 
   if (!aboutId) throw new Error('NOTION_ABOUT_ID is not defined');
-
+  const profileUrl = await fetchNotionProfileUrl();
   const blocks = (await notionClient.getPageBlocks(aboutId)) as NotionBlock[];
   return {
     props: {
+      profileUrl,
       blocks,
     },
     revalidate: REVALIDATE_TIME,

pages/api/profile-image.ts

@@ -3,28 +3,40 @@ import { GetStaticProps } from 'next';
 
 import { categoriesAtom } from '@/atoms/categories';
 import { postsAtom } from '@/atoms/posts';
+import { profileImageAtom } from '@/atoms/profile';
 import Home from '@/features/home';
 import { Category, PostMeta } from '@/interfaces';
-import { getPostsMeta, fetchNotionPostsMeta, getCategories, getBlurImage } from '@/utils';
+import {
+  getPostsMeta,
+  fetchNotionPostsMeta,
+  getCategories,
+  getBlurImage,
+  fetchNotionProfileUrl,
+} from '@/utils';
 import { siteConfig } from 'site.config';
 
 import PageHead from '@/components/common/PageHead';
 
 import { REVALIDATE_TIME } from '@/assets/constants';
 
 interface Props {
+  profileUrl: string;
   posts: PostMeta[];
   categories: Category[];
 }
-const HomePage = ({ posts, categories }: Props) => {
+const HomePage = ({ profileUrl, posts, categories }: Props) => {
   useHydrateAtoms([
+    [profileImageAtom, profileUrl],
     [postsAtom, posts],
     [categoriesAtom, categories],
   ]);
 
   return (
     <>
-      <PageHead title={siteConfig.homeTitle} />
+      <PageHead
+        title={siteConfig.homeTitle}
+        image={profileUrl}
+      />
       <Home />
     </>
   );
@@ -36,6 +48,9 @@ export const getStaticProps: GetStaticProps<Props> = async () => {
   if (!process.env.NOTION_POST_DATABASE_ID)
     throw new Error('NOTION_POST_DATABASE_ID is not defined');
 
+  if (!process.env.NOTION_PROFILE_ID) throw new Error('NOTION_PROFILE_ID is not defined');
+
+  const profileUrl = await fetchNotionProfileUrl();
   const notionPostsResponse = await fetchNotionPostsMeta(process.env.NOTION_POST_DATABASE_ID);
   const posts = await Promise.all(
     getPostsMeta(notionPostsResponse).map(async (post) => ({
@@ -47,6 +62,7 @@ export const getStaticProps: GetStaticProps<Props> = async () => {
 
   return {
     props: {
+      profileUrl,
       posts,
       categories,
     },

pages/index.tsx

@@ -18,7 +18,6 @@ export const INITIAL_CATEGORY = 'All';
 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

@@ -0,0 +1,3 @@
+import { atom } from 'jotai';
+
+export const profileImageAtom = atom<string>('');

src/atoms/profile/index.ts

@@ -16,10 +16,11 @@ interface PageHeadProps {
 
 const PageHead = ({ title, description, image, keywords }: PageHeadProps) => {
   const { asPath } = useRouter();
+
   const pageTitle = title ? `${title} | ${siteConfig.blogName}` : siteConfig.blogName;
   const pageDescription = description || siteConfig.seoDefaultDesc;
   const pageKeywords = keywords || '';
-  const pageImage = `${image || `${siteConfig.url}/api/profile-image`}`;
+  const pageImage = `${image}`;
   const pageUrl = `${siteConfig.url}${asPath}`;
 
   return (

src/components/common/PageHead.tsx

@@ -1,23 +1,25 @@
 import { memo } from 'react';
 
+import { useAtomValue } from 'jotai';
 import Image from 'next/image';
 import Link from 'next/link';
 import { AiOutlineGithub, AiFillLinkedin } from 'react-icons/ai';
 import { HiMail } from 'react-icons/hi';
 
+import { profileImageAtom } from '@/atoms/profile';
 import { siteConfig } from 'site.config';
 
 import { DEFAULT_BLUR_BASE64 } from '@/assets/constants';
 
-const profileImage = `/api/profile-image`;
-
 const Intro = () => {
+  const profileUrl = useAtomValue(profileImageAtom);
+
   return (
     <section>
       <article className="flex gap-4 md:gap-6">
         <Image
           className="h-[110px] w-[110px] rounded-full object-cover"
-          src={profileImage}
+          src={profileUrl}
           width={110}
           height={110}
           alt={'Intro Picture'}

src/features/home/Intro/index.tsx

@@ -0,0 +1,12 @@
+import { formatNotionImageUrl } from 'notion-to-utils';
+
+import notionClient from '@/utils/notionClient';
+
+const fetchNotionProfileUrl = async () => {
+  if (!process.env.NOTION_PROFILE_ID) throw new Error('NOTION_PROFILE_ID is not defined');
+  const url = await notionClient.getFileUrl(process.env.NOTION_PROFILE_ID, 'media');
+  const formattedUrl = formatNotionImageUrl(url, process.env.NOTION_PROFILE_ID);
+  return formattedUrl;
+};
+
+export default fetchNotionProfileUrl;

src/utils/fetchNotionProfileUrl.ts

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