core-maugli 1.2.75 → 1.2.76

package/package.json

@@ -2,7 +2,7 @@
     "name": "core-maugli",
     "description": "Astro & Tailwind CSS blog theme for Maugli.",
     "type": "module",
-    "version": "1.2.75",
+    "version": "1.2.76",
     "license": "GPL-3.0-or-later OR Commercial",
     "repository": {
         "type": "git",

package/src/components/FAQCard.astro

@@ -47,10 +47,17 @@ const faqCard = (dict as any).faqCard || (fallbackDict as any).faqCard || {};
         </div>
         <div class="flex-1 min-w-0 flex flex-col gap-4">
             {
-                faq.map(({ question, answer }) => (
+                faq.map(({ question, answer }, idx) => (
                     <div>
-                        <div class="font-sans text-[16px] text-[var(--text-heading)] mb-1 flex items-center">
-                            <span class="mr-2 flex-shrink-0">
+                        <button
+                            type="button"
+                            class="font-sans text-[16px] text-[var(--text-heading)] mb-1 flex items-center w-full text-left group"
+                            aria-expanded={idx === 0 ? 'true' : 'false'}
+                            aria-controls={`faq-answer-${idx}`}
+                            data-faq-idx={idx}
+                            style="background:none;border:none;padding:0;outline:none;cursor:pointer;"
+                        >
+                            <span class="mr-2 flex-shrink-0 transition-transform duration-200 faq-chevron" style={idx === 0 ? 'transform:rotate(90deg);' : ''}>
                                 <svg width="16" height="16" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
                                     <g clip-path="url(#clip0_3491_12515)">
                                         <path
@@ -68,11 +75,52 @@ const faqCard = (dict as any).faqCard || (fallbackDict as any).faqCard || {};
                                 </svg>
                             </span>
                             {question}
+                        </button>
+                        <div id={`faq-answer-${idx}`} class={`font-sans text-[14px] text-[var(--text-main)] ml-6 faq-answer${idx === 0 ? ' open' : ''}`}>
+                            {answer}
                         </div>
-                        <div class="font-sans text-[14px] text-[var(--text-main)] ml-6">{answer}</div>
                     </div>
                 ))
             }
         </div>
     </div>
 </section>
+
+<style>
+    .faq-answer {
+        max-height: 0;
+        opacity: 0;
+        overflow: hidden;
+        transition:
+            max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
+            opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+        will-change: max-height, opacity;
+    }
+    .faq-answer.open {
+        max-height: 500px;
+        opacity: 1;
+    }
+</style>
+
+<script>
+    // Плавный аккордеон без изменения дизайна
+    if (typeof window !== 'undefined') {
+        document.addEventListener('DOMContentLoaded', function () {
+            const buttons = document.querySelectorAll('[data-faq-idx]');
+            const answers = document.querySelectorAll('.faq-answer');
+            const chevrons = document.querySelectorAll('.faq-chevron');
+            buttons.forEach((btn, idx) => {
+                btn.addEventListener('click', function () {
+                    buttons.forEach((b, i) => {
+                        b.setAttribute('aria-expanded', 'false');
+                        answers[i].classList.remove('open');
+                        chevrons[i].style.transform = '';
+                    });
+                    btn.setAttribute('aria-expanded', 'true');
+                    answers[idx].classList.add('open');
+                    chevrons[idx].style.transform = 'rotate(90deg)';
+                });
+            });
+        });
+    }
+</script>

package/src/pages/blog/[id].astro

@@ -156,8 +156,7 @@ if (post.data.productID) {
 
                 <!-- FAQ после контента -->
                 {
-                    post.data.generativeEngineOptimization?.generated?.faq &&
-                    post.data.generativeEngineOptimization.generated.faq.length > 0 && (
+                    post.data.generativeEngineOptimization?.generated?.faq && post.data.generativeEngineOptimization.generated.faq.length > 0 && (
                         <div class="not-prose mb-8">
                             <FAQCard faq={post.data.generativeEngineOptimization.generated.faq} />
                         </div>

package/src/pages/products/[id].astro

@@ -1,6 +1,5 @@
 ---
 import { render, type CollectionEntry } from 'astro:content';
-import { getFilteredCollection } from '../../utils/content-loader';
 import ArticleMeta from '../../components/ArticleMeta.astro';
 import Breadcrumbs from '../../components/Breadcrumbs.astro';
 import ContentFooter from '../../components/ContentFooter.astro';
@@ -14,6 +13,7 @@ import TagsAndShare from '../../components/TagsAndShare.astro';
 import { maugliConfig } from '../../config/maugli.config';
 import { LANGUAGES } from '../../i18n/languages';
 import BaseLayout from '../../layouts/BaseLayout.astro';
+import { getFilteredCollection } from '../../utils/content-loader';
 import { sortItemsByDateDesc } from '../../utils/data-utils';
 import { calculateReadingTime } from '../../utils/reading-time';
 
@@ -115,17 +115,16 @@ const moreLabel = dict.buttons?.more || dicts['en'].buttons.more || 'More';
                 <div class="prose sm:prose-lg lg:prose-xl max-w-none">
                     <Content />
                 </div>
-                
+
                 {/* FAQ после контента продукта */}
                 {
-                    product.data.generativeEngineOptimization?.generated?.faq &&
-                    product.data.generativeEngineOptimization.generated.faq.length > 0 && (
+                    product.data.generativeEngineOptimization?.generated?.faq && product.data.generativeEngineOptimization.generated.faq.length > 0 && (
                         <div class="not-prose mb-8">
                             <FAQCard faq={product.data.generativeEngineOptimization.generated.faq} />
                         </div>
                     )
                 }
-                
+
                 <ContentFooter tags={tags} shareUrl={href} title={title} basePath="/products" />
                 {/* Связанные статьи */}
                 {

package/src/pages/projects/[id].astro

@@ -146,8 +146,7 @@ const moreByTag = pages.projects?.moreByTag || 'More cases';
 
                 <!-- FAQ после контента -->
                 {
-                    project.data.generativeEngineOptimization?.generated?.faq &&
-                    project.data.generativeEngineOptimization.generated.faq.length > 0 && (
+                    project.data.generativeEngineOptimization?.generated?.faq && project.data.generativeEngineOptimization.generated.faq.length > 0 && (
                         <div class="not-prose mb-8">
                             <FAQCard faq={project.data.generativeEngineOptimization.generated.faq} />
                         </div>