core-maugli 1.2.4 → 1.2.5

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

@@ -0,0 +1,175 @@
+---
+import { type CollectionEntry, render } from 'astro:content';
+import { getFilteredCollection } from '../../utils/content-loader';
+import ArticleMeta from '../../components/ArticleMeta.astro';
+import ContentFooter from '../../components/ContentFooter.astro';
+import HeroImage from '../../components/HeroImage.astro';
+import PostPreview from '../../components/PostPreview.astro';
+import ProductBannerCard from '../../components/ProductBannerCard.astro';
+import Subscribe from '../../components/Subscribe.astro';
+import SummaryFAQCard from '../../components/SummaryFAQCard.astro';
+import TableOfContents from '../../components/TableOfContents.astro';
+import TagsAndShare from '../../components/TagsAndShare.astro';
+import { maugliConfig } from '../../config/maugli.config';
+import BaseLayout from '../../layouts/BaseLayout.astro';
+import { sortItemsByDateDesc } from '../../utils/data-utils';
+import { calculateReadingTime } from '../../utils/reading-time';
+
+import { LANGUAGES } from '../../i18n/languages';
+const dicts: Record<string, any> = Object.fromEntries(LANGUAGES.map((l) => [l.code, l.dict]));
+const lang: string = typeof maugliConfig.defaultLang === 'string' && dicts[maugliConfig.defaultLang] ? maugliConfig.defaultLang : 'en';
+const dict = dicts[lang] || dicts['en'];
+const morePostsTitle = dict.buttons?.morePosts || dicts['en'].buttons.morePosts;
+
+export async function getStaticPaths() {
+    const posts = (await getFilteredCollection('blog')).sort(sortItemsByDateDesc);
+    const postCount = posts.length;
+    return posts.map((post, index) => ({
+        params: { id: post.id },
+        props: {
+            post,
+            prevPost: index + 1 !== postCount ? posts[index + 1] : null,
+            nextPost: index !== 0 ? posts[index - 1] : null
+        }
+    }));
+}
+
+type Props = { post: CollectionEntry<'blog'>; prevPost: CollectionEntry<'blog'>; nextPost: CollectionEntry<'blog'> };
+
+const { href } = Astro.url;
+const { post, prevPost, nextPost } = Astro.props;
+const { title, publishDate, updatedDate, excerpt, tags = [], seo } = post.data;
+const { Content, headings } = await render(post);
+
+// Вычисляем время чтения на основе контента
+const readingTime = calculateReadingTime(post.body || '');
+
+// Преобразуем встроенные заголовки Astro в нужный формат
+const tocItems = headings
+    .filter((heading) => heading.depth === 2 || heading.depth === 3) // Только H2 и H3
+    .map((heading) => ({
+        title: heading.text,
+        id: heading.slug
+    }));
+
+// Получаем картинку для баннера по productID (если есть)
+let bannerImage = { src: '/default.webp', alt: title };
+if (post.data.productID) {
+    const allProducts = await getFilteredCollection('products');
+    const product = allProducts.find((p) => p.id === post.data.productID);
+    if (product && product.data.image) {
+        bannerImage = {
+            ...product.data.image,
+            alt: product.data.image.alt || product.data.title || 'Product'
+        };
+    } else if (product) {
+        bannerImage = { src: '/default.webp', alt: product.data.title || 'Product' };
+    }
+}
+---
+
+<BaseLayout
+    title={seo?.title ?? title}
+    description={seo?.description ?? excerpt}
+    image={seo?.image || post.data.image || { src: '/default.webp', alt: title }}
+    pageType="article"
+    showHeader={false}
+    fullWidth={true}
+>
+    <!-- Расширяем контейнер для двухколоночной структуры -->
+    <div class="w-full max-w-none lg:max-w-[1280px] mx-auto lg:px-8 -mt-0">
+        <!-- Метаинформация над картинкой -->
+
+        <article class="mb-16 sm:mb-24 max-w-3xl mx-auto lg:max-w-none">
+            <header class="mb-8">
+                {
+                    (post.data.seo?.image?.src || post.data.image?.src) && (
+                        <HeroImage
+                            src={post.data.seo?.image?.src || post.data.image?.src || ''}
+                            alt={post.data.seo?.image?.alt || post.data.image?.alt || title}
+                            caption={post.data.seo?.image?.caption || post.data.image?.caption}
+                            width={post.data.seo?.image?.width || post.data.image?.width || 1200}
+                            height={post.data.seo?.image?.height || post.data.image?.height || 630}
+                        />
+                    )
+                }
+                <div class="px-4 mt-2 md:px-0">
+                    <ArticleMeta publishDate={publishDate} readingTime={readingTime} post={post} />
+                </div>
+                <h1 class="mt-25 text-3xl px-4 md:px-0 font-serif font-[800] sm:text-5xl tracking-tight !leading-[1.05]" style="color: var(--text-heading)">
+                    {title}
+                </h1>
+            </header>
+        </article>
+
+        <!-- 16-колоночная сетка -->
+        <div class="md:grid md:grid-cols-16 md:gap-9">
+            <!-- Боковая панель с Table of Contents -->
+            <aside class="hidden sm:block md:col-span-5 lg:col-span-5 min-h-screen">
+                <div class="sticky top-8">
+                    {tocItems.length > 0 && <TableOfContents headings={tocItems} />}
+                    <TagsAndShare tags={tags} shareUrl={href} title={title} basePath="/blog" />
+                    {/* Баннер продукта, если есть productLink в посте */}
+                    {
+                        post.data.productLink && (
+                            <div class="mt-8">
+                                <ProductBannerCard
+                                    product={{
+                                        data: {
+                                            productLink: post.data.productLink,
+                                            image: bannerImage,
+                                            title: post.data.title || 'Продукт'
+                                        }
+                                    }}
+                                />
+                            </div>
+                        )
+                    }
+                </div>
+            </aside>
+
+            <!-- Основной контент -->
+            <div class="md:col-span-11 px-4 md:px-0 h-auto lg:col-span-11">
+                <!-- Summary/FAQ в начале контента -->
+                {
+                    post.data.generativeEngineOptimization?.generated &&
+                        (post.data.generativeEngineOptimization.generated.summary ||
+                            post.data.generativeEngineOptimization.generated.highlights?.length > 0 ||
+                            post.data.generativeEngineOptimization.generated.faq?.length > 0) && (
+                            <div class="not-prose mb-8">
+                                <SummaryFAQCard
+                                    summary={post.data.generativeEngineOptimization.generated.summary}
+                                    highlights={post.data.generativeEngineOptimization.generated.highlights}
+                                    faq={post.data.generativeEngineOptimization.generated.faq}
+                                />
+                            </div>
+                        )
+                }
+
+                <!-- Контент с prose стилями -->
+                <div class="prose sm:prose-lg lg:prose-xl max-w-none">
+                    <Content />
+                </div>
+
+                <!-- Блок тегов и кнопки поделиться под контентом (только на мобилке) -->
+                <ContentFooter tags={tags} shareUrl={href} title={title} basePath="/blog" productLink={post.data.productLink} />
+
+                {
+                    (prevPost || nextPost) && (
+                        <div class="my-16 sm:my-24">
+                            <h2 class="mb-12 text-xl font-serif sm:mb-16 sm:text-2xl text-heading">{morePostsTitle}</h2>
+                            <div class="max-w-[1280px] mx-auto">
+                                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8">
+                                    {nextPost && <PostPreview post={nextPost} headingLevel="h3" />}
+                                    {prevPost && <PostPreview post={prevPost} headingLevel="h3" />}
+                                </div>
+                            </div>
+                        </div>
+                    )
+                }
+
+                {maugliConfig.subscribe?.enabled && <Subscribe class="my-16 sm:my-24" />}
+            </div>
+        </div>
+    </div>
+</BaseLayout>

