refactor: organize utils folder (#96)

Oraganize unused functions and restructure folder structures.

* refactor: move markdownToText function to markdownToJsx.js module

* rename: markdownToJsx.js to markup.js

* refactor: delete default export of markdownToJsx in markup.js

* refactor: update comments and change the function order in markup.js

* rename: move dirTree.js module to archives folder

* refactor: delete unnecessay readFile function in src/utils/fs

* refactor: create MarkdownDocument type and update readMarkdownFile func

* refactor: readMarkdownFilesFromDir function

* refactor: readMarkdownTagTree function in utils/fs

* rename: move utils/fs/index.js to utils/fs.js

src/utils/fs/dirTree.js → archives/dirTree.js

@@ -3,7 +3,9 @@ import { promises as fs } from 'fs';
 import { join } from 'path';
 
 /**
- * @typedef {import('@/types').DirTreeNode} DirTreeNode
+ * @typedef DirTreeNode
+ * @property {string} name
+ * @property {DirTreeNode[]} [children]
  */
 
 /**

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

@@ -1,13 +1,13 @@
 import Link from 'next/link';
 
 import { DOCS, EXTENSION } from '@/constants/path';
-import { readTagTree } from '@/utils/fs/tagTree';
-import markdownToText from '@/utils/markdownToText';
+import { readMarkdownTagTree } from '@/utils/fs';
+import { markdownToText } from '@/utils/markup';
 
 const { mdRegExp } = EXTENSION;
 
 export default async function Page({ params }) {
-  const tagTree = await readTagTree(DOCS);
+  const tagTree = await readMarkdownTagTree(DOCS);
 
   return tagTree[params.tag].map(({ basename, data: { title, description, tags } }) => (
     <div key={basename}>

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

@@ -1,9 +1,8 @@
 import { join } from 'path';
 
 import { DOCS, EXTENSION } from '@/constants/path';
-import { readFileForMarkdown, readDirByExtension } from '@/utils/fs';
-import markdownToJsx from '@/utils/markdownToJsx';
-import markdownToText from '@/utils/markdownToText';
+import { readMarkdownFile, readMarkdownFilesFromDir } from '@/utils/fs';
+import { markdownToText, markdownToJsx } from '@/utils/markup';
 
 /* Custom Declaration */
 const { md, mdRegExp } = EXTENSION;
@@ -17,15 +16,18 @@ function getFilePath(params) {
 export const dynamicParams = false;
 
 export async function generateStaticParams() {
-  const paths = await readDirByExtension(DOCS, md);
+  const markdownDocuments = await readMarkdownFilesFromDir(DOCS);
+  const paths = markdownDocuments.map(markdownDocument => markdownDocument.basename);
 
   return paths.map(path => ({
     markdown: path.replace(mdRegExp, ''),
   }));
 }
 
 export async function generateMetadata({ params }) {
-  const { title, description } = await readFileForMarkdown(getFilePath(params), 'data');
+  const {
+    data: { title, description },
+  } = await readMarkdownFile(getFilePath(params));
 
   return {
     title: markdownToText(title),

src/components/aside/Categories/Categories.jsx

@@ -1,11 +1,11 @@
 import Link from 'next/link';
 
 import { DOCS } from '@/constants/path';
-import { readTagTree } from '@/utils/fs/tagTree';
+import { readMarkdownTagTree } from '@/utils/fs';
 
 /* React Declaration */
 export default async function Categories() {
-  const tagTree = await readTagTree(DOCS);
+  const tagTree = await readMarkdownTagTree(DOCS);
 
   return (
     <ul>

src/types/index.d.ts

@@ -1,26 +1,12 @@
 /**
- * Represents a Markdown file structure with its content and data(front matter).
+ * Represents a Markdown file structure with its basename, content and data(front matter).
  */
-export type Markdown = {
+export type MarkdownDocument = {
+  basename: string;
+  // The property obtained from the front matter
   content: string;
+  // The property obtained from the front matter
   data: {
     [key: string]: any;
   };
 };
-
-/**
- * Represents a node in a directory tree.
- */
-export type DirTreeNode = {
-  name: string; // The name of the node.
-  children?: DirTreeNode[]; // The array of child nodes if the node is a directory. This is a recursive structure.
-};
-
-/**
- * Represents a node in a tag tree.
- */
-export type TagTreeNode = {
-  [key: string]: {
-    basename: string;
-  } & Markdown;
-};

src/utils/fs.js

@@ -0,0 +1,78 @@
+import { promises as fs } from 'fs';
+import { basename, join } from 'path';
+
+import matter from 'gray-matter';
+
+import { EXTENSION } from '@/constants/path';
+
+const { md } = EXTENSION;
+
+/**
+ * @typedef {import('@/types').MarkdownDocument} MarkdownDocument
+ */
+
+/**
+ * Asynchronously reads a Markdown file and returns a `MarkdownDocument` type object.
+ *
+ * @async
+ * @param {string} pathToMarkdownFile Path to a Markdown file.
+ * @returns {Promise<MarkdownDocument>} A promise that resolves to a `MarkdownDocument` type object.
+ * @see {@link MarkdownDocument}
+ */
+export async function readMarkdownFile(pathToMarkdownFile) {
+  const { content, data } = matter(await fs.readFile(pathToMarkdownFile, 'utf-8'));
+
+  return {
+    basename: basename(pathToMarkdownFile),
+    content,
+    data,
+  };
+}
+
+/**
+ * Asynchronously reads a directory and returns a list(array) of `MarkdownDocument` type object.
+ *
+ * @async
+ * @param {string} dirPath Path to a directory containing markdown files.
+ * @returns {Promise<MarkdownDocument[]>} A promise that resolves to a list(array) of `MarkdownDocument` type object.
+ * @see {@link MarkdownDocument}
+ */
+export async function readMarkdownFilesFromDir(dirPath) {
+  const markdownDocuments = [];
+  const markdownFilePaths = (await fs.readdir(dirPath)).filter(filePath =>
+    filePath.endsWith(md),
+  );
+
+  for (const markdownFilePath of markdownFilePaths) {
+    const markdownDocument = await readMarkdownFile(join(dirPath, markdownFilePath));
+    markdownDocuments.push(markdownDocument);
+  }
+
+  return markdownDocuments;
+}
+
+/**
+ * Asynchronously reads a directory and generates a tag tree from markdown files.
+ *
+ * @async
+ * @param {string} dirPath Path to a directory containing markdown files.
+ * @returns {Promise<{[key: string]: MarkdownDocument[]}>} A promise that resolves to a tag tree.
+ * @see {@link MarkdownDocument}
+ */
+export async function readMarkdownTagTree(dirPath) {
+  const tagTree = {}; // Initialize an empty object to store the tag tree.
+  const markdownDocuments = await readMarkdownFilesFromDir(dirPath);
+
+  for (const markdownDocument of markdownDocuments) {
+    const {
+      data: { tags },
+    } = markdownDocument;
+
+    tags.forEach(tag => {
+      tagTree[tag] ??= [];
+      tagTree[tag].push(markdownDocument);
+    });
+  }
+
+  return tagTree;
+}