refactor: post metadata handling and remove image preview features

01-binary · 01-binary · commit e62dc412eeab · 2025-04-15T22:55:15.000+09:00
diff --git a/package.json b/package.json
@@ -17,7 +17,7 @@
     "lodash": "^4.17.21",
     "next": "^13.4.4",
     "notion-to-jsx": "^1.2.7",
-    "notion-to-utils": "^1.0.2",
+    "notion-to-utils": "^1.1.0",
     "p-map": "^7.0.2",
     "prismjs": "^1.30.0",
     "react": "^18.2.0",
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -4,17 +4,16 @@ import { GetStaticProps } from 'next';
 import { categoriesAtom } from '@/atoms/categories';
 import { postsAtom } from '@/atoms/posts';
 import Home from '@/features/home';
-import { Category, Post } from '@/interfaces';
-import { parsePosts, getNotionPosts, getCategories } from '@/utils';
-import { getPreviewImages } from '@/utils';
+import { Category, PostMeta } from '@/interfaces';
+import { getPostsMeta, fetchNotionPostsMeta, getCategories } from '@/utils';
 import { siteConfig } from 'site.config';
 
 import PageHead from '@/components/common/PageHead';
 
 import { REVALIDATE_TIME } from '@/assets/constants';
 
 interface Props {
-  posts: Post[];
+  posts: PostMeta[];
   categories: Category[];
 }
 const HomePage = ({ posts, categories }: Props) => {
@@ -37,15 +36,13 @@ export const getStaticProps: GetStaticProps<Props> = async () => {
   if (!process.env.NOTION_POST_DATABASE_ID)
     throw new Error('NOTION_POST_DATABASE_ID is not defined');
 
-  const notionPostsResponse = await getNotionPosts(process.env.NOTION_POST_DATABASE_ID);
-  const posts = parsePosts(notionPostsResponse);
-  const postsWithPreview = await getPreviewImages(posts);
-
+  const notionPostsResponse = await fetchNotionPostsMeta(process.env.NOTION_POST_DATABASE_ID);
+  const posts = getPostsMeta(notionPostsResponse);
   const categories = getCategories(notionPostsResponse);
 
   return {
     props: {
-      posts: postsWithPreview,
+      posts,
       categories,
     },
     revalidate: REVALIDATE_TIME,
diff --git a/pages/posts/[slug].tsx b/pages/posts/[slug].tsx
@@ -3,7 +3,7 @@ import { ParsedUrlQuery } from 'querystring';
 import { GetStaticPaths, GetStaticProps } from 'next';
 import { NotionBlock, Renderer } from 'notion-to-jsx';
 
-import { getIdBySlug, getNotionPosts, getSlugs, notionClient } from '@/utils';
+import { fetchIdBySlug, fetchNotionPostsMeta, getSlugs, notionClient } from '@/utils';
 
 import Giscus from '@/components/common/Giscus';
 import PageHead from '@/components/common/PageHead';
@@ -50,7 +50,7 @@ interface PostParams extends ParsedUrlQuery {
 
 export const getStaticProps: GetStaticProps<Props, PostParams> = async ({ params }) => {
   const { slug } = params as PostParams;
-  const id = await getIdBySlug(slug as string, process.env.NOTION_POST_DATABASE_ID as string);
+  const id = await fetchIdBySlug(slug as string, process.env.NOTION_POST_DATABASE_ID as string);
   const blocks = (await notionClient.getPageBlocks(id)) as NotionBlock[];
   const properties = await notionClient.getPageProperties(id);
 
@@ -71,7 +71,7 @@ export const getStaticProps: GetStaticProps<Props, PostParams> = async ({ params
 export const getStaticPaths: GetStaticPaths = async () => {
   if (!process.env.NOTION_POST_DATABASE_ID)
     throw new Error('NOTION_POST_DATABASE_ID is not defined');
-  const databaseItems = await getNotionPosts(process.env.NOTION_POST_DATABASE_ID);
+  const databaseItems = await fetchNotionPostsMeta(process.env.NOTION_POST_DATABASE_ID);
   const slugs = getSlugs(databaseItems);
 
   const paths = slugs.map((slug) => ({
diff --git a/pages/rss.xml.ts b/pages/rss.xml.ts
@@ -1,6 +1,9 @@
 import { GetServerSideProps } from 'next';
+import RSS from 'rss';
 
-import { generateRssFeed, getNotionPosts } from '@/utils';
+import { GetPageResponse } from '@/interfaces';
+import { fetchNotionPostsMeta, getPostsMeta } from '@/utils';
+import { siteConfig } from 'site.config';
 
 const Rss = () => {
   return null;
@@ -9,7 +12,7 @@ const Rss = () => {
 export const getServerSideProps: GetServerSideProps = async ({ res }) => {
   if (!process.env.NOTION_POST_DATABASE_ID)
     throw new Error('NOTION_POST_DATABASE_ID is not defined');
-  const databaseItems = await getNotionPosts(process.env.NOTION_POST_DATABASE_ID);
+  const databaseItems = await fetchNotionPostsMeta(process.env.NOTION_POST_DATABASE_ID);
 
   res.setHeader('Content-Type', 'text/xml');
   res.write(generateRssFeed(databaseItems));
@@ -21,3 +24,26 @@ export const getServerSideProps: GetServerSideProps = async ({ res }) => {
 };
 
 export default Rss;
+
+const generateRssFeed = (notionPostsResponse: GetPageResponse[]) => {
+  const feedOptions = {
+    title: `${siteConfig.homeTitle} | ${siteConfig.blogName}`,
+    description: siteConfig.seoDefaultDesc,
+    site_url: siteConfig.url,
+    feed_url: `${siteConfig.url}/rss.xml`,
+    pubDate: new Date(),
+    copyright: `All rights reserved ${new Date().getFullYear()}, Jinsoo`,
+  };
+
+  const feed = new RSS(feedOptions);
+  getPostsMeta(notionPostsResponse).forEach(({ title, description, slug, published }) => {
+    feed.item({
+      title,
+      description,
+      url: `${siteConfig.url}/posts/${slug}`,
+      date: new Date(published),
+    });
+  });
+
+  return feed.xml();
+};
diff --git a/pages/sitemap.xml.ts b/pages/sitemap.xml.ts
@@ -1,6 +1,11 @@
+import dayjs from 'dayjs';
 import { GetServerSideProps } from 'next';
+import { GetPageResponse } from 'notion-to-utils';
 
-import { generateSitemap, getNotionPosts } from '@/utils';
+import { PostMeta } from '@/interfaces';
+import { getPostsMeta, fetchNotionPostsMeta } from '@/utils';
+
+type PostIdentifier = Pick<PostMeta, 'slug' | 'published'>;
 
 const Sitemap = () => {
   return null;
@@ -9,7 +14,7 @@ const Sitemap = () => {
 export const getServerSideProps: GetServerSideProps = async ({ res }) => {
   if (!process.env.NOTION_POST_DATABASE_ID)
     throw new Error('NOTION_POST_DATABASE_ID is not defined');
-  const databaseItems = await getNotionPosts(process.env.NOTION_POST_DATABASE_ID);
+  const databaseItems = await fetchNotionPostsMeta(process.env.NOTION_POST_DATABASE_ID);
   res.setHeader('Content-Type', 'text/xml');
   res.write(generateSitemap(databaseItems));
   res.end();
@@ -20,3 +25,55 @@ export const getServerSideProps: GetServerSideProps = async ({ res }) => {
 };
 
 export default Sitemap;
+
+const generateSitemap = (notionPostsResponse: GetPageResponse[]) => {
+  const paths: PostIdentifier[] = getSitemapPostIdentifiers(notionPostsResponse);
+
+  const urlSet = paths
+    .map((path) => {
+      return `
+    <url>
+      <loc>${process.env.BLOG_URL}/posts/${path.slug}</loc>
+      <changefreq>daily</changefreq>
+      <priority>1</priority>
+      <lastmod>${path.published}</lastmod>
+    </url>
+  `;
+    })
+    .join('');
+
+  const sitemap = `<?xml version="1.0" encoding="UTF-8"?>
+    <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
+        <url>
+            <loc>${process.env.BLOG_URL}</loc>
+            <changefreq>daily</changefreq>
+            <priority>1</priority>
+            <lastmod>${new Date().toISOString()}</lastmod>
+        </url>
+        <url>
+            <loc>${process.env.BLOG_URL}/about</loc>
+            <changefreq>daily</changefreq>
+            <priority>1</priority>
+            <lastmod>${new Date().toISOString()}</lastmod>
+        </url>
+        ${urlSet}
+    </urlset>
+  `;
+
+  return sitemap;
+};
+
+const getSitemapPostIdentifiers = (notionPostsResponse: GetPageResponse[]) => {
+  const posts = getPostsMeta(notionPostsResponse);
+  const postsMeta = posts
+    .map((post) => {
+      const { slug, published } = post;
+      const formattedPublished = published ? dayjs(published).format('YYYY-MM-DD') : '';
+      return { slug, published: formattedPublished };
+    })
+    .filter((postMeta: PostIdentifier | null): postMeta is PostIdentifier =>
+      postMeta ? 'slug' in postMeta : false,
+    );
+
+  return postsMeta;
+};
diff --git a/src/assets/constants.ts b/src/assets/constants.ts
@@ -17,8 +17,5 @@ export const INITIAL_CATEGORY = 'All';
 
 export const DEFAULT_CATEGORY_COLOR: SelectColor = 'default';
 
-export const DEFAULT_BLUR_BASE64 =
-  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkqAcAAIUAgUW0RjgAAAAASUVORK5CYII=';
-
 export const REVALIDATE_TIME = 60;
 export const IMAGE_MAX_AGE = 60 * 60;
diff --git a/src/atoms/posts/index.ts b/src/atoms/posts/index.ts
@@ -2,13 +2,13 @@ import { atom } from 'jotai';
 import { atomWithReset } from 'jotai/utils';
 
 import { selectedCategoryAtom } from '@/atoms/categories';
-import { Post } from '@/interfaces';
+import { PostMeta } from '@/interfaces';
 
 import { INITIAL_CATEGORY } from '@/assets/constants';
 
-export const postsAtom = atom<Post[]>([]);
+export const postsAtom = atom<PostMeta[]>([]);
 
-export const postsFilterByCategoryAtom = atom<Post[]>((get) => {
+export const postsFilterByCategoryAtom = atom<PostMeta[]>((get) => {
   const posts = get(postsAtom);
   const selectedCategory = get(selectedCategoryAtom);
 
diff --git a/src/features/home/Intro/index.tsx b/src/features/home/Intro/index.tsx
@@ -7,8 +7,6 @@ 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 = () => {
@@ -21,8 +19,6 @@ 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">
diff --git a/src/features/home/PostList/Post/index.tsx b/src/features/home/PostList/Post/index.tsx
@@ -4,10 +4,10 @@ import Image from 'next/image';
 import Link from 'next/link';
 
 import { calculate } from '@/features/home/PostList/Post/util';
-import { Post as Item } from '@/interfaces';
+import { PostMeta as Item } from '@/interfaces';
 import { siteConfig } from 'site.config';
 
-import { COLOR_TABLE, DEFAULT_BLUR_BASE64 } from '@/assets/constants';
+import { COLOR_TABLE } 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, previewImage } = item;
+  const { cover, description, published, category, title, slug } = item;
 
   useEffect(() => {
     if (!ref.current) return;
@@ -58,8 +58,6 @@ const Post = ({ item }: Props) => {
               src={cover}
               alt={title}
               fill
-              placeholder="blur"
-              blurDataURL={previewImage?.dataURIBase64 || DEFAULT_BLUR_BASE64}
               onError={() => setOnError(true)}
             />
           ) : (
diff --git a/src/hooks/useInfiniteScroll.ts b/src/hooks/useInfiniteScroll.ts
@@ -1,10 +1,10 @@
 import { useMemo } from 'react';
 
 import { useIntersectionObserver } from '@/hooks';
-import { Post } from '@/interfaces';
+import { PostMeta } from '@/interfaces';
 
 interface Props {
-  data: Post[];
+  data: PostMeta[];
   page: number;
   pageSize?: number;
   intersectCb?: () => void;
diff --git a/src/interfaces/index.ts b/src/interfaces/index.ts
@@ -10,7 +10,7 @@ export type SelectColor = SelectPropertyResponse['color'];
 
 export type PageProperties = PageObjectResponse['properties'][string];
 
-export interface Post {
+export interface PostMeta {
   id: string;
   cover: string;
   icon: PageObjectResponse['icon'];
@@ -19,16 +19,8 @@ export interface Post {
   description: string;
   title: string;
   slug: string;
-  previewImage?: PreviewImage | null;
 }
 
-export interface PreviewImage {
-  originalWidth: number;
-  originalHeight: number;
-  dataURIBase64: string;
-}
-
-export type SlugAndDate = Pick<Post, 'slug' | 'published'>;
 export interface Category extends SelectPropertyResponse {
   count?: number;
 }
diff --git a/src/utils/fetchIdBySlug.ts b/src/utils/fetchIdBySlug.ts
@@ -1,6 +1,6 @@
 import { notionClient } from '@/utils';
 
-const getIdBySlug = async (slug: string, databaseId: string) => {
+const fetchIdBySlug = async (slug: string, databaseId: string) => {
   const response = await notionClient.databases.query({
     database_id: databaseId,
     filter: {
@@ -18,4 +18,4 @@ const getIdBySlug = async (slug: string, databaseId: string) => {
   return response.results[0].id;
 };
 
-export default getIdBySlug;
+export default fetchIdBySlug;
diff --git a/src/utils/fetchNotionPostsMeta.ts b/src/utils/fetchNotionPostsMeta.ts
@@ -2,7 +2,7 @@ import { GetPageResponse } from 'notion-to-utils';
 
 import { notionClient } from '@/utils';
 
-const getNotionPosts = async (databaseId: string) => {
+const fetchNotionPostsMeta = async (databaseId: string) => {
   const response = await notionClient.databases.query({
     database_id: databaseId,
     filter:
@@ -40,4 +40,4 @@ const getNotionPosts = async (databaseId: string) => {
   return response.results as GetPageResponse[];
 };
 
-export default getNotionPosts;
+export default fetchNotionPostsMeta;
diff --git a/src/utils/filterProperties.ts b/src/utils/filterProperties.ts
@@ -1,12 +1,12 @@
 import dayjs from 'dayjs';
 import localizedFormat from 'dayjs/plugin/localizedFormat';
 
-dayjs.extend(localizedFormat);
-
 import { PageObjectResponse, PageProperties } from '@/interfaces';
 
 import { DEFAULT_CATEGORY_COLOR } from '@/assets/constants';
 
+dayjs.extend(localizedFormat);
+
 export const filterCategoryProperties = (target: PageProperties) => {
   return target.type === 'multi_select'
     ? target.multi_select[0]
@@ -28,7 +28,3 @@ export const filterCoverProperties = (target: PageObjectResponse['cover']) => {
 export const filterDateProperties = (target: PageProperties) => {
   return target.type === 'date' ? dayjs(target.date?.start).format('LL') : '';
 };
-
-export const filterDatePropertiesToISOString = (target: PageProperties) => {
-  return target.type === 'date' ? dayjs(target.date?.start).toISOString() : '';
-};
diff --git a/src/utils/generateRssFeed.ts b/src/utils/generateRssFeed.ts
diff --git a/src/utils/generateSitemap.ts b/src/utils/generateSitemap.ts
diff --git a/src/utils/getPostsMeta.ts b/src/utils/getPostsMeta.ts
diff --git a/src/utils/getSlugsAndDates.ts b/src/utils/getSlugsAndDates.ts
diff --git a/src/utils/index.ts b/src/utils/index.ts
diff --git a/src/utils/previewImage.ts b/src/utils/previewImage.ts
diff --git a/yarn.lock b/yarn.lock