package/src/pages/index.astro

@@ -0,0 +1,90 @@
+---
+import { getEntry } from 'astro:content';
+import { getFilteredCollection } from '../utils/content-loader';
+import Button from '../components/Button.astro';
+import InfoCard from '../components/InfoCard.astro';
+import PostPreview from '../components/PostPreview.astro';
+import Subscribe from '../components/Subscribe.astro';
+import TagsSection from '../components/TagsSection.astro';
+import { maugliConfig } from '../config/maugli.config';
+import siteConfig from '../data/site-config';
+import BaseLayout from '../layouts/BaseLayout.astro';
+import { getAllTags, getPostsByTag, sortItemsWithFeaturedFirst } from '../utils/data-utils';
+
+import { LANGUAGES } from '../i18n/languages';
+
+const lang = typeof maugliConfig.defaultLang === 'string' ? maugliConfig.defaultLang : 'en';
+const languageObj = LANGUAGES.find((l) => l.code === lang) || LANGUAGES.find((l) => l.code === 'en');
+const fallbackDict = LANGUAGES.find((l) => l.code === 'en')?.dict || {};
+const dict = languageObj?.dict && Object.keys(languageObj.dict).length > 0 ? languageObj.dict : fallbackDict;
+const pages = (dict as any).pages || (fallbackDict as any).pages || {};
+const buttons = (dict as any).buttons || (fallbackDict as any).buttons || {};
+
+// Получаем все посты и показываем первые N постов
+let allPosts = (await getFilteredCollection('blog')).sort(sortItemsWithFeaturedFirst);
+const displayPosts = allPosts.slice(0, siteConfig.postsPerPage || 4);
+
+// Получаем все рубрики
+let allRubrics = await getFilteredCollection('tags');
+const rubricSlugs = allRubrics.map((r) => r.data.slug);
+
+// Получаем все теги с количеством постов и флагом рубрики
+let tagsWithCount = getAllTags(allPosts).map((tag) => ({
+    id: tag.id,
+    name: tag.name,
+    count: getPostsByTag(allPosts, tag.id).length,
+    isRubric: rubricSlugs.includes(tag.id)
+}));
+if (maugliConfig.showOnlyRubricsTags) {
+    tagsWithCount = tagsWithCount.filter((tag) => tag.isRubric);
+} else {
+    tagsWithCount = [...tagsWithCount.filter((tag) => tag.isRubric), ...tagsWithCount.filter((tag) => !tag.isRubric)];
+}
+
+// Проверяем, есть ли еще посты для пагинации
+const hasMorePosts = allPosts.length > (siteConfig.postsPerPage || 4);
+
+// Получаем данные для секции блога
+const blogSection = await getEntry('pages', 'blog');
+---
+
+<BaseLayout
+    title={maugliConfig.indexTitle || pages.index?.title || ''}
+    description={pages.index?.description || ''}
+    image={{ src: '/tr-prewiew.png', alt: 'The preview of the site' }}
+    showHeader={false}
+    fullWidth={true}
+>
+    <div class="max-w-[1280px] mx-auto">
+        <h1 class="mb-12 text-3xl leading-tight font-serif font-[800] sm:mb-16 sm:text-5xl" style="color: var(--text-heading)">
+            {pages.index?.articles || ''}
+        </h1>
+        <TagsSection tags={tagsWithCount} totalCount={allPosts.length} />
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8 mb-16">
+            {displayPosts.map((post) => <PostPreview post={post} />)}
+        </div>
+
+        {/* Кнопка "Ещё статьи" если есть еще посты */}
+        {
+            hasMorePosts && (
+                <div class="text-center mb-8">
+                    <Button href="/blog/2" style="color: var(--text-heading)">
+                        {buttons.morePosts || ''}
+                    </Button>
+                </div>
+            )
+        }
+        {
+            blogSection && (
+                <InfoCard
+                    title={blogSection.data.title}
+                    description={blogSection.body}
+                    image={blogSection.data.image}
+                    jsonld={blogSection.data.jsonld}
+                    class="mb-16"
+                />
+            )
+        }
+    </div>
+    {maugliConfig.subscribe?.enabled && <Subscribe class="my-16 sm:my-24" />}
+</BaseLayout>

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

