Правки в компонент поста

frontend/src/pages/blog/[slug].astro

@@ -3,6 +3,7 @@ import ArticleLayout from '@layouts/ArticleLayout.astro';
 import { SITE_URL } from '@constants';
 import PostCommentForm from '@components/blog/PostCommentForm.astro';
 import RelatedPosts from '@components/blog/RelatedPosts.astro';
+import ArticleTableOfContents from '@components/blog/ArticleTableOfContents.astro';
 import { getCollection, getEntry, render } from 'astro:content';
 
 export const prerender = false;
@@ -28,6 +29,24 @@ if (!post) {
 
 const { Content } = await render(post);
 
+// Извлекаем заголовки из MDX тела для оглавления
+const body = post.body || '';
+const headingRegex = /^(#{2,3})\s+(.+)$/gm;
+const tocItems: { id: string; text: string; level: number }[] = [];
+let match;
+let headingIndex = 0;
+while ((match = headingRegex.exec(body)) !== null) {
+  const level = match[1].length;
+  const text = match[2].trim();
+  // Генерируем ID из текста заголовка
+  const id = text.toLowerCase()
+    .replace(/[^\w\s-]/g, '')
+    .replace(/\s+/g, '-');
+  tocItems.push({ level, id: `heading-${headingIndex++}`, text });
+}
+
+console.log('=== TOC ITEMS ===', tocItems);
+
 // Форматируем дату
 const formatDate = (date: Date) => {
   return date.toLocaleDateString('ru-RU', {
@@ -74,7 +93,7 @@ const allPosts = await getCollection('blog');
   </div>
 
   <!-- Форма комментариев -->
-  <PostCommentForm 
+  <PostCommentForm
     postId={post.id}
     isAuthorized={isAuthorized}
   />
@@ -84,16 +103,17 @@ const allPosts = await getCollection('blog');
     posts={allPosts}
     currentSlug={post.id}
   />
+
+  <!-- Оглавление в сайдбаре -->
+  <ArticleTableOfContents items={tocItems} slot="sidebar" />
 </ArticleLayout>
 
 <style>
   /* Post Content */
   .post-content {
-    padding: 3rem;
+    padding: 0;
     color: #334155;
     line-height: 1.8;
-    max-width: 1200px;
-    margin: 0 auto;
   }
 
   .post-content :global(h2) {
@@ -135,26 +155,9 @@ const allPosts = await getCollection('blog');
     font-style: italic;
   }
 
-  .post-content :global(blockquote p) {
-    margin: 0;
-    color: #475569;
-  }
-
-  .post-content :global(strong) {
-    color: #1e293b;
-    font-weight: 700;
-  }
-
-  .post-content :global(code) {
-    background: #f1f5f9;
-    padding: 0.2rem 0.4rem;
-    border-radius: 0.25rem;
-    font-size: 0.9em;
-  }
-
   @media (max-width: 768px) {
     .post-content {
-      padding: 2rem;
+      padding: 2rem 0;
     }
 
     .post-content :global(h2) {