core-maugli 1.0.2

package/src/components/ShareLink.astro

@@ -0,0 +1,58 @@
+---
+import ShareIcon from './ShareIcon.astro';
+export interface Props {
+    url: string;
+    platform: 'twitter' | 'telegram' | 'linkedin' | 'whatsapp' | 'facebook' | 'copy' | 'copied';
+    icon: string;
+    name?: string;
+}
+const { url, platform, icon, name = '' } = Astro.props;
+---
+
+<a
+    class="share-link share-button"
+    href={url}
+    target="_blank"
+    rel="noopener noreferrer external"
+    title={name || platform}
+    aria-label={name || platform}
+    tabindex="0"
+>
+    <ShareIcon platform={platform} />
+</a>
+
+<style>
+    .share-link {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 50%;
+        border: none;
+        background: var(--text-main);
+        color: var(--bg-main);
+        width: 28px;
+        height: 28px;
+        transition: transform 0.2s ease;
+        text-decoration: none;
+        cursor: pointer;
+        padding: 0;
+    }
+    .share-link:hover {
+        transform: scale(1.1);
+    }
+    .share-link svg {
+        width: 100%;
+        height: 100%;
+        fill: currentColor;
+    }
+    @media (min-width: 1024px) {
+        .share-link {
+            width: 36px;
+            height: 36px;
+        }
+    }
+    html[data-theme='dark'] .share-link {
+        background: var(--bg-main);
+        color: var(--text-main);
+    }
+</style>

package/src/components/Subscribe.astro

@@ -0,0 +1,68 @@
+---
+import { maugliConfig } from '../config/maugli.config';
+import { LANGUAGES } from '../i18n/languages';
+import Button from './Button.astro';
+// Универсальный импорт словарей по доступным языкам
+const dicts: Record<string, any> = {};
+for (const lang of LANGUAGES) {
+    try {
+        dicts[lang.code] = await import(`../i18n/${lang.code}.json`).then((m) => m.default);
+    } catch {}
+}
+
+const subscribe = maugliConfig.subscribe;
+const { class: className } = Astro.props;
+const lang: string = maugliConfig.defaultLang;
+const dict = dicts[lang] || dicts['en'] || {};
+
+const heading = subscribe.heading || dict.subscribe?.heading || dicts['en']?.subscribe?.heading;
+const mutedText = subscribe.mutedText || dict.subscribe?.mutedText || dicts['en']?.subscribe?.mutedText;
+---
+
+{
+    subscribe?.formUrl && (
+        <div class:list={['max-w-[1280px] mx-auto', className]}>
+            <section class="px-8 py-12 flex flex-col items-center border border-solid border-main text-center rounded-custom sm:px-12 sm:py-16 my-16 sm:my-24">
+                {heading && (
+                    <h2 style="color:var(--text-heading)" class="w-full text-2xl leading-tight font-serif font-black sm:text-4xl mb-4">
+                        {heading}
+                    </h2>
+                )}
+                {mutedText && (
+                    <p style="color:var(--text-muted)" class="w-full max-w-xl mb-8 text-sm leading-normal md:text-base">
+                        {mutedText}
+                    </p>
+                )}
+                <form
+                    action={subscribe.formUrl}
+                    method="post"
+                    id="subscribe-form"
+                    name="subscribe-form"
+                    aria-label={dict.form?.subscribeAriaLabel || en.form.subscribeAriaLabel}
+                    class="w-full max-w-xl flex flex-col gap-3.5 sm:flex-row"
+                    target="_blank"
+                >
+                    <label for="email" class="sr-only">
+                        {dict.form?.emailLabel || en.form.emailLabel}
+                    </label>
+                    <input
+                        type="email"
+                        name="email"
+                        id="email"
+                        class="flex-1 h-11 px-5 py-2 text-sm border border-solid border-main rounded-custom placeholder:opacity-50 focus:outline-none focus:ring-2 focus:ring-brand focus:border-transparent"
+                        required=""
+                        value=""
+                        placeholder={dict.form?.emailPlaceholder || en.form.emailPlaceholder}
+                    />
+                    <Button
+                        type="submit"
+                        name="subscribe"
+                        class="w-full h-11 sm:w-auto !text-[var(--bg-main)] !bg-[var(--brand-color)] !border-[var(--brand-color)] !not-italic"
+                    >
+                        {dict.buttons?.subscribe || en.buttons.subscribe}
+                    </Button>
+                </form>
+            </section>
+        </div>
+    )
+}