@@ -0,0 +1,50 @@
+---
+import type { GetStaticPathsOptions, Page } from 'astro';
+import { getEntry, type CollectionEntry } from 'astro:content';
+import { getFilteredCollection } from '../../utils/content-loader';
+import Breadcrumbs from '../../components/Breadcrumbs.astro';
+import InfoCard from '../../components/InfoCard.astro';
+import Pagination from '../../components/Pagination.astro';
+import ProductPreview from '../../components/ProductPreview.astro';
+import { maugliConfig } from '../../config/maugli.config';
+import siteConfig from '../../data/site-config';
+import { LANGUAGES } from '../../i18n/languages';
+import BaseLayout from '../../layouts/BaseLayout.astro';
+
+const dicts: Record<string, any> = Object.fromEntries(LANGUAGES.map((l) => [l.code, l.dict]));
+const lang: string = typeof maugliConfig.defaultLang === 'string' && dicts[maugliConfig.defaultLang] ? maugliConfig.defaultLang : 'en';
+const dict = dicts[lang] || dicts['en'];
+
+const productsTitle = maugliConfig.pageTitles?.products?.trim() || dict.pages?.products?.title || dicts['en'].pages.products.title;
+const productsDescription = maugliConfig.productsDescription?.trim() || dict.pages?.products?.description || dicts['en'].pages.products.description;
+
+export async function getStaticPaths({ paginate }: GetStaticPathsOptions) {
+    const products = (await getFilteredCollection('products')).sort((a, b) => {
+        if (b.data.isFeatured !== a.data.isFeatured) return b.data.isFeatured - a.data.isFeatured;
+        return (b.data.publishDate?.getTime?.() || 0) - (a.data.publishDate?.getTime?.() || 0);
+    });
+    return paginate(products, { pageSize: siteConfig.productsPerPage || 6 });
+}
+
+type Props = { page: Page<CollectionEntry<'products'>> };
+
+const { page } = Astro.props;
+let productList = page.data;
+const productsSection = await getEntry('pages', 'products');
+---
+
+<BaseLayout title={productsTitle} description={productsDescription} showHeader={false} fullWidth={true}>
+    <div class="max-w-[1280px] mx-auto">
+        <Breadcrumbs />
+        <h1 class="mb-12 text-3xl leading-tight font-serif font-[800] sm:mb-16 sm:text-5xl" style="color: var(--text-heading)">{productsTitle}</h1>
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8 mb-16">
+            {productList.map((product) => <ProductPreview product={product} headingLevel="h2" />)}
+        </div>
+        {page.lastPage > 1 && <Pagination page={page} class="my-16 sm:my-24" />}
+        {
+            productsSection && (
+                <InfoCard title={productsSection.data.title} description={productsSection.body} jsonld={productsSection.data.jsonld} class="mt-16" />
+            )
+        }
+    </div>
+</BaseLayout>

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

