From 9d8c5e324c759c214957d2724643b03bf1c1ebd6 Mon Sep 17 00:00:00 2001
From: Sakib Ahmed <devvsakib@gmail.com>
Date: Sun, 28 Jul 2024 17:51:27 +0600
Subject: [PATCH] minor changes made (#211)

* test vue

* new error added

* doc indiv new page added

* major update on doc page

* husky removed

* some minor issue fix

* code clean up + code optimize for color

* new doc added

* new post added + folder rename + minor changes

* background color darker

* ui + doc page issue fix
---
 docs/git_hooks_automating_your_workflow.md | 2 --
 src/pages/Doc/index.jsx                    | 7 +++++--
 src/pages/Doc/single doc/index.jsx         | 9 +++++----
 3 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/docs/git_hooks_automating_your_workflow.md b/docs/git_hooks_automating_your_workflow.md
index 6dd73df..4444329 100644
--- a/docs/git_hooks_automating_your_workflow.md
+++ b/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?
diff --git a/src/pages/Doc/index.jsx b/src/pages/Doc/index.jsx
index 05aa084..e954a27 100644
--- a/src/pages/Doc/index.jsx
+++ b/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([]);
@@ -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>
diff --git a/src/pages/Doc/single doc/index.jsx b/src/pages/Doc/single doc/index.jsx
index fbbefbb..0b6b03b 100644
--- a/src/pages/Doc/single doc/index.jsx	
+++ b/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>