Merge pull request #106 from lumirlumir/develop

Develop

src/app/categories/[tag]/page.jsx

@@ -3,30 +3,42 @@ import Link from 'next/link';
 import { Fragment, Suspense } from 'react';
 import { FaBook, FaTag, FaRegCalendarPlus, FaRegCalendarXmark } from 'react-icons/fa6';
 
+import Loading from '@/components/common/Loading';
+
 import { PATH_DOCS, EXT_MD_REGEXP } from '@/constants';
 import { compareMarkdownDocument } from '@/utils/compare';
 import { readMarkdownTagTree } from '@/utils/fs';
-import { markdownToText } from '@/utils/markup';
+import { markdownToJsx } from '@/utils/markup';
+
+/* Next.js Declaration */
+// Control what happens when a dynamic segment is visited that was not generated with `generateStaticParams`.
+export const dynamicParams = false;
+
+export async function generateStaticParams() {
+  const tagTree = await readMarkdownTagTree(PATH_DOCS);
+  const tags = Object.keys(tagTree);
+
+  return tags.map(tag => ({ tag }));
+}
 
 export default async function Page({ params, searchParams }) {
   const { sort = 'updated', order = 'desc' } = searchParams;
-
   const tagTree = await readMarkdownTagTree(PATH_DOCS);
 
   return (
-    <Suspense key={sort + order} fallback={<span>loading...</span>}>
+    <Suspense key={sort + order} fallback={<Loading />}>
       {tagTree[params.tag]
         .sort(compareMarkdownDocument(sort, order))
         .map(({ basename, data: { title, description, created, updated, tags } }) => (
           <div key={basename}>
             <h2>
               <Link href={`/posts/${basename.replace(EXT_MD_REGEXP, '')}`}>
-                {markdownToText(title)}
+                {markdownToJsx(title)}
               </Link>
             </h2>
             <p>
               <FaBook />
-              {markdownToText(description)}
+              {markdownToJsx(description)}
             </p>
             <p>
               {tags.map(tag => (

src/app/posts/[markdown]/loading.jsx

@@ -0,0 +1,5 @@
+import LoadingGif from '@/components/common/Loading';
+
+export default function Loading() {
+  return <LoadingGif />;
+}

src/app/posts/[markdown]/page.jsx

@@ -2,7 +2,7 @@ import { join } from 'path';
 
 import { PATH_DOCS, EXT_MD, EXT_MD_REGEXP } from '@/constants';
 import { readMarkdownFile, readMarkdownFilesFromDir } from '@/utils/fs';
-import { markdownToText, markdownToJsx } from '@/utils/markup';
+import { markdownToText, markdownToJsxFromPath } from '@/utils/markup';
 
 /* Custom Declaration */
 function getFilePath(params) {
@@ -34,5 +34,5 @@ export async function generateMetadata({ params }) {
 }
 
 export default async function Page({ params }) {
-  return <>{await markdownToJsx(getFilePath(params))}</>;
+  return <>{await markdownToJsxFromPath(getFilePath(params))}</>;
 }

src/components/common/Loading/Loading.jsx

@@ -0,0 +1,19 @@
+import Image from 'next/image';
+
+import styles from './Loading.module.scss';
+
+export default function Loading({ content }) {
+  return (
+    <div className={styles.loading}>
+      <div>
+        <Image
+          src={'/images/loading.gif'}
+          width={48}
+          height={48}
+          alt="GitHub gif loading image"
+        />
+        <div>{content} 불러오는 중...</div>
+      </div>
+    </div>
+  );
+}

src/components/common/Loading/Loading.module.scss

@@ -0,0 +1,3 @@
+.loading {
+  @include props-flex-center;
+}

src/components/common/Loading/index.js

@@ -0,0 +1,3 @@
+import Loading from './Loading';
+
+export default Loading;

src/utils/markup.js

@@ -31,6 +31,7 @@ export async function markdownToHtml(markdownContent) {
     method: 'POST',
     headers: {
       Accept: 'application/vnd.github+json',
+      Authorization: `Bearer ${process.env.GH_PAT}`,
       'Content-Type': 'application/json',
       'X-GitHub-Api-Version': '2022-11-28',
     },
@@ -48,19 +49,31 @@ export async function markdownToHtml(markdownContent) {
  * Converts markdown content to JSX.
  *
  * @async
+ * @param {string} markdownContent Markdown content.
+ * @returns {Promise<JSX.Element>} A promise that resolves to JSX.
+ */
+export async function markdownToJsx(markdownContent) {
+  const html = await markdownToHtml(markdownContent);
+  const jsx = htmlToJsx(html);
+
+  return jsx;
+}
+
+/**
+ * Converts markdown content to JSX from path.
+ *
+ * @async
  * @param {string} pathToMarkdownFile Path to a markdown file.
  * @returns {Promise<JSX.Element>} A promise that resolves to JSX.
  */
-export async function markdownToJsx(pathToMarkdownFile) {
+export async function markdownToJsxFromPath(pathToMarkdownFile) {
   const {
     content,
     data: { title },
   } = await readMarkdownFile(pathToMarkdownFile);
 
   const markdownContent = writeTitleIntoMarkdown(title, content);
-
-  const html = await markdownToHtml(markdownContent);
-  const jsx = htmlToJsx(html);
+  const jsx = await markdownToJsx(markdownContent);
 
   return jsx;
 }