@@ -0,0 +1,221 @@
+---
+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';
+import HeroImage from '../../components/HeroImage.astro';
+import PostPreview from '../../components/PostPreview.astro';
+import ProjectPreview from '../../components/ProjectPreview.astro';
+import SummaryFAQCard from '../../components/SummaryFAQCard.astro';
+import TableOfContents from '../../components/TableOfContents.astro';
+import TagsAndShare from '../../components/TagsAndShare.astro';
+import { maugliConfig } from '../../config/maugli.config';
+import { LANGUAGES } from '../../i18n/languages';
+import BaseLayout from '../../layouts/BaseLayout.astro';
+import { sortItemsByDateDesc } from '../../utils/data-utils';
+import { calculateReadingTime } from '../../utils/reading-time';
+
+const dicts: Record<string, any> = Object.fromEntries(LANGUAGES.map((l) => [l.code, l.dict]));
+const lang: string = typeof maugliConfig.defaultLang === 'string' && dicts[maugliConfig.defaultLang] ? maugliConfig.defaultLang : 'en';
+const dict = dicts[lang] || dicts['en'];
+const articlesByTag = dict.pages?.productsId?.articlesByTag || dicts['en'].pages.productsId.articlesByTag;
+const casesByTag = dict.pages?.productsId?.casesByTag || dicts['en'].pages.productsId.casesByTag;
+
+export async function getStaticPaths() {
+    const products = (await getFilteredCollection('products')).sort(sortItemsByDateDesc);
+    return products.map((product) => ({
+        params: { id: product.id },
+        props: { product }
+    }));
+}
+
+type Props = {
+    product: CollectionEntry<'products'>;
+};
+
+const { href } = Astro.url;
+const { product } = Astro.props;
+const { title, description, seo, image, tags = [], publishDate } = product.data;
+const { Content, headings } = await render(product);
+
+// Вычисляем время чтения на основе контента
+const readingTime = calculateReadingTime(product.body || '');
+
+// Преобразуем встроенные заголовки Astro в нужный формат
+const tocItems = headings
+    .filter((heading) => heading.depth === 2 || heading.depth === 3)
+    .map((heading) => ({
+        title: heading.text,
+        id: heading.slug
+    }));
+
+// Получаем связанные статьи (blog) и кейсы (projects), где productID совпадает с productID продукта
+const relatedPosts = (await getFilteredCollection('blog')).filter((post) => post.data.productID === product.data.productID);
+const relatedProjects = (await getFilteredCollection('projects')).filter((project) => project.data.productID === product.data.productID);
+
+// Сортировка: сначала featured, потом по дате
+const sortByFeaturedAndDate = (a, b) => {
+    if ((b.data.isFeatured ? 1 : 0) !== (a.data.isFeatured ? 1 : 0)) return (b.data.isFeatured ? 1 : 0) - (a.data.isFeatured ? 1 : 0);
+    return (b.data.publishDate?.getTime?.() || 0) - (a.data.publishDate?.getTime?.() || 0);
+};
+
+const sortedPosts = relatedPosts.sort(sortByFeaturedAndDate);
+const sortedProjects = relatedProjects.sort(sortByFeaturedAndDate);
+const moreLabel = dict.buttons?.more || dicts['en'].buttons.more || 'More';
+---
+
+<BaseLayout title={seo?.title ?? title} description={seo?.description ?? description} image={seo?.image} pageType="article" showHeader={false} fullWidth={true}>
+    <div class="w-full max-w-none lg:max-w-[1280px] mx-auto lg:px-8 mt-2">
+        <div class="px-4 md:px-0">
+            <Breadcrumbs />
+        </div>
+        <article class="mb-16 sm:mb-24 max-w-3xl mx-auto lg:max-w-none">
+            {
+                (seo?.image?.src || image?.src) && (
+                    <HeroImage
+                        src={seo?.image?.src || image?.src}
+                        alt={seo?.image?.alt || image?.alt || title || 'Продукт без названия'}
+                        width={seo?.image?.width || image?.width || 1200}
+                        height={seo?.image?.height || image?.height || 630}
+                        caption={seo?.image?.caption || image?.caption}
+                    />
+                )
+            }
+            <div class="px-4 mt-2 md:px-0">
+                <ArticleMeta publishDate={publishDate} readingTime={readingTime} />
+            </div>
+            <header class="mb-8 px-4 md:px-0">
+                <h1 class="text-3xl leading-tight font-serif font-[800] sm:text-5xl sm:leading-tight" style="color: var(--text-heading)">{title}</h1>
+                {description && <p class="mt-4 text-lg text-muted leading-relaxed">{description}</p>}
+            </header>
+        </article>
+        <div class="md:grid md:grid-cols-16 md:gap-9">
+            <aside class="hidden sm:block md:col-span-5 lg:col-span-5 min-h-screen">
+                <div class="sticky top-8">
+                    {tocItems.length > 0 && <TableOfContents headings={tocItems} />}
+                    <TagsAndShare tags={tags} shareUrl={href} title={title} />
+                </div>
+            </aside>
+            <div class="md:col-span-11 px-4 md:px-0 h-auto lg:col-span-11">
+                {/* Summary/FAQ для продукта */}
+                {
+                    product.data.generativeEngineOptimization?.generated &&
+                        (product.data.generativeEngineOptimization.generated.summary ||
+                            product.data.generativeEngineOptimization.generated.highlights?.length > 0 ||
+                            product.data.generativeEngineOptimization.generated.faq?.length > 0) && (
+                            <div class="not-prose mb-8">
+                                <SummaryFAQCard
+                                    summary={product.data.generativeEngineOptimization.generated.summary}
+                                    highlights={product.data.generativeEngineOptimization.generated.highlights}
+                                    faq={product.data.generativeEngineOptimization.generated.faq}
+                                />
+                            </div>
+                        )
+                }
+                <div class="prose sm:prose-lg lg:prose-xl max-w-none">
+                    <Content />
+                </div>
+                <ContentFooter tags={tags} shareUrl={href} title={title} basePath="/products" />
+                {/* Связанные статьи */}
+                {
+                    sortedPosts.length > 0 && (
+                        <div class="my-16">
+                            <h2 class="mb-6 text-xl font-serif text-heading">{articlesByTag}</h2>
+                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                                {sortedPosts.slice(0, 2).map((post) => (
+                                    <PostPreview post={post} />
+                                ))}
+                            </div>
+                            {sortedPosts.length > 2 && (
+                                <details class="mt-4 group">
+                                    <summary class="cursor-pointer text-brand font-semibold flex items-center gap-2">
+                                        {moreLabel} ({sortedPosts.length - 2})
+                                        <svg
+                                            class="transition-transform duration-300 group-open:rotate-90"
+                                            width="16"
+                                            height="16"
+                                            viewBox="0 0 16 16"
+                                            fill="none"
+                                            xmlns="http://www.w3.org/2000/svg"
+                                        >
+                                            <g clip-path="url(#clip0_3589_7018)">
+                                                <path
+                                                    d="M6.16116 0.382763L12.6315 7.09276C13.1219 7.60137 13.122 8.42598 12.6315 8.93458L12.6136 8.95319C12.1231 9.4618 11.328 9.4618 10.8375 8.95319L4.36717 2.24319C3.87673 1.73459 3.87673 0.909975 4.36717 0.40137L4.38511 0.382763C4.87555 -0.125843 5.67071 -0.125842 6.16116 0.382763Z"
+                                                    fill="var(--brand-color)"
+                                                />
+                                                <path
+                                                    d="M12.6136 7.04876L12.6315 7.06737C13.122 7.57597 13.122 8.40059 12.6315 8.90919L6.16116 15.6192C5.67071 16.1278 4.87555 16.1278 4.38511 15.6192L4.36717 15.6006C3.87673 15.092 3.87673 14.2674 4.36717 13.7588L10.8375 7.04876C11.328 6.54016 12.1231 6.54016 12.6136 7.04876Z"
+                                                    fill="var(--brand-color)"
+                                                />
+                                            </g>
+                                            <defs>
+                                                <clipPath id="clip0_3589_7018">
+                                                    <rect width="9" height="16" fill="white" transform="matrix(-1 0 0 1 13 0)" />
+                                                </clipPath>
+                                            </defs>
+                                        </svg>
+                                    </summary>
+                                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-4">
+                                        {sortedPosts.slice(2).map((post) => (
+                                            <PostPreview post={post} />
+                                        ))}
+                                    </div>
+                                </details>
+                            )}
+                        </div>
+                    )
+                }
+                {/* Связанные кейсы */}
+                {
+                    sortedProjects.length > 0 && (
+                        <div class="my-16">
+                            <h2 class="mb-6 text-xl font-serif text-heading">{casesByTag}</h2>
+                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                                {sortedProjects.slice(0, 2).map((project) => (
+                                    <ProjectPreview project={project} />
+                                ))}
+                            </div>
+                            {sortedProjects.length > 2 && (
+                                <details class="mt-4 group">
+                                    <summary class="cursor-pointer text-brand font-semibold flex items-center gap-2">
+                                        {moreLabel} ({sortedProjects.length - 2})
+                                        <svg
+                                            class="transition-transform duration-300 group-open:rotate-90"
+                                            width="16"
+                                            height="16"
+                                            viewBox="0 0 16 16"
+                                            fill="none"
+                                            xmlns="http://www.w3.org/2000/svg"
+                                        >
+                                            <g clip-path="url(#clip0_3589_7018)">
+                                                <path
+                                                    d="M6.16116 0.382763L12.6315 7.09276C13.1219 7.60137 13.122 8.42598 12.6315 8.93458L12.6136 8.95319C12.1231 9.4618 11.328 9.4618 10.8375 8.95319L4.36717 2.24319C3.87673 1.73459 3.87673 0.909975 4.36717 0.40137L4.38511 0.382763C4.87555 -0.125843 5.67071 -0.125842 6.16116 0.382763Z"
+                                                    fill="var(--brand-color)"
+                                                />
+                                                <path
+                                                    d="M12.6136 7.04876L12.6315 7.06737C13.122 7.57597 13.122 8.40059 12.6315 8.90919L6.16116 15.6192C5.67071 16.1278 4.87555 16.1278 4.38511 15.6192L4.36717 15.6006C3.87673 15.092 3.87673 14.2674 4.36717 13.7588L10.8375 7.04876C11.328 6.54016 12.1231 6.54016 12.6136 7.04876Z"
+                                                    fill="var(--brand-color)"
+                                                />
+                                            </g>
+                                            <defs>
+                                                <clipPath id="clip0_3589_7018">
+                                                    <rect width="9" height="16" fill="white" transform="matrix(-1 0 0 1 13 0)" />
+                                                </clipPath>
+                                            </defs>
+                                        </svg>
+                                    </summary>
+                                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-4">
+                                        {sortedProjects.slice(2).map((project) => (
+                                            <ProjectPreview project={project} />
+                                        ))}
+                                    </div>
+                                </details>
+                            )}
+                        </div>
+                    )
+                }
+            </div>
+        </div>
+    </div>
+</BaseLayout>

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

