ui + doc page issue fix

docs/git_hooks_automating_your_workflow.md

@@ -1,5 +1,3 @@
-# git-hooks-automating-your-workflow
-
 Git hooks are powerful scripts that can automate various aspects of your development workflow. They allow you to execute custom scripts before or after important Git events, such as committing, pushing, or merging. This post will introduce you to Git hooks and show you how to leverage them effectively.
 
 ## What Are Git Hooks?

src/pages/Doc/index.jsx

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 import { List, Spin, Alert } from 'antd';
 import Layout from '../../components/Layout/Layout';
+import { FaArrowRight } from "react-icons/fa";
 
 const DocList = () => {
     const [docs, setDocs] = useState([]);
@@ -11,7 +12,7 @@ const DocList = () => {
     useEffect(() => {
         const fetchDocs = async () => {
             try {
-                const response = await fetch('https://github-error-solve.vercel.app/docs/index.json');
+                const response = await fetch('/docs/index.json');
                 if (!response.ok) {
                     throw new Error(`HTTP error! status: ${response.status}`);
                 }
@@ -37,10 +38,12 @@ const DocList = () => {
         <Layout>
             <div className="container mx-auto p-4 min-h-screen">
                 <h1 className="text-3xl font-bold mb-20 mt-5 text-center">Documentation</h1>
-                <ul>
+                <ul className='grid gap-5 mx-auto md:max-w-2xl'>
                     {
                         docs.map(item =>
-                            <Link to={item.title} className='capitalize'>{item.title.replace(/_/g, ' ')}</Link>
+                            <Link to={item.title} className='capitalize group flex items-center justify-between bg-white/10 p-5 rounded-md'>{item.title.replace(/_/g, ' ')}
+                                 <FaArrowRight className="dark:text-white opacity-0 group-hover:opacity-100 -translate-x-10 group-hover:translate-x-0 transition duration-300" />
+                            </Link>
                         )
                     }
                 </ul>

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

@@ -12,6 +12,7 @@ const DocDetail = () => {
     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);
 
@@ -83,17 +84,17 @@ const DocDetail = () => {
         <Layout>
             <section className="container mx-auto p-4 min-h-screen">
                 <h3 className="text-2xl md:text-3xl capitalize text-center my-10 mb-20 font-semibold">
-                    {slug.replace(/-/g, ' ')}
+                    {slug.replace(/_/g, ' ')}
                 </h3>
                 <div className="flex">
                     <aside ref={tableRef} className="sticky top-20 w-1/4 p-4 h-0">
                         <h2 className="text-xl font-bold mb-2">Table of Contents</h2>
-                        <ul>
+                        <ul className='grid gap-2'>
                             {headings.map((heading, index) => (
-                                <li key={index} className={`ml-${heading.level}`}>
+                                <li key={index} className={`ml-${heading.level} ${activeSection === heading.title.replace(/\s+/g, '-').toLowerCase() && 'text-green-500 font-semibold'}`}>
                                     <a href={`#${heading.title.replace(/\s+/g, '-').toLowerCase()}`}
 
-                                        onClick={() => console.log(heading.title.replace(/\s+/g, '-').toLowerCase())}
+                                        onClick={() => setActiveSection(heading.title.replace(/\s+/g, '-').toLowerCase())}
                                     >
                                         {heading.title}
                                     </a>