Merge pull request #463 from 1chooo/feat/anchor-header

Feat/anchor header

Author: 1chooo

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;

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}

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 || '');

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.

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);
 }