@@ -0,0 +1,74 @@
+---
+import type { GetStaticPathsOptions, Page } from 'astro';
+import { getEntry, type CollectionEntry } from 'astro:content';
+import { getFilteredCollection } from '../../utils/content-loader';
+import Breadcrumbs from '../../components/Breadcrumbs.astro';
+import InfoCard from '../../components/InfoCard.astro';
+import Pagination from '../../components/Pagination.astro';
+import ProjectPreview from '../../components/ProjectPreview.astro';
+import TagsSection from '../../components/TagsSection.astro';
+import { maugliConfig } from '../../config/maugli.config';
+import siteConfig from '../../data/site-config';
+import { LANGUAGES } from '../../i18n/languages';
+import BaseLayout from '../../layouts/BaseLayout.astro';
+import { slugify } from '../../utils/common-utils';
+import { sortItemsByDateDesc } from '../../utils/data-utils';
+
+export async function getStaticPaths({ paginate }: GetStaticPathsOptions) {
+    const projects = (await getFilteredCollection('projects')).sort(sortItemsByDateDesc);
+    return paginate(projects, { pageSize: siteConfig.projectsPerPage || 6 });
+}
+
+type Props = { page: Page<CollectionEntry<'projects'>> };
+
+const { page } = Astro.props;
+let portfolio = page.data;
+let allProjects = await getFilteredCollection('projects');
+// Получаем все уникальные теги проектов
+const allTags = [...new Set(allProjects.flatMap((project) => project.data.tags || []))];
+const tagsWithCount = allTags.map((tag) => ({
+    id: slugify(tag),
+    name: tag,
+    count: allProjects.filter((project) => (project.data.tags || []).includes(tag)).length
+}));
+const projectsSection = await getEntry('pages', 'projects');
+
+const dicts: Record<string, any> = Object.fromEntries(LANGUAGES.map((l) => [l.code, l.dict]));
+const lang: string = typeof maugliConfig.defaultLang === 'string' && dicts[maugliConfig.defaultLang] ? maugliConfig.defaultLang : 'en';
+const dict = dicts[lang] || dicts['en'];
+
+// Получаем мультиязычный title для проектов (кейсов)
+const projectsTitle = maugliConfig.pageTitles?.projects?.trim() || dict.pages?.projects?.title || dicts['en'].pages.projects.title;
+// Описание для проектов (кейсов) — если появится в словаре или конфиге
+const projectsDescription = maugliConfig.pageTitles?.projectsDescription?.trim?.() || '';
+---
+
+<BaseLayout
+    title={projectsTitle}
+    description={projectsDescription}
+    image={{ src: '/dante-preview.jpg', alt: 'The preview of the site' }}
+    showHeader={false}
+    fullWidth={true}
+>
+    <div class="max-w-[1280px] mx-auto">
+        <Breadcrumbs />
+
+        <h1 class="mb-12 text-3xl leading-tight font-serif font-[800] sm:mb-16 sm:text-5xl" style="color: var(--text-heading)">{projectsTitle}</h1>
+
+        <!-- Блок тегов -->
+        {tagsWithCount.length > 0 && <TagsSection tags={tagsWithCount} basePath="/projects" totalCount={allProjects.length} class="mb-12" />}
+
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8 mb-16">
+            {portfolio.map((project) => <ProjectPreview project={project} />)}
+        </div>
+
+        <!-- Пагинация (показывается только если больше одной страницы) -->
+        {page.lastPage > 1 && <Pagination page={page} class="my-16 sm:my-24" />}
+
+        {
+            projectsSection && (
+                <InfoCard title={projectsSection.data.title} description={projectsSection.body} jsonld={projectsSection.data.jsonld} class="mt-16" />
+            )
+        }
+    </div>
+</BaseLayout>