From 2a9b7e78b8011ddf543fb4be6bf579208def3351 Mon Sep 17 00:00:00 2001
From: Hugo ChunHo Lin <hugo970217@gmail.com>
Date: Sat, 13 Jul 2024 14:35:26 +0800
Subject: [PATCH] refactor(about): description with react-markdown

---
 src/components/Anchor.tsx      | 34 +++++++++++++++++++++
 src/config/About/AboutData.tsx | 56 +++++++++++++---------------------
 2 files changed, 55 insertions(+), 35 deletions(-)
 create mode 100644 src/components/Anchor.tsx

diff --git a/src/components/Anchor.tsx b/src/components/Anchor.tsx
new file mode 100644
index 00000000..d26e83ce
--- /dev/null
+++ b/src/components/Anchor.tsx
@@ -0,0 +1,34 @@
+import React, { ReactNode } from 'react';
+
+interface AnchorProps {
+  children?: ReactNode;
+  href?: string;
+  className?: string;
+  target?: string;
+  rel?: string;
+  [key: string]: any; // To allow any additional props
+}
+
+const Anchor: React.FC<AnchorProps> = ({ children, ...props }) => {
+  const isEmpty = !children ||
+    (Array.isArray(children) && children.length === 0) ||
+    (typeof children === 'string' && children.trim().length === 0) ||
+    (React.Children.count(children) === 0);
+
+  if (isEmpty) {
+    return null;
+  }
+
+  return (
+    <a
+      className="code-highlight-yellow"
+      target="_blank"
+      rel="noreferrer"
+      {...props}
+    >
+      {children}
+    </a>
+  );
+};
+
+export default Anchor;
diff --git a/src/config/About/AboutData.tsx b/src/config/About/AboutData.tsx
index db8e6c05..b906dab9 100644
--- a/src/config/About/AboutData.tsx
+++ b/src/config/About/AboutData.tsx
@@ -1,42 +1,28 @@
-// AboutTextData.tsx
+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 messages: JSX.Element[] = [
-  (
-    <p key="announcement">
-      <h4>📢 <code className="code-highlight-yellow">2024 eCloudvalley Intern - Cloud Engineer 👨🏻‍💻</code></h4>
-    </p>
-  ),
-  (
-    <p>
-      I'm <strong>Hugo ChunHo Lin</strong>, a 4th-year student at
-      <a
-        href="https://www.ncu.edu.tw/"
-        className="code-highlight-yellow"
-        target="_blank"
-        rel="noreferrer"
-      > National Central University 🐿️
-      </a>, fueled by a <em><strong>sincere passion </strong></em>
-      for the field of <strong>Software Engineering 💻</strong>.
-    </p>
-  ),
-  (
-    <p>
-      <em>I do <strong>Web Development and Cloud Development </strong>
-        with a focus on <strong>creating APIs and handling backend tasks </strong>
-        using <code className="code-highlight-yellow">FastAPI, Gin, and AWS</code>. </em>
+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 💻.**
 
-      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.
-    </p>
-  ),
+*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[] = [
   (
-    <p>
-      In my spare time, I do <em>street photography 📷</em> and <em>consistently share my findings on GitHub with Global 🌏.</em>
-    </p>
+    <ReactMarkdown
+      key="content"
+      children={description}
+      remarkPlugins={[remarkGfm]}
+      components={{
+        a: ({ node, ...props }) => <Anchor {...props} />,
+      }}
+    />
   ),
 ];
-
-