package/src/components/SummaryFAQCard.astro

@@ -0,0 +1,106 @@
+---
+import { maugliConfig } from '../config/maugli.config';
+import { LANGUAGES } from '../i18n/languages';
+export interface FaqItem {
+    question: string;
+    answer: string;
+}
+export interface Props {
+    summary: string;
+    highlights: string[];
+    faq: FaqItem[];
+}
+const { summary, highlights, faq } = Astro.props;
+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 summaryFAQCard = (dict as any).summaryFAQCard || (fallbackDict as any).summaryFAQCard || {};
+---
+
+<section
+    class="w-full bg-[var(--bg-muted)] rounded-custom p-6 pl-8 sm:p-8 sm:pl-10 mt-0 mb-4 flex flex-col gap-6 sm:gap-10 overflow-hidden"
+    aria-label={summaryFAQCard.ariaLabel || 'Саммари и FAQ'}
+>
+    <div class="flex flex-col sm:flex-row gap-4 sm:gap-6">
+        <div class="flex-shrink-0">
+            <h3 class="font-serif text-[18px] font-bold flex items-center">
+                <span class="mr-2">
+                    <svg width="20" height="20" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <g clip-path="url(#clip0_3491_12503)">
+                            <path
+                                fill-rule="evenodd"
+                                clip-rule="evenodd"
+                                d="M12.5 0C9.18479 0 6.00537 1.31696 3.66117 3.66117C1.31696 6.00537 0 9.18479 0 12.5C0 15.8152 1.31696 18.9946 3.66117 21.3388C6.00537 23.683 9.18479 25 12.5 25C15.8152 25 18.9946 23.683 21.3388 21.3388C23.683 18.9946 25 15.8152 25 12.5C25 9.18479 23.683 6.00537 21.3388 3.66117C18.9946 1.31696 15.8152 0 12.5 0ZM8 9H9V10H8V9ZM10 9H18V10H10V9ZM8 11H9V12H8V11ZM10 11H15V12H10V11ZM8 13H9V14H8V13ZM10 13H17V14H10V13ZM8 15H9V16H8V15ZM10 15H19V16H10V15Z"
+                                fill="var(--brand-color)"></path>
+                        </g>
+                        <defs>
+                            <clipPath id="clip0_3491_12503">
+                                <rect width="25" height="25" fill="white"></rect>
+                            </clipPath>
+                        </defs>
+                    </svg>
+                </span>
+                <span class="text-[var(--brand-color)]">{summaryFAQCard.summaryLabel || 'Саммари:'}</span>
+            </h3>
+        </div>
+        <div class="flex-1 min-w-0">
+            <div class="font-sans text-[16px] mb-4 text-[var(--text-main)] max-w-[calc(100%-2rem)]">{summary}</div>
+            <ul class="list-disc ml-6 font-sans text-[14px] text-[var(--text-heading)] leading-[1.2]">
+                {highlights.map((hl) => <li>{hl}</li>)}
+            </ul>
+        </div>
+    </div>
+    <div class="flex flex-col sm:flex-row gap-4 sm:gap-6">
+        <div class="flex-shrink-0">
+            <h3 class="font-serif text-[18px] font-bold flex items-center">
+                <span class="mr-2">
+                    <svg width="20" height="20" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <g clip-path="url(#clip0_3491_12505)">
+                            <path
+                                fill-rule="evenodd"
+                                clip-rule="evenodd"
+                                d="M12.5 0C19.4036 0 25 5.59644 25 12.5C25 19.4036 19.4036 25 12.5 25C5.59644 25 0 19.4036 0 12.5C0 5.59644 5.59644 0 12.5 0ZM12.7549 16.1074C12.5033 16.1075 12.2876 16.2001 12.1074 16.3857C11.9271 16.5715 11.8369 16.7943 11.8369 17.0537C11.837 17.313 11.9272 17.5359 12.1074 17.7217C12.2876 17.9072 12.5034 17.9999 12.7549 18C12.9248 18 13.0779 17.958 13.2139 17.874C13.3533 17.7864 13.4643 17.6701 13.5459 17.5264C13.6308 17.3828 13.6738 17.2253 13.6738 17.0537C13.6738 16.7944 13.5835 16.5715 13.4033 16.3857C13.2230 16.2 13.0066 16.1074 12.7549 16.1074ZM13.041 7C12.4901 7 11.9885 7.11263 11.5361 7.33691C11.0872 7.56126 10.7247 7.88541 10.4492 8.30957C10.1772 8.73371 10.0272 9.24397 10 9.83984H11.2861C11.3133 9.4262 11.4134 9.09086 11.5869 8.83496C11.7603 8.57924 11.976 8.39162 12.2344 8.27246C12.4929 8.15328 12.7621 8.09375 13.041 8.09375C13.3606 8.09378 13.6513 8.16218 13.9131 8.29883C14.175 8.43554 14.3846 8.63042 14.541 8.88281C14.6973 9.13512 14.7754 9.43301 14.7754 9.77637C14.7754 10.0532 14.728 10.3054 14.6328 10.5332C14.541 10.761 14.4147 10.9625 14.2549 11.1377C14.095 11.3095 13.9145 11.4588 13.7139 11.585C13.3806 11.7917 13.0955 12.0184 12.8574 12.2637C12.6193 12.509 12.4349 12.8295 12.3057 13.2256C12.1764 13.6217 12.1084 14.1547 12.1016 14.8242V14.8867H13.3262V14.8242C13.333 14.3895 13.3774 14.0263 13.459 13.7354C13.5406 13.4445 13.6714 13.1937 13.8516 12.9834C14.0318 12.7696 14.2721 12.5668 14.5713 12.374C14.8706 12.1847 15.126 11.9671 15.3369 11.7217C15.5511 11.4764 15.714 11.1976 15.8262 10.8857C15.9418 10.5739 16 10.2253 16 9.83984C16 9.29312 15.8776 8.80552 15.6328 8.37793C15.3913 7.95027 15.0471 7.61354 14.6016 7.36816C14.1595 7.12293 13.6394 7.00003 13.041 7Z"
+                                fill="var(--brand-color)"></path>
+                        </g>
+                        <defs>
+                            <clipPath id="clip0_3491_12505">
+                                <rect width="25" height="25" fill="white"></rect>
+                            </clipPath>
+                        </defs>
+                    </svg>
+                </span>
+                <span class="text-[var(--brand-color)]">{summaryFAQCard.faqLabel || 'FAQ:'}</span>
+            </h3>
+        </div>
+        <div class="flex-1 min-w-0 flex flex-col gap-4">
+            {
+                faq.map(({ question, answer }) => (
+                    <div>
+                        <div class="font-sans text-[16px] text-[var(--text-heading)] mb-1 flex items-center">
+                            <span class="mr-2 flex-shrink-0">
+                                <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
+                                            fill-rule="evenodd"
+                                            clip-rule="evenodd"
+                                            d="M12.5 0C19.4036 0 25 5.59644 25 12.5C25 19.4036 19.4036 25 12.5 25C5.59644 25 0 19.4036 0 12.5C0 5.59644 5.59644 0 12.5 0ZM9.20801 8.80273L14.6641 12.499L9.8291 15.7764L9.20801 16.1963L10.0498 17.4385L16.4209 13.1201C16.6265 12.9806 16.7499 12.7485 16.75 12.5C16.75 12.2824 16.6556 12.0769 16.4941 11.9355L16.4209 11.8789L10.0498 7.56055L9.20801 8.80273Z"
+                                            fill="var(--brand-color)"
+                                        />
+                                    </g>
+                                    <defs>
+                                        <clipPath id="clip0_3491_12515">
+                                            <rect width="25" height="25" fill="white" />
+                                        </clipPath>
+                                    </defs>
+                                </svg>
+                            </span>
+                            {question}
+                        </div>
+                        <div class="font-sans text-[14px] text-[var(--text-main)] ml-6">{answer}</div>
+                    </div>
+                ))
+            }
+        </div>
+    </div>
+</section>

