From 7a6b7ee9786f884da21244c09cc585b1f6d70699 Mon Sep 17 00:00:00 2001
From: Hugo ChunHo Lin <hugo970217@gmail.com>
Date: Sat, 13 Jul 2024 15:18:33 +0800
Subject: [PATCH] refactor(about): separate about config with components

---
 src/components/About/AboutText.tsx | 27 +++++++++++++++++++--------
 src/config/About/AboutData.tsx     | 28 ----------------------------
 src/config/about.ts                | 13 +++++++++++++
 src/interface/IAbout.ts            |  8 ++++++++
 src/page/about/index.tsx           |  4 ++--
 5 files changed, 42 insertions(+), 38 deletions(-)
 delete mode 100644 src/config/About/AboutData.tsx
 create mode 100644 src/config/about.ts
 create mode 100644 src/interface/IAbout.ts

diff --git a/src/components/About/AboutText.tsx b/src/components/About/AboutText.tsx
index e489ec74..9158808e 100644
--- a/src/components/About/AboutText.tsx
+++ b/src/components/About/AboutText.tsx
@@ -1,20 +1,31 @@
-import {
-  messages
-} from '../../config/About/AboutData';
+import React from 'react';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import Anchor from '../Anchor';
 
+import { abouts } from '../../config/about';
 
 const AboutText: React.FC = () => {
+  const { subHeader, description } = abouts;
+
+  const renderDescription = () =>
+    description.map((item, index) => (
+      <ReactMarkdown
+        key={index}
+        children={item}
+        remarkPlugins={[remarkGfm]}
+        components={{ a: ({ node, ...props }) => <Anchor {...props} /> }}
+      />
+    ));
 
   return (
     <section className="about-text">
       <p>
-        <h3><code> $ ls -al Hugo 👨🏻‍💻 (He/Him)</code></h3>
+        <h3><code>{subHeader}</code></h3>
       </p>
-
-      {messages.map((message: JSX.Element) => message)}
-
+      {renderDescription()}
     </section>
   );
-}
+};
 
 export default AboutText;
diff --git a/src/config/About/AboutData.tsx b/src/config/About/AboutData.tsx
deleted file mode 100644
index b906dab9..00000000
--- a/src/config/About/AboutData.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import React from 'react';
-import ReactMarkdown from 'react-markdown';
-import remarkGfm from 'remark-gfm';
-import Anchor from '../../components/Anchor'; // Adjust the import path accordingly
-
-
-export const aboutHeader: string = "About Hugo 👨🏻‍💻";
-
-export const description = `
-I'm **Hugo ChunHo Lin**, a 4th-year student at [National Central University 🐿️](https://www.ncu.edu.tw/), fueled by a ***sincere passion*** for the field of **Software Engineering 💻.**
-
-*I do **Web Development and Cloud Development** with a focus on **creating APIs and handling backend tasks** using \`FastAPI, Gin, and AWS\`. In general, I define new problems and find existing problems, transforming solutions into helpful documents or articles to assist everyone in the process, and eventually apply them to make social impacts.*
-
-In my spare time, I do *street photography 📷* and *consistently share my findings on GitHub with Global 🌏*.
-`;
-
-export const messages: JSX.Element[] = [
-  (
-    <ReactMarkdown
-      key="content"
-      children={description}
-      remarkPlugins={[remarkGfm]}
-      components={{
-        a: ({ node, ...props }) => <Anchor {...props} />,
-      }}
-    />
-  ),
-];
diff --git a/src/config/about.ts b/src/config/about.ts
new file mode 100644
index 00000000..71e0acf8
--- /dev/null
+++ b/src/config/about.ts
@@ -0,0 +1,13 @@
+import IAbout from '../interface/IAbout';
+
+
+export const abouts: IAbout = {
+  "header": "About Hugo 👨🏻‍💻",
+  "subHeader": "$ ls -al Hugo 👨🏻‍💻 (He/Him)",
+  "pronouns": "He/Him",
+  "description": [
+    "I'm **Hugo ChunHo Lin**, a 4th-year student at [National Central University 🐿️](https://www.ncu.edu.tw/), fueled by a ***sincere passion*** for the field of **Software Engineering 💻.**",
+    "*I do **Web Development and Cloud Development** with a focus on **creating APIs and handling backend tasks** using `FastAPI, Gin, and AWS`. In general, I define new problems and find existing problems, transforming solutions into helpful documents or articles to assist everyone in the process, and eventually apply them to make social impacts.*",
+    "In my spare time, I do *street photography 📷* and *consistently share my findings on GitHub with Global 🌏*.",
+  ],
+}
diff --git a/src/interface/IAbout.ts b/src/interface/IAbout.ts
new file mode 100644
index 00000000..805b5f18
--- /dev/null
+++ b/src/interface/IAbout.ts
@@ -0,0 +1,8 @@
+interface IAbout {
+  header: string;
+  subHeader: string;
+  pronouns: string;
+  description: string[];
+}
+
+export default IAbout;
diff --git a/src/page/about/index.tsx b/src/page/about/index.tsx
index 796e9a54..ac0a3cbf 100644
--- a/src/page/about/index.tsx
+++ b/src/page/about/index.tsx
@@ -3,7 +3,7 @@ import {
   useLocation
 } from 'react-router-dom';
 
-import { aboutHeader } from "../../config/About/AboutData";
+import { abouts } from "../../config/about";
 
 import NavBar from "../../components/Navbar";
 import Sidebar from "../../components/SideBar/SideBar";
@@ -32,7 +32,7 @@ const About: React.FC = () => {
           className={`about ${location.pathname === '/' ? 'active' : ''}`}
           data-page="about"
         >
-          <Header title={aboutHeader} />
+          <Header title={abouts.header} />
           <AboutText />
           <TechStack />
           <LifeStyles />