From d45ba80c5e365fb9b3535e19d9bfae9d89da0cbc Mon Sep 17 00:00:00 2001
From: Hugo ChunHo Lin <hugo970217@gmail.com>
Date: Wed, 20 Nov 2024 20:39:09 +0800
Subject: [PATCH 1/2] feat(markdown): add AnchorHeader component and update
 header rendering (#456) (#447)

---
 .../src/components/markdown/anchor-header.tsx | 44 ++++++++++++++
 apps/web/src/components/markdown/anchor.tsx   |  2 +-
 .../components/markdown/markdown-renderer.tsx | 59 ++++++++++---------
 apps/web/src/styles/blog/blog-text.css        |  4 +-
 4 files changed, 79 insertions(+), 30 deletions(-)
 create mode 100644 apps/web/src/components/markdown/anchor-header.tsx

diff --git a/apps/web/src/components/markdown/anchor-header.tsx b/apps/web/src/components/markdown/anchor-header.tsx
new file mode 100644
index 00000000..5bf926fd
--- /dev/null
+++ b/apps/web/src/components/markdown/anchor-header.tsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import slugify from 'slugify';
+
+interface HeaderProps {
+  level: 1 | 2 | 3 | 4 | 5 | 6;
+  children: React.ReactNode;
+}
+
+const AnchorHeader: React.FC<HeaderProps> = ({ level, children, ...props }) => {
+  const Tag = `h${level}` as keyof JSX.IntrinsicElements; // Dynamically choose the header tag
+  const id = slugify(children?.toString() ?? '', { lower: true });
+
+  const getMargins = (level: number) => {
+    switch (level) {
+      case 1:
+        return { marginTop: '3.0rem', marginBottom: '2.0rem' };
+      case 2:
+        return { marginTop: '2.5rem', marginBottom: '1.5rem' };
+      case 3:
+        return { marginTop: '2.0rem', marginBottom: '1.0rem' };
+      case 4:
+        return { marginTop: '1.5rem', marginBottom: '0.8rem' };
+      case 5:
+        return { marginTop: '1.2rem', marginBottom: '0.6rem' };
+      case 6:
+        return { marginTop: '1.0rem', marginBottom: '0.5rem' };
+      default:
+        return {};
+    }
+  };
+
+  const margins = getMargins(level);
+
+  return (
+    <Tag id={id} className="anchor-header" style={margins} {...props}>
+      <a href={`#${id}`}>
+        <span className="hash">#</span>
+        {children}
+      </a>
+    </Tag>
+  );
+};
+
+export default AnchorHeader;
diff --git a/apps/web/src/components/markdown/anchor.tsx b/apps/web/src/components/markdown/anchor.tsx
index 4a339bcc..5a21fdc0 100644
--- a/apps/web/src/components/markdown/anchor.tsx
+++ b/apps/web/src/components/markdown/anchor.tsx
@@ -21,7 +21,7 @@ const Anchor: React.FC<AnchorProps> = ({ children, ...props }) => {
 
   return (
     <a
-      className="code-highlight-yellow"
+      className="blog-text-a"
       target="_blank"
       rel="noreferrer"
       {...props}
diff --git a/apps/web/src/components/markdown/markdown-renderer.tsx b/apps/web/src/components/markdown/markdown-renderer.tsx
index f2719fd1..b1d872f3 100644
--- a/apps/web/src/components/markdown/markdown-renderer.tsx
+++ b/apps/web/src/components/markdown/markdown-renderer.tsx
@@ -9,6 +9,7 @@ import BlockQuote from './block-quote';
 import CodeBlock from './code-block';
 import MarkdownImage from './markdown-image';
 import Paragraph from './paragraph';
+import AnchorHeader from './anchor-header';
 
 interface MarkdownRendererProps {
   className?: string;
@@ -54,33 +55,37 @@ const MarkdownRenderer: React.FC<MarkdownRendererProps> = ({
           }}
         />
       ),
-      h1: (props) => (
-        <h1
-          {...props}
-          style={{
-            marginTop: '3.0rem',
-            marginBottom: '2.0rem',
-          }}
-        />
-      ),
-      h2: (props) => (
-        <h2
-          {...props}
-          style={{
-            marginTop: '2.5rem',
-            marginBottom: '1.5rem',
-          }}
-        />
-      ),
-      h3: (props) => (
-        <h3
-          {...props}
-          style={{
-            marginTop: '2.0rem',
-            marginBottom: '1.0rem',
-          }}
-        />
-      ),
+      // h1: (props) => (
+      //   <h1
+      //     {...props}
+      //     style={{
+      //       marginTop: '3.0rem',
+      //       marginBottom: '2.0rem',
+      //     }}
+      //   />
+      // ),
+      // h2: (props) => (
+      //   <h2
+      //     {...props}
+      //     style={{
+      //       marginTop: '2.5rem',
+      //       marginBottom: '1.5rem',
+      //     }}
+      //   />
+      // ),
+      // h3: (props) => (
+      //   <h3
+      //     {...props}
+      //     style={{
+      //       marginTop: '2.0rem',
+      //       marginBottom: '1.0rem',
+      //     }}
+      //   />
+      // ),
+      // Usage:
+h1: ({ children, ...props }) => <AnchorHeader level={1} {...props}>{children}</AnchorHeader>,
+h2: ({ children, ...props }) => <AnchorHeader level={2} {...props}>{children}</AnchorHeader>,
+h3: ({ children, ...props }) => <AnchorHeader level={3} {...props}>{children}</AnchorHeader>,
       blockquote: (props) => <BlockQuote {...props}>{props.children}</BlockQuote>,
       code({ node, inline, className, children, ...props }: any) {
         const match = /language-(\w+)/.exec(className || '');
diff --git a/apps/web/src/styles/blog/blog-text.css b/apps/web/src/styles/blog/blog-text.css
index d1eeea82..f7b7649e 100644
--- a/apps/web/src/styles/blog/blog-text.css
+++ b/apps/web/src/styles/blog/blog-text.css
@@ -8,13 +8,13 @@
     margin-bottom: 15px;
 }
 
-.blog-text a {
+.blog-text-a {
     display: inline;
     color: var(--orange-yellow-crayola);
     text-decoration: underline;
 }
 
-.blog-text a:hover {
+.blog-text-a:hover {
     text-decoration-color: hsla(0, 0%, 84%, 0.7);
 }
 

From 1e5c5c0106d2b58452cbf46950c3019521a2f840 Mon Sep 17 00:00:00 2001
From: Hugo ChunHo Lin <hugo970217@gmail.com>
Date: Wed, 20 Nov 2024 20:39:52 +0800
Subject: [PATCH 2/2] feat(portfolio): remove unnecessary HTML header from
 TODAM project description

---
 apps/web/src/contents/portfolios/todam-tw.mdx | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/apps/web/src/contents/portfolios/todam-tw.mdx b/apps/web/src/contents/portfolios/todam-tw.mdx
index 83c7b913..a29269be 100644
--- a/apps/web/src/contents/portfolios/todam-tw.mdx
+++ b/apps/web/src/contents/portfolios/todam-tw.mdx
@@ -27,11 +27,6 @@ This is the project that I served as an Intern at eCloudValley in 2024/03-2024/0
 
 ![TODAM Ticket System](https://github.com/TODAM-tw/todam-ticket-system/raw/main/docs/imgs/cover.png)
 
-
-<h3 align="center">
-    <b><i>The frontend with gradio and combined with the API endpoints for the ticket system.</i></b>
-</h3>
-
 ## Developing Requirements
 
 Python version `python3.11` or later with [`poetry`](https://python-poetry.org/) to manage the dependencies.