package/src/components/TableOfContents.astro

@@ -0,0 +1,143 @@
+---
+import { maugliConfig } from '../config/maugli.config';
+import { LANGUAGES } from '../i18n/languages';
+// Универсальный импорт словарей по доступным языкам
+const dicts: Record<string, any> = {};
+for (const lang of LANGUAGES) {
+    try {
+        dicts[lang.code] = await import(`../i18n/${lang.code}.json`).then((m) => m.default);
+    } catch {}
+}
+
+export interface Heading {
+    title: string;
+    id: string;
+}
+
+export interface Props {
+    headings: Heading[];
+    title?: string;
+}
+
+const currentLang = maugliConfig.defaultLang || 'en';
+const dict = dicts[currentLang] || dicts['en'] || {};
+const fallbackDict = dicts['en'] || {};
+const { headings, title = dict.tableOfContents?.title || fallbackDict.tableOfContents?.title || 'Contents' } = Astro.props;
+---
+
+<div
+    class="w-full mb-4 rounded-custom p-6 sm:p-8 flex flex-col gap-3 card-shadow card-blur bg-[var(--bg-muted)]"
+    id="table-of-contents"
+    aria-label={dict.tableOfContents.ariaLabel || fallbackDict.tableOfContents.ariaLabel || 'Contents'}
+>
+    <h3 class="font-serif font-bold text-[18px] leading-[100%] text-[var(--brand-color)] flex-none">
+        {title}
+    </h3>
+
+    <div class="flex flex-col gap-2 flex-none">
+        {
+            headings.map((heading) => (
+                <a
+                    href={`#${heading.id}`}
+                    class="toc-link font-sans font-normal text-[12px] leading-[15px] text-[var(--text-heading)] hover:text-[var(--brand-color)] transition-all duration-300 ease-in-out hover:translate-x-1 transform"
+                    data-target={heading.id}
+                >
+                    {heading.title}
+                </a>
+            ))
+        }
+    </div>
+</div>
+
+<style>
+    #table-of-contents {
+        max-height: calc(100vh - 4rem);
+        overflow-y: auto;
+    }
+
+    .toc-link.active {
+        color: var(--brand-color);
+        font-weight: 600;
+        transform: translateX(4px);
+    }
+</style>
+
+<script>
+    document.addEventListener('astro:page-load', () => {
+        const tocLinks = document.querySelectorAll('.toc-link');
+        if (!tocLinks.length) return;
+
+        function getSections() {
+            return Array.from(tocLinks)
+                .map((link) => {
+                    const id = (link as HTMLElement).dataset.target;
+                    return id ? document.getElementById(id) : null;
+                })
+                .filter(Boolean) as HTMLElement[];
+        }
+
+        function highlightActiveSection() {
+            const sections = getSections();
+            if (!sections.length) return;
+
+            const scrollPosition = window.scrollY + 100;
+            let activeSection = sections[0];
+
+            for (const section of sections) {
+                if (section && section.offsetTop <= scrollPosition) {
+                    activeSection = section;
+                }
+            }
+
+            tocLinks.forEach((link) => link.classList.remove('active'));
+
+            if (activeSection) {
+                const activeLink = document.querySelector(`.toc-link[data-target="${activeSection.id}"]`);
+                if (activeLink) activeLink.classList.add('active');
+            }
+        }
+
+        // Обработчики событий
+        window.addEventListener('scroll', highlightActiveSection, { passive: true });
+        window.addEventListener('resize', highlightActiveSection);
+
+        // Инициализация
+        setTimeout(highlightActiveSection, 100);
+        highlightActiveSection();
+
+        // Обработка кликов по ссылкам
+        tocLinks.forEach((link) => {
+            link.addEventListener('click', (e) => {
+                e.preventDefault();
+                const targetId = link.getAttribute('href');
+                if (targetId) {
+                    const el = document.querySelector(targetId);
+                    if (el) {
+                        el.scrollIntoView({ behavior: 'smooth', block: 'start' });
+                        window.history.pushState(null, '', targetId);
+                    }
+                }
+            });
+        });
+    });
+</script>
+
+<style>
+    /* Добавляем плавный скролл для якорных ссылок */
+    :global(html) {
+        scroll-behavior: smooth;
+    }
+
+    /* Стили для активной ссылки с более плавной анимацией */
+    .toc-link.active {
+        color: var(--brand-color) !important;
+        font-weight: 500;
+        transform: translateX(4px);
+        transition: all 0.3s ease-in-out;
+    }
+
+    /* Добавляем офсет для якорных ссылок, чтобы заголовки не скрывались под header */
+    :global(h2[id], h3[id]) {
+        scroll-margin-top: 80px;
+    }
+</style>

