core-maugli 1.2.4 → 1.2.5

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

@@ -0,0 +1,165 @@
+---
+import { getCollection, render, type CollectionEntry } from 'astro:content';
+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 ProductBannerCard from '../../components/ProductBannerCard.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';
+
+export async function getStaticPaths() {
+    const projects = (await getCollection('projects')).sort(sortItemsByDateDesc);
+    const projectCount = projects.length;
+    return projects.map((project, index) => ({
+        params: { id: project.id },
+        props: {
+            project,
+            prevProject: index + 1 !== projectCount ? projects[index + 1] : null,
+            nextProject: index !== 0 ? projects[index - 1] : null
+        }
+    }));
+}
+
+type Props = {
+    project: CollectionEntry<'projects'>;
+    prevProject: CollectionEntry<'projects'>;
+    nextProject: CollectionEntry<'projects'>;
+};
+
+const { href } = Astro.url;
+const { project, prevProject, nextProject } = Astro.props;
+const { title, description, seo, image, tags = [], publishDate } = project.data;
+const { Content, headings } = await render(project);
+
+// Вычисляем время чтения на основе контента
+const readingTime = calculateReadingTime(project.body || '');
+
+// Преобразуем встроенные заголовки Astro в нужный формат
+const tocItems = headings
+    .filter((heading) => heading.depth === 2 || heading.depth === 3) // Только H2 и H3
+    .map((heading) => ({
+        title: heading.text,
+        id: heading.slug
+    }));
+
+const productIds = project.data.products || [];
+const allProducts = await getCollection('products');
+const products = productIds.map((id) => allProducts.find((p) => p.id === id)).filter(Boolean);
+
+const lang: string = 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 moreByTag = pages.projects?.moreByTag || 'More cases';
+---
+
+<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">
+            <HeroImage
+                src={seo?.image?.src || image?.src || '/default.webp'}
+                alt={seo?.image?.alt || image?.alt || title || 'No name project'}
+                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 mt-12 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>
+
+        <!-- 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} />
+                    {/* Карточка продукта: показываем если есть productLink в проекте */}
+                    {
+                        project.data.productLink && (
+                            <div class="mt-1">
+                                <ProductBannerCard
+                                    product={{
+                                        data: {
+                                            productLink: project.data.productLink,
+                                            image: {
+                                                src: project.data.productID ? `/public/${project.data.productID}.webp` : maugliConfig.seo.defaultImage,
+                                                alt: project.data.title || 'Продукт'
+                                            },
+                                            title: project.data.title || 'Продукт'
+                                        }
+                                    }}
+                                />
+                            </div>
+                        )
+                    }
+                </div>
+            </aside>
+
+            <!-- Основной контент -->
+            <div class="md:col-span-11 px-4 md:px-0 h-auto lg:col-span-11">
+                <!-- Summary/FAQ в начале контента -->
+                {
+                    project.data.generativeEngineOptimization?.generated &&
+                        (project.data.generativeEngineOptimization.generated.summary ||
+                            project.data.generativeEngineOptimization.generated.highlights?.length > 0 ||
+                            project.data.generativeEngineOptimization.generated.faq?.length > 0) && (
+                            <div class="not-prose mb-8">
+                                <SummaryFAQCard
+                                    summary={project.data.generativeEngineOptimization.generated.summary}
+                                    highlights={project.data.generativeEngineOptimization.generated.highlights}
+                                    faq={project.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="/projects" class="hidden sm:block" />
+
+                {/* Мобильный блок: поделиться и "Больше о продукте" в один ряд */}
+                <ContentFooter tags={tags} shareUrl={href} title={title} basePath="/projects" class="sm:hidden" productLink={project.data.productLink} />
+
+                <!-- Блок "Еще по теме" в контенте -->
+                {
+                    (prevProject || nextProject) && (
+                        <div class="my-16 sm:my-24">
+                            <h2 class="mb-12 text-xl font-serif sm:mb-16 sm:text-2xl text-heading">{moreByTag}</h2>
+                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8">
+                                {nextProject && <ProjectPreview project={nextProject} headingLevel="h3" />}
+                                {prevProject && <ProjectPreview project={prevProject} headingLevel="h3" />}
+                            </div>
+                        </div>
+                    )
+                }
+            </div>
+        </div>
+    </div>
+</BaseLayout>

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

@@ -0,0 +1,58 @@
+---
+import type { GetStaticPathsOptions, Page } from 'astro';
+import { getCollection, type CollectionEntry } from 'astro:content';
+import Breadcrumbs from '../../../../components/Breadcrumbs.astro';
+import Pagination from '../../../../components/Pagination.astro';
+import ProjectPreview from '../../../../components/ProjectPreview.astro';
+import TagsSection from '../../../../components/TagsSection.astro';
+import siteConfig from '../../../../data/site-config';
+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 allProjects = (await getCollection('projects')).sort(sortItemsByDateDesc);
+    const allTags = [...new Set(allProjects.flatMap((project) => project.data.tags || []))];
+
+    return allTags.flatMap((tag) => {
+        const filteredProjects = allProjects.filter((project) => (project.data.tags || []).includes(tag));
+        return paginate(filteredProjects, {
+            params: { id: slugify(tag) },
+            pageSize: siteConfig.projectsPerPage || 6,
+            props: { tag }
+        });
+    });
+}
+
+type Props = { page: Page<CollectionEntry<'projects'>>; tag: string };
+
+const { page, tag } = Astro.props;
+const projects = page.data;
+
+// Получаем все теги для отображения в TagsSection
+const allProjects = await getCollection('projects');
+const allTags = [...new Set(allProjects.flatMap((project) => project.data.tags || []))];
+const tagsWithCount = allTags.map((tagName) => ({
+    id: slugify(tagName),
+    name: tagName,
+    count: allProjects.filter((project) => (project.data.tags || []).includes(tagName)).length
+}));
+---
+
+<BaseLayout title={`Сервисы по тегу "${tag}"`} description={`Explore projects tagged with "${tag}"`} 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)">Сервисы</h1>
+
+        <!-- Блок тегов -->
+        <TagsSection tags={tagsWithCount} activeTagId={slugify(tag)} 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">
+            {projects.map((project) => <ProjectPreview project={project} />)}
+        </div>
+
+        <!-- Пагинация (показывается только если больше одной страницы) -->
+        {page.lastPage > 1 && <Pagination page={page} class="my-16 sm:my-24" />}
+    </div>
+</BaseLayout>

package/src/pages/rss.xml.js

@@ -0,0 +1,5 @@
+import { generateBlogRss } from '../utils/rss';
+
+export async function GET(context) {
+    return generateBlogRss(context);
+}

package/src/pages/tags/[id]/[...page].astro

@@ -0,0 +1,110 @@
+---
+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 Pagination from '../../../components/Pagination.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 { LANGUAGES } from '../../../i18n/languages';
+import BaseLayout from '../../../layouts/BaseLayout.astro';
+import { getAllTags, getPostsByTag, sortItemsWithFeaturedFirst } from '../../../utils/data-utils';
+
+export async function getStaticPaths({ paginate }: GetStaticPathsOptions) {
+    const posts = (await getFilteredCollection('blog')).sort(sortItemsWithFeaturedFirst);
+    const tags = getAllTags(posts);
+
+    return tags.flatMap((tag) => {
+        const filteredPosts = getPostsByTag(posts, tag.id);
+        return paginate(filteredPosts, {
+            params: { id: tag.id },
+            pageSize: siteConfig.postsPerPage || 4
+        });
+    });
+}
+
+type Props = { page: Page<CollectionEntry<'blog'>> };
+
+const { page } = Astro.props;
+const blog = page.data;
+const params = Astro.params;
+const allPosts = await getFilteredCollection('blog');
+const allTags = getAllTags(allPosts);
+const allRubrics = await getFilteredCollection('tags');
+const currentTag = allTags.find((tag) => tag.id === params.id);
+
+// Получаем все теги с количеством постов для TagsSection
+let tagsWithCount = allTags.map((tag) => {
+    // Проверяем, есть ли карточка рубрики для этого тега
+    const hasRubricCard = allRubrics.some((rubric) => rubric.data.slug === tag.id);
+    return {
+        id: tag.id,
+        name: tag.name,
+        count: getPostsByTag(allPosts, tag.id).length,
+        isRubric: hasRubricCard
+    };
+});
+
+tagsWithCount = [...tagsWithCount.filter((tag) => tag.isRubric), ...tagsWithCount.filter((tag) => !tag.isRubric)];
+
+// Получаем рубрику из коллекции tags (если есть)
+const rubric = allRubrics.find((tag) => tag.data.slug === params.id && tag.data.isRubric);
+let rubricCard = null;
+if (rubric) {
+    const postCount = getPostsByTag(allPosts, rubric.data.slug).length;
+    const lastPost = allPosts
+        .filter((post) => (post.data.tags || []).includes(rubric.data.slug))
+        .sort((a, b) => new Date(b.data.updatedDate || b.data.publishDate).getTime() - new Date(a.data.updatedDate || a.data.publishDate).getTime())[0];
+    const updatedAt = lastPost ? lastPost.data.updatedDate || lastPost.data.publishDate : undefined;
+    rubricCard = {
+        slug: rubric.data.slug,
+        title: rubric.data.title,
+        description: rubric.data.description,
+        image: rubric.data.image,
+        postCount,
+        updatedAt,
+        quote: rubric.data.quote,
+        isFeatured: rubric.data.isFeatured
+    };
+}
+const rubricsSection = await getEntry('pages', 'rubrics');
+
+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'];
+
+function interpolate(str, vars) {
+    return str.replace(/\{(\w+)\}/g, (_, k) => vars[k] ?? '');
+}
+
+const tagName = rubricCard ? rubricCard.title : currentTag?.name;
+const titleTemplate = dict.pages?.tags?.titleWithTag || dicts['en'].pages.tags.titleWithTag || 'Posts tagged {tag}';
+const descTemplate =
+    dict.pages?.tags?.descriptionWithTag || dicts['en'].pages.tags.descriptionWithTag || 'Explore a curated collection of blog posts under {tag}';
+const pageTitle = interpolate(titleTemplate, { tag: tagName });
+const pageDesc = interpolate(descTemplate, { tag: tagName });
+---
+
+<BaseLayout title={pageTitle} description={pageDesc} image={{ src: '/dante-preview.jpg', alt: 'The preview of the site' }} showHeader={false} fullWidth={true}>
+    <div class="max-w-[1280px] mx-auto">
+        <Breadcrumbs />
+
+        <div class="mb-12 sm:mb-16">
+            <h1 class="mb-4 text-3xl leading-tight font-serif font-[800] sm:text-5xl" style="color: var(--text-heading)">
+                {currentTag?.name}
+            </h1>
+        </div>
+        <TagsSection tags={tagsWithCount} totalCount={allPosts.length} activeTagId={params.id} />
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8 mb-16">
+            {blog.map((post) => <PostPreview post={post} />)}
+        </div>
+
+        <!-- Пагинация (показывается только если больше одной страницы) -->
+        {page.lastPage > 1 && <Pagination page={page} class="my-16 sm:my-24" />}
+        {/* InfoCard о рубриках перенесён на страницу всех тегов */}
+    </div>
+    <Subscribe class="my-16 sm:my-24" />
+</BaseLayout>

package/src/pages/tags/index.astro

@@ -0,0 +1,124 @@
+---
+import { getEntry } from 'astro:content';
+import { getFilteredCollection } from '../../utils/content-loader';
+import Breadcrumbs from '../../components/Breadcrumbs.astro';
+import InfoCard from '../../components/InfoCard.astro';
+import RubricCard from '../../components/RubricCard.astro';
+import Subscribe from '../../components/Subscribe.astro';
+import TagPills from '../../components/TagPills.astro';
+import { maugliConfig } from '../../config/maugli.config';
+import { LANGUAGES } from '../../i18n/languages';
+import BaseLayout from '../../layouts/BaseLayout.astro';
+import { slugify } from '../../utils/common-utils';
+import { getAllTags, getPostsByTag, sortItemsByDateDesc } from '../../utils/data-utils';
+
+let posts = (await getFilteredCollection('blog')).sort(sortItemsByDateDesc);
+const tags = getAllTags(posts).sort((tagA, tagB) => {
+    const postCountTagA = getPostsByTag(posts, tagA.id).length;
+    const postCountTagB = getPostsByTag(posts, tagB.id).length;
+    return postCountTagB - postCountTagA;
+});
+
+// Получаем все mdx-файлы рубрик
+let allRubricFiles = await getFilteredCollection('tags');
+const rubricSlugs = allRubricFiles.map((r) => r.data.slug);
+const rubricMeta = Object.fromEntries(allRubricFiles.map((r) => [r.data.slug, r]));
+
+// Формируем список рубрик только по реально используемым тегам
+const rubricCards = tags
+    .filter((tag) => rubricSlugs.includes(tag.id))
+    .map((tag) => {
+        const rubric = rubricMeta[tag.id];
+        const postCount = getPostsByTag(posts, tag.id).length;
+        const lastPost = posts
+            .filter((post) => (post.data.tags || []).some((t) => slugify(t) === tag.id))
+            .sort((a, b) => new Date(b.data.publishDate).getTime() - new Date(a.data.publishDate).getTime())[0];
+        const updatedAt = lastPost ? lastPost.data.publishDate?.toString() : undefined;
+        return {
+            slug: rubric.data.slug,
+            title: rubric.data.title,
+            description: rubric.data.description,
+            image: rubric.data.image,
+            postCount,
+            updatedAt,
+            quote: rubric.data.quote,
+            isFeatured: rubric.data.isFeatured
+        };
+    });
+
+// Обычные теги — только те, для которых нет mdx-файла
+const simpleTags = tags.filter((tag) => !rubricSlugs.includes(tag.id));
+
+// Сортируем rubricCards по дате последнего поста (lastPublishDate), самые свежие — выше
+const rubricCardsSorted = [...rubricCards].sort((a, b) => {
+    const dateA = a.updatedAt ? new Date(a.updatedAt).getTime() : 0;
+    const dateB = b.updatedAt ? new Date(b.updatedAt).getTime() : 0;
+    return dateB - dateA;
+});
+
+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 pageTitle = dict.pages?.tags?.title || dicts['en'].pages.tags.title;
+const pageDesc = dict.pages?.tags?.description || dicts['en'].pages.tags.description;
+const blogRubrics = dict.pages?.tags?.blogRubrics || dicts['en'].pages.tags.blogRubrics;
+const moreTags = dict.pages?.tags?.moreTags || dicts['en'].pages.tags.moreTags || 'More tags';
+
+const rubricsSection = await getEntry('pages', 'rubrics');
+---
+
+<BaseLayout title={pageTitle} description={pageDesc} showHeader={false} fullWidth={true}>
+    <div class="max-w-[1280px] mx-auto">
+        <Breadcrumbs />
+
+        <h1 class="mb-12 text-3xl font-serif font-[800] sm:mb-16 sm:text-5xl" style="color: var(--text-heading)">{blogRubrics}</h1>
+
+        {/* Карточки рубрик */}
+        {
+            rubricCardsSorted.length > 0 && (
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-16">
+                    {rubricCardsSorted.map((rubric) => (
+                        <RubricCard rubric={rubric} />
+                    ))}
+                </div>
+            )
+        }
+
+        {/* Обычные теги */}
+        {
+            simpleTags.length > 0 && (
+                <h2 class="mb-8 text-2xl sm:text-3xl font-serif font-[700]" style="color: var(--text-heading)">
+                    {moreTags}
+                </h2>
+            )
+        }
+        {
+            simpleTags.length > 0 && (
+                <TagPills
+                    tags={simpleTags.map((tag) => ({
+                        id: tag.id,
+                        name: tag.name,
+                        count: getPostsByTag(posts, tag.id).length,
+                        isRubric: rubricSlugs.includes(tag.id)
+                    }))}
+                    basePath="/tags"
+                    class="mb-10"
+                />
+            )
+        }
+    </div>
+    {maugliConfig.subscribe?.enabled && <Subscribe class="my-16 sm:my-24" />}
+
+    {/* InfoCard о рубриках внизу страницы */}
+    {
+        rubricsSection && (
+            <div class="max-w-[1280px] mx-auto">
+                <InfoCard title={rubricsSection.data.title} description={rubricsSection.body} image={rubricsSection.data.image} class="mt-16" />
+            </div>
+        )
+    }
+</BaseLayout>
+
+<!-- Пример использования TagsSection:
+<TagsSection tags={tagsWithRubricFlag} totalCount={posts.length} />
+-->

package/src/scripts/infoCardFadeIn.js

@@ -0,0 +1,22 @@
+// Автоматически добавляет класс для анимации InfoCard при появлении в viewport
+export function animateInfoCardsOnView() {
+  if (typeof window === 'undefined') return;
+  const cards = document.querySelectorAll('.info-card-fade-in');
+  if (!('IntersectionObserver' in window) || !cards.length) return;
+
+  const observer = new window.IntersectionObserver((entries, obs) => {
+    entries.forEach(entry => {
+      if (entry.isIntersecting) {
+        entry.target.classList.add('info-card-fade-in--active');
+        obs.unobserve(entry.target);
+      }
+    });
+  }, { threshold: 0.15 });
+
+  cards.forEach(card => observer.observe(card));
+}
+
+// Для автоинициализации на всех страницах, если нужно:
+if (typeof window !== 'undefined') {
+  window.addEventListener('DOMContentLoaded', animateInfoCardsOnView);
+}