Reduce page data json

* remove useless data on special page

components/ArchiveCard.tsx

@@ -7,7 +7,7 @@ import {
   LinkBox,
 } from '@chakra-ui/react';
 import { FC, MouseEventHandler } from 'react';
-import { AllPostsData } from 'lib/allPosts';
+import { AllPostsWithMatter } from 'lib/posts';
 import { useDispatch } from 'react-redux';
 import { setFromPath } from 'features/router/routerSlice';
 import { useRouter } from 'next/router';
@@ -18,7 +18,7 @@ import dynamic from 'next/dynamic';
 const Date = dynamic(() => import('./DateFormater'));
 
 interface Props {
-  post: AllPostsData;
+  post: AllPostsWithMatter;
 }
 
 const ArchiveCard: FC<Props> = ({ post }) => {

components/PostCard.tsx

@@ -1,6 +1,6 @@
 import { FC, MouseEventHandler, useEffect } from 'react';
 import { Box, Flex, Heading, Text, Link } from '@chakra-ui/react';
-import { AllPostsData } from 'lib/allPosts';
+import { AllPostsWithDescription } from 'lib/posts';
 import { Icon, Image } from '@chakra-ui/react';
 import { FiCalendar, FiTag } from 'react-icons/fi';
 import { useAppDispatch } from 'app/hooks';
@@ -14,7 +14,7 @@ const Date = dynamic(() => import('./DateFormater'));
 const ImageSpinner = dynamic(() => import('components/ImageSpinner'));
 
 interface Props {
-  post: AllPostsData;
+  post: AllPostsWithDescription;
 }
 
 const PostCard: FC<Props> = ({ post }) => {

lib/allPosts.ts

@@ -1,71 +0,0 @@
-import fs from 'fs';
-import path from 'path';
-import matter from 'gray-matter';
-import { remark } from 'remark';
-import strip from 'strip-markdown';
-
-const postsDirectory = path.join(process.cwd(), 'public/posts');
-
-export interface MyMatters {
-  title: string;
-  date: string;
-  tags: string;
-  categories: string;
-  url: string;
-  index_img: string;
-}
-
-export interface AllPostsData extends MyMatters {
-  id: string;
-  desc: string;
-}
-
-/**
- * Get all sorted posts
- * @returns
- */
-function getSortedPostsData() {
-  // Get file names under /posts
-  const fileNames = fs.readdirSync(postsDirectory);
-  const allPostsData = fileNames.map((fileName) => {
-    // Remove ".md" from file name to get id
-    const id = fileName.replace(/\.md$/, '');
-
-    // Read markdown file as string
-    const fullPath = path.join(postsDirectory, fileName);
-    const fileContents = fs.readFileSync(fullPath, 'utf8');
-
-    // Use gray-matter to parse the post metadata section
-    const matterResult = matter(fileContents);
-
-    // Process markdown to plain text
-    const contentText = remark().use(strip).processSync(matterResult.content);
-
-    // Combine the data with the id
-    return {
-      id,
-      // Add post description
-      content: matterResult.content,
-      desc: `${contentText.toString().slice(0, 100)}...`,
-      ...({
-        ...matterResult.data,
-        date: matterResult.data.date.toISOString(),
-      } as MyMatters),
-    };
-  });
-
-  // Sort posts by date
-  return allPostsData.sort(({ date: a }, { date: b }) => {
-    if (a < b) {
-      return 1;
-    } else if (a > b) {
-      return -1;
-    } else {
-      return 0;
-    }
-  });
-}
-
-const allPostsData = getSortedPostsData();
-
-export default allPostsData;

lib/posts.ts

@@ -1,4 +1,16 @@
-import allPostsData, { AllPostsData, MyMatters } from './allPosts';
+import type { AllPostsWithMatter, AllPostsWithDescription } from './readPosts';
+import {
+  fileNames,
+  allPostsWithMatter,
+  allPostsWithDescription,
+  allPostsWithContent,
+} from './readPosts';
+
+export type {
+  AllPostsWithMatter,
+  AllPostsWithDescription,
+  AllPostsWithContent,
+} from './readPosts';
 
 /**
  * Paging, get all posts length
@@ -19,7 +31,7 @@ export function getAllPostNum() {
   //   }
   // ]
   const pagingSize = 10;
-  const allPages = Math.ceil(allPostsData.length / pagingSize);
+  const allPages = Math.ceil(fileNames.length / pagingSize);
 
   const numPages = [];
   for (let i = 2; i <= allPages; i++) {
@@ -36,17 +48,17 @@ export interface PagingData {
   totalNum: number;
   pagingSize: number;
   allPages: number;
-  postDatas: AllPostsData[];
+  postDatas: AllPostsWithDescription[];
 }
 
 export function getPagingData(start?: string) {
-  const totalNum = allPostsData.length;
+  const totalNum = allPostsWithDescription.length;
   const pagingSize = 10;
   const allPages = Math.ceil(totalNum / pagingSize);
 
   const startIndex = start ? (Number(start) - 1) * pagingSize : 0;
 
-  const postDatas = allPostsData.slice(startIndex, startIndex + 10);
+  const postDatas = allPostsWithDescription.slice(startIndex, startIndex + 10);
 
   return {
     totalNum,
@@ -70,7 +82,7 @@ export function getAllPostSlugs() {
   //     }
   //   }
   // ]
-  return allPostsData.map((post) => {
+  return allPostsWithMatter.map((post) => {
     return {
       params: {
         slug: post.url,
@@ -79,13 +91,8 @@ export function getAllPostSlugs() {
   });
 }
 
-export interface MyPost extends MyMatters {
-  id: string;
-  content: string;
-}
-
 export function getPostData(slug: string) {
-  const post = allPostsData.find((post) => post.url === slug)!;
+  const post = allPostsWithContent.find((post) => post.url === slug)!;
 
   // Combine the data with the id
   return {
@@ -103,10 +110,10 @@ export function getPostData(slug: string) {
  */
 export const getArchiveData = () => {
   const archiveData: {
-    [key: string]: AllPostsData[];
+    [key: string]: AllPostsWithMatter[];
   } = {};
 
-  allPostsData.map((post) => {
+  allPostsWithMatter.map((post) => {
     const fullYear = new Date(post.date).getFullYear();
 
     archiveData?.[fullYear]

lib/readPosts.ts

@@ -0,0 +1,161 @@
+import fs from 'fs';
+import path from 'path';
+import matter from 'gray-matter';
+import { remark } from 'remark';
+import strip from 'strip-markdown';
+
+const postsDirectory = path.join(process.cwd(), 'public/posts');
+
+export interface MyMatters {
+  title: string;
+  date: string;
+  tags: string;
+  categories: string;
+  url: string;
+  index_img: string;
+}
+
+export const fileNames = fs.readdirSync(postsDirectory);
+
+const sortByDate = (
+  { date: a }: { date: string },
+  { date: b }: { date: string }
+) => {
+  if (a < b) {
+    return 1;
+  } else if (a > b) {
+    return -1;
+  } else {
+    return 0;
+  }
+};
+
+const readMatters = (fileName: string) => {
+  // Remove ".md" from file name to get id
+  const id = fileName.replace(/\.md$/, '');
+
+  // Read markdown file as string
+  const fullPath = path.join(postsDirectory, fileName);
+  const fileContents = fs.readFileSync(fullPath, 'utf8');
+
+  // Use gray-matter to parse the post metadata section
+  const matterResult = matter(fileContents);
+
+  return {
+    id,
+    matterResult,
+  };
+};
+
+const postWithMatter = (fileName: string) => {
+  const { id, matterResult } = readMatters(fileName);
+
+  // Combine the data with the id
+  return {
+    id,
+    ...({
+      ...matterResult.data,
+      date: matterResult.data.date.toISOString(),
+    } as MyMatters),
+  };
+};
+
+const postWithDecscription = (fileName: string) => {
+  const { id, matterResult } = readMatters(fileName);
+
+  // Process markdown to plain text
+  const contentText = remark().use(strip).processSync(matterResult.content);
+
+  // Combine the data with the id
+  return {
+    id,
+    desc: `${contentText.toString().slice(0, 100)}...`,
+    ...({
+      ...matterResult.data,
+      date: matterResult.data.date.toISOString(),
+    } as MyMatters),
+  };
+};
+
+const postWithContent = (fileName: string) => {
+  const { id, matterResult } = readMatters(fileName);
+
+  // Process markdown to plain text
+  const contentText = remark().use(strip).processSync(matterResult.content);
+
+  // Combine the data with the id
+  return {
+    id,
+    // Add post description
+    content: matterResult.content,
+    desc: `${contentText.toString().slice(0, 100)}...`,
+    ...({
+      ...matterResult.data,
+      date: matterResult.data.date.toISOString(),
+    } as MyMatters),
+  };
+};
+
+const allPostsWithMatter = fileNames
+  .map((fileName) => postWithMatter(fileName))
+  .sort(sortByDate);
+
+const allPostsWithDescription = fileNames
+  .map((fileName) => postWithDecscription(fileName))
+  .sort(sortByDate);
+
+const allPostsWithContent = fileNames
+  .map((fileName) => postWithContent(fileName))
+  .sort(sortByDate);
+
+export { allPostsWithMatter, allPostsWithDescription, allPostsWithContent };
+
+export type AllPostsWithMatter = ReturnType<typeof postWithMatter>;
+export type AllPostsWithDescription = ReturnType<typeof postWithDecscription>;
+export type AllPostsWithContent = ReturnType<typeof postWithContent>;
+
+/**
+ * Old funtion
+ * Get all sorted posts
+ * @returns
+ */
+// function getSortedPostsData() {
+//   // Get file names under /posts
+//   const allPostsData = fileNames.map((fileName) => {
+//     // Remove ".md" from file name to get id
+//     const id = fileName.replace(/\.md$/, '');
+
+//     // Read markdown file as string
+//     const fullPath = path.join(postsDirectory, fileName);
+//     const fileContents = fs.readFileSync(fullPath, 'utf8');
+
+//     // Use gray-matter to parse the post metadata section
+//     const matterResult = matter(fileContents);
+
+//     // Process markdown to plain text
+//     const contentText = remark().use(strip).processSync(matterResult.content);
+
+//     // Combine the data with the id
+//     return {
+//       id,
+//       // Add post description
+//       content: matterResult.content,
+//       desc: `${contentText.toString().slice(0, 100)}...`,
+//       ...({
+//         ...matterResult.data,
+//         date: matterResult.data.date.toISOString(),
+//       } as MyMatters),
+//     };
+//   });
+
+//   // Sort posts by date
+//   return allPostsData.sort(({ date: a }, { date: b }) => {
+//     if (a < b) {
+//       return 1;
+//     } else if (a > b) {
+//       return -1;
+//     } else {
+//       return 0;
+//     }
+//   });
+// }

pages/p/[slug].tsx

@@ -1,6 +1,6 @@
 import { createElement, Fragment } from 'react';
 import { Box, Image, Flex, Button } from '@chakra-ui/react';
-import { MyPost, getAllPostSlugs, getPostData } from 'lib/posts';
+import { AllPostsWithContent, getAllPostSlugs, getPostData } from 'lib/posts';
 import { GetStaticProps, InferGetStaticPropsType } from 'next';
 import { useRouter } from 'next/router';
 import dynamic from 'next/dynamic';
@@ -49,15 +49,14 @@ export function getStaticPaths() {
   };
 }
 
-export const getStaticProps: GetStaticProps<{ postData: MyPost }> = ({
+export const getStaticProps: GetStaticProps<{ postData: AllPostsWithContent }> =
-  params,
+  ({ params }) => {
-}) => {
+    return {
-  return {
+      props: {
-    props: {
+        postData: getPostData(params?.slug?.toString() ?? ''),
-      postData: getPostData(params?.slug?.toString() ?? ''),
+      },
-    },
+    };
   };
-};
 
 const processedContent = unified()
   .use(remarkParse)

pages/page/[num].tsx

@@ -3,7 +3,6 @@ import type { GetStaticProps, InferGetStaticPropsType } from 'next';
 import Head from 'next/head';
 import dynamic from 'next/dynamic';
 import { getAllPostNum, getPagingData } from 'lib/posts';
-import { AllPostsData } from 'lib/allPosts';
 import HomeLayout from 'layouts/HomeLayout';
 import type { PagingData } from 'lib/posts';
 
@@ -41,7 +40,7 @@ const Page = ({
         <title>RUA - Home</title>
       </Head>
 
-      {postDatas.map((post: AllPostsData) => (
+      {postDatas.map((post) => (
         <PostCard key={post.id} post={post} />
       ))}