doc ui improved, table list ui added to doc

public/posts/mastering_git_branching_strategies.md

@@ -19,18 +19,14 @@ GitFlow is one of the most well-known branching models. It uses two main branche
 - `develop`: Serves as an integration branch for features.
 
 Additional supporting branches include:
-
 - Feature branches
 - Release branches
 - Hotfix branches
 
-#### Pros:
-- Clear separation of concerns
-- Suitable for projects with scheduled releases
-
-#### Cons:
-- Can be complex for smaller projects
-- May lead to long-lived feature branches
+| Pros | Cons |
+|------|------|
+| Clear separation of concerns | Can be complex for smaller projects |
+| Suitable for projects with scheduled releases | May lead to long-lived feature branches |
 
 ### 2. GitHub Flow
 
@@ -43,12 +39,10 @@ GitHub Flow is a simpler alternative to GitFlow. It uses a single main branch an
 5. Deploy for testing
 6. Merge to `main`
 
-#### Pros:
-- Simple and easy to understand
-- Encourages continuous delivery
-
-#### Cons:
-- Less suitable for projects with multiple versions in production
+| Pros | Cons |
+|------|------|
+| Simple and easy to understand | Less suitable for projects with multiple versions in production |
+| Encourages continuous delivery | |
 
 ### 3. Trunk-Based Development
 
@@ -58,13 +52,10 @@ This strategy involves keeping branches short-lived and merging frequently to a
 - Branches are merged to `main` at least once a day
 - `main` is always in a releasable state
 
-#### Pros:
-- Supports continuous integration effectively
-- Reduces merge conflicts
-
-#### Cons:
-- Requires a robust testing and CI/CD pipeline
-- May be challenging for less experienced teams
+| Pros | Cons |
+|------|------|
+| Supports continuous integration effectively | Requires a robust testing and CI/CD pipeline |
+| Reduces merge conflicts | May be challenging for less experienced teams |
 
 ## Choosing the Right Strategy
 

src/components/Header/Header.jsx

@@ -41,7 +41,7 @@ function Header({ countStar, notice }) {
   ];
 
   return (
-    <header className="p-4 shadow-lg backdrop-blur-sm sticky top-0 z-50">
+    <header className="p-4 shadow-lg backdrop-blur-sm  z-50">
       <div className="w-full md:w-5/6 mx-auto flex flex-row md:flex-row justify-between items-center">
         {/* Logo */}
         <Link to={"/"}>

src/pages/Doc/single doc/index.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
@@ -7,27 +7,29 @@ import { a11yDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
 import { Spin, Alert } from 'antd';
 import Layout from '../../../components/Layout/Layout';
 
+const Table = ({ children }) => {
+    return <table className="min-w-full mt-4 border border-gray-300">{children}</table>;
+};
+
+const TableRow = ({ children }) => {
+    return <tr className="border-b border-gray-300">{children}</tr>;
+};
+
+const TableCell = ({ children }) => {
+    return <td className="px-4 py-2">{children}</td>;
+};
+
+const TableHeader = ({ children }) => {
+    return <th className="px-4 py-2 bg-gray-100 font-bold">{children}</th>;
+};
+
 const DocDetail = () => {
     const { slug } = useParams();
     const [content, setContent] = useState('');
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(null);
     const [activeSection, setActiveSection] = useState(null);
     const [headings, setHeadings] = useState([]);
-    const tableRef = useRef(null);
-
-    useEffect(() => {
-        const handleScroll = () => {
-            if (tableRef.current) {
-                const rect = tableRef.current.getBoundingClientRect();
-                const isTableVisible = rect.top <= 0 && rect.bottom >= 100;
-                setIsSticky(isTableVisible);
-            }
-        };
-
-        window.addEventListener('scroll', handleScroll);
-        return () => window.removeEventListener('scroll', handleScroll);
-    }, []);
 
     useEffect(() => {
         const fetchContent = async () => {
@@ -55,6 +57,7 @@ const DocDetail = () => {
         while ((match = regex.exec(markdown)) !== null) {
             const level = match[0].split(' ')[0].length;
             const title = match[1];
+            if (level > 3) continue;
             headings.push({ level, title });
         }
         setHeadings(headings);
@@ -87,7 +90,7 @@ const DocDetail = () => {
                     {slug.replace(/_/g, ' ')}
                 </h3>
                 <div className="flex">
-                    <aside ref={tableRef} className="sticky top-20 w-1/4 p-4 h-0">
+                    <aside className="sticky top-20 w-1/4 p-4 h-0">
                         <h2 className="text-xl font-bold mb-2">Table of Contents</h2>
                         <ul className='grid gap-2'>
                             {headings.map((heading, index) => (
@@ -132,7 +135,19 @@ const DocDetail = () => {
                                 h3({ node, children }) {
                                     return <h3 className='text-xl font-normal mt-10 mb-3' id={children.toLowerCase().replace(/\s+/g, '-')}>🌿 {children}</h3>;
                                 },
-                                // Handle other heading levels if needed
+                                blockquote({ node, children }) {
+                                    return <span className='bg-gray-100 p-4 pl-0 text-sm my-4 block text-gray'>{children}</span>;
+                                },
+                                table: Table,
+                                tr: TableRow,
+                                td: TableCell,
+                                th: TableHeader,
+                                li({ node, children }) {
+                                    return <li className='list-disc ml-4'>{children}</li>;
+                                },
+                                ul({ node, children }) {
+                                    return <ul className='list-disc ml-4 mb-2'>{children}</ul>;
+                                }
                             }}
                         >
                             {content}