package/src/components/TagPill.astro

@@ -0,0 +1,41 @@
+---
+import { maugliConfig } from '../config/maugli.config';
+import { LANGUAGES } from '../i18n/languages';
+
+export interface Props {
+    tag: string;
+    href?: string;
+    class?: string;
+}
+
+const { tag, href, class: className = '' } = Astro.props;
+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 tagPill = (dict as any).tagPill || (fallbackDict as any).tagPill || {};
+const ariaLabel = tagPill.ariaLabel ? tagPill.ariaLabel.replace('{tag}', tag) : `Tag: ${tag}`;
+---
+
+{
+    href ? (
+        <a
+            href={href}
+            aria-label={ariaLabel}
+            class={`inline-flex items-center justify-center px-3 py-1 bg-[var(--brand-color-20)] border border-[var(--brand-color)] rounded-3xl font-inter font-normal text-sm leading-[15px] text-[var(--brand-color)] whitespace-nowrap no-underline transition-all duration-200 ease-in-out hover:bg-[var(--brand-color-60)] hover:-translate-y-px ${className}`}
+        >
+            {tag}
+        </a>
+    ) : (
+        <span
+            aria-label={ariaLabel}
+            class={`inline-flex items-center justify-center px-3 py-1 bg-[var(--brand-color-20)] border border-[var(--brand-color)] rounded-3xl font-inter font-normal text-sm leading-[15px] text-[var(--brand-color)] whitespace-nowrap transition-all duration-200 ease-in-out hover:bg-[var(--brand-color-60)] hover:-translate-y-px ${className}`}
+        >
+            {tag}
+        </span>
+    )
+}
+
+<style>
+    /* Пустой стиль блок оставляем для будущих дополнений если понадобятся */
+</style>

