seo changes

Author: uumair327

src/components/TableOfContents.tsx

@@ -0,0 +1,68 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+interface Heading {
+    id: string;
+    text: string;
+    level: number;
+}
+
+export default function TableOfContents() {
+    const [headings, setHeadings] = useState<Heading[]>([]);
+    const [activeId, setActiveId] = useState<string>('');
+
+    useEffect(() => {
+        const elements = Array.from(document.querySelectorAll('h2, h3, h4'));
+        const items = elements.map((element) => ({
+            id: element.id,
+            text: element.textContent || '',
+            level: Number(element.tagName.charAt(1)),
+        }));
+        setHeadings(items);
+
+        const observer = new IntersectionObserver(
+            (entries) => {
+                entries.forEach((entry) => {
+                    if (entry.isIntersecting) {
+                        setActiveId(entry.target.id);
+                    }
+                });
+            },
+            { rootMargin: '-20% 0px -80% 0px' }
+        );
+
+        elements.forEach((elem) => observer.observe(elem));
+        return () => observer.disconnect();
+    }, []);
+
+    if (headings.length === 0) return null;
+
+    return (
+        <nav className="sticky top-24 max-h-[calc(100vh-6rem)] overflow-auto p-4 rounded-lg bg-base-200">
+            <h2 className="text-lg font-semibold mb-4">Table of Contents</h2>
+            <ul className="space-y-2">
+                {headings.map((heading) => (
+                    <li
+                        key={heading.id}
+                        style={{ marginLeft: `${(heading.level - 2) * 1}rem` }}
+                    >
+                        <a
+                            href={`#${heading.id}`}
+                            className={`block hover:text-primary transition-colors ${activeId === heading.id ? 'text-primary font-medium' : ''
+                                }`}
+                            onClick={(e) => {
+                                e.preventDefault();
+                                document.querySelector(`#${heading.id}`)?.scrollIntoView({
+                                    behavior: 'smooth',
+                                });
+                            }}
+                        >
+                            {heading.text}
+                        </a>
+                    </li>
+                ))}
+            </ul>
+        </nav>
+    );
+} 

src/utils/seo.ts

@@ -42,6 +42,23 @@ export const getBaseMetadata = ({ title, path }: { title: string; path?: string
         },
       ],
     },
+    twitter: {
+      card: 'summary_large_image',
+      title,
+      description,
+      images: [siteConfig.profile],
+    },
+    robots: {
+      index: true,
+      follow: true,
+      googleBot: {
+        index: true,
+        follow: true,
+        'max-video-preview': -1,
+        'max-image-preview': 'large',
+        'max-snippet': -1,
+      },
+    },
     alternates: {
       canonical: url,
     },
@@ -74,6 +91,23 @@ export const getArticleMetadata = (post: PostType): Metadata => {
         },
       ],
     },
+    twitter: {
+      card: 'summary_large_image',
+      title: post.title,
+      description,
+      images: [`${siteConfig.url}${headerImgPath(post.headerImg)}`],
+    },
+    robots: {
+      index: true,
+      follow: true,
+      googleBot: {
+        index: true,
+        follow: true,
+        'max-video-preview': -1,
+        'max-image-preview': 'large',
+        'max-snippet': -1,
+      },
+    },
     alternates: {
       canonical: url,
     },