package/src/components/TagPills.astro

@@ -0,0 +1,42 @@
+---
+import { maugliConfig } from '../config/maugli.config';
+import { LANGUAGES } from '../i18n/languages';
+export interface Props {
+    tags: Array<{ id: string; name: string; count: number }>;
+    basePath?: string;
+    class?: string;
+}
+
+const { tags = [], basePath = '/blog', class: className = '' } = Astro.props;
+
+// Определяем куда ведут теги
+const tagsBasePath = basePath === '/projects' ? '/projects/tags' : '/tags';
+
+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 tagPills = (dict as any).tagPills || (fallbackDict as any).tagPills || {};
+---
+
+{
+    tags.length > 0 && (
+        <div class:list={['flex flex-wrap gap-2 py-4 mb-6', className]}>
+            {tags.map((tag) => {
+                const ariaLabel = tagPills.ariaLabel
+                    ? tagPills.ariaLabel.replace('{name}', tag.name).replace('{count}', tag.count)
+                    : `Tag: ${tag.name} (${tag.count})`;
+                return (
+                    <a
+                        href={`${tagsBasePath}/${tag.id}`}
+                        aria-label={ariaLabel}
+                        class="inline-flex items-center justify-center px-4 py-1.5 text-lg leading-[22px] font-inter font-normal whitespace-nowrap no-underline transition-all duration-200 ease-in-out hover:-translate-y-px rounded-3xl border border-[var(--border-main)] text-[var(--text-heading)] hover:bg-[var(--bg-muted)]"
+                    >
+                        {tag.name}
+                        <span style="color: var(--text-heading); opacity: 0.6;"> ({tag.count})</span>
+                    </a>
+                );
+            })}
+        </div>
